[SYSU]手机平台应用开发实验一第四周实验报告

中山大学数据科学与计算机学院本科生实验报告

（2018年秋季学期）

课程名称	手机平台应用开发	任课老师	郑贵锋
年级	2016	专业（方向）	软件工程计应
学号	16340034	姓名	陈伟桐
电话	15989061915	Email	810549046@qq.com
开始日期	2018/10/6	完成日期	2018/10/8

---

一、实验题目

基本的UI界面设计

---

二、实现内容

实现一个Android应用，界面呈现如图中的效果。

要求

• 该界面为应用启动后看到的第一个界面。
• 各控件的要求
  • 标题字体大小20sp，与顶部距离20dp，居中；
  • 图片与上下控件的间距均为20dp，居中；
  • 输入框整体距左右屏幕各间距20dp，内容（包括提示内容）如图所示，内容字体大小18sp；
  • 按钮与输入框间距10dp，文字大小18sp。按钮背景框左右边框与文字间距10dp，上下边框与文字间距5dp，圆角半径180dp，背景色为**#3F51B5**；
  • 四个单选按钮整体居中，与输入框间距10dp，字体大小18sp，各个单选按钮之间间距10dp，默认选中的按钮为第一个。

使用的组件

TextView、EditText、ConstraintLayout、Button、ImageView、RadioGroup、RadioButton。

---

三、课堂实验结果

(1)实验截图

最终得到的效果图如下所示：

(2)实验步骤以及关键代码

这次实验只涉及到UI的设计，实验步骤基本上都在android studio里的layout design视图完成，并没有复杂的步骤。

唯一值得注意的地方是按钮的圆角设计，按钮圆角设计是没办法直接通过设置按钮属性来完成的，必须要在drawable目录下写额外的xml文件，并通过按钮来引用该文件来实现圆角。

我在drawable目录下新建了shape.xml文件，代码如下

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#3F51B5" />
    <corners android:radius="180dp" />
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp" />
</shape>

(3)实验遇到的困难以及解决思路

实验遇到了两个主要困难

1. 按钮圆角的设计，一开始并不知道如何设计，后来查阅资料后才知道要通过引用shape.xml来实现，解决方法在前面已经提到过
2. UI布局的设计，在设计UI过程中，需要对各个控件的位置进行精准把控。一开始并不知道如何精确地调整控件位置，而解决办法是用constraitLayout，利用这种布局控件，几乎可以满足我们所有的布局需求。

---

四、课后实验结果

同课堂实验结果

---

五、实验思考及感想

UI设计是本课程的第一个实验，UI设计本身是比较简单的。通过此次实验，初步熟悉了android studio开发环境的使用，对手机应用开发有了初步认识。

---