目录
Android LinearLayout 线性布局
XML 属性
LinearLayout 几个重要的 XML 属性
LinearLayout.LayoutParams XML 属性
divider (分割线)
Android RelativeLayout 相对布局
RelativeLayout 布局属性
TableLayout ( 表格布局 )
TableRow 子控件的主要属性
Android LinearLayout 线性布局
LinearLayout(线性布局)是Android中常用的布局之一,它按照水平或垂直方向排列其子视图。LinearLayout可以设置为水平(horizontal)或垂直(vertical)布局。子视图会按照它们在布局中的顺序依次排列。
当LinearLayout的子视图在水平方向排列时,它们会水平摆放,而在垂直方向排列时,它们会垂直摆放。默认情况下,LinearLayout的子视图是从左到右水平排列或从上到下垂直排列。
在使用LinearLayout时,如果视图的内容超过了屏幕的宽度(对于水平布局)或高度(对于垂直布局),则超出部分将被截断,不会自动换行。
XML 属性
LinearLayout 几个重要的 XML 属性
xml 属性 | 说明 |
---|---|
android:id | 为组件设置一个资源id,使得在Java代码中可以通过findViewById(id)找到该组件。这个id通常用于在运行时引用布局中的特定组件。 例如: android:id="@+id/myButton" |
android:background | 为组件设置一个背景图片或者背景色。可以使用颜色值或者引用资源文件。 例如: android:background="#FF0000" <!-- 使用颜色值 --> |
android:layout_width | 设置布局的宽度。,通常不直接写数字值,而是使用wrap_content表示组件实际大小,而fill_parent或match_parent表示填满父容器。 例如:android:layout_width="wrap_content" |
android:layout_height | 设置布局的高度。,通常不直接写数字值,而是使用wrap_content表示组件实际大小,而fill_parent或match_parent表示填满父容器。 例如:android:layout_height="wrap_content" |
android:baselineAligned | 当该属性为false时,会阻止布局管理器与其子元素的基线对齐。 例如:android:baselineAligned="false" |
android:divider | 设置垂直布局时,两个按钮之间的分隔条。通常用于设置LinearLayout中子视图之间的分隔线。 例如:android:divider="@android:color/darker_gray" |
android:gravity | 设置布局管理器内组件的对齐方式,可以设置为top、bottom、left、right、center_vertical、fill_vertical等。控制子视图在父视图中的位置。 例如:android:gravity="center" |
android:measureWithLargestChild | 当属性设置为true时,所有带权重的子元素都会具有最大元素的最小尺寸。 例如:android:measureWithLargestChild="true" |
android:orientation | 设置布局管理器内组件的排列方式,可以设置为vertical(垂直,默认)或horizontal(水平)。 例如:android:orientation="vertical" |
LinearLayout.LayoutParams XML 属性
LinearLayout.LayoutParams是用于在XML布局文件中设置LinearLayout子视图的布局参数的属性。以下是两个与LinearLayout相关的LayoutParams属性:
xml 属性 | 说明 |
---|---|
android:layout_gravity | 用于指定该布局管理器内子组件的布局方式。它控制子视图在LinearLayout中的对齐方式,而不是子视图内部的对齐方式。可以设置为top、bottom、left、right、center_vertical、fill_vertical等。 |
android:layout_weight | 用于指定该子元素在LinearLayout中所占的权重。权重越大,子元素在可用空间中占据的比例就越大。 |
实例:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#ff0000"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#00ff00"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#00ffff"
android:layout_weight="1"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#0000ff"
android:layout_weight="1"
android:id="@+id/cyan"
android:orientation="horizontal" />
</LinearLayout>
package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.ViewAnimator;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LinearLayout li =
(LinearLayout) findViewById(R.id.cyan);
LinearLayout.LayoutParams ly = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.MATCH_PARENT,2);
li.setLayoutParams(ly);
}
}
运行结果如下
divider (分割线)
xml 属性 | 说明 |
---|---|
android:divider | 该属性用于设置 LinearLayout 的分割线图片。可以指定一个Drawable资源作为分割线。 |
android:showDividers | 该属性设置分割线所在的位置,有四个可选值:none(无分割线)、middle(在子视图之间)、begin(在第一个子视图之前)和 end(在最后一个子视图之后)。 |
android:dividerPadding | 该属性设置分割线的内边距,即分割线与子视图之间的间距。 |
实例:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@drawable/sep"
android:orientation="vertical"
android:showDividers="middle"
android:dividerPadding="10dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="登录" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="注册" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="忘记密码" />
</LinearLayout>
运行结果如下
Android RelativeLayout 相对布局
在Android布局设计中,LinearLayout的权重属性(layout_weight)常用于实现等比例划分,特别在处理屏幕适配性方面非常有帮助。然而,当布局较为复杂或涉及到嵌套多层LinearLayout时,可能会导致UI Render的效率降低,进而影响应用的性能。
嵌套多层LinearLayout可能会引起以下问题:
- 性能问题: 嵌套布局会增加视图层级,每一层都需要进行测量(measure)、布局(layout)和绘制(draw)的操作,从而导致性能下降。
- 资源占用: 每个View都需要占用系统资源,过多的嵌套可能导致系统资源的消耗增加。
- 可读性差: 过多的嵌套可能会使布局文件变得复杂,降低代码的可读性和维护性。
相对而言,RelativeLayout在某些情况下确实能够更简洁地实现复杂的布局,通过相对定位、margin和padding等属性,可以减少布局的层级,提高UI渲染效率。在特定情境下,RelativeLayout可能是更合适的选择。
最佳实践往往是根据具体情况综合考虑使用LinearLayout和RelativeLayout,权衡布局的复杂度和性能要求。使用LinearLayout的layout_weight属性时,确保不滥用,避免不必要的层级嵌套。
RelativeLayout 布局属性
相对布局 (RelativeLayout) 有很多属性,我们把它们归于以下几类
-
基本属性
XML 属性 说明 android:gravity 用于设置容器内组件的排序方式。这个属性可以设置在 RelativeLayout 或其子视图上。它决定了子视图在容器中的对齐方式,类似于 LinearLayout 中的 android:gravity 属性,但在 RelativeLayout 中,这个属性影响的是整个容器的对齐方式。
以下是一些常见的 android:gravity 属性值:
- center:将组件在容器中居中对齐。
- center_horizontal:水平方向上居中对齐。
- center_vertical:垂直方向上居中对齐。
- start:在水平方向上靠近容器的起始位置对齐。
- end:在水平方向上靠近容器的结束位置对齐。
- top:在垂直方向上靠近容器的顶部对齐。
- bottom:在垂直方向上靠近容器的底部对齐。
- left:在水平方向上靠近容器的左侧对齐。
- right:在水平方向上靠近容器的右侧对齐。
你还可以通过使用竖线(|)将多个对齐方式组合在一起,
例如:
center_vertical | right:垂直方向上居中对齐,水平方向上靠近容器的右侧对齐。
android:ignoreGravity 如果设置该属性为 true,将忽略 android:gravity 属性。默认情况下,android:ignoreGravity 的值为 false。 -
根据父容器定位属性
XML 属性 说明 android:layout_alignParentLeft 当设置为 true 时,该属性使子视图左对齐父容器 android:layout_alignParentRight 当设置为 true 时,该属性使子视图右对齐父容器 android:layout_alignParentTop 当设置为 true 时,该属性使子视图顶部对齐父容器 android:layout_alignParentBottom 当设置为 true 时,该属性使子视图底部对齐父容器 android:layout_centerHorizontal 当设置为 true 时,该属性使子视图在父容器中水平居中 android:layout_centerVertical 当设置为 true 时,该属性使子视图在父容器中垂直居中 android:layout_centerInParent 当设置为 true 时,该属性使子视图在父容器的居中位置 -
根据兄弟组件定位属性
XML 属性 说明 android:layout_toLeftOf 紧贴参考组件的左边 android:layout_toRightOf 紧贴参考组件的右边 android:layout_above 紧贴参考组件的上方 android:layout_below 紧贴参考组件的下方 android:layout_alignTop 对齐参考组件的上边界 android:layout_alignBottom 对齐参考组件的下边界 android:layout_alignLeft 对齐参考组件的左边界 android:layout_alignRight 对齐参考组件的右边界 -
设置外边距(偏移)属性
XML 属性 说明 android:layout_maring 设置组件上下左右的偏移量,可以使用一个数值(比如:10dp)指定所有边的偏移值,也可以使用四个数值分别指定左、上、右、下的偏移值。 android:layout_marginLeft 设置组件左边的偏移量 android:layout_marginRight 设置组件右边的偏移量 android:layout_marginTop 设置组件上边的偏移量 android:layout_marginBottom 设置组件下边的偏移量 -
设置内边距(填充)属性
XML 属性 说明 android:padding 设置组件上下左右的填充,可以使用一个数值(比如:10dp)指定所有边的填充值,也可以使用四个数值分别指定左、上、右、下的填充值。 android:paddingLeft 设置组件左边的填充 android:paddingRight 设置组件右边的填充 android:paddingTop 设置组件上边的填充 android:paddingBottom 设置组件下边的填充
几大属性的关系
虽然这些属性是用于控制布局和位置的不同方面,但在某些情况下确实可以达到相似的效果。下面是一些关于这几个属性的注意事项:
父组件内边距和子组件外边距: 设置父组件的内边距可以影响父组件内部的所有子组件,使它们离父组件的边界产生一定距离。另一方面,设置子组件的外边距可以影响该子组件与其周围的父组件或其他兄弟组件之间的距离。虽然两者可以实现类似的效果,但其作用范围和影响方式是不同的。
相对位置的设置: 通过设置一个组件相对于另一个组件的位置,可以使用属性如 android:layout_toLeftOf、android:layout_above 等。这些属性允许你根据其他组件的位置来定位当前组件。然而,通过设置一个组件的外边距也可以达到相似的效果,将其位置调整到相对的方向。这种方法可能会涉及到更多的边距计算,但在某些情况下可以是一种替代方案。
总体而言,这些属性提供了不同的灵活性和用途,可以根据具体的布局需求选择适当的属性来实现所期望的效果。在实际开发中,经验丰富的开发者会根据具体情况选择最合适的布局方式和属性,以确保布局的效果和性能都得到良好的平衡。
实例
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- 这个是在容器中央的 -->
<ImageView
android:id="@+id/center"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_centerInParent="true"
android:src="@drawable/baseline_favorite_24"/>
<!-- 在中间图片的左边 -->
<ImageView
android:id="@+id/left"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_toLeftOf="@id/center"
android:layout_centerVertical="true"
android:src="@drawable/left"/>
<!-- 在中间图片的右边 -->
<ImageView
android:id="@+id/right"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_toRightOf="@id/center"
android:layout_centerVertical="true"
android:src="@drawable/right"/>
<!-- 在中间图片的上面-->
<ImageView
android:id="@+id/top"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_above="@id/center"
android:layout_centerHorizontal="true"
android:src="@drawable/top"/>
<!-- 在中间图片的下面 -->
<ImageView
android:id="@+id/bottom"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_below="@id/center"
android:layout_centerHorizontal="true"
android:src="@drawable/bottom"/>
</RelativeLayout>
运行结果如下
TableLayout ( 表格布局 )
TableLayout 是用于在 Android 中创建表格布局的容器。以下是主要的属性和相关说明:
属性 | 说明 |
---|---|
android:collapseColumns |
|
android:shrinkColumns |
|
android:stretchColumns |
|
android:layout_column |
|
android:layout_span |
|
注意事项:
TableLayout 中的子控件可以是 TableRow 或其他 View。
子控件的 android:layout_width 属性被系统固定为 match_parent。
在 TableLayout 中,每一列的宽度的最大值是该列中所有行的最大宽度。
TableRow 子控件的主要属性
在 TableRow 中,子控件的一些主要属性用于指定它们在表格布局中的位置和占据的列数。以下是这些属性的说明:
属性 | 说明 |
---|---|
android:layout_column="1" | 该控件显示在第1列 |
android:layout_span="2" | 该控件占据2列 |
代码实例
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<!-- 用户名行 -->
<TableRow>
<TextView
android:layout_column="1"
android:text="用户名:" />
<EditText
android:layout_column="2"
android:hint="请输入用户名" />
</TableRow>
<!-- 密码行 -->
<TableRow>
<TextView
android:layout_column="1"
android:text="密码:" />
<EditText
android:layout_column="2"
android:inputType="textPassword"
android:hint="请输入密码" />
</TableRow>
<!-- 记住密码和忘记密码行 -->
<TableRow>
<CheckBox
android:layout_column="1"
android:text="记住密码" />
<TextView
android:layout_column="2"
android:text="忘记密码?"
android:textColor="@android:color/holo_blue_dark"
android:onClick="onForgetPasswordClick"
android:clickable="true"/>
</TableRow>
<!-- 登录按钮行 -->
<TableRow>
<Button
android:layout_column="1"
android:layout_span="2"
android:text="登录"
android:layout_gravity="center"
android:onClick="onLoginButtonClick" />
</TableRow>
</TableLayout>
运行结果如下