android 编辑说说页面,说说 Android 的 UI 布局

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

1 线性布局(LinearLayout )

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

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

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent"

>

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="按钮 1"

/>

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="按钮 2"

/>

android:id="@+id/button3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="按钮 3"

/>

线性布局

我们在 LinearLayout 中新建了 3 个按钮，每个按钮的长和宽都是 wrap_content，并

指定了排列方向是垂直排列l。

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

android:orientation="horizontal"

水平排列

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

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

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

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="按钮 1"

android:layout_gravity="top"

/>

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="按钮 2"

android:layout_gravity="center_vertical"

/>

android:id="@+id/button3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="按钮 3"

android:layout_gravity="bottom"

/>

布局中的对齐方式

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

android:id="@+id/input_message"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

android:hint="请输入消息" />

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 值，来实现更好的效果：

android:id="@+id/input_message"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

android:hint="请输入消息" />

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 )

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

android:layout_width="match_parent"

android:layout_height="match_parent">

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

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

android:id="@+id/button3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="按钮 3" />

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

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

相对布局示例

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

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

android:id="@+id/button3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="按钮 3" />

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

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

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

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 )

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

android:layout_width="match_parent"

android:layout_height="match_parent"

>

android:id="@+id/text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="这是一段文本"

/>

android:id="@+id/image"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@mipmap/ic_launcher"

/>

帧布局

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

片压在了按钮的上面。

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

android:id="@+id/text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="这是一段文本"

android:layout_gravity="left"

/>

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 版本

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/button1"

android:layout_gravity="left|top"

android:text="按钮 1"

app:layout_heightPercent="50%"

app:layout_widthPercent="50%">

android:id="@+id/button2"

android:layout_gravity="right|top"

android:text="按钮 2"

app:layout_heightPercent="50%"

app:layout_widthPercent="50%">

android:id="@+id/button3"

android:layout_gravity="left|bottom"

android:text="按钮 3"

app:layout_heightPercent="50%"

app:layout_widthPercent="50%">

android:id="@+id/button4"

android:layout_gravity="right|bottom"

android:text="按钮 4"

app:layout_heightPercent="50%"

app:layout_widthPercent="50%">

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

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

百分比布局示例

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

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