安卓开发入门教程-常用布局_LinearLayout

关注 安卓007 ,免费获取全套安卓开发学习资料

什么是LinearLayout

LinearLayout又称线性布局,是安卓开发中几个常用的布局之一,使用频率较高,而且非常简单.布局内的控件依次排列,支持横向或纵向排列.

基础样例

1. 纵向排列

效果图

代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本1" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本3" />

</LinearLayout>

代码说明:

  1. 设置android:orientation为vertical,展示方向变成纵向
  2. LinearLayout里面包括了三个显示文本的TextView.

2. 横向排列

效果图

代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    ...
</LinearLayout>

代码说明:

  1. 上面“...”部分内容同上一样例.
  2. 设置android:orientation为horizontal,展示方向变成横向.

3. 调整子控件摆放位置(gravity属性)

通过LinearLayout的android:gravity属性控制其子控件相对于自己的对齐方式.

3.1 水平居中

效果图

代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="水平居中" />
</LinearLayout>

3.2 垂直居中

效果图

代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="垂直居中" />
</LinearLayout>

3.3 水平+垂直居中

效果图

代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="水平+垂直居中" />
</LinearLayout>

其他的还有:
居左(android:gravity="start")
居右(android:gravity="end")
居上(android:gravity="top")
居下(android:gravity="bottom")
组合,如:
下右(android:gravity="bottom|end")
中右(android:gravity="center|end")

4. 调整子控件摆放位置(layout_gravity属性)

LinearLayout里的子控件可以通过layout_gravity属性控制其相对于父控件的对齐方式.

4.1 水平居中

效果图

  1. LinearLayout的排列方式设置为纵向 : android:orientation="vertical"
  2. 子控件设置为水平居中: android:layout_gravity="center_horizontal"

代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="水平居中" />
</LinearLayout>

4.2 垂直居中

效果图

代码

  1. LinearLayout的排列方式设置为横向 : android:orientation="horizontal"
  2. 子控件设置为垂直居中: android:layout_gravity="center_vertical" 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="垂直居中" />
</LinearLayout>

4.3 居下

效果图

代码

  1. LinearLayout的排列方式设置为横向 : android:orientation="horizontal"
  2. 子控件设置为居下: android:layout_gravity="bottom" 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="居下" />
</LinearLayout>

4.3 居右

效果图

代码

  1. LinearLayout的排列方式设置为纵向 : android:orientation="vertical"
  2. 子控件设置为居右: android:layout_gravity="end" 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:text="居右" />
</LinearLayout>

注意事项:

  1. 当LinearLayout的排列方式设置为纵向 ( android:orientation="vertical")时,子控件只能居左/中/右( android:layout_gravity设置为start,center_horizontal,end),而不能上/中/下.因为纵向排列时,在垂直方向上,单个子控件是没有铺满父控件的.
  2. 当LinearLayout的排列方式设置为横向 ( android:orientation="horizontal")时,子控件只能居上/中/下( android:layout_gravity设置为top,center_vertical,bottom),而不能左/中/右.因为横向排列时,在水平方向上,单个子控件是没有铺满父控件的.

5. 按比例分空间(layout_weight)

LinearLayout里的子控件可以通过layout_weight属性按比例分空间大小(横向或纵向).按照LinearLayout里所有直属子控件(不算子控件的子控件)设置的layout_weight作为总和,各个控件按照自己的layout_weight所占总和比例来分空闲空间(有些控件未设置layout_weight,则按照固定值).

5.1 等分空间

效果图

代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="按钮1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="按钮2" />
</LinearLayout>

代码说明:
1.两个按钮都设置android:layout_weight属性,且值相同,故平分空间.

5.2 按比例分

一个控件保持固定大小,一个占据剩余可用空间.

效果图

代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="按钮1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2" />
</LinearLayout>

代码说明:

  1. 第二个按钮不设置android:layout_weight属性,保持本身大小.
  2. 第一个按钮设置android:layout_weight属性,占据所有剩余可用空间.

基础样例完整源代码

https://gitee.com/cxyzy1/LinearLayoutDemo

常用属性说明

属性名 用途
android:layout_width 设置控件宽度,可设置为:match_parent(和父控件一样),wrap_content(按照内容自动伸缩),设置固定值(如200dp)
android:layout_height 设置控件高度,可设置为:match_parent(和父控件一样),wrap_content(按照内容自动伸缩),设置固定值(如200dp)
android:gravity 控件内子控件对齐方式,可选址:start(居左),end(居右),top(居上),bottom(居下),center_horizontal(水平居中),center_vertical(垂直居中),center(水平和垂直方向都居中)...
android:layout_gravity 控件相对于父控件对齐方式,可选址:start(居左),end(居右),top(居上),bottom(居下),center_horizontal(水平居中),center_vertical(垂直居中),center(水平和垂直方向都居中)...
android:background 设置背景,可以是色值(如#FF0000)或图片等
android:visibility 可选值: visible(显示), invisible(隐藏,但是仍占据UI空间),gone(隐藏,且不占UI空间)
layout_weight LinearLayout所有直属子控件,通过该属性值按比例分剩余可用空间

更多属性及实际效果,可以在开发工具里自行体验.

安卓开发入门教程系列汇总

开发语言学习

Kotlin语言基础

UI控件学习系列

UI控件_TextView
UI控件_EditText
UI控件_Button
UI控件_ImageView
UI控件_RadioButton
UI控件_CheckBox
UI控件_ProgressBar

关注头条号,第一时间获取最新文章:


最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容