安卓开发（2）：基本UI界面设计

下面用开发一个小应用的方法来学习一下安卓基本的UI界面设计

这个应用的界面如下：

安卓开发（2）：基本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(父容器)边界对齐, 则为居中。

安卓开发（2）：基本UI界面设计

ConstraintLayout 除了与视图约束以外, 还支持与引导线(Guideline)约束. 如, 设置竖直引导线(Guideline)距离左侧 22dp,TextView 左侧与引导线约束：

表示的 Guideline 是垂直的，与左边屏幕相距 22dp。

还支持链样式，可以参考https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html

2. TextView

用于显示文字内容的控件，通过设置 text 的值来显示要显示的内容，常用的属性有 textColor，用于设置文字的颜色，textSize，用于设置文字大小。示例：

安卓开发（2）：基本UI界面设计

3. EditText

用于接受用户输入的输入框，常用属性除了和 TextView 相同的 textColor 和 textSize 之外，还有

inputType，用于设置输入框中文本的类型，如果设置为 textPassword，会使输入的文字变为小黑， hint用于设置当输入框为空时的提示内容。

4. ImageView

显示图片的控件，通过设置 src 来设置要显示的图片

5. RadioButton 和 RadioGroup

RadioButton 是单选按钮，一组单选按钮需要包括在一个 RadioGroup 中，并且需要对 RadioGroup 和其包括的每一个 RadioButton 都设置 id，RadioButton 才能正常工作。示例：

安卓开发（2）：基本UI界面设计

可以用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 等等，具体怎么使用参见这篇教程：http://blog.csdn.net/sysukehan/article/details/5202230 7

引用资源文件里的变量

我们可以把要用到的变量定义在资源文件中（字符串定义在strings.xml，颜色值定义在colors.xml，这是一个好习惯）如下：

安卓开发（2）：基本UI界面设计

然后就可以直接用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="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.lab1.MainActivity">

    <TextView
        android: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.Guideline
        android:id="@+id/guideline1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="90dp"/>
    <ImageView
        android: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"
        />
    <TextView
        android: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"/>
    <EditText
        android: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" />
    <TextView
        android: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"/>
    <EditText
        android: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" />
    <RadioGroup
        android: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">
        <RadioButton
            android:id="@+id/id1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="学生"
            android:textSize="18sp" />
        <RadioButton
            android: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>

    <Button
            android: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"
            />
        <Button
            android: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 {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); //把布局文件加载
    }
}

buttonbg.xml(按钮的背景自定义边框)

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

秒客网

安卓开发（2）：基本UI界面设计

1. ConstraintLayout

3. EditText

4. ImageView

5. RadioButton 和 RadioGroup

1. layout_width 和 layout_height

2. layout_gravity 和 gravity

3. layout_margin 和 padding

相关文章