【Android Studio&JAVA】移动软件开发实验——实验四：UI设计

移动软件开发

实验四：UI设计

一、实验目的

1. 熟练掌握常用控件的使用方法；
2. 了解控件与布局的关系，熟练掌握几种常用布局；
3. 掌握自定义的控件的设计及实现；
4. 掌握ListView和RecyclerView的用法；
5. 了解Nine-Patch图片的制作方法。

二、实验内容

1. 根据PPT或课本中的提示，练习ImageView、ProcessBar、AlerDialog以及ProcessDialog的使用，可在实验3第4题设计的应用中，适当加入以上控件使得应用界面更加丰富、完善。

ImageView：

1. 新建一个drawable开头的目录
   
2. 将两张png格式的图片放在该目录下
   
3. 修改相关layout代码如下：
   
4. 运行：
   
5. 通过代码动态更改图片，在MainActivity中修改代码如下
   
6. 结果点击button变为图二：
   

ProgressBar：

1. 显示一个进度条，在主界面xml中修改代码如下：
   
2. 运行得到结果：有一个圆形进度条在旋转
   
3. 尝试实现点一下按钮让进度条消失，再点击一下再出现，修改主活动界面的代码如下：
   
4. 运行得到预期结果
5. 修改xml使进度条变为水平进度条，并且在代码中动态的更改进度条的进度：
   
6. 运行得到结果，点击一次加10%的水平进度条：
   

AlertDialog：

1. 弹出一个置于当前界面最顶端的对话框，修改MainActiviy的代码如下：
   
2. 运行的到结果：
   

ProgressDialog：

1. 修改代码如下，让对话框中出现进度条：
   
2. 运行代码得到结果：
   

在实验三的登录界面中插入了图片，并且点击登录和注册的页面跳转时候以后有了对话框。
2. 根据PPT或课本中的提示，练习各种布局的使用；对于实验3第4题的应用，利用混合布局重新设计登录界面。

线性布局：

1. 实现三个按钮的竖直排列，修改代码如下：
   
2. 修改代码使三个按钮水平排列：
   
3. 修改代码让三个按钮分别处于顶部中部和底部：
   
4. 指定layout_weight实现输入和按钮的组合：
   
5. 修改layout_weight的值使得两个部件更加美观：
   

相对布局：

1. 修改主活动xml文件用五个按钮来实现相对布局,定位是相对于父布局：
   
2. 修改代码使控件相对于控件定位：
   

帧布局：

1. 帧布局欠缺定位，默认控件都在左上角：
   
2. 帧布局中可以让控件居左对齐、右对齐：
   

百分比布局：

1. 添加库文件，这里要注意不能直接按照课本修改，要保证版本号一致：
   
   在自己的聊天app中采用了百分比布局，和相对布局。
   3.根据PPT或课本中的提示，尝试实现自定义控件。
   1 新建布局title.xml，代码如下：在全局资源中include
   
   2.自定义控件的创建。
   新建TitleLayout继承自LinearLayout，代码如下
   
   然后在主活动的xml文件中修改代码
   
   得到和之前一样的结果
   
   在标题栏中的按钮注册点击事件，修改TitleLayout中的代码如图：
   
   运行得到结果：
   
2. 根据PPT或课本中的提示，练习ListView和RecyclerView的使用；若实验3第4题为一个聊天应用，请新添加一个活动和界面，用ListView来展示好友列表；利用互联网查询是否还有其他更适合展示好友列表的控件，如可实现好友分组、列表的收回和展开，尝试使用该控件。

ListView

1. 新建项目，修改主活动xml文件如下
   
   修改主活动代码：
   
   得到结果：
   
2. 定制ListView的界面
   新建类Fruit，编辑代码如图：
   
   新建fruit相关的xml ，代码如图：
   
   新建类FruitAdapter，代码显示如下：
   
   修改主活动的代码如下：（为了配合在网上找的的一套图标，没有完全按照书来做）
   
   得到结果：
   
3. 提升ListView的运行效率
   修改适配器中的代码如下图所示：
   继续修改：
   此时运行，效率已经有了很大提高
4. ListView的点击事件
   修改主活动的代码：
   

RecyclerView:

1. 基本用法，新建工程，在闭包中添加如下内容：
   
   修改主活动xml：
   新建FruitAdapter类，代码如下：
   
   修改主活动代码如下，并将上一个实验的fruit类和xml文件复制过来：
   
   得到运行结果：
   
2. 实现横向滚动与瀑布流布局：
   修改主活动的代码：
   
   运行得到：
   
   实现瀑布流，修改fruit的xml文件，如图：
   
   修改主活动代码：
   
   运行得到结果：
   
3. RecyclerView的点击事件：
   修改Adapter的代码：
   
   运行得到结果：

通过上网查寻，更适合展示好友列表的控件，如可实现好友分组、列表的收回和展开，是ExpandableListView是ListView的子类，它在普通的ListView的基础上进行了拓展，它把应用中的列表分为几组，每组又包含多个列表项。它的用法和ListView很像，只是其所显示的列表项应该由ExpandableListAdapter提供。

5.根据PPT或课本中的提示，学习Nine-Patch图片的制作方法，并在聊天应用中加入聊天界面。
新建一个工程进行试验

1. 制作Nine—Patch图片
   先导入一张左气泡的png图，修改xml：
   
   效果并不好
   使用Nine_Patch来改善：
   
   最终效果，由于图片不够精致没有达到预期效果，
   
   跟随课本上的步骤添加聊天界面：
2. 添加包的依赖库
   
3. 在主界面xml中添加代码：
   
4. 新建Msg：
   
5. 新建msg_item.xml：
   
6. 新建类MsgAdapter：
   
7. 修改主活动代码：
   
8. 运行结果：
   （我觉得我需要更好的图片资源。）
   
   三.、实验应用到自己的app的内容
   1.登录界面优化
   2.好友分组的折叠和展开
   3.详细聊天界面