一、设计目标

根据移动端微信门户界面，学习搭建类微信门户框架，以实现基本界面交互功能。

二、功能说明

通过模块化设计，目前将核心功能分为以下四大模块

（1）消息（2）通讯录（3）发现（4）我

第一阶段

实现四个模块主界面之间的切换功能

三、代码解析

1、创建新项目

创建新项目，此处以MyWork命名，语言为Java，SDK选取 API 25:Android 7.1.1 (Nougat)

在这里插入图片描述

2、设计主界面头部和底部模型

如下图所示将开发模式设置为Android，并找到res文件夹

在这里插入图片描述

在layout子目录下新建两个Layout XML File，分别命名为header、footer

在这里插入图片描述

对于header.xml，向其中添加一个textView，文本内容修改为myApp，并通过gravity属性将文本内容居中显示；layout_width和layout_height属性以及界面效果如下图代码配置所示

在这里插入图片描述

同样对于footer.xml，利用线性布局，如下图所示添加四组linearLayout（vertical），并分别向四组linearLayout中添加一组imageView和textView；四组linearLayout（vertical）及其包含的组件的属性一致，因此以下仅展示最外层linearLayout（horizontal）各属性以及其中一组linearLayout（vertical）及其包含的组件的属性，如下图所示；

在这里插入图片描述

此处为最外层linearLayout属性layout_width和layout_height的设置，其中layout_width选用match_parent值以在横向上填满空余空间，而layout_height选用warp_content值以只填满自身部分

在这里插入图片描述

同理，对于四组linearLayout（vertical），layout_width和layout_height属性都设置为warp_content以填满自身大小；

在这里插入图片描述

3、创建各模块主界面

在java文件夹下的com.example.xxx子目录下新建四个Fragment（blank）组件以嵌入MainActivity使用，四个Fragment组件分别对应四个fragment.xml文件（fragment_1.xml、fragment_2.xml、…），以分别控制footer中四个功能的主界面;

在这里插入图片描述

完成四个Fragment组件的创建后，以其中一个fragment_1.xml为例，向其中插入一个textView，在其中配置最基本的文本展示–文字居中显示，其中文本字体大小，颜色，背景等都可自由设置。如下图所示；

在这里插入图片描述

4、静态界面布局

通过include组件将header.xml、footer.xml分别导入activity_main.xml文件中，同时header和footer之间插入frameLayout组件。更改frameLayout组件layout_width和layout_height属性为match_parent，最后分别修改include(header)、include(footer)、frameLayout的weight属性为0、0、1以实现如下图所示布局；

在这里插入图片描述