AS实现类微信界面设计

Android Studio实现类微信界面设计

要求：

1.上方栏有标题（居中）
2.中间显示内容，内容随下方栏的选择而切换
3.下方栏分成四个小板块可点击切换

实现界面展示:

前端页面设计：

我们把前端页面分成三部分，使用了两种控件：FrameLayout和include，代码如下：

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

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

    <FrameLayout
        android:id="@+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="wrap_content" />
</LinearLayout>

而在下方栏bottom中则用LinearLayout中嵌套LinearLayout。

事件监听控制：

要实现点击下方板块，中间相应的Fragment相互切换，
所以要监听点击事件并做出选择即切换，注意此处点击事件监听的是大模块LinearLayout的点击，而ImageButton的clickable属性要设置为false。部分代码如下：

@Override
    public void onClick(View v) {
        resetImgs();
        switch(v.getId()){
            case R.id.id_tab_weixin:
                selectFragment(0);
                break;
            case R.id.id_tab_frd:
                selectFragment(1);
                break;
            case R.id.id_tab_contact:
                selectFragment(2);
                break;
            case R.id.id_tab_settings:
                selectFragment(3);
                break;
            default:
                break;
        }
    }
    
    private void selectFragment(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();
    }

注意：

可能因为AS的版本不同或者安装时的配置选择不同，所以在创建使用Fragment.java时默认导入的Fragment不同。可能是import androidx.fragment.app.Fragment;或者import android.support.v4.app.Fragment;，注意要换成import android.app.Fragment;。android.support.v4.app.Fragment与android.app.Fragmen并不兼容。

最后附上源码（码云仓库）：
链接: https://gitee.com/yangjy11/AndroidStudio.git.