移动开发实现微信基本界面

一.建立每个窗口的基本布局

微信窗口有四个滑动窗口,但每个窗口都有相同的底部视图区和相同的上部小窗口,因此我们可以建立两个子的XML文件分别命名为top和bottom来,这样可以模拟搭建好微信界面的上下两个layout。

1.top页面的设计。

创建一个水平的LinearLayout XML文件,并向其中添加一个TextView,相关的具体属性如下图所示: image.png

image.png 2.bottom页面的设计

创建一个水平的LinearLayout XML文件,并向里面加入四个垂直的LinearLayout。再向这四个LinearLayout中分别加入一个imageView和一个TextView,相关的具体属性如下图所示: image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

二.页面的添加组合

将bottom页面和top页面include到主页面中,并向里面加入一个FrameLayout控件具体的控件属性如下图。

image.png

image.png 三.添加Fragment并实现动态切换

添加四个如图所示的Fragment

image.png 其中每个Fragment的java文件代码如下图:

image.png

定义四个Linearlayout对象和四个ImageView对象并设置四个LinearLayout的监听器。

image.png

设置点击监听事件

image.png

其中replace函数是用于替换FrameLayout中的Fragment的,change函数是用于控制点击后相应的 图标变换。

image.png

image.png

image.png

四.效果展示

image.png

五.小结

微信基本窗口的设计比较简单,我的代码还有可以简洁化的的地方,这次的实验设计还是让我对AS有了更深的理解,对其中的一些控件有了较好的概念,我会继续学习。

附上源代码地址:link.juejin.cn/?target=htt…

猜你喜欢

转载自juejin.im/post/7016909075464093733