LinearLayout 中不得不说的几个重要属性

2018-10-27  本文已影响0人  疾风魔狼

LinearLayout 中不得不说的几个重要属性

原文链接  zhooker.github.io

关于LinearLayout

LinearLayout 在布局使用中比较频繁,一般可以设置成horizontal(横向)、vertical(竖向)两个方向,不过LinearLayout还有如下几个重要的属性,了解这几个属性可以让我们更加全面地认识linearLayout的真正功能。

1、weight 属性

weight属性意思是占比,就是占用的空间的大小,其实它的真正意义是剩余空间的占比。比如我们添加两个TextView,其中的text1添加android:layout_weight="1",text2添加android:layout_weight="2",如下设置:

< 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:gravity="center"

        android:layout_weight="1"

        android:background="#FF0000"

        android:text="text1" />

    < TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:layout_weight="2"

        android:background="#00FF00"

        android:text="text2" />

< /LinearLayout>

结果会发现text2的宽度差不多是text1的两倍。假设每个text的宽度是120px , 那么在1080P的屏幕上,刚开始剩余空间是840px,text1的weight占1,text2的weight占2,所以text1的宽度是 120 + 840 / 3 = 400px,text2的宽度是 120 + 840 * 2 / 3 = 680px ,text2的宽度确实比text1大,这与程序运行结果一样。

那么通过上面的示例,你是不是觉得weight越大占用的空间就越大呢? 当然不是。如果我们把text1和text2都设置成match_parent 那会怎样呢 :

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

        android:layout_height="wrap_content"

        android:gravity="center"

        android:layout_weight="1"

        android:background="#FF0000"

        android:text="text1" />

    < TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:layout_weight="2"

        android:background="#00FF00"

        android:text="text2" />

< /LinearLayout>

结果显示text1的宽度比text2的还大,但是明明text1 的weight比text2的weight小阿,其实这和上面的计算方式一样的,一开始text1和text2都是match_parent,所以各占用1080px,那剩余空间是1080 - 10802 = -1080px ,是个负数。text1的weight是1,所以text1的宽度是 1080 + (-1080)/3 = 720px ,而text2的是weight是2,所以text2的宽度是 1080 + (-1080) 2 / 3 = 360px ,所以text1的宽度比text2的还大。

其实用LinearLayout+ weight可以代替一些RelativeLayout才能做的功能,比如我们要做一个自适应的布局,左右两个按钮,可以根据屏幕的大小适应,左按钮始终最左边,右按钮始终在最右边,像下面这样:

这是很常见的需求,这个小布局有多种实现方式 :

第一种,最简单就是用RelativeLayout,设置layout_alignParentLeft="true"与layout_alignParentRight="true"就可以了。

第二种,也可以用FrameLayout,通过设置layout_gravity属性来实现,比如 :

< FrameLayout 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:gravity="center"

        android:background="#FF0000"

        android:layout_gravity="left"

        android:text="左" />

    < Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:background="#00FF00"

        android:layout_gravity="right"

        android:text="右" />

< /FrameLayout>

上面代码也可以实现让两个控件位居左右并自适应屏幕。那么我们的LinearLayout是否也可以这样呢,在LinearLayout中设置layout_gravity是无效的,因为LinearLayout是线性的布局,必须从左到右或从上到下的顺序,要想位居左右必须有控件占满中间的部分,所以第三种方法就是利用LinearLayout + Space来实现 :

< 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:gravity="center"

        android:background="#FF0000"

        android:text="左" />

    < Space

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        />

    < Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:background="#00FF00"

        android:text="右" />

< /LinearLayout>

这代码巧妙的地方是利用Space设置weight为1来占满剩余空间,从而实现效果。

2、weightSum 属性

weightSum属性与weight属性有很大关系,通过weightSum控制weight的最大占比。比如我们这样设置 :

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:weightSum="3"

    android:orientation="horizontal">

    < TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:layout_weight="1"

        android:background="#FF0000"

        android:text="text1" />

 

    < TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:layout_weight="1"

        android:background="#00FF00"

        android:text="text2" />

< /LinearLayout>

text1与text2本来是一样的weight,可是结果它们都没有撑满屏幕。因为weightSum="3",也就是说text1、text2占用的宽度是 120 + 840 / 3 = 400px ,右边还有剩余280px。如果text1与text2的weight超过了weightSum会怎样,我们设置如下看看效果 :

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:weightSum="3"

    android:orientation="horizontal">

    < TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:layout_weight="2"

        android:background="#FF0000"

        android:text="text1" />

    < TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:layout_weight="2"

        android:background="#00FF00"

        android:text="text2" />

< /LinearLayout>

结果发现text2的文字快到屏幕外了,说明text2的宽度超出了屏幕。其实计算方式还是一样的,它们各占剩余空间的 2/3。我们上面说过text1与text2的宽度都是120px,剩余840,那么此时text1的宽度为 120 + 840 * 2 / 3 = 680px ,两个都是 680px,那text2当然被挤到屏幕外去了。

weightSum属性可以用来控制weight属性占用剩余空间的比例。比如我们要做一个布局,一个按钮居中,它宽度是屏幕的一半,还要自适应屏幕,效果如下:

你怎么做? 难道我们要在代码上通过获取屏幕宽度动态设置按钮的宽度吗?还是在xml布局上写死宽度,但是这样要在每个分辨率都适配一个宽度值 … No,No,No,这些方法都很low逼。我们可以利用weightSum属性,代码如下:

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

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:gravity="center"

    android:orientation="horizontal"

    android:weightSum="2">

    < Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:text="按钮" />

< /LinearLayout>

运行代码看到按钮半宽居中,自适应所有分辨率的屏幕,符合要求。注意LinearLayout中设置的android:gravity="center",它让子View居中放置。

3、divider 、showDividers 属性

以往我在设置分割线时,都是新增一个View,用来显示分割线,直到我发现在LinearLayout中添加分割线的新方法。LinearLayout显示分割线主要涉及divider 、showDividers 属性 : android:divider用于设置分割线的样式,可以是xml的drawable也可以是图片。android:showDividers = "middle|end|beginning|none" 其每个选项的作用:

middle 在每一项中间添加分割线

end 在整体的最后一项添加分割线

beginning 在整体的最上方添加分割线

none 不显示分割线

我们先创建一个custom.xml的drawable ,注意设置了宽高,不然是显示不出来的:

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

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

    < solid android:color="@android:color/holo_red_light" />

    < size android:height="12dp" android:width="2dp"/>

< /shape>

设置成android:showDividers = “beginning”时:

设置成android:showDividers = “end”时:

设置成android:showDividers = “middle”时:

还可以组合设置 ,android:showDividers=”beginning|end|middle” ,显示结果:

最后如果大家发现了什么的重要的属性或巧妙的用法,也可以一起交流哈。

参考

在 LinearLayout 添加分割线 divider

Layout_weight 完全解析

上一篇下一篇

猜你喜欢

热点阅读