目录
一、LinearLayout 线性布局
主要属性:
1. orientation设置布局管理器内组件的排列方式,可以设置为horizontal(横向)、vertical(纵向)两个值之一
左图是横向布局,右图是纵向布局:
2.gravity设置布局管理器内组件的对齐方式,layout_gravity控制自己在父元素的位置。
其中gravity的取值如下:
举个例子,若一个布局的设置了 gravity=“center_vertical”,那么其管理下的控件都会纵向居中:
左图为布局代码,右图为布局的样子
二、RelativeLayout 相对布局
相对布局可以:
- 子控件相对于父控件布局
- 控件相对于给定id的控件布局
2.1 子控件相对于父控件布局
例如:android:layout_alignParentTop=“true”
- android:layout_alignParentTop 控件的顶部与父控件的顶部对齐;
- android:layout_alignParentBottom 控件的底部与父控件的底部对齐;
- android:layout_alignParentLeft 控件的左部与父控件的左部对齐;
- android:layout_alignParentRight 控件的右部与父控件的右部对齐;
如:
2.相对给定Id控件
例如:android:layout_above=“@id/**”
- android:layout_above 控件的底部置于给定ID的控件之上;
- android:layout_below 控件的底部置于给定ID的控件之下;
- android:layout_toLeftOf 控件的右边缘与给定ID的控件左边缘对齐;
- android:layout_toRightOf 控件的左边缘与给定ID的控件右边缘对齐;
- android:layout_alignBaseline 控件的baseline与给定ID的baseline对齐;
- android:layout_alignTop 控件的顶部边缘与给定ID的顶部边缘对齐;
- android:layout_alignBottom 控件的底部边缘与给定ID的底部边缘对齐;
- android:layout_alignLeft 控件的左边缘与给定ID的左边缘对齐;
- android:layout_alignRight 控件的右边缘与给定ID的右边缘对齐;
例子:
布局代码:
<?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"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="显示相对布局的嵌套"
android:background="@android:color/holo_blue_light"
android:textSize="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:textSize="40dp"
android:background="#fff"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/num1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:padding="20dp"
android:text="1"
android:textSize="20dp"
/>
<Button
android:id="@+id/num2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:layout_toRightOf="@+id/num1"
android:padding="20dp"
android:textSize="20dp"/>
<Button
android:id="@+id/num3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/num2"
android:text="3"
android:padding="20dp"
android:textSize="20dp"/>
<Button
android:id="@+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/num3"
android:text="BACK"
android:padding="20dp"
android:textSize="20dp"/>
<Button
android:id="@+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/back"
android:text="+"
android:padding="20dp"
android:textSize="20dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/num4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:padding="20dp"
android:text="4"
android:textSize="20dp"
/>
<Button
android:id="@+id/num5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:layout_toRightOf="@+id/num4"
android:padding="20dp"
android:textSize="20dp"/>
<Button
android:id="@+id/num6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/num5"
android:text="3"
android:padding="20dp"
android:textSize="20dp"/>
<Button
android:id="@+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/num6"
android:text="("
android:padding="20dp"
android:textSize="20dp"/>
<Button
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/left"
android:text=")"
android:padding="20dp"
android:textSize="20dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/num7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:padding="20dp"
android:text="1"
android:textSize="20dp"
/>
<Button
android:id="@+id/num8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
android:layout_toRightOf="@+id/num7"
android:padding="20dp"
android:textSize="20dp"/>
<Button
android:id="@+id/num9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/num8"
android:text="9"
android:padding="20dp"
android:textSize="20dp"/>
<Button
android:id="@+id/sub"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/num9"
android:text="-"
android:padding="20dp"
android:textSize="20dp"/>
<Button
android:id="@+id/mul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/sub"
android:text="*"
android:padding="20dp"
android:textSize="20dp"/>
</RelativeLayout>
</LinearLayout>
3. 相对布局的居中
例如:android:layout_centerInParent=“true”
- android:layout_centerHorizontal 水平居中;
- android:layout_centerVertical 垂直居中;
- android:layout_centerInParent 父控件的中央;
三、ConstraintLayout约束布局
ConstraintLayout完成了RelativeLayout所做的一切,以及更多,从 Android Studio 2.3 起,官方的模板默认使用 ConstraintLayout。
3.1 常用属性
首先ConstrainLayout跟RelativeLayout很相像,因此其对其的属性也是跟RelativeLayout有异曲同工之妙的:
例:layout_constraintTop_toBottomOf="@+id/TextView1"。即把当前控件的上面约束到TextView1控件的下面。
- layout_constraintLeft_toLeftOf
- layout_constraintLeft_toRightOf
- layout_constraintRight_toLeftOf
- layout_constraintRight_toRightOf
- layout_constraintTop_toTopOf
- layout_constraintTop_toBottomOf
- layout_constraintBottom_toTopOf
- layout_constraintBottom_toBottomOf
- layout_constraintBaseline_toBaselineOf
- layout_constraintStart_toEndOf
- layout_constraintStart_toStartOf
- layout_constraintEnd_toStartOf
- layout_constraintEnd_toEndOf
上面属性中有一个比较有趣的layout_constraintBaseline_toBaselineOf
Baseline指的是文本基线,举个例子:
如图所示,两个TextView的高度不一致,但是又希望他们文本对齐,这个时候就可以使用layout_constraintBaseline_toBaselineOf,代码如下:
<TextView
android:id="@+id/TextView1"
.../>
<TextView
android:id="@+id/TextView2"
...
app:layout_constraintLeft_toRightOf="@+id/TextView1"
app:layout_constraintBaseline_toBaselineOf="@+id/TextView1"/>
效果如下:
3.2 角度定位
角度定位指的是可以用一个角度和一个距离来约束两个空间的中心。举个例子:
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/TextView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintCircle="@+id/TextView1"
app:layout_constraintCircleAngle="120"
app:layout_constraintCircleRadius="150dp" />
上面例子中的TextView2用到了3个属性:
app:layout_constraintCircle="@+id/TextView1"
app:layout_constraintCircleAngle="120"(角度)
app:layout_constraintCircleRadius="150dp"(距离)
指的是TextView2的中心在TextView1的中心的120度,距离为150dp,效果如下:
四、FrameLayout帧布局
FrameLayout(帧布局)可以说是六大布局中最为简单的一个布局,这个布局直接在屏幕上开辟出一块空白的区域,当我们往里面添加控件的时候,会默认把他们放到这块区域的左上角,而这种布局方式却没有任何的定位方式,所以它应用的场景并不多;帧布局的大小由控件中最大的子控件决定,如果控件的大小一样大的话,那么同一时刻就只能看到最上面的那个组件!后续添加的控件会覆盖前一个!虽然默认会将控件放置在左上角,但是我们也可以通过layout_gravity属性,指定到其他的位置!第一个添加的控件被放在最底层,最后一个添加到框架布局中的视图显示在最顶层,上一层的控件会覆盖下一层的控件。这种显示方式有些类似于堆栈。
4.1 常用属性
FrameLayout的属性很少就两个,但是在说之前我们先介绍一个东西:
前景图像:永远处于帧布局最上面,直接面对用户的图像,就是不会被覆盖的图片。
两个属性:
- android:foreground:*设置帧布局容器的前景图像
- android:foregroundGravity:设置前景图像显示的位置
例子:
代码:
<?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:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#FF6143" />
<TextView
android:layout_gravity="center"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="#7BFE00" />
<TextView
android:layout_gravity="center"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#FFFF00" />
</FrameLayout>
五、AbsoluteLayout绝对布局
绝对布局又称坐标布局,
指定控件的绝对位置,简单直接,直观性强,需要指定子元素的 xy 精确坐标的布局,但是手机屏幕尺寸差别较大,适应性差,Android 1.5已弃用,可以用RelativeLayout替代。
六、GridLayout 网格布局
6.1 常用属性
- columnCount 表示布局有几列
- rowCount 表示布局有几行
- layout_columnSpan 表示此控件横跨了多少列
- layout_rowSpan 表示此控件横跨了多少行
例子:
代码:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:columnCount="4"
android:rowCount="6"
android:orientation="horizontal"
>
<TextView
android:layout_columnSpan="4"
android:layout_gravity="fill"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#FFCCCC"
android:text="0"
android:textSize="50sp" />
<Button
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:text="回退" />
<Button
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:text="清空" />
<Button android:text="+" />
<Button android:text="1" />
<Button android:text="2" />
<Button android:text="3" />
<Button android:text="-" />
<Button android:text="4" />
<Button android:text="5" />
<Button android:text="6" />
<Button android:text="*" />
<Button android:text="7" />
<Button android:text="8" />
<Button android:text="9" />
<Button android:text="/" />
<Button
android:layout_width="wrap_content"
android:text="." />
<Button android:text="0" />
<Button android:text="=" />
</GridLayout>