AS第一次作业仿微信APP界面设计（带有详细代码以及gitee仓库地址）

1.任务
内容：请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换
技术：使用布局和分段，对控件进行点击监听

2.技术要求
使用布局（layouts）和分段（fragment），对控件进行点击监听

3.思路
使用四个fragment，通过覆盖显示来完成界面。

实现过程

一、界面框架设计思路

我们发现对于APP的四个tab页面来说，每个页面都是由三个部分组成的：顶部的固定部分，用来显示自己APP的名字；中间部分的主页面，用来显示不同页面的主内容；底部的导航页面，用来帮助使用者清晰的切换页面。同时由于要实现页面之间的交互（中间的主内容随底部导航切换而切换），因此我们的设计思路为设计三个框架进行拼接：顶部的top、底部的bottom、中间的分段以及最后的总框架。以下是各部分的实现方法：

1.页面顶部 top.xml
该部分的实现方法为：最外层使用一个水平的linearlayout布局，然后使用一个textview即可。

<?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="65dp"
    android:gravity="center"
    android:background="#000000"
    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="MyWeChat"
        android:textColor="#FD98BA"
        android:textSize="30sp"/>
</LinearLayout>

实验后页面如图

​
2.页面底端 bottom.xml

该部分的设计思路：在该部分中一共有4个按钮以及4个对应文字，每一个文字和一个按钮组成一个垂直方向的元素，四个元素又组成一个水平方向的大框架。因此对于此部分，最外层采用水平的linearlayout的布局，在水平布局下又放四个垂直方向的linearlayout的布局，在每个垂直布局下又放上一个imageview和一个textview（imageview放在textview上层）。

<?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="100dp"
    android:layout_weight="1"
    android:layout_gravity="bottom"
    android:orientation="horizontal"
    android:background="#8AD6DD">

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

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            app:srcCompat="@android:drawable/ic_popup_reminder" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:rotationX="0"
            android:rotationY="0"
            android:text="消息" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="76dp"
            app:srcCompat="@android:drawable/ic_menu_my_calendar" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="通讯录" />


    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            app:srcCompat="@android:drawable/ic_menu_myplaces" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="朋友圈" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            tools:srcCompat="@tools:sample/avatars" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="我的" />
    </LinearLayout>
</LinearLayout>

​设置对应组件树结构

3.整体框架activity_main.xml

 整体框架就是将top，bottom以及中间的主内容进行拼接。相当于一个桥接的作用

那么最外层就需要使用一个垂直方向的lineaarlayout，然后将top和bottom部分liclude进来（top在上，bottom在下，中间放主内容），同时中间的主内容使用framelayout，以便进行接下来的交互设计。

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        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="683dp"
            android:layout_weight="1"></FrameLayout>

        <include
            layout="@layout/bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"></include>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayou

​实现如下

 二、交互设计思路

想要实现四个tab界面的交互，那么就需要activity调用FragmentManager来获取不同的Fragment，因此首先我们需要创建四个不同的Fragment，用于创建不同tab页面的主页面，之后通过一系列的调用实现不同页面的交互

创建

通过建立4个Fragment，将4个Fragment文件放入java文件中

然后通过fragment的代码与4个.xml文件相连接

中间fragment.xml文件
这个是聊天界面的fragment设计，第一个界面消息界面

实现后

其他三个文件相似

实现结果

进行变量声明

对每个变量和id进行一一对应，LinearLayout是指bottom.xml中的4个LinearLayout，ImageView是指bottom中的4个图标

接口实现

定义事件启动函数

MainActivity实现接口View.OnClickListener，默认会对界面进行全屏监听，这里我们只需要对四个控件进行监听，因此自定义initEvent()函数来缩小监听范围

初始化监听事件

控制tab变换

自定义setSelect(int i)函数来显示不同界面内容。一共有四个tab，我们给每个tab设置一个index作为标记。

重写onClick：

用户点击哪个tab，就调用setSelect方法设置对应的i值。注意这里还需要对图片进行统一变灰处理。resetImgs方法实现该功能。

 private void initEvent(){
        mTabxiaoxi.setOnClickListener(this);
        mTabtongxunlu.setOnClickListener(this);
        mTabpyq.setOnClickListener(this);
        mTabmy.setOnClickListener(this);
    }

    private void showfragment(int i) {
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(xiaoxiFragment);
                break;
            case 1:
                transaction.show(tongxunluFragment);
                break;
            case 2:
                transaction.show(pyqFragment);
                break;
            case 3:
                transaction.show(myFragment);
 
                break;
            default:
                break;
 
        }
        transaction.commit();
    }

运行效果（虚拟机）

代码仓库

gitee地址

test1: 移动开发作用 1