一.建立每个窗口的基本布局
微信窗口有四个滑动窗口,但每个窗口都有相同的底部视图区和相同的上部小窗口,因此我们可以建立两个子的XML文件分别命名为top和bottom来,这样可以模拟搭建好微信界面的上下两个layout。
1.top页面的设计。
创建一个水平的LinearLayout XML文件,并向其中添加一个TextView,相关的具体属性如下图所示:
2.bottom页面的设计
创建一个水平的LinearLayout XML文件,并向里面加入四个垂直的LinearLayout。再向这四个LinearLayout中分别加入一个imageView和一个TextView,相关的具体属性如下图所示:
二.页面的添加组合
将bottom页面和top页面include到主页面中,并向里面加入一个FrameLayout控件具体的控件属性如下图。
三.添加Fragment并实现动态切换
添加四个如图所示的Fragment
其中每个Fragment的java文件代码如下图:
定义四个Linearlayout对象和四个ImageView对象并设置四个LinearLayout的监听器。
设置点击监听事件
其中replace函数是用于替换FrameLayout中的Fragment的,change函数是用于控制点击后相应的 图标变换。
四.效果展示
五.小结
微信基本窗口的设计比较简单,我的代码还有可以简洁化的的地方,这次的实验设计还是让我对AS有了更深的理解,对其中的一些控件有了较好的概念,我会继续学习。
附上源代码地址:link.juejin.cn/?target=htt…