类微信界面设计

一、功能设计

1、设计类似于微信的底部导航，分别为：微信、朋友、通讯录和设置
2、点击相应的按钮切换至相应的页面，底部的按钮被点击时由灰色变为绿色

二、界面设计

1、顶部 top.xml

2、中间内容显示区域 fragment_weixin.xml、ragment_friend.xml、ragment_contact.xml、ragment_setting.xml

3、底部设计 bottom.xml

4、全局设计 activity_main.xml

5、修改配置文件themes.xml，隐藏顶部项目名称，

<style name="Theme.Example" parent="Theme.MaterialComponents.DayNight.NoActionBar">

三、代码分析

1、中间内容部分将fragment_weixin.xml、ragment_friend.xml、ragment_contact.xml、ragment_setting.xml压缩到fragment中，作为四个子窗口。当在主程序中通过按钮调用时，实际上中间切换的是fragment，每一个fragment拥有自己的界面。

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="81dp" >

    <include layout="@layout/top"></include>

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

    </FrameLayout>

    <include layout="@layout/bottom"></include>

</LinearLayout>

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();
    }

2、onClick(）响应监听，四个Button响应时分别向setSelect（）函数传入参数0、1、2、3，setSelect（）函数中通过switch语句重设资源图片和transaction，实现点击后功能图片变绿其余变灰并且中间内容发生切换。

private void selectfragment(int i){
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        //把图片设置为亮的
        //设置内容区域
        switch (i){
            case 0:
                transaction.show(mTab01);
                mImgTabweixin.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.show(mTab02);
                mImgTabfrd.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                transaction.show(mTab03);
                mImgTabcontact.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(mTab04);
                mImgTabsettings.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }

3、使用hide函数将中间字样全部初始化，响应点击时，先将上次操作的图片记录初始化，再进行新的按钮颜色变化

private void hideFragment(FragmentTransaction transaction) {
        transaction.hide(mTab01);
        transaction.hide(mTab02);
        transaction.hide(mTab03);
        transaction.hide(mTab04);
    }

public void resetimg(){
        //图片变灰
        mImgTabweixin.setImageResource(R.drawable.tab_weixin_normal);
        mImgTabfrd.setImageResource(R.drawable.tab_find_frd_normal);
        mImgTabcontact.setImageResource(R.drawable.tab_address_normal);
        mImgTabsettings.setImageResource(R.drawable.tab_settings_normal);
    }

四、运行界面展示