【Function Description】
Please develop a main page framework similar to WeChat. The UI layout is a top-middle-bottom structure, including 4 tab pages; and you can switch between different interfaces by selecting different functions below. After clicking the corresponding picture, there must be a corresponding response, and the response is the corresponding interface. The previously generated interface will be hidden after the next click.
The development technology is: layout xml, control, monitor, fragment.
【Experimental steps】
1. First create a top.xml file under the [res -> Layout] folder, and copy the corresponding icon to the drawable. Drag a linearLayout and a textview control in the top.xml file .
<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="65dp"
android:gravity="center"
android:background="#e6e6e6"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/WeChat"
android:layout_width="255dp"
android:layout_height="37dp"
android:gravity="center"
android:rotationX="0"
android:text="WeChat"
android:textColor="#000000"
android:textSize="30dp" />
</LinearLayout>
</LinearLayout>2. Create a new bottom.xml file in the same directory: drag a LinearLayout (horizontal) and drag four LinearLayouts (verticl) under it, and then drag an imageButton and a textview under each of them . When adding controls, pay attention to where you drag so that the controls are in the correct hierarchy.
When adding a LinearLayout:
When adding a button:
Modify the name to facilitate the identification of layout sections, and be careful not to have duplicate names. The four added LinearLayouts are as follows: (Don’t panic if you report an error, it may be solved by modifying the code later)
Take the first button as an example, the code is as follows: (except for the content and name, the four controls have the same format)
<LinearLayout
android:id="@+id/id_LinearLayout1"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_gravity="bottom"
android:layout_weight="1"
android:orientation="vertical">
<ImageButton
android:id="@+id/imageButton1"
android:layout_width="match_parent"
android:layout_height="78dp"
android:scaleType="fitCenter"
android:contentDescription="@string/app_name"
app:srcCompat="@drawable/button1_wechat" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="微信"
android:gravity="center"
android:textSize="15sp"
android:layout_gravity="bottom" />
</LinearLayout>3. Use the Fragment control in activity_main.xml to combine the above two .xml files.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<include layout="@layout/bottom" />
<include layout="@layout/top" />
</FrameLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
4. Continue to create a new xml file in the layout directory, tab01.xml~tab04.xml, and set the middle display corresponding to the four buttons (this experiment uses simple text content instead)
Take the first tab page as an example:
<?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:gravity="center"
android:orientation="horizontal">
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textSize="25sp"
android:text="这是微信聊天页面" />
</LinearLayout>
5. Complete the monitoring of the click on the bottom control in the MainActivity.java file and pass the monitored bottom click event to the event control of the fragment.
Create four new fragment (blank) java files and a mainactivity.java file
MainActivity：
package com.example.myapplication.ui;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import com.example.myapplication.R;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private final Fragment mTab01 = new weixinFragment();
private final Fragment mTab02 = new frdFragment();
private final Fragment mTab03 = new contactFragment();
private final Fragment mTab04 = new settingFragment();
//private LinearLayout mTabMessage;
//private LinearLayout mTabFriend;
//private LinearLayout mTabAddress;
//private LinearLayout mTabSetting;
private ImageButton mImgMessage;
private ImageButton mImgFriend;
private ImageButton mImgAddress;
private ImageButton mImgSetting;
private FragmentManager fm;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initFragment();
initEvent();
setSelect(0);
}
private void initFragment(){
fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
transaction.add(R.id.id_content,mTab01);
transaction.add(R.id.id_content,mTab02);
transaction.add(R.id.id_content,mTab03);
transaction.add(R.id.id_content,mTab04);
transaction.commit();
}
private void initView() {
mImgMessage = findViewById(R.id.imageButton1);
mImgFriend = findViewById(R.id.imageButton2);
mImgAddress = findViewById(R.id.imageButton3);
mImgSetting = findViewById(R.id.imageButton4);
}
private void initEvent(){
mImgMessage.setOnClickListener(this);
mImgFriend.setOnClickListener(this);
mImgAddress.setOnClickListener(this);
mImgSetting.setOnClickListener(this);
}
private void setSelect(int i){
FragmentTransaction transaction = fm.beginTransaction();
hideFragment(transaction);
switch (i) {
case 0:
transaction.show(mTab01);
mImgMessage.setImageResource(R.drawable.button1_wechat);
break;
case 1:
transaction.show(mTab02);
mImgFriend.setImageResource(R.drawable.button2_phone);
break;
case 2:
transaction.show(mTab03);
mImgAddress.setImageResource(R.drawable.button3_found);
break;
case 3:
transaction.show(mTab04);
mImgSetting.setImageResource(R.drawable.button4_mine);
break;
default:
break;
}
transaction.commit();
}
private void hideFragment(FragmentTransaction transaction) {
transaction.hide(mTab01);
transaction.hide(mTab02);
transaction.hide(mTab03);
transaction.hide(mTab04);
}
public void onClick(View v){
resetImg();
switch (v.getId()){
case R.id.imageButton1:
setSelect(0);
break;
case R.id.imageButton2:
setSelect(1);
break;
case R.id.imageButton3:
setSelect(2);
break;
case R.id.imageButton4:
setSelect(3);
break;
default:
break;
}
}
public void resetImg(){
mImgMessage.setImageResource(R.drawable.button1_wechat);
mImgFriend.setImageResource(R.drawable.button2_phone);
mImgAddress.setImageResource(R.drawable.button3_found);
mImgSetting.setImageResource(R.drawable.button4_mine);
}
}【Experimental Results】
[Problems encountered during the experiment]
1. When adding the layout of the four buttons below, there are a total of four selection icons. First, create a combination of image and text, and then perform a copy operation, but you cannot directly copy and paste in this way, because there will be duplicate names that cannot be modified.
2. The file name cannot appear in Chinese, so modify the file name.
