微信页面设计

功能说明

1. 前端界面模仿微信的前端界面

2. 底部四个按钮可以实现中间页面的切换

设计流程

1. 设计整体框架，由微信app知它为上中下结构。

2. 上结构为标题栏，在layout里创建top.xml,改默认布局为linearlayout（右键Convet）

标题栏只需要文字“微信”，添加一个textView即可

修改一些属性，使其居中

3. 中结构为四个页面，用文本来代替真实微信中间的复杂功能实现，创建对应xml文件，添加对应textView，例如通讯录界面

4. 下结构为四个按钮，按对应按钮跳转对应中间界面，把所需图片导入项目中。

5. 先只关心布局，逻辑放在java代码处解决。

在大的layout里放四个小layout，各自的小layout里上面放对应图片按钮（imagebutton），下面放文本（TextView）

6. 主布局文件分别放上中下布局文件，用include导入，中间放置FrameLayout

核心代码详解

1. 按图片按钮切换页面涉及到逻辑问题，需编写java文件实现。

2. 有四个页面要包在Fragment，创建四个Fragment类

3. 编写MainActivity

4. 实例化四个Fragment类得到对象，创建FragmentManager对象管理

5. 实现下结构的按钮切换逻辑核心代码，有四个layout对象，四个imageButton对象，后续与对应控件绑定。

6. 绑定对应的八个控件代码

7. 切换的逻辑通过隐藏和显示两个函数实现，参数i为一个选择器。

8. 需要监听用户点击图标事件来确定什么时候切换

结果与总结

1. 实验结果

点击微信图标后

点击通讯录图标后

点击发现图标后

点击我图标后

2. 总结

本次实验完成了微信页面设计，实现了一些按钮切换页面的逻辑，由于第一次接触AS开发环境，导致本次实验过程中遇到了一些问题，不过都通过与同学讨论得到了解决，本次实验收获很大！

源码开源地址（gitee）

点击跳转