Android用户界面设计

Android用户界面设计

用户界面设计是Android应用开发的一项重要内容。在进行开发的过程中，我们需要了解UI元素如何呈现给用户，也就是如何控制UI界面。andorid提供了4种控制UI的方法。

一、控制UI布局

1. 使用xml布局文件来控制UI
2. 使用JAVA代码来控制UI
3. 使用xml布局与JAVA代码来控制UI
4. 使用自定义View来控制UI

具体的东西我们需要简单讲解：

1.如何使用xml布局文件控制UI

该方法采用xml文件来进行界面布局与JAVA逻辑代码分离开来，使程序的结构更加清晰，明了。
1

（1）首先需要在res/layout创建你的xml布局文件。创建后R.java会自动收录该布局资源。

（2）在Activity（活动）onCreate()中，添加JAVA代码调用该布局文件，显示该布局内容。

@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}
1
2
3
4
5
6

(3)查看activity_main.xml布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
    android:id="@+id/custom_view_image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/ic_launcher" />

<TextView
    android:id="@+id/custom_view_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/test_name"
    android:background="@color/colorAccent"//文本背景
    style="@style/testStyle" //样式
    android:textColor="@android:color/holo_red_dark" //字体的颜色  
/>
</FrameLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

（4）TextView用到了@string/test_name属性，我们要找到res/string.xml文件。

<resources>
<string name="app_name">Demo</string>
<string name="test_name">我是测试Demo</string>
</resources>
1
2
3
4

概述：string.xml文件用于定义程序中应用的字符串常量。常量名由name属性指定。使用该属性的优势，在后期开发的过程中会产生文本相同，如果统一使用方便后期管理使用，就没有必要去每一个xml布局文件去修改文本，直接找到string.xml相对应的属性名name修改文本，做到一处修改到处有效。

（5）TextView还用到了@style/testStyle属性，见名之意设置文本的样式。

<resources>
<style name="testStyle">
    <item name="android:textSize">20sp</item>
</style>
</resources>

//其实当**TextView**调用**style="@style/testStyle"**属性的时候，代码是这样的

<TextView
    android:id="@+id/custom_view_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/test_name"
    android:background="@color/colorAccent"//文本背景
    android:textSize="20dp"
    android:textColor="@android:color/holo_red_dark" //字体的颜色  
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

具体来讲，将某些TextView公用的属性给抽取出来，通过属性style来调用，自定义的样式。达到一处修改到处有效的效率。主要还是为了后期项目开发减少周期。

效果图

---

2.代码中控制UI界面

具体实现，通过JAVA代码的方式来控制UI界面。所有的UI界面通过**new**关键字创建出来，然后将这些UI组件添加到布局管理器中，从而实现用户界面。
1

具体的三个步骤：

1. 创建布局管理器，常用的线性布局，相对布局，帧布局，表格布局，并设置布局属性
2. 创建具体的组件，TextView,EditText,ImageView,Button等组件，并设置组件属性
3. 将创建的具体组件，添加到布局管理器当中

直接看代码：

（1）创建布局管理器
  @Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    FrameLayout frameLayout = new FrameLayout(this);
    frameLayout.setBackgroundColor(getResources().getColor(R.color.colorAccent));
    setContentView(frameLayout);

（2）创建具体组件
    TextView textView = new TextView(this);
    textView.setText(R.string.test_name);
    textView.setTextColor(getResources().getColor(R.color.colorAccent));
    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 20);//第一个参数是设置字体的单位px像素，
    textView.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
    frameLayout.addView(textView);

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

具体的文字叙述就不在说了，直接动手测试

效果图：

---

3.java代码和xml混合控制UI界面

完全通过xml布局文件控制UI界面，实现比较方便，但是有失灵活；
然而完全通过JAVA代码控制UI界面，虽然比较灵活，但是开发过程比较繁琐。鉴于这两会中方法的优缺点。
我们使用xml和java代码混合控制UI界面。
1
2
3

具体的三个步骤：

1. 使用xml布局文件，创建一个布局管理器
2. 在Activity当中，声明img和imagePath两个成员变量，两个都是一维数组，后面放出代码
3. 在Activity的onCreate()，获取xml布局文件中创建的布局管理器，通过for循环创建ImageView组件，然后将其添加到布局管理器当中

直接看代码：
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//设置内容视图
setContentView(R.layout.test_activity);

    //1.取到xml布局，实例化线性布局管理器
    LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll);

    //2.声明**img**和**imagePath**两个成员变量，两个都是一维数组
    ImageView[] img = new ImageView[3];
    int[] imagePath = new int[]{R.drawable.main_pager_1, R.drawable.main_pager_2,
            R.drawable.main_pager_3};

    //3.通过**for**循环创建ImageView组件，然后将其添加到布局管理器当中
    for (int i = 0; i < imagePath.length; i++) {
        img[i] = new ImageView(this);
        img[i].setImageResource(imagePath[i]);
        img[i].setPadding(5, 5, 5, 5);
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                240, 240);
        img[i].setLayoutParams(layoutParams);
        linearLayout.addView(img[i]);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果图：

---

4.通过自定义View显示UI视图

