类微信界面

类微信界面

实现效果：点击下面的四个图标时，会分别显示出不同的界面，而且被选中的图标会呈现绿色，未被选中的会显示为灰色。

代码实现

界面布局

1.使用一个top.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/top_textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:background="@color/black"
        android:textColor="@color/white"
        android:text="微信"
        android:textSize="20sp"/>
</LinearLayout>

2.使用一个bottom.xml文件做出底部菜单栏的效果，组成结构为一个LinearLayout嵌套四个小的LinearLayout布局。每个小的布局中使用一个ImageButton和一个TextView分别存放图标和文字

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/id_content"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:baselineAligned="false">

    <LinearLayout

        android:id="@+id/id_tab_wechat"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"

        android:background="@color/black"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="false"
            android:contentDescription="TODO"
            android:src="@drawable/tab_weixin_normal" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="微信"
            android:textColor="@color/white" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_friend"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/black"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="false"
            android:contentDescription="TODO"
            android:src="@drawable/tab_find_frd_normal" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="朋友"
            android:textColor="@color/white" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_book"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/black"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="false"
            android:contentDescription="TODO"
            android:src="@drawable/tab_address_normal"/>

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="通讯录"
            android:textColor="@color/white" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_setting"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/black"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="false"
            android:contentDescription="TODO"
            android:src="@drawable/tab_settings_normal" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="设置"
            android:textColor="@color/white" />
    </LinearLayout>
</LinearLayout>

3.用四个tab.xml文件做出主界面中间显示内容的效果

• tab01

<?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"
    tools:context=".wechatFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/tab_TextView1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="welcome to  wechat"
        android:textSize="50dp" />

</LinearLayout>

• tab02

<?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"
    tools:context=".wechatFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/tab_TextView2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:textSize="50dp"
        android:gravity="center"
        android:text="chat with your friend" />

</LinearLayout>

• tab03

<?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"
    tools:context=".wechatFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/tab_TextView3"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:textSize="50dp"
        android:gravity="center"
        android:text="find your friend here" />

</LinearLayout>

• tab04

<?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"
    tools:context=".wechatFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/tab_TextView4"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:textSize="50dp"
        android:gravity="center"
        android:text="change setting" />

</LinearLayout>

4.将前面的布局集中在layout_main中

<?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:baselineAligned="false"
    android:orientation="vertical">

    <include layout="@layout/top"
        android:layout_height="40dp"
        android:layout_width="match_parent"/>

    <FrameLayout
        android:id="@+id/Content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </FrameLayout>

    <include
        layout="@layout/bottom"
        android:layout_width="match_parent"
        android:layout_height="85dp" />
</LinearLayout>

后台功能实现

1.先创建四个fragment布局来对应底部菜单栏的四项，fragment可以在activity中构成多窗口界面

2.main_activity代码部分

package com.example.mytab;

import androidx.appcompat.app.AppCompatActivity;
/*import androidx.fragment.app.Fragment;*/
/*import androidx.fragment.app.FragmentTransaction;*/
import android.app.FragmentTransaction;
import android.app.FragmentManager;
import android.app.Fragment;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    FragmentManager fm;
    LinearLayout tabwechat,tabfrd,tabbook,tabset;
    ImageButton wechat,friend,book,setting;
    Fragment mtab01=new wechatFragment();
    Fragment mtab02=new friendFragment();
    Fragment mtab03=new bookFragment();
    Fragment mtab04=new settingFragment();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.layout_main);
//        隐藏顶部标题栏
        getSupportActionBar().hide();
        initView();
        initFragment();
        initEvent();
        selecttab(0);
    }
    @Override
    public void onClick(View view){
       // InitImg();
        switch (view.getId()){
            case R.id.id_tab_wechat:
                selecttab(0);
                Log.v("hao","第一个tab被点击");
                break;
            case R.id.id_tab_friend:
                selecttab(1);
                Log.v("hao","第二个tab被点击");
                break;
            case R.id.id_tab_book:
                selecttab(2);
                Log.v("hao","第三个tab被点击");
                break;
            case R.id.id_tab_setting:
                selecttab(3);
                Log.v("hao","第四个tab被点击");
                break;

        }
        }

    public  void selecttab(int i){
        Reset();
        FragmentTransaction transaction=fm.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                //Log.v("setSelect","1");
                transaction.show(mtab01);
                wechat.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                //Log.v("setSelect","2");
                transaction.show(mtab02);
                friend.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                //Log.v("setSelect","3");
                transaction.show(mtab03);
                book.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                //Log.v("setSelect","4");
                transaction.show(mtab04);
                setting.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:break;
        }
        transaction.commit();

    }

    public void initFragment(){
        fm=getFragmentManager();
        android.app.FragmentTransaction transaction=fm.beginTransaction();

        transaction.add(R.id.Content,mtab01);
        transaction.add(R.id.Content,mtab02);
        transaction.add(R.id.Content,mtab03);
        transaction.add(R.id.Content,mtab04);
        hideFragment(transaction);
        transaction.commit();

    }
    public void hideFragment(FragmentTransaction transaction){
        transaction.hide(mtab01);
        transaction.hide(mtab02);
        transaction.hide(mtab03);
        transaction.hide(mtab04);

    }
    public  void initView(){
        tabwechat=findViewById(R.id.id_tab_wechat);
        tabfrd=findViewById(R.id.id_tab_friend);
        tabbook=findViewById(R.id.id_tab_book);
        tabset=findViewById(R.id.id_tab_setting);
        wechat=findViewById(R.id.imageButton1);
        friend=findViewById(R.id.imageButton2);
        book=findViewById(R.id.imageButton3);
        setting=findViewById(R.id.imageButton4);

    }
    public void initEvent(){
        tabset.setOnClickListener(this);
        tabbook.setOnClickListener(this);
        tabfrd.setOnClickListener(this);
        tabwechat.setOnClickListener(this);
    }
    public void Reset(){
        wechat.setImageResource(R.drawable.tab_weixin_normal);
        friend.setImageResource(R.drawable.tab_find_frd_normal);
        book.setImageResource(R.drawable.tab_address_normal);
        setting.setImageResource(R.drawable.tab_settings_normal);
    }
}

其中selecttab的作用是在用户点击到相应的图标时，可以使中间的显示部分跳转到相应的fragment和将图标更改为点击后的效果。
每次点击图标都会运行一次该函数，函数Reset的作用是将所有图标变回点击前的样式，然后再通过switch函数修改效果。

代码仓库：https://gitee.com/hyh_2579876691/Mytab1