移动开发技术实验一：UI界面开发

功能要求

  开发一个类似微信的主页面框架，UI布局为上中下结构，包含4个tab页面。

开发技术

  layout.xml、控件、监听，fragment

设计思路

  类微信界面由mainlayout.xml、bottom.xml、top.xml三个部分组成。

• 中部主页面（mainlayout.xml）：用于展示四个片段（fragment）的界面，后续应该会在其中加入其他较复杂的功能，现阶段只展示指定文字。
• 顶端标题栏（top.xml）：用于展示标题。
• 底端导航栏（bottom.xml）：用于存放四个按键，每个按键由ImageButton和TextView组成，单击按键可以切换中部主界面的片段展示，且会切换对应ImageButton的图标，用于提示当前中部主界面的位置。

项目结构

  项目主要的框架如图所示：

设计流程

1.导入图片资源

  导入图片资源normal.png和picked.png。

• normal.png：在没有被点击的情况下每个LinearLayout显示的图标。

 

•  picked.png：在被点击的情况下对应LinearLayout显示的图标。

 

 2.前端布局设计

  此类微信界面分为三部分，顶端标题栏，中部主页面，底部导航栏，故分部分进行设计。

顶端标题栏

  添加一个TextView拖拽至顶端，输入汉字“微信”，背景设置为绿色，字色设置为黑色（可在调色盘选择），字体默认，字号调整为合适大小，居中（center）显示。

  Design界面：

   Code：