下面用开发一个小应用的方法来学习一下安卓基本的UI界面设计
这个应用的界面如下：
应用的具体界面设置如下：
（1） 该界面为应用启动后看到的第一个界面
（2） 各控件：只用一个 ConstraintLayout 实现整个布局；标题字体大小20sp，与顶部距离 20dp，居中； 图片与标题的间距为 20dp，居中；输入框整体距屏幕右边间距 20dp，上下两栏间距20dp，内容（包括提示内容）如图所示，内容字体大小 18sp；学号对应的EditText 只能输入数字，密码对应的 EditText 输入方式为密码；两个单选按钮整体居中，字体大小18sp，间距 10dp，默认选中的按钮为第一个；两个按钮整体居中，与上方控件间距20dp，按钮间的间距 10dp，文字大小 18sp。按钮背景框左右边框与文字间距 10dp，上下边框与文字间距 5dp，圆角半径 10dp，背景色为#3F51B5
（3） 使用的布局和控件：ConstraintLayout、TextView、EditText、Button、ImageView、RadioGroup、RadioButton
相关基础知识：
Android 的组件分为布局和控件。布局，就是让控件在里面按一定的次序排列好的一种组件，本身并不提供内容。控件，就是显示内容的组件，比如显示一张图片，显示文字等等。现在的主流是用 ConstraintLayout。最常用的控件有以下几种：用于显示文字的TextView、用于显示图片的 ImageView、用于接受用户输入的输入框 EditText、按钮 Button、单选按钮 RadioButton，等等。以下简要介绍本次应用开发中使用到的布局和组件。
1. ConstraintLayout
约束布局，根据布局中的其他元素或视图, 确定 View 在屏幕中的位置, 受到三类约束, 即其他视图, 父容器(parent),基准线(Guideline)。
layout_constraint[本源位置]_[目标位置]="[目标 ID]“
例如：app:layout_constraintBottom_toBottomOf=“parent”
约束当前 View 的底部至目标 View 的底部, 目标 View 是 constraintLayout. 即, 把当前 View 的底部对齐到constraintLayout 的底部.
全部边界与 constraintLayout(父容器)边界对齐, 则为居中。
ConstraintLayout 除了与视图约束以外, 还支持与引导线(Guideline)约束. 如, 设置竖直引导线(Guideline)距离左侧 22dp,TextView 左侧与引导线约束：
表示的 Guideline 是垂直的，与左边屏幕相距 22dp。
还支持链样式，可以参考https://developer./reference/android/support/constraint/ConstraintLayout.html
2. TextView
用于显示文字内容的控件，通过设置 text 的值来显示要显示的内容，常用的属性有 textColor，用于设置文字的颜色，textSize，用于设置文字大小。示例：
3. EditText
用于接受用户输入的输入框，常用属性除了和 TextView 相同的 textColor 和 textSize 之外，还有
inputType，用于设置输入框中文本的类型，如果设置为 textPassword，会使输入的文字变为小黑， hint用于设置当输入框为空时的提示内容。
4. ImageView
显示图片的控件，通过设置 src 来设置要显示的图片
5. RadioButton 和 RadioGroup
RadioButton 是单选按钮，一组单选按钮需要包括在一个 RadioGroup 中，并且需要对 RadioGroup 和其包括的每一个 RadioButton 都设置 id，RadioButton 才能正常工作。示例：
可以用android：checked=true来设置哪个RadioButton被默认选中
下面简单介绍以下几个重要的通用属性 ：
1. layout_width 和 layout_height
这两个属性分别指定所属组件的宽度和高度，属性值可以是具体的距离，如：20dp，更常见的是指定为 match_parent 或者 wrap_content，match_parent 指的是组件的宽度或高度与父组件的宽度或高度一
致，如果组件没有父组件，那么组件的宽度或高度与屏幕的宽度或高度一致。wrap_content 指组件的宽度或高度刚好可以包裹住组件内的子组件即可。
2. layout_gravity 和 gravity
这两个属性的基本属性值有五种：top、bottom、center、left、right，可以使用组合属性，如 left|bottom 表示左下角。区别在于 layout_gravity 用于指定设置该属性的组件相对于父组件的位置， gravity 用于指定指定设置该属性的组件下的子组件的位置。
3. layout_margin 和 padding
layout_margin指定外边距，padding 指定内边距，这两个属性配合上四个方向还各有四个属性，如layout_marginTop，paddingTop 等。关于自定义背景边框
若想设置一个部件的形状或者背景颜色，光设置基本属性是不够的，可以定义一个自定义的xml文件来设置边框啊，形状啊，背景颜色啊等等，放在drawable（图片文件放mipmap文件夹）文件夹里，然后用android：background=“@drawable/xxx”来引用。
定义方法
在 drawable 文件夹下新建一个 Drawableresource file，填写 file name，然后把自动生成的 selector 标签改为 shape，shape 下有多个属性，padding，radius，solid 等等，具体怎么使用参见这篇教程：/sysukehan/article/details/5307
引用资源文件里的变量
我们可以把要用到的变量定义在资源文件中（字符串定义在strings.xml，颜色值定义在colors.xml，这是一个好习惯）如下：
然后就可以直接用android：textColor=“@color/primary_black”来使用黑色。
关于自定义style
style 定义在 res/values/styles.xml 文件中，也是一种资源。例如当多个TextView 具有相同的 layout_height，layout_width，textSize，textColor 设定时，如果每次都要把这些属性设定一次会很烦，而且如果全部需要修改的话（改变字体大小）也不方便，因此可以把这些属性统一定义为一个 style，这样使用的时候只要直接引用这个 style 即可。
定义 style 的方法：在 styles.xml 文件中定义自定义 style
一个自定义 style下包含多个键值对，引用的时候设置style=“@style/my_edittext_style”即可，注意不要写成 android:style=“@style/my_edittext_style”。在引用 style之后，还可以继续定义属性，如果有重复，以继续定义的属性为准。
下面是我的代码：
activity_main.xml
<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.example.administrator.lab1.MainActivity"><TextViewandroid:id="@+id/titl"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="中山大学学生信息系统"android:textSize="20sp"android:textColor="@color/primary_black"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"android:layout_marginTop="20dp"/><android.support.constraint.Guidelineandroid:id="@+id/guideline1"android:layout_height="wrap_content"android:layout_width="wrap_content"android:orientation="vertical"app:layout_constraintGuide_begin="90dp"/><ImageViewandroid:id="@+id/sysuimag"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/sysu"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toBottomOf="@+id/titl"android:layout_marginTop="20dp"/><TextViewandroid:id="@+id/textid"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="学号:"android:textSize="20sp"android:textColor="@color/primary_black"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toLeftOf="@+id/guideline1"app:layout_constraintTop_toBottomOf="@+id/sysuimag"android:layout_marginTop="30dp"/><EditTextandroid:id="@+id/studid"android:layout_width="0dp"android:layout_height="wrap_content"android:textColor="@color/primary_black"android:textSize="18sp"android:inputType="number"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toBottomOf="@+id/sysuimag"android:hint="请输入学号"android:layout_marginTop="20dp"android:layout_marginRight="20dp"app:layout_constraintLeft_toLeftOf="@+id/guideline1" /><TextViewandroid:id="@+id/textpasword"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="密码:"android:textSize="20sp"android:textColor="@color/primary_black"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toLeftOf="@+id/guideline1"app:layout_constraintTop_toBottomOf="@+id/studid"android:layout_marginTop="30dp"/><EditTextandroid:id="@+id/pasword"android:layout_width="0dp"android:layout_height="wrap_content"android:textColor="@color/primary_black"android:textSize="18sp"android:inputType="textPassword"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toBottomOf="@+id/studid"android:layout_marginTop="20dp"android:layout_marginRight="20dp"android:hint="请输入密码"app:layout_constraintLeft_toLeftOf="@+id/guideline1" /><RadioGroupandroid:id="@+id/id0"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toBottomOf="@+id/pasword"android:layout_marginTop="20dp"><RadioButtonandroid:id="@+id/id1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:checked="true"android:text="学生"android:textSize="18sp" /><RadioButtonandroid:id="@+id/id2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="18sp"app:layout_constraintLeft_toRightOf="@id/id1"android:layout_marginLeft="10dp"android:text="教职工"/></RadioGroup><Buttonandroid:id="@+id/signn"android:text="登陆"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="18sp"android:background="@drawable/buttonbg"android:textColor="@color/primary_white"android:layout_marginTop="20dp"android:layout_marginLeft="70dp"app:layout_constraintHorizontal_chainStyle="packed"app:layout_constraintTop_toBottomOf="@id/id0"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toLeftOf="@id/regist"/><Buttonandroid:id="@+id/regist"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="18sp"android:background="@drawable/buttonbg"android:textColor="@color/primary_white"android:text="注册"android:layout_marginLeft="20dp"app:layout_constraintTop_toTopOf="@id/signn"app:layout_constraintLeft_toRightOf="@id/signn"app:layout_constraintRight_toRightOf="patent"/></android.support.constraint.ConstraintLayout>
colors.xml
<?xml version="1.0" encoding="utf-8"?><resources><color name="colorPrimary">#3F51B5</color><color name="colorPrimaryDark">#303F9F</color><color name="colorAccent">#FF4081</color><color name="primary_black">#D5000000</color><color name="primary_white">#FFFFFFFF</color></resources>
MainActivity.java
package com.example.administrator.lab1;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main); //把布局文件加载}}
buttonbg.xml(按钮的背景自定义边框)
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="/apk/res/android"><cornersandroid:radius="10dp"/><paddingandroid:top="5dp"android:bottom="5dp"android:left="10dp"android:right="10dp"/><solidandroid:color="#3F51B5"/></shape>
如果觉得《安卓开发（2）：基本UI界面设计》对你有帮助，请点赞、收藏，并留下你的观点哦！
