Assignment Objectives
Design an app’s portal framework to achieve 3-4 tab switching effects, and implement a list effect in any tab page.
Development Technology
layout xml, various controls, monitoring onClick, fragment, recyclerView
Idea analysis
The WeChat-like main interface is divided into three parts: upper, middle and lower. Each uses an xml file to write the content, and then uses a mainlayout.xml file to include them;
The middle part of WeChat’s main interface is superimposed by four tabs, and Java files are used to hide, switch and display the interface;
Finally, we chose to display the list data on the tab1 interface, so we modified tab1.xml to an interface containing recyclerView, added an item.xml as the list data layout, and modified the fragment1.java file to achieve the list data display effect.
Design Process
1. Design the app portal framework and implement interface switching
1. Layout design (xml part)
Divided into three parts: title bar top, bottom button selection bar button, and middle body part tab
(1)Title bar
Create top.xml, use linearLayout (vertical) layout, add TextView control, change the font size, position, color and other attributes in the code area.
<LinearLayout
android:id="@ + id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:layout_editor_absoluteX="34dp"
tools:layout_editor_absoluteY="0dp">
<TextView
android:layout_width="match_parent"
android:layout_height="64dp"
android:background="@color/black"
android:backgroundTint="@color/design_default_color_on_secondary"
android:rotationX="0"
android:shadowColor="@color/white"
android:text="WeChat"
android:gravity="center"
android:textColor="@color/white"
android:textColorHighlight="@color/black"
android:textColorHint="@color/black"
android:textSize="48sp" />
</LinearLayout>
(2) Bottom button selection bar
Set up a horizontal LinearLayout, place four vertical LinearLayouts below it, then modify the properties to set the layout of each button, and then add onclick to connect the java code snippet to switch pages.
The content of the four vertical parts is similar, so only the code for one button component is presented:
<LinearLayout
android:id="@ + id/chat"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:onClick="onClick"
android:orientation="vertical">
<ImageButton
android:id="@ + id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:contentDescription="@string/app_name"
android:scaleType="centerInside"
android:src="@android:drawable/stat_notify_chat" />
<TextView
android:id="@ + id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="Chat"
android:textColor="#000000"
android:textSize="20dp" />
</LinearLayout>
(3) Middle part
Include the title bar part and the bottom button selection bar through an xml file, then add a content part between the two files, and press the four tabs into the middle main part.
<include
layout="@layout/top"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="@ + id/id_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</FrameLayout>
<include
layout="@layout/button"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Rendering:
The xml files of the four tabs are similar, so only the code of one of them is displayed:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragment2">
<TextView
android:id="@ + id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="This is the contact interface"
android:textSize="35sp"/>
</FrameLayout>
2.java part
The xml part only implements a simple framework and cannot realize the interface switching function. Next, the java file must include four code parts:
(1) Click monitoring part onclick
(2) Press four tabs into the code part inside the content
(3) The code part that hides the four cards
(4) The code part displayed when clicked
First, import the four middle tab cards into the main interface. You need to create fragment objects for each interface and create a management object manager.
fragment1=new fragment1(); fragment2=new fragment2(); fragment3=new fragment3(); fragment4=new fragment4(); manager=getSupportFragmentManager();
Create a new initial function to initialize the fragment page. In this function, use the manager to add four fragment variables to the middle body part of the mainlayout file.
public void initial(){
transaction=manager.beginTransaction()
.add(R.id.id_content,fragment1)
.add(R.id.id_content,fragment2)
.add(R.id.id_content,fragment3)
.add(R.id.id_content,fragment4)
.commit();
}
Write a showfragment function to display the interface represented by four components when they are clicked.
private void showfragment(Fragment fragment){
transaction=manager.beginTransaction()
.show(fragment)
.commit();
}
When switching interfaces, you need to hide the previous interface and then display the required interface, so write the function fragmentHide to hide all fragment interfaces.
public void fragmentHide(){
transaction=manager.beginTransaction()
.hide(fragment1)
.hide(fragment2)
.hide(fragment3)
.hide(fragment4)
.commit();
}
Monitor the four controls in the bottom selection bar and call the fragment interface based on the monitoring results.
linearLayout1.setOnClickListener(this); linearLayout2.setOnClickListener(this); linearLayout3.setOnClickListener(this); linearLayout4.setOnClickListener(this);
public void onClick(View view){
fragmentHide();
if(view.getId()==R.id.chat)
{
showfragment(fragment1);
}
else if (view.getId()==R.id.friend) {
showfragment(fragment2);
}
else if (view.getId()==R.id.share) {
showfragment(fragment3);
}
else if(view.getId()==R.id.setting) {
showfragment(fragment4);
}
}
The chat interface is directly displayed at the beginning
showfragment(fragment1);
3. Result display
2. Implement list effect in any tab page
1. Create item.xml to prepare subsequent list data to be displayed as a layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@ + id/textView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView"
android:textSize="35sp" />
</LinearLayout>
2. Create the Myadapter.java file
public class Myadapter extends RecyclerView.Adapter <Myadapter.Myholder> {
Context context1;
List<String> list1;
public Myadapter(Context context,List list) {
context1=context;
list1=list;
}
@NonNull
@Override
public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view=LayoutInflater.from(context1).inflate(R.layout.item,parent,false);
Myholder myholder=new Myholder(view);
return myholder;
}
@Override
public void onBindViewHolder(@NonNull Myholder holder, int position) {
holder.textView.setText(list1.get(position));
}
@Override
public int getItemCount() {
return list1.size();
}
public class Myholder extends RecyclerView.ViewHolder{
TextView textView;
public Myholder(@NonNull View itemView){
super(itemView);
textView=itemView.findViewById(R.id.textView5);
}
}
}
3. I choose to display the list data in tab1, so I modify the tab1.xml file and fragment1.java file as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".fragment1">
<androidx.recyclerview.widget.RecyclerView
android:id="@ + id/recycleview"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
package com.example.myapplication;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
public class fragment1 extends Fragment{
private View view;
private Myadapter myadapter;
private RecyclerView recyclerView;
private List<String> list1;
@Override
public View onCreateView(LayoutInflater inflater,ViewGroup container,
Bundle savedInstanceState) {
view = inflater.inflate(R.layout.tab1, container, false);
recyclerView = view.findViewById(R.id.recycleview);
list1 = new ArrayList<>();
for (int i = 0; i < 9; i + + ) {
list1.add("This is the "+ i + "row data");
}
myadapter = new Myadapter(view.getContext(), list1);
LinearLayoutManager manager = new LinearLayoutManager(view.getContext());
manager.setOrientation(LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(manager);
recyclerView.setAdapter(myadapter);
return view;
}
}
4.Result display:
3. Summary
I completed this assignment in three parts. It was the first time I completed the design of the main interface of WeChat. In the process, I learned the most basic interface layouts and the use of multiple controls. I encountered two problems: The first problem is the button at the bottom. The controls were unevenly distributed, so I changed the layout_width in LinearLayout to match_parent. The second problem was that I didn’t know how to display the upper, middle and lower parts on one interface. Later I learned to use include to include them into an xml. file to solve this problem; the second time I completed the switching of each interface, this time I had to write 4 fragments and 1 MainActivity java file to implement this function. During the process, I found that the switch statement reported an error and the switch could not be realized. Then I switched to if-else statements to implement the switching function, and finally succeeded; the third time I implemented the function of displaying list data in an interface, added an item interface, and then I partially implemented the tab1.xml and fragment1.java files. Modified, and finally successfully implemented the display of list data in the chat interface.
4. Source code
https://github.com/chenruiecho/cr-.git
The knowledge points of the article match the official knowledge files, and you can further learn related knowledge. Java Skill TreeHomepageOverview 137455 people are learning the system