作者:Attect阅读:1860
发布/修定:2016-10-11 20:11/2018-03-29 19:20
本文内容禁止转载、引用!如有需要,请使用本页网址

安卓界面设计基础4

本节将讲解常用的三种定位布局

  1. RelativeLayout 相对布局

  2. LinearLayout 线性布局

  3. FrameLayout 层布局

以及ScrollView和内外边距

五花肉:还记得相对运动、排成一溜、互相覆盖吗?

一、RelativeLayout 相对布局

相对一词,与物理中物体的运动状态是相对另一个物体而言的“相对”同义。

子相对父的位置

  • 假设小明在一间教室里,有以下几种位置描述:

  • 小明在教室的中间

  • 小明在教室的后面

类似这样的描述即为子相对父的位置

子相对子的位置

  • 假设小明、小红、小李都在一间教室里,有以下几种位置描述

  • 小明在小红的右边

  • 小李在小红的前面

类似这样的描述即为子相对子的位置。

五花肉:在书写定位属性时,一定要看好参照物是谁

android:id属性

在界面设计中。视图必须设置id属性,才能作为别的视图的参考物。
具体请查看前一节的文档。

五花肉:让其具有唯一性

常用相对布局的孩子能使用的相对定位描述属性参考

直接搜索下方粗体开头文字部分可以得到更多的资料。

对于值为id的属性,值需要按照格式
@id/名称
格式书写。

下述描述中,“指定id”既指的是id为指定名称的视图/布局

android:layout_above:在指定id的上面。自身底与目标顶在一条水平线上。
android:layout_below:在指定id的下面。自身的顶与目标的底在一条水平线上。
android:layout_toLeftOf:在指定id的左边。自身的右边与目标的左边在一条垂直线上。
android:layout_toRightOf:在指定id的右边。自身的左边与目标的右边在一条垂直线上。
五花肉:在指定方向上,单属性对齐。

android:layout_alignBaseline:自身的基线与指定id的基线位置对齐。基线可以理解为书写英语单词时隐含的四线三格中的四线,也因此此属性用于文字对齐。

android:layout_alignTop:自身的顶与指定id的顶在一条水平线上。
android:layout_alignBottom:自身的底与指定id的底在一条水平线上。
android:layout_alignLeft:自身的左边与指定id的左边在一条垂直线上。
android:layout_alignRight:自身的右边与指定id的右边在一条垂直线上。
五花肉:一定要注意上面那四组的区别,学过英语基本看意思基本就能理解了

下述几个属性中,值只有true或false两种
true:此属性生效
false:此属性无效

android:layout_alignParentTop:自身的顶与父的顶在一条水平线上。
android:layout_alignParentBottom:自身的底与父的底在一条水平线上。
android:layout_alignParentLeft:自身的左边与父的左边在一条垂直线上。
android:layout_alignParentRight:自身的右边与父的右边在一条垂直线上。

android:layout_centerHorizontal:在父层水平中间的位置。既水平居中。
android:layout_centerVertical:在父层垂直中间的位置。既垂直居中。
android:layout_centerInParent:在父层中心位置。既水平和垂直都居中。
五花肉:父子关系是要看参照物的哟

边距

每个视图/布局都拥有外边距和内边距属性,默认都为0

参考物】外边距【内边距|本体内容|内边距】外边距【参考物
更形象的描绘请注意视频中的带气场的厚皮西瓜例子

五花肉:就是那个红白西瓜...
对于外边距、内边距的属性的详细信息,请查阅前一节附带的文档。

二、LinearLayout 线性布局

线性布局的左右就是将它的孩子们竖着或横着排成一溜。
比如竖着排列1到5这五个数字

1
2
3
4
5

比如横着排列1到5这五个数字

1 2 3 4 5

因此线性布局必须给定方向属性。
五花肉:如果默认不给方向,Android Studio会给你一个红线

属性

LinearLayout 自身特有属性

android:orientation:此线性布局的排列方向,有以下两种值

vertical:垂直排列
horizontal:水平排列

android:gravity:(并非LinearLayout专有)孩子的对齐方向。垂直排列时,可以用此属性设置所有孩子在此布局中是靠左、水平居中、靠右这三种。水平排列时,可以用此属性设置所有孩子在此布局中是靠顶、垂直居中、靠右这三种。

right:靠右,垂直时有效
left:靠左,垂直时有效
center_horizontal:水平居中,垂直时有效
top:靠顶,水平时有效
bottom:靠底,水平时有效
center_vertical:垂直居中,水平时有效
start:靠起始位置
end:靠结束位置
center:水平和垂直都居中

五花肉:多多练习看看效果吧~

其孩子具有的属性
android:layout_weight:小数或整数。可以用此属性实现按百分比占位规划。

注意,水平排列时,孩子的layout_width都应该是wrap_content
垂直排列时,孩子的layout_height都应该是wrap_content
否则会没有效果

三、滑动视图

当预计内容会超出显示范围时,应该考虑在超出范围的视图外面套上一层滑动视图(装到一个滑动布局箱子里)。

水平方向:HorizontalScrollView

使用户能够通过左右滑动来查看所有内容

垂直方向:ScrollView

使用户能通过上下滑动来查看所有内容

滑动视图中只能存在一个孩子

在滑动视图里只能存在一个孩子。如果需要放入多个东西,应该考虑在滑动视图里装一个定位布局,再在定位布局中装入其它多个东西。

四、层布局 FrameLayout

层布局用于将孩子按层绘制。在xml中,书写在后面的孩子反而是显示在更前面。
具体直观效果请注意视频中的演示。

层布局中没有定位属性,所有孩子都会被放到左上角

组合布局

所有定位布局都可以互相嵌套,但它们的定位效果都只会影响到它们的孩子,并不包括孙子。在定位布局中的布局和视图也只受它们的父亲是什么定位布局所约束(如果父亲不是定位布局,则不能使用定位属性进行定位)。
五花肉:也就是隔辈直接是管不了的

注意

  1. 不要使用滑动视图+任意定位布局去实现列表(这很容易导致内存使用过多导致程序崩溃)。关于列表,有一个专门的ListView列表视图,在以后我们学习了逻辑代码中的适配器概念后才能讲解。

  2. 组合不应该过于复杂,一个界面尽量控制在30个以内,否则会导致实际使用时界面加载时间过长或者卡顿。