类微信的门户页面框架设计

1.设计目标

完成类似与微信的界面，点击“微信”、“通讯录”，“发现”，“我的”，实现界面变化。

2.功能说明

2.1顶部文件（top.xml）

显示顶部框框。

2.2主界面（mian_activity.xml）

完成大部分布局，显示微信顶部（）和底部设计与显示。

2.3四个tab页面（tab.xml）

实现点击TextView（或者图像）切换中间内容，大体思路是在java文件夹下第一个package中为4个内容xml界面配置4个Fragment，再把它们压缩成一个FrameLayout，写到程序中，做一个子窗口。

2.4主要功能（MainActivity.java）

实现点击底部后，隐藏原来的fragment，显示点击对应的fragment的内容。

2.2主界面（mian_activity.xml）

fragment的使用，点击后，隐藏原来的fragment，显示点击对应的fragment。

3.代码解析(含运行展示截图)

tips：code这里只复制一部分以及重点部分，拖动调整控件会自己生成，一般code只是用来调整部分属性，不直接通过代码实现UI。

3.1顶部文件（top.xml）

LinearLayout中添加一个TextView，需将LinearLayout设置为黑色,TextView的gravity设置为center，颜色设置为白色，文本设置为string文件里面的app_name（这样可以直接修改string里面的内容来修改text view的内容）。

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="62dp"
        android:text="@string/app_name"
        android:textAlignment="center"
        android:textColor="@color/white"
        android:background="@color/black"
        android:textSize="35sp" />

</LinearLayout>

3.2主界面（mian_activity.xml）

使用include的方式就可以把前面设计好的top直接包含在里面。添加FrameLayout和四个LinearLayout（实现底部的UI）。

3.3四个tab页面（tab.xml）

到这里已经完成UI用户界面，重点是如何实现基本功能。

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private Fragment fragment1,fragment2,fragment3,fragment4;

    private FragmentManager manager;

    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

    private FragmentTransaction transaction;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        linearLayout1 = findViewById(R.id.LinearLayout1);
        linearLayout2 = findViewById(R.id.LinearLayout2);
        linearLayout3 = findViewById(R.id.LinearLayout3);
        linearLayout4 = findViewById(R.id.LinearLayout4);

        fragment1=new Fragment1();
        fragment2=new Fragment2();
        fragment3=new Fragment3();
        fragment4=new Fragment4();

        manager=getSupportFragmentManager();

        initial();

        hide();

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

    private void initial() {
        FragmentTransaction transaction= manager.beginTransaction()
                .add(R.id.FrameLayout,fragment1)
                .add(R.id.FrameLayout,fragment2)
                .add(R.id.FrameLayout,fragment3)
                .add(R.id.FrameLayout,fragment4);
        transaction.commit();
    }

    @Override
    public void onClick(View view) {
        int i = 0;
        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;
        }
    }

    public void select(int i){

        hide();
        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 hide() {
        //将四个fragment隐藏起来
        transaction=manager.beginTransaction()
                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4);
        transaction.commit();

    }
}

监听点击，即在点击发生执行对应的监听函数，添加一个View.OnClickListener，as就会自动帮我们创建一个onclick类。

我们要使用一个叫Fragment的东西。（fragment它自己的中文意思：碎片；一个可以将activity拆分成几个完全独立封装的可重用的组件，每个组件有自己的生命周期和ui布局。）

创建四个fragment类，用该类来使用对应的xml文件。应该怎么做呢？先创建fragment类，再创建一个fragmentmanger，将接该类压入压缩器。 这样导致四个内容叠加到了一起。

这里用到的几个函数：initial(初始化)、hide(隐藏)、select(隐藏其他的fragment，显示指定的fragment)

点击运行，▶
点击微信

点击通讯录

点击发现

点击我的

4.源码仓库地址

仓库地址