说说 Android 的 UI 布局
发布日期:2021-06-29 21:09:47 浏览次数:2 分类:技术文章

本文共 3001 字,大约阅读时间需要 10 分钟。

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

1 线性布局(LinearLayout )

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

我们来实践一下,布局文件:

线性布局

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

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

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

android:orientation="horizontal"

水平排列

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

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

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

布局中的对齐方式

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

这里把 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 值,来实现更好的效果:

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

更好的效果

2 相对布局(RelativeLayout )

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

相对布局示例

这里我们让 Button 1 相对父布局的左上角对齐,Button 2 相对父布局的右上角对齐,Button 3居中显示,Button 4 相对父布局的左下角对齐,Button 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 )

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

帧布局

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

片压在了按钮的上面。

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

指定控件的对齐方式

因为帧布局缺少定位方式,所以使用它的应用场景较少哦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 版本

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

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

百分比布局示例

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


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

转载地址:https://deniro.blog.csdn.net/article/details/79338172 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:说说如何自定义 Android 的 UI 控件
下一篇:说说 Android 的常见 UI 控件

发表评论

最新留言

初次前来,多多关照!
[***.217.46.12]2024年04月16日 21时20分11秒