移动开发技术1:微信页面的实现

移动开发技术1:微信页面的实现

需求分析:

本次实验需求为完成一个类微信主页面的实现,具体需求为

1.上中下三块内容分别为标题,显示内容,切换按钮。
2.底部选择框发生改变时,中间显示内容发生相应改变。

移动开发技术1:微信页面的实现_第1张图片

实现思路

实验分为两个部分:界面UI设计以及页面控制

UI设计部分

首先完成顶部标题的设计与底部按钮布局的设计

标题使用垂直线性布局并设置标题在正中间即可
底部按钮布局使用水平线性布局,将四个按钮的垂直布局嵌套在页面的水平布局中即可
为了实现我们在点击不同按钮时显示不同内容(也即调用不同的xml文件),我们需要在这里使用fragment控件,这就涉及到本文的第二部分,编写控制代码逻辑的Java文件。

逻辑控制代码部分

这一部分最重要的是对fragment的使用,思路:将四个tab_xml文件压缩到fragment中,结果为在主程序中点击不同按钮切换时,实际上切换的是fragment,而每个fragment拥有自己的xml界面。(实际上就是将xml通过fragment实例化为对象,进而通过Java文件进行控制)
值得注意的是,我们应该定义一个hide方法,在每次点击一个按钮时首先调用这个方法将所有的fragment隐藏起来,然后通过序号绑定不同按钮(switch-to),将选中的按钮所对应的fragment显示出来。
最后使用implements View.OnClickListener,调用实现的方法initEvent(),再对相应的组件使用setOnClickListener()方法进行监听点击事件。

页面结果展示

移动开发技术1:微信页面的实现_第2张图片
移动开发技术1:微信页面的实现_第3张图片
移动开发技术1:微信页面的实现_第4张图片
移动开发技术1:微信页面的实现_第5张图片

代码仓库

AndroidProgram1_Wechat

你可能感兴趣的:(Android,android,android,studio)