在Android中，所有的UI界面都是由**View**类和**ViewGroup**类及其子类组合而成的。
其中，**View**类是所有UI组件的基类，而**ViewGroup**是容纳UI组件的容器，其本身也是View类的子类。
一般情况下，直接使用View和ViewGroup这两个类的**子类**。比如:ImageView,TextView等。
1
2
3

---

二、四大布局管理器

在开发中会常用的四大布局
1

1. 线性布局 LinearLayout
2. 相对布局 RelativeLayout
3. 帧布局 FrameLayout
4. 表格布局 TableLayout
5. 绝对布局 AbsoluteLayout（再android1.6中已经被抛弃）

---

1.线性布局

线性布局就是将放入其中的组件按照垂直或水平方向来布局，也就是控制放入其中的组件横向或纵向排列。

还是直接看代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@color/colorAccent"
android:orientation="horizontal">

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/app_name" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/app_name" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/app_name" />
</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

使用 vertical属性的显示效果，可以明显看出使用的垂直排列

使用 horizontal属性的显示效果，可以明显看出使用的水平排列

使用 background和gravity属性，显示的效果

2.相对布局

相对布局是指按照组件之间但相对位置来进行布局，如A组件在B组建的左边，右边，上方或下方等。

使用相对布局实现，一个简单的登录界面 看代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical">

<TextView
    android:id="@+id/tv_username"
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:gravity="center"
    android:text="账号：" />

<TextView
    android:id="@+id/tv_password"
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:layout_below="@+id/tv_username"
    android:gravity="center"
    android:text="密码：" />

<EditText
    android:id="@+id/et_username"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_toRightOf="@+id/tv_username" />

<EditText
    android:id="@+id/et_password"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_below="@+id/tv_username"
    android:layout_toRightOf="@+id/tv_password" />

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/tv_password"
    android:layout_centerHorizontal="true">

    <Button
        android:id="@+id/btn_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn1" />

    <Button
        android:id="@+id/btn_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/btn_1"
        android:text="btn2" />

</RelativeLayout>
</RelativeLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

效果图：

---

3.帧布局

我所了解的帧布局就是多个组件层叠排序，后面的组件覆盖前面的组件。

用帧布局实现的一个效果,看代码:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:foreground="@color/colorPrimary"
android:foregroundGravity="bottom|right">

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:background="@color/colorPrimaryDark"
    android:text="text1"
    android:textColor="@android:color/white" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="60dp"
    android:background="@color/colorAccent"
    android:text="text2"
    android:textColor="@android:color/white" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="90dp"
    android:background="@android:color/white"
    android:text="text3" />

</FrameLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

效果图：

---

4.表格布局

android提供的表格布局，见名知意就是表格的形式，我们需要在表格里面去添加组件，以此来实现UI界面。

代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:orientation="horizontal">

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center">


        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1" />

        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2" />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center">

        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3" />

        <Button
            android:id="@+id/btn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="4" />
    </TableRow>
</TableLayout>
</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

效果图：

总结，在开发的过程当中，经常会使用相对与线性两类布局。然而，我们要想到的是需要对优化布局的结构有所了解。

• 避免复杂的View层级。布局越复杂就越臃肿，就越容易出现性能问题，寻找最节省资源的方式去展示嵌套的内容；

• 尽量避免在视图层级的顶层使用相对布局 RelativeLayout 。相对布局 RelativeLayout 比较耗资源，因为一个相对布局 RelativeLayout 需要两次度量来确保自己处理了所有的布局关系，而且这个问题会伴随着视图层级中的相对布局 RelativeLayout 的增多，而变得更严重；

• 布局层级一样的情况建议使用线性布局 LinearLayout 代替相对布局 RelativeLayout，因为线性布局 LinearLayout 性能要更高一些；确实需要对分支进行相对布局 RelativeLayout 的时候，可以考虑更优化的网格布局 GridLayout ，它已经预处理了分支视图的关系，可以避免两次度量的问题；

• 相对复杂的布局建议采用相对布局 RelativeLayout ，相对布局 RelativeLayout 可以简单实现线性布局 LinearLayout 嵌套才能实现的布局；

• 不要使用绝对布局 AbsoluteLayout ；

• 将可重复使用的组件抽取出来并用 标签进行重用。如果应用多个地方的 UI 用到某个布局，就将其写成一个布局部件，便于各个 UI 重用。官方详解 「 戳我 」

• 使用 merge 标签减少布局的嵌套层次；

• 去掉多余的不可见背景。有多层背景颜色的布局，只留最上层的对用户可见的颜色即可，其他用户不可见的底层颜色可以去掉，减少无效的绘制操作；

• 尽量避免使用 layoutweight 属性。使用包含 layoutweight 属性的线性布局 LinearLayout 每一个子组件都需要被测量两次，会消耗过多的系统资源。在使用 ListView 标签与 GridView 标签的时候，这个问题显的尤其重要，因为子组件会重复被创建。平分布局可以使用相对布局 RelativeLayout 里一个 0dp 的 view 做分割线来搞定，如果不行，那就……；

• 合理的界面的布局结构应是宽而浅，而不是窄而深；