说说 Android 的 UI 布局

作者: deniro | 来源:发表于2018-02-19 21:24 被阅读78次

布局是一种可用于放置很多控件的容器，它可以按照一定的规律调整内部控件的位置，从而编写出漂亮的界面。当然，布局的内部除了放置控件外，也可以放置布局，通过多层布局的嵌套，我们就能够实现一些比较复杂的界面咯O(∩_∩)O~

1 线性布局（LinearLayout ）

线性布局会将它所包含的所有控件放在线性方向上依次排列。

我们来实践一下，布局文件：

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

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

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

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

</LinearLayout>

线性布局

我们在 LinearLayout 中新建了 3 个按钮，每个按钮的长和宽都是 wrap_content，并
指定了排列方向是垂直排列l。

修改 LinearLayout 的排列方向为水平排列：

 android:orientation="horizontal"

水平排列

注意，如果线性布局的排列方向是水平时，那么内部控件的宽度就不能是 match_parent，因为这样一个单独控件就会将整个水平方向占满，其他的控件就看不见咯。同样，如果线性布局的排列方向是垂直时，那么内部控件的高度也不能是 match_parent。

使用 android:layout_gravity 可以指定控件在布局中的对齐方式。注意，线性布局的排列方向是水平时，只有垂直方向上的对齐方式才有效，因为此时水平方向上的长度是不固定的，每添加一个控件，水平方向上的长度都会改变，因而无法指定该方向上的对齐方式。同理，如果线性布局的排列方向是垂直时，只有在水平方向上的对齐才有效。

我们为这三个按钮加上不同的对齐方式：

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="按钮 1"
    android:layout_gravity="top"
    />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="按钮 2"
    android:layout_gravity="center_vertical"
    />

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="按钮 3"
    android:layout_gravity="bottom"
    />

布局中的对齐方式

现在使用 android:layout_weight 属性，通过比例的方式来指定控件的大小，它在手机屏幕的适配性上起到了非常重要的作用。假设我们需要编写一个消息发送界面，它包含一个文本输入框和一个发送按钮：

<EditText
    android:id="@+id/input_message"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:hint="请输入消息" />

<Button
    android:id="@+id/send"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="发送" />

这里把 EditText 和 Button 的宽度都指定成了 0dp。dp 会随着不同屏幕而改变控件长度的像素数量，记住 dp 最终都会转化为像素来衡量大小的哦。

然后在 EditText 和 Button 里都将 android:layout_weight 属性的值指定为 1，这表示 EditText 和 Button 将在水平方向上各占宽度的 50%，即 1:1。

如果把 EditText 与 Button 的 android:layout_weight 属性分别设定为 3,2，即表示它们的宽度比重为 3:2：

宽度占比为 3:2

可以通过指定部分控件的 layout_weight 值，来实现更好的效果：

<EditText
    android:id="@+id/input_message"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:hint="请输入消息" />

<Button
    android:id="@+id/send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="发送" />

这里的 Button 的宽度仍然按照 wrap_content 来计算，EditText 的 :layout_weight 设置为 1，这样它就会占满屏幕所有的剩余空间。使用这种方式编写的界面，不仅能够适配各种屏幕，而且看起来也很舒服。

更好的效果

2 相对布局（RelativeLayout ）

相对布局显得更加随意一些，它可以通过相对定位的方式让控件出现在布局的任意位置。

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="按钮 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="按钮 2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="按钮 3" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="按钮 4" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="按钮 5" />

</RelativeLayout>

相对布局示例

这里我们让 Button 1 相对父布局的左上角对齐，Button 2 相对父布局的右上角对齐，Button 3居中显示，Button 4 相对父布局的左下角对齐，Button 5 相对父布局的右下角对齐。

控件也可以相对于其他控件进行定位的哦：

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:text="按钮 3" />

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/button3"
    android:layout_toLeftOf="@id/button3"
    android:text="按钮 1" />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/button3"
    android:layout_toRightOf="@id/button3"
    android:text="按钮 2" />


<Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/button3"
    android:layout_toLeftOf="@id/button3"
    android:text="按钮 4" />

<Button
    android:id="@+id/button5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/button3"
    android:layout_toRightOf="@id/button3"
    android:text="按钮 5" />

