移动开发实验一 类微信界面设计

1. 功能说明

设计APP门户界面，包含4个tab切换效果。4个tab分别是微信，朋友，通讯录和设置。点击其中一个按键，被点中按键变绿，其余变灰，并且点击不同按钮会显示不同的界面内容。如图所示：

2. 案例分析

2.1 UI设计部分

1、activity_main文件作为主布局文件：采用LinearLayout布局，分为上、中、下三个模块。由于中间部分内容会变化，所以采用fragment控件，上下部分直接使用include标签引入即可。

2、编写top.xml和bottom.xml：top部分比较简单，直接放一个TextView即可。bottom部分整个大容器采用LinearLayout布局，orientation设置为horizontal水平。由于有四个小容器，我们给每个小容器再设置一个LinearLayout布局，orientation设置为vertical垂直摆放（上面图片下面文字）


至此UI设计完成，如下所示：

2.2 Java部分

1、新建四个fragment：将fragment与对应的layout文件相关联

2、编写MainActivity文件的Java代码
（1）加载fragment：首先获取四个fragment对象，然后定义initFragment()方法，将这四个fragment加载到activity_main文件的FrameLayout中去。


（2）找到响应区：我们需要对底部四个控件进行点击事件的监听，因此定义initView()方法找到响应区。为了增强用户体验感，用户点击时只需要点击LinearLayout包含的区域即可触发tab切换。另外点击图片时图片资源会发生改变，因此也需获取图片对象。


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

（4）控制tab变换：自定义setSelect(int i)函数来显示不同界面内容。一共有四个tab，我们给每个tab设置一个index作为标记，第一个tab为0，第二个tab为1，以此类推，默认index为0。当点击到第i个tab时，需要显示该界面内容，并且将图片变为绿色。要实现此功能，需要先将所有界面都隐藏，再通过switch来匹配，将标记i对应的界面展示出来，并修改图片。函数hideFragment()实现隐藏所有界面功能。代码如下：


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


至此，Java代码编写完成。

3. 界面展示

4. 实验代码

源代码上传至github：https://github.com/Zzzffy/MyWeChat