1. Assignment goals
This assignment is to develop the portal framework of WeChat APP, and the UI layout is a top-middle-bottom structure.
Function 1: Users can switch between four sections by clicking on the bottom navigation bar, which are "Chat", "Contacts", "Function", and "My". There will be a corresponding text prompt for each interface switched.
Function 2: Implement list effect on each tab page.
(The implementation of function two is improved on the premise of function one. For details, you can directly move to point 3 of point 4)
2. Design process
1. Appearance design
The overall WeChat page has a top-middle-bottom structure.
Upper part: The background of the display bar is black with the words "WeChat" in white.
Middle part: plain text "This is the XX interface" and a few lines of list
Lower part: The icons of the four .png files and the names of the corresponding sections
2. Internal contact
I. Use a main.xml file to connect the three parts so that the three parts can be displayed on the same page.
II. Write a Mainactivity.java file to implement the click switching function:
(1) Create four Fragment classes and their corresponding four tab.xml files, bind the layout files corresponding to the sections through the Fragmentxx class, and connect them; then use a myadapter class to connect all single text Item.xml .
(2) Create a Fragmentxx object in the MainActivity class, add the Fragmentxx object to the empty section in the middle of the main layout through Transaction, and create a FragmentManager to manage the Fragment.
(3) Initialization method
(4) Write monitoring method
(5) Set the response event after the control is clicked
(6) Method of displaying the page
4. Technical description and key codes (including detailed steps)
Before that, let’s take a look at various functions:
android:id="@+id/top", sets the resource id for the component, top is the naming, and is found in the java file through findViewById(id).
android:layout_width="wrap_content", the width of the layout
android:layout_height="wrap_content", the height of the layout
android:layout_weight="1", used to divide areas equally.
android:gravity="center", alignment.
android:text="WeChat", the displayed text.
android:textColor="@color/white", set the color of the text.
android:textSize="28dp" />, set the size of the text.
1. Realize appearance design
I. Upper part
Find the layout folder under res, and right-click in the folder ->new ->XML ->Layout XML File to create a weixin. Next, click code to view the code and make modifications.
The code displayed by clicking code is the code of weixin.xml:
<?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="match_parent">
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="67dp"
android:layout_weight="24"
android:background="@color/black"
android:gravity="center"
android:shadowColor="@color/white"
android:text="微信"
android:textColor="@color/white"
android:textSize="28dp" />
</LinearLayout> II. Chubu
Continue to right-click under layout to create a tab1.xml file, click code to view the code, modify the text to "This is the chat interface", and adjust the size.
At this time, since there are four interfaces, you can choose:
(1) Copy tab1.xml directly, paste it into layout, and rename it to tab2.xml, tab3.xml, tab4.xml (remember to put the text and code in android:id="@+id/textView8" TextView Change the last number to a different value);
(2) Repeat the operation of creating tab1.xml three times.
Only the code of tab1.xml is shown here:
<?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="match_parent"
android:alpha="12"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="63dp"
android:layout_weight="1"
android:alpha="12"
android:textSize="30sp"
android:gravity="center"
android:text="这是聊天界面" />
</LinearLayout>III. Lower part
First, go online and download four .png icons suitable for use as bottom navigation.
Then, create a file named bottom.xml under layout
Click Design—>layout—> Linearlayout (vertical), drag one and place it under the horizontal LinearLayout;
Click common—>Imageview, drag one and place it under the vertical LinearLayout, and then put a TextView under the vertical LinearLayout. Modify the parameters as shown in Figures 1, 2 (top right), and 3 to complete the creation of an icon.
Copy the vertical LinearLayout, paste it three times under the horizontal LinearLayout, and rename the four vertical LinearLayout, ImageView, and TextView to 1, 2, 3, and 4 respectively, as shown in Figure 4 (bottom right).
Code of bottom.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="67dp"
android:src="@drawable/star1" />
<TextView
android:id="@+id/textView1"
android:layout_width="104dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="聊天"
android:textSize="30sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView2"
android:layout_width="match_parent"
android:layout_height="69dp"
android:src="@drawable/light" />
<TextView
android:id="@+id/textView2"
android:layout_width="104dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="联系人"
android:textSize="30sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView3"
android:layout_width="match_parent"
android:layout_height="67dp"
android:src="@drawable/moon3" />
<TextView
android:id="@+id/textView3"
android:layout_width="104dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="功能"
android:textSize="30sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="67dp"
android:layout_weight="1"
android:src="@drawable/sun" />
<TextView
android:id="@+id/textView4"
android:layout_width="104dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="我的 "
android:textSize="30sp" />
</LinearLayout>
</LinearLayout>Note: The selected ImageView icon cannot be used directly, so you need to copy and paste the four previously downloaded .png icons directly into the res—>drawable file. The android:src="@drawable/moon3" /> in the code This sentence is your own .png path, and all four must be modified.
2. Implement contact and switching functions
I. Integration page
First create a main.xml file under layout, click code to modify the code to include the top, middle and bottom parts, then click design to adjust the proportions of the three parts so that the top, icons and text can be revealed .
Note: If the size is not adjusted appropriately, the final run may result in incomplete display.
main.xml code:
You can see that the layout="@layout/weixin", layout="@layout/content", layout="@layout/bottom" description includes these three parts.
<?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="match_parent"
android:orientation="vertical">
<include
layout="@layout/weixin"
android:layout_width="match_parent"
android:layout_height="211dp" />
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="335dp"
android:layout_weight="1"></FrameLayout>
<include
layout="@layout/bottom"
android:layout_width="match_parent"
android:layout_height="146dp" />
</LinearLayout>II. Switch function
To realize the switching function, it is necessary to
(1) Create four Fragment classes (.java) under java->ui, and connect them with the four .xml files created previously, tab1, 2, 3, and 4 (you can create one and then copy and paste it, modify it name and tab).
(2) Create four Fragment objects and four LinearLayout objects in the MainActivity class (.java), and create a FragmentManager to manage Fragments.
(3) Write the corresponding method in MainActivity.Java to implement:
initial(); used for initialization;
fragmenthide(); is to hide the other three interfaces every time you click on one interface;
fragmentshow(fragment1); displays the first interface by default;
It is to convey the user's click, obtain the component ID through monitoring, and display the corresponding section based on the obtained ID.
Of the four Fragment classes, only the tab number needs to be changed. Fragment1 is shown here:
package com.example.myapplication;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
public class Fragment1 extends Fragment
{
@Override
public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle savedInstanceState) {
View view1 = new View(getContext());
return inflater.inflate(R.layout.tab1, container, false);
}
}MainActivity.java code:
LinearLayout object, the corresponding id is the id of the second layer LinearLayout in the bottom.xml file
linearLayout1=findViewById(R.id.LinearLayout1);
linearLayout2=findViewById(R.id.LinearLayout2);
linearLayout3=findViewById(R.id.LinearLayout3);
linearLayout4=findViewById(R.id.LinearLayout4);
隐藏其他项
private void fragmenthide() {
FragmentTransaction ft=fm.beginTransaction()
.hide(fragment1)
.hide(fragment2)
.hide(fragment3)
.hide(fragment4);
ft.commit();
}
Initialization, add all fragments to the middle section of the interface, the corresponding id is the id of the Fragment in Activitymain.xml
private void initial() { fm=getSupportFragmentManager();
用content是因为main.xml用的名字是content(android:id="@+id/content")
FragmentTransaction ft=fm.beginTransaction()
.add(R.id.content,fragment1)
.add(R.id.content,fragment2)
.add(R.id.content,fragment3)
.add(R.id.content,fragment4);
ft.commit();
}
The click trigger obtains the component ID through monitoring, and displays the corresponding section based on the obtained ID
@Override
public void onClick(View view) { fragmenthide(); int id=view.getId(); if(id==R.id.LinearLayout1 ) fragmentshow(fragment1); /span> .LinearLayout4)
Complete code:
package com.example.myapplication;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;
import com.example.myapplication.databinding.ActivityMainBinding;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
Fragment fragment1,fragment2,fragment3,fragment4;
FragmentManager fm;
LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
fragment1=new Fragment1();
fragment2=new Fragment2();
fragment3=new Fragment3();
fragment4=new Fragment4();
// LinearLayout对象，对应的id是bottom.xml文件中的第二层LinearLayout的id
linearLayout1=findViewById(R.id.LinearLayout1);
linearLayout2=findViewById(R.id.LinearLayout2);
linearLayout3=findViewById(R.id.LinearLayout3);
linearLayout4=findViewById(R.id.LinearLayout4);
fm=getSupportFragmentManager();
initial();
fragmenthide();
fragmentshow(fragment1);
linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);
}
//隐藏其他项
private void fragmenthide() {
FragmentTransaction ft=fm.beginTransaction()
.hide(fragment1)
.hide(fragment2)
.hide(fragment3)
.hide(fragment4);
ft.commit();
}
//初始化，将所有fragment都添加到界面中部板块
//对应的id是Activitymain.xml中的Fragment的id
private void initial() {
fm=getSupportFragmentManager();
//用content是因为main.xml用的名字是content(android:id="@+id/content")
FragmentTransaction ft=fm.beginTransaction()
.add(R.id.content,fragment1)
.add(R.id.content,fragment2)
.add(R.id.content,fragment3)
.add(R.id.content,fragment4);
ft.commit();
}
//点击触发通过监听获取组件id，根据获取得到的id，展示对应的板块
@Override
public void onClick(View view){
fragmenthide();
int id=view.getId();
if(id==R.id.LinearLayout1)
fragmentshow(fragment1);
if(id==R.id.LinearLayout2)
fragmentshow(fragment2);
if(id==R.id.LinearLayout3)
fragmentshow(fragment3);
if(id==R.id.LinearLayout4)
fragmentshow(fragment4);
}
//展示
private void fragmentshow(Fragment fragment){
FragmentTransaction transaction=fm.beginTransaction()
.show(fragment);
transaction.commit();
}
}Note: If() statement is required under onClick() method, switch() will not work.
3. Add list effect
Since there are more lists, the first thing to change is tab1.xml and class Fragment1. Therefore:
(1) Create a new item.xml file to store a single text;
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">
<TextView
android:id="@+id/item"
android:layout_width="400dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="TextView"
android:textColor="@android:color/holo_orange_dark"
android:textSize="30sp" />
</LinearLayout>(2) Class Fragnent1 displays the content of tab1, uses the recyclerView object to modify the text content, and uses the myadapter class and queue to arrange them when presented.
package com.example.myapplication;
import android.content.Context;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
import java.util.List;
public class Fragment1 extends Fragment {
RecyclerView recyclerView;
List list;
Myadapter myadapter;
Context context;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab1, container, false);
context = view.getContext();
recyclerView = view.findViewById(R.id.recyclerView);
list = new ArrayList();
for (int i = 0; i < 8; i++) {
list.add("这是第" + i + "行");
myadapter = new Myadapter(context, list);
recyclerView.setAdapter(myadapter);
LinearLayoutManager manager = new LinearLayoutManager(context);
manager.setOrientation(RecyclerView.VERTICAL);
recyclerView.setLayoutManager(manager);
}
return view;
}
}(3) Modify tab1. Since the android:id="@+id/recyclerView" of tab1.xml is modified and integrated after being called by the Fragment class, the overall text effect is displayed;
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>(4) The Myadapter class is an adapter, which serves as a bridge between the tab1.xml interface and the data. When each item in the list is displayed on the page, the myadapter method is called to return a View, and here is Get the number of views and display them as a whole.
package com.example.myapplication;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;
public class Myadapter extends RecyclerView.Adapter<Myadapter.Myholder>{
Context context1;
List<String> list1;
public Myadapter(Context context, List<String> 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 holder=new Myholder(view);
return holder;
}
@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.item);
}
}
}
4. Result display
5. Other reasons for error reporting
1. When you write multiple main activities, the code of APP->mainifests->Androidmainifests will have two activities. At this time, you need to change the other android:exported to "false".
Note: After adding the list effect, you also need to modify the lower half of this file, leaving only one activity and the upper half unchanged:
<activity
android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>2. As a novice, it is my first time to write and run this project. It seems that I need to modify the files. When I ran it, my friend helped me change one, and I changed one myself. You can find this file in the folder of your own project—>APP—>build.gradle.kts. You can see if this sentence is missing.
Also, the two sentences at the bottom of this document should be added.
3. The system-image file must be directly found by file->settings->Android SDK, which means that the path must be one layer above the system-image file.
6. Online warehouse address (gitee)
luo17_world: Created when studying mobile development technology courses (gitee.com)