0.前言
之前简要总结了LinearLayout(线性布局)的一些知识,今天来分享一个更容易满足平时的一些需求的布局方式——RelativeLayout(相对布局)
1.常用属性
属性名 | 意义 |
---|---|
gravity | 该组件所含子组件在其内部的对齐方式 |
ignoreGravity | 若设置为true,该组件将不会受之前父容器gravity设置值的影响 |
下面是一些根据 父元素(RelativeLayout) 定位的常用属性:
属性名 | 意义 |
---|---|
layout_margin | 相对父元素上、下、左、右的偏移值 |
layout_marginTop | 相对父元素上侧的偏移值 |
layout_marginLeft | 相对父元素左侧的偏移值 |
layout_marginBottom | 相对父元素下侧的偏移值 |
layout_marginRight | 相对父元素右侧的偏移值 |
在未设置margin
相关的属性时,组件是默认出现在左上方的,特别需要注意的是: 在使用marginBottom
和marginRight
的时候,如果设置的值过小,组件依然会出现在左上方。
下面的属性也是相对父元素的,设置为true
生效:
属性名 | 意义 |
---|---|
layout_centerInParent | 使组件处于父元素正中心 |
layout_centerHorizontal | 使组件水平居中 |
layout_centerVertical | 使组件垂直居中 |
对齐方式:
属性名 | 意义 |
---|---|
layout_alignParentLeft | 左对齐 |
layout_alignParentRight | 右对齐 |
layout_alignParentTop | 顶部对齐 |
layout_alignParentBottom | 底部对齐 |
下面是相对兄弟组件定位的属性,这类属性在使用时需指明参考组件的id:
属性名 | 意义 |
---|---|
layout_above | 相对兄弟组件的上方 |
layout_below | 相对兄弟组件的下方 |
layout_toLeftOf | 相对兄弟组件的左侧 |
layout_toRightOf | 相对兄弟组件的右侧 |
layout_alignTop | 相对兄弟组件的上边界对齐 |
layout_alignBottom | 相对兄弟组件的下边界对齐 |
layout_alignLeft | 相对兄弟组件的左边界对齐 |
layout_alignRight | 相对兄弟组件的右边界对齐 |
上面四种和下面四种是完全不同的属性,举个栗子:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00FFFF">
<Button
android:id="@+id/test"
android:layout_centerInParent="true"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#FF1493" />
<!--注意下面这两个按钮的不同之处-->
<Button
android:layout_alignBottom="@id/test"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#FF1400" />
<Button
android:layout_below="@id/test"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#0000cd" />
</RelativeLayout>
preview
而且我们还可以发现,并不是设置了
layout_below
的参考组件id,该组件就会出现在参考组件的正下方,而是下方的左侧,若想实现正下方效果,还得加个在父元素中水平居中:
android:layout_centerHorizontal="true"
下面是设置内边距的属性,可以个margin系列的属性类比:
属性名 | 意义 |
---|---|
padding | 上下左右的内边距 |
paddingLeft | 左侧的内边距 |
paddingRight | 右侧的内边距 |
paddingTop | 上侧的内边距 |
paddingBottom | 下侧的内边距 |
举个栗子:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00FFFF">
<TextView
android:id="@+id/testText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="默认的TextView"/>
<TextView
android:layout_below="@id/testText"
android:padding="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="改动的TextView"/>
</RelativeLayout>
preview2
2.使用相对布局实现一个九宫格效果
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00FFFF">
<Button
android:id="@+id/centerB"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#000000"
android:layout_centerInParent="true">
<Button
android:id="@+id/leftB"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#006600"
android:layout_centerVertical="true"
android:layout_toLeftOf="@id/centerB"/>
<Button
android:id="@+id/rightB"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#0000cd"
android:layout_centerVertical="true"
android:layout_toRightOf="@id/centerB"/>
<Button
android:id="@+id/topB"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#FF1493"
android:layout_centerHorizontal="true"
android:layout_above="@id/centerB" />
<Button
android:id="@+id/bottomB"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#4169E1"
android:layout_centerHorizontal="true"
android:layout_below="@id/centerB"/>
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#F8F8FF"
android:layout_above="@id/leftB"
android:layout_toLeftOf="@id/topB"/>
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#ff0000"
android:layout_below="@id/leftB"
android:layout_toLeftOf="@id/bottomB"/>
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#ffff00"
android:layout_above="@id/rightB"
android:layout_toRightOf="@id/topB"/>
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#00ff00"
android:layout_below="@id/rightB"
android:layout_toRightOf="@id/bottomB"/>
</RelativeLayout>
preview3
如有错误,欢迎指正~
网友评论