为了账号安全,请及时绑定邮箱和手机立即绑定

Android零基础入门第25节:最简单最常用的LinearLayout线性布局

标签:
Android

良好的布局设计对于UI界面至关重要,在前面也简单介绍过,目前Android中的布局主要有6种,创建的布局文件默认为RelativeLayout相对布局,而在前面的示例学习中,我们只是简单利用了一下LinearLayout线性布局,那么接下来分别对其进行详细学习。

                                              

一、认识LinearLayout

线性布局是Android中较为常用的布局方式,使用LinearLayout标签。线性布局主要有两种形式,一种是水平线性布局,一种是垂直线性布局。需要注意的是Android的线性布局不会换行,当组件一个挨着一个地排列到头之后,剩下的组件将不会被显示出来。

下表显示了LinearLayout支持的常用XML属性及相关方法的说明。

LinearLayout 包含的所有子元素都受 LinearLayout.LayoutParams 控制,因此 LinearLayout包含的子元素可以额外指定如如下属性。

·         android:layout_gravity:指定该子元素在LinearLayout中的对齐方式。

·         android:layout_weight:指定该子元素在LinearLayout中所占的权重。

二、LinearLayout详解

 接下来分别从方向、填充模型、权重、对齐、内边距、外边距几个方面来进一步学习LinearLayout 的使用,当然其中一部分也适用于后续布局文件。

1、方向

通过“android:orientation”属性设置线性布局的方向,将值设置为horizontal表示行,设置为vertical表示列,默认为horizontal。

接下来通过一个简单的示例程序来学习LinearLayout 的使用用法。

同样使用WidgetSample工程,继续使用app/main/res/layout/目录下的activity_main.xml文件,在其中填充如下代码片段:

[代码]xml代码:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<?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">

    <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="按钮三"/>

    <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>

运行程序,可以看到效果。

将上面的布局文件activity_main.xml里面的android:orientation属性值修改为horizontal,重新运行程序,可以看到上图右侧所示界面效果。

2、填充模型

在学习UI界面通用属性和方法时,就接触过android:layout_width和android:layout_height两个属性。就由这两个属性控制LinearLayout 的填充模型。

·         android:layout_width:设置LinearLayout 的宽度。

·         android:layout_height:设置LinearLayout 的高度。

这两个值的属性值也有多种取值方式,同前面一样,此处不做赘述。

3、权重

从前面的水平布局图中看到五个按钮并不是平均占据屏幕宽度,如果需要这五个组件平均占据屏幕宽度,就需要使用到权重,可以通过设置android:layout_weight为相应部件分配空间比例。

将上面的示例程序的布局文件修改一下,如下所示:

[代码]xml代码:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

              android:orientation="horizontal"

              android:layout_width="match_parent"

              android:layout_height="match_parent">

    <Button

        android:layout_width="0dp"

        android:layout_weight="1"

        android:layout_height="wrap_content"

        android:text="按钮一"/>

    <Button

        android:layout_width="0dp"

        android:layout_weight="1"

        android:layout_height="wrap_content"

        android:text="按钮二"/>

    <Button

        android:layout_width="0dp"

        android:layout_weight="1"

        android:layout_height="wrap_content"

        android:text="按钮三"/>

    <Button

        android:layout_width="0dp"

        android:layout_weight="1"

        android:layout_height="wrap_content"

        android:text="按钮四"/>

    <Button

        android:layout_width="0dp"

        android:layout_weight="1"

        android:layout_height="wrap_content"

        android:text="按钮五"/>

</LinearLayout>

重新运行程序,可以看到效果。

从上面的程序发现,需要使用layout_weight的视图组件,要根据LinearLayout的orientation属性值将对应的宽度或高度设置为0dp。如果orientation属性值为vertical,layout_weight指宽度,反之为高度。

继续修改布局文件,具体代码如下所示:

[代码]xml代码:

?

001

002

003

004

005

006

007

008

009

010

011

012

013

014

015

016

017

018

019

020

021

022

023

024

025

026

027

028

029

030

031

032

033

034

035

036

037

038

039

040

041

042

043

044

045

046

047

048

049

050

051

052

053

054

055

056

057

058

059

060

061

062

063

064

065

066

067

068

069

070

071

072

073

074

075

076

077

078

079

080

081

082

083

084

085

086

087

088

089

090

091

092

093

094

095

096

097

098

099

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<?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_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">

        <Button

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"

            android:text="按钮一"/>

        <Button

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"

            android:text="按钮二"/>

        <Button

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"

            android:text="按钮三"/>

        <Button

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"

            android:text="按钮四"/>

        <Button

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"

            android:text="按钮五"/>

    </LinearLayout>

 

    <!-- 第二排最后一个默认,其他三个平均分配剩余空间 -->

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">

        <Button

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"

            android:text="按钮一"/>

        <Button

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"

            android:text="按钮二"/>

        <Button

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"

            android:text="按钮三"/>

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="按钮四"/>

    </LinearLayout>

 

    <!-- 第三排按照给定权重比例分配整个宽度 -->

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">

        <Button

            android:layout_width="0dp"

            android:layout_weight="2"

            android:layout_height="wrap_content"

            android:text="按钮一"/>

        <Button

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"

            android:text="按钮二"/>

        <Button

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"

            android:text="按钮三"/>

        <Button

            android:layout_width="0dp"

            android:layout_weight="2"

            android:layout_height="wrap_content"

            android:text="按钮四"/>

    </LinearLayout>

 

    <!-- 第四排先满足指定宽度的组件,然后剩余空间按照权重分配    -->

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">

        <Button

            android:layout_width="100dp"

            android:layout_height="wrap_content"

            android:text="按钮一"/>

        <Button

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"

            android:text="按钮二"/>

        <Button

            android:layout_width="0dp"

            android:layout_weight="2"

            android:layout_height="wrap_content"

            android:text="按钮三"/>

        <Button

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:text="按钮四"/>

    </LinearLayout>

</LinearLayout>

重新运行程序,可以看到效果。

从上图可以看到,在LinearLayout中首先为没有设置layout_weight属性的组件分配空间,然后根据各个视图组件layout_weight属性的值所占比例来分配剩余空间。

以上练习的是水平方向的权重,在垂直方向同理。需要注意的是:layout_weight只能在LinearLayout线性布局中使用,而且只能在LinearLayout中的直接子元素中使用。

到此,LinearLayout线性布局的方向、填充模型和权重已经学习完成,你都掌握了吗?由于内容较多,下一期继续学习LinearLayout线性布局的对齐。

 

今天就先到这里,如果有问题欢迎留言一起探讨,也欢迎加入Android零基础入门技术讨论微信群,共同成长!

原文链接:http://www.apkbus.com/blog-205190-68521.html

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消