Android Studio实现类微信界面设计

Android Studio实现类微信界面设计
功能说明：

1. 实现类微信的设计布局
2. 实现四个界面的跳转

分析：

1. 前端页面分成三部分：top，中间，bottom，bottom分为四个按钮，使用了两种控件：FrameLayout和include

<?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/top"/>

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

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

2. 事件监听控制：
   实现点击下方按钮，中间相应的Fragment相互切换

 private void setselect(int i){
        FragmentTransaction transaction=fm.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(mtab01);
                mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.show(mtab02);
                mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                transaction.show(mtab03);
                mImgContact.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(mtab04);
                mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }
    
 public void onClick(View view) {
        resetImgs();
        switch(view.getId())
        {
            case R.id.id_tab_weixin:
                setselect(0);
                break;
            case R.id.weixin_img:
                setselect(0);
                break;
            case R.id.id_tab_frd:
                setselect(1);
                break;
            case R.id.frd_img:
                setselect(1);
                break;
            case R.id.id_tab_contact:
                setselect(2);
                break;
            case R.id.contact_img:
                setselect(2);
                break;
            case R.id.id_tab_setting:
                setselect(3);
                break;
            case R.id.setting_img:
                setselect(3);
                break;
            default:
                break;
        }
    }
    

运行界面展示


源码仓库：https://gitee.com/GAIALscariot/MyWeChat