前言
上一节我们主要讲解了linux下的权限说明,今天我们来了解一下Android中的UI设计,聊聊android中常用的布局。
android中的布局主要有六种,分别是线性布局(LinearLayout),相对布局(Relativelayout),帧布局(FrameLayout),网格布局(GridLayout)以及绝对布局(AbsoluteLayout)和表格布局(TableLayout),在这六种布局中,我们比较常用的就是线性布局和相对布局以及帧布局,所以在布局方面,我打算主要围绕这三个布局去展开,其他的布局我就不一一概述了,因为用的实在是太少了。以后去面试android基础工程师,你只需要知道andriod中的布局有六种,以及是哪六种就够了。面试官不会去深入问你是否知道AbsoluteLayout布局如何使用等等问题。
对每一个android开发者来说,屏幕适配都是一个很令人头疼的问题,由于市面上的android机型太多,各式各样屏幕分辨率的android手机数不胜数,尤其是还有很多比较奇葩的设备,所以我们也只能做到对大多数屏幕适配,还有少数的设备市场占有量不大,就直接忽略了。既然是做屏幕适配,自然是需要在布局上下功夫,而我们在做适配的时候用到的最多的就是线性布局中的权重属性(weight)了。在这一节中,我将会详细的解析LinearLayout,包括一些基本的属性。
布局中的属性很多,如果要我们全都掌握的话,可能有点不太现实,基本上很少有人去记布局的全部属性,常用的属性就那几个,我们也只讲那些比较常用的属性。基本上这个布局的一部分属性你掌握了,其他的属性,你自己都可以猜出来的。
布局的属性分类
线性布局常用的属性如下:
1. layout_width (控件和布局必不可少的属性)
1. 布局的宽度:两种可选值
1. match_parent 填充父窗体(fill_parent: 这个属性也是填充父窗体的,只是早已经被废弃掉了,不推荐使用)
2. wrap_content 包裹内容
3. 自定义宽度。比如我定义高度为20dp(宽度高度的度量单位是dp, 字体的度量单位是sp)
2. layout_height (控件和布局必不可少的属性)
1. 布局的高度:两种可选值
1. match_parent 填充父窗体
2. wrap_content 包裹内容
3. 自定义高度。比如我定义高度为20dp(宽度高度的度量单位是dp, 字体的度量单位是sp)
3. orientation(线性布局的方向)
1. vertical 垂直
2. horizontal 水平方向
4. id(布局的标识,方便我们在代码中通过findViewById来找到这个控件)
5. background: 布局的背景(一般用资源文件夹下的图片来引用,也可以直接使用十六进制的颜色来表示)
6. weight:权重(按比例分配布局中的元素所占的空间)
7. margin 家族
1. margin_left: 距左边的距离
2. margin_right: 距右边的距离
3. margin_top: 距上边的距离
4. margin_bottom: 距下边的距离
8. padding 家族: 和margin一样,只不过margin是外边距,而padding是内边距
9. gravity: 文字在控件中的位置
10. layout_gravity: 控件在布局中的位置
属性详解
单纯的讲解属性是没什意思,我们结合一个例子来看看linearLayout的具体用法。
- 首先我们来看一张QQ登录的图片
- 这很明显就是一个垂直的线性布局,接下来我们来实现这样的布局。
- 源代码如下
<?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"> <LinearLayout android:layout_marginRight="20dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="40dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="用户名:"/> <EditText android:layout_weight="1" android:layout_width="0dp" android:hint="请输入用户名" android:layout_height="wrap_content"/> </LinearLayout> <LinearLayout android:layout_marginTop="20dp" android:layout_marginRight="20dp" android:layout_marginLeft="20dp" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="40dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="密 码:"/> <EditText android:layout_weight="1" android:layout_width="0dp" android:hint="请输入密码" android:layout_height="wrap_content"/> </LinearLayout> <Button android:layout_marginRight="20dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="登录"/> </LinearLayout>
- 运行截图如下
那边还有忘记密码和记住密码两个控件我没有写进来,我是故意的,我想聪明的你一定也知道如果将这两个控件如何加入到我们的登录界面中。
weight 权重属性
- 这个属性是我们在使用线性布局的时候比较常用的一个属性,它讲究的是按比例分配屏幕尺寸。如果我们使用了权重属性,那么我们必须要指定控件的宽度或者高度为0。那么如何划分呢?一句话,如果是在水平方向上平分控件,那么宽度就指定为0, 如果是在垂直方向上平分控件,那么高度就指定为0
- 权重的基本用法
效果图如下:(截图效果不好,原谅我还没在mac上找好比较好用的截图软件)
实现代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.selfassu.layoutdemo.MainActivity"> <TextView android:background="#f00" android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent" android:text="Hello World!"/> <TextView android:background="#0f0" android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent" android:text="Hello World!"/> </LinearLayout>
其实实现非常简单,细心的小伙伴肯定已经看出来了,我在下面的两个TextView中给它们分别都设置了权重等于1, 这是如何理解的呢?两个权重的和为2,那么第一个TextView占一份,另外一个TextView占一份。总共是两份,它们没人占一分,所以它们平分了,如果我想要第一个红色的TextView占两份,绿色的TextView占一份,那又该如何做呢?我们只需要将第一个TextView的weight值改成2,另外一个改成1就可以了。那么红色就占了总数(3)的2/3,绿色就占了总数的1/3,这样它们就是2:1的比例了,是不是特别简单?剩下的就要靠你们自己去摸索了,学会熟练运用权重,对我们以后做屏幕适配可是有很大的帮助哟!
总结
在这一节我们就已经了解了线性布局的大部分用法了,剩下的就靠你们自己去学习了。是不是觉得线性布局很简单?其实每一种布局都是很简单的。好啦,在下一节我们继续讲一下相对布局的用法!