相对于其他控件进行定位

这里，我们让其它按钮都相对于 “按钮 3” 的位置进行定位。

属性	说明
android:layout_above	让一个控件位于另一个控件的上方。
android:layout_below	让一个控件位于另一个控件的下方。
android:layout_toLeftOf	让一个控件位于另一个控件的左边。
android:layout_toRightOf	让一个控件位于另一个控件的右边。
android:layout_alignLeft	一个控件的左边缘和另一个控件的左边缘对齐。
android:layout_alignRight	让一个控件的右边缘和另一个控件的右边缘对齐。
android:layout_alignTop	让一个控件的上边缘和另一个控件的上边缘对齐。
android:layout_alignBottom	让一个控件的下边缘和另一个控件的下边缘对齐。

以上这些属性都需要指定相对控件 id 的引用。

注意，当一个控件去引用另一个控件的 id 时，这个控件一定要定义在引用控件的后面，不然会出现找不到 id 的情况。

3 帧布局（FrameLayout ）

帧布局中的所有控件都会摆放在布局的左上角。

<?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"
    >

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是一段文本"
        />

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        />

</FrameLayout>

帧布局

可以看出，按钮和图片都是位于布局的左上角。由于图片是在按钮之后添加的，因此图
片压在了按钮的上面。

可以使用 layout_gravity 来指定控件在布局中的对齐方式：

<TextView
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="这是一段文本"
    android:layout_gravity="left"
    />

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"
    android:layout_gravity="right"
    />

指定控件的对齐方式

因为帧布局缺少定位方式，所以使用它的应用场景较少哦O(∩_∩)O~

4 百分比布局

在百分比布局中，我们可以直接指定控件在布局中所占的百分比。

为了让所有的 Android 版本都能用上这个布局，Android 团队把它定义在 support 库中。所以我们只要在 build.gradle 中添加百分比布局依赖就可以使用它啦O(∩_∩)O~

打开 app/build.gradle 文件，在 dependencies 中添加：

   compile 'com.android.support:percent:24.2.1'

每当修改了 build.gradle 文件之后，Android studio 都要弹出提示，让我们更新（Sync Now），记得点击更新哦O(∩_∩)O~

如果抛出 Failed to resolve： compile 'xxx'，请先检查拼写是否正确；如果还是不行，请到C:\Users\Administrator\AppData\Local\Android\sdk\extras\android\m2repository\com\android\support\percent 路径下，找到一个存在的 24.x.x 版本，更新文件，并点击 Sync Now 即可。

gradle 资源库中的 percent 版本

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_gravity="left|top"
        android:text="按钮 1"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="50%"></Button>

    <Button
        android:id="@+id/button2"
        android:layout_gravity="right|top"
        android:text="按钮 2"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="50%"></Button>

    <Button
    android:id="@+id/button3"
    android:layout_gravity="left|bottom"
    android:text="按钮 3"
    app:layout_heightPercent="50%"
    app:layout_widthPercent="50%"></Button>

    <Button
        android:id="@+id/button4"
        android:layout_gravity="right|bottom"
        android:text="按钮 4"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="50%"></Button>


</android.support.percent.PercentFrameLayout>

因为百分比布局不是内置于 Android SDK 中，所以我们这里引用的是完整的包路径，然后还定义了 app 命名空间，用于引用百分比布局的属性。

由于百分比布局继承自帧布局，所以所有的控件都是默认摆放在布局的左上角，这里我们借助于 layout_gravity 把四个按钮分别放置于左上、左下、右上、右下位置：

百分比布局示例

另外一个 PercentRelativeLayout 继承自 RelativeLayout，它可以使用 app:layout_widthPercent 和 app:layout_heightPercent 的百分比属性来设置控件的宽度与高度哦O(∩_∩)O~

除了以上这些布局，Android 中还有 AbsoluteLayout 与 TableLayout 布局，但因为实践中用的实在是太少，所以这里就不再累述咯O(∩_∩)O~

说说 Android 的 UI 布局

1 线性布局（LinearLayout ）

2 相对布局（RelativeLayout ）

3 帧布局（FrameLayout ）

4 百分比布局

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我们一起学Android

Android开发经验谈

Android开发

程序员

Android知识