Android Studio——类微信界面设计

• 设计目标：Android studio制作简易类微信界面。
• 功能：展示四个可切换界面，当点击下方按钮时，界面随之切换。
• 布局：顶部和底部layout、主页面（中间放一个framelayout显示界面内容）。点击的四个button要对应四个界面的xml文件（tab01.xml，tab02.xml，tab03.xml，tab04.xml） 

 1、顶部layout

在res->layout中新建一个top.xml文件，拖入一个TextView，文本内容显示为“We Chat”，文本颜色（textColor）设置为白色，文本大小（textSize）这里设置为“35sp”，背景设置为黑色，同时设置文本居中。

效果如下：

            

 代码如下：

<?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="50dp"
    android:gravity="center"
    android:background="@color/cardview_dark_background"
    android:orientation="vertical">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="We Chat"
        android:textColor="@color/white"
        android:textSize="35sp"/>
</LinearLayout>

 2、底部layout

在res->layout中新建一个bottom.xml文件，每个LinearLayout(vertical)下都分别拖入一个imageView和textView。修改文件配置，在LinearLayout（vertical)中修改layout_width，layout_height都为“wrap-content”，orientation为“vertical”；再分别设置背景及文本颜色达到你想要的效果，textView中设置gravity为“center”，使文本居中。

效果如下：

          

 部分代码如下：

 <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#000000"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@android:drawable/btn_star_big_on" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="微信"
            android:textColor="#ffffff"
            android:textSize="25sp" />
    </LinearLayout>

3、 中间页面

四个xml文件（tab01.xml，tab02.xml，tab03.xml，tab04.xml）分别对应四个界面的中间内容，内容随意，设置颜色背景及大小，layout_width，layout_height都为“wrap-content”，layout-weight为“1”。

效果如下：

        

 代码如下（tab01.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/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_gravity="center"
        android:text="微信"
        android:textColor="@color/purple_500"
        android:textSize="50sp" />
</LinearLayout>

 4、activity_main.xml

中间放一个framelayout显示界面内容，再将top.xml和bottom.xml这两个include进来。

效果如下：

    

 代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

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

        <FrameLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ECEEEE"
            android:layout_weight="3">

        </FrameLayout>

        <include
            layout="@layout/layout_buttom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0" />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 5、MainActivity.java

刚开始我们会发现四部分内容会重叠在一起。

接下来我们要做一个动态控制，就是当点击下方按钮时，显示对应tab页内容。做LinearLayout的点击控制,在onCreate中对四个LinearLayout做监听。

        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);

监听反馈的所有函数都在onClick中，在onClick中需要分辨是哪个LinearLayout被点击，使用case语句。

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.LinearLayout1:select(1);
                break;
            case R.id.LinearLayout2:select(2);
                break;
            case R.id.LinearLayout3:select(3);
                break;
            case R.id.LinearLayout4:select(4);
                break;
        };
    }

 先隐藏所有的fragment，当某一个LinearLayout被点击时，就把它对应的fragment显示出来。

  private void select(int i) {
        hidden();
        switch (i){
            case 1:showfragment(fragment1);
                break;
            case 2:showfragment(fragment2);
                break;
            case 3:showfragment(fragment3);
                break;
            case 4:showfragment(fragment4);
                break;
        };
    }

    private void showfragment(Fragment fragment) {
        transaction.show(fragment);
    }

    private void hidden() {
        transaction=manager.beginTransaction()
                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4);
        transaction.commit();
    }

6、最终结果显示

           

            

 7、全部代码地址： Rain7六斤/AS (gitee.com)