实验一 类微信界面设计

  • 1. 功能说明
  • 2. 案例分析
  • 2.1 UI设计部分
  • 2.2 Java部分
  • 3. 界面展示
  • 4. 实验代码


1. 功能说明

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

UI Automation 微信 安卓微信ui界面设计代码_UI


UI Automation 微信 安卓微信ui界面设计代码_Java_02

2. 案例分析

2.1 UI设计部分

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

UI Automation 微信 安卓微信ui界面设计代码_移动开发_03


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

UI Automation 微信 安卓微信ui界面设计代码_移动开发_04


UI Automation 微信 安卓微信ui界面设计代码_移动开发_05


至此UI设计完成,如下所示:

UI Automation 微信 安卓微信ui界面设计代码_Java_06

2.2 Java部分

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

UI Automation 微信 安卓微信ui界面设计代码_控件_07


2、编写MainActivity文件的Java代码

(1)加载fragment:首先获取四个fragment对象,然后定义initFragment()方法,将这四个fragment加载到activity_main文件的FrameLayout中去。

UI Automation 微信 安卓微信ui界面设计代码_UI_08


UI Automation 微信 安卓微信ui界面设计代码_Java_09


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

UI Automation 微信 安卓微信ui界面设计代码_Java_10


UI Automation 微信 安卓微信ui界面设计代码_Java_11


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

UI Automation 微信 安卓微信ui界面设计代码_控件_12


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

UI Automation 微信 安卓微信ui界面设计代码_移动开发_13


UI Automation 微信 安卓微信ui界面设计代码_Java_14


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

UI Automation 微信 安卓微信ui界面设计代码_UI_15


UI Automation 微信 安卓微信ui界面设计代码_UI_16


至此,Java代码编写完成。

3. 界面展示

UI Automation 微信 安卓微信ui界面设计代码_移动开发_17


UI Automation 微信 安卓微信ui界面设计代码_移动开发_18


UI Automation 微信 安卓微信ui界面设计代码_UI_19


UI Automation 微信 安卓微信ui界面设计代码_Java_20