Android百分比布局

Android中对控件布局指定尺寸时,一般有两种方式:一种设定为自适应布局,即match_parent(fill_parent)或者wrap_content,通过根据父布局大小或者自己内容来产生一个动态尺寸;另外一种通过指定一个具体数值的方式定义成固定布局,单位可以是px/dp/sp等。这在绝大数情况下是可以解决问题的。

可是有没有办法像div+css里那样根据屏幕的尺寸,对控件布局进行“百分比”设定呢?这时就需要用到LinearLayout和他的子控件属性layout_weight。“layout_”前缀告诉我们此属性依赖于他的父布局。LinearLayout(线性布局)我们知道主要是让他的子控件实现并排或者并列的布局效果,一般子控件的大小是根据自身内容或者一个具体数值尺寸。而layout_weight(权重)属性则是表示当前控件在他的父布局的“剩余空间”中所占的比重(或者叫“比例”、“百分比”)。初看这段话可能不太好理解,我们看例子。

1.layout_weight值

我们希望下面两个按钮各占屏幕的一半:

竖屏效果 横屏效果

那么只需要把两个按钮“layout_weight”值设成相等值(比如:1),并且把“layout_width”设成“0dp”,如下代码:

[html] view plain copy

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:orientation="horizontal">
  5. <Button
  6. android:layout_width="0dp"
  7. android:layout_height="wrap_content"
  8. android:layout_weight="1"
  9. android:text="A"
  10. android:background="#fdb6b6"/>
  11. <Button
  12. android:layout_width="0dp"
  13. android:layout_height="wrap_content"
  14. android:layout_weight="1"
  15. android:text="B"
  16. android:background="#b6d5fd"/>
  17. </LinearLayout>

我们把LinearLayout的总空间(其实应该叫“剩余空间”,我们下面再说)看作100%,那么设定了“layout_weight”值的总和就代表100%。这里有两个控件设置了layout_weight(分别为1),所以值2就相当于100%空间。而按钮设定的值1就相当于 1 / 2 = 50%,代表当前控件占总空间的50%。因为LinearLayout的layout_width=“match_parent”,所以就相当于屏幕的50%。

既然如此,那么layout_weight具体是什么数值无所谓了,只要保证两个按钮的值相等就能实现各占50%了,我们把两个按钮的layout_weight同时设成“0.5”或者“2”看看,验证我们的推想。那么可不可以把layout_weight同时设成“0”?当然不行!layout_weight默认就是0,表示权重不起作用,控件依赖具体的layout_width或者layout_height起作用。

还有另一个问题,“layout_width”一定要设成“0dp”吗?一定要!,具体为什么,第四部分专门介绍。现在只要知道,如果我们平行百分比分割屏幕就要把“layout_width”设成“0dp”,而需要垂直百分比分割就把“layout_height”设成“0dp”。

 

2.weightSum值

如果我们只有一个按钮,希望占屏幕的50%并且在中间,如下面的效果:

竖屏效果 横屏效果

我们只有一个控件可以设置layout_weight属性,而不管我们设多少,他都代表100%。这时父布局(LinearLayout)中的weightSum属性就可以大显身手了。weightSum的值就代表父布局的100%总空间,这是我们把LinearLayout的“weightSum”属性设置为“1”,按钮的“layout_weight”设置为“0.5”:

[html] view plain copy

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:orientation="horizontal"
  5. android:gravity="center"
  6. android:weightSum="1">
  7. <Button
  8. android:layout_width="0dp"
  9. android:layout_height="wrap_content"
  10. android:layout_weight="0.5"
  11. android:text="A"
  12. android:background="#fdb6b6"/>
  13. </LinearLayout>

其实weightSum一直存在,只是我们不设置时,默认为所有子控件“layout_weight”值的总和,就像第一部分介绍的样子。

3.剩余空间

前面我们提到layout_weight其实分割的是父空间的“剩余空间”,那么具体指的是哪部分空间呢?我们看个例子:

最右边的按钮的空间大小是根据其内容设置的,而左边的两个按钮则各占剩下空间的50%,这里的剩下空间就是我们一直说的“剩余空间”。在LinearLayout布局中首先把layout_weight=0(即没有设置layout_weight属性)的控件所占的空间去掉(这部分控件已经通过具体的layout_width和layout_height值指定了空间大小),再将剩下的空间交给设定了layout_weight值的控件按比百分比进行分割。而在前面两个例子中,因为全是设定了layout_weight的控件,所以“剩余空间”正好等于父布局的总空间了。本例的代码:

[html] view plain copy

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:orientation="horizontal">
  5. <Button
  6. android:layout_width="0dp"
  7. android:layout_height="wrap_content"
  8. android:layout_weight="1"
  9. android:text="A"
  10. android:background="#fdb6b6"/>
  11. <Button
  12. android:layout_width="0dp"
  13. android:layout_height="wrap_content"
  14. android:layout_weight="1"
  15. android:text="B"
  16. android:background="#b6d5fd"/>
  17. <Button
  18. android:layout_width="wrap_content"
  19. android:layout_height="wrap_content"
  20. android:text="CCCC"
  21. android:background="#b6fdc5"/>
  22. </LinearLayout>

4.layout_width或layout_height的值

第一部分介绍到如果需要通过layout_weight来设置控件尺寸,一定要把layout_width或layout_height的值设定为“0dp”。那如果不这样做会怎样?我们先看第一个例子代码:

[html] view plain copy

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:orientation="horizontal">
  5. <Button
  6. android:layout_width="wrap_content"
  7. android:layout_height="wrap_content"
  8. android:layout_weight="1"
  9. android:text="A"
  10. android:background="#fdb6b6"/>
  11. <Button
  12. android:layout_width="wrap_content"
  13. android:layout_height="wrap_content"
  14. android:layout_weight="1"
  15. android:text="B"
  16. android:background="#b6d5fd"/>
  17. </LinearLayout>

将其中的layout_width设置成“wrap_content ”,看看运行效果:

如像设置了也没有影响啊,我们将右边的控件文字设长一点,再看看效果:

这时发现右边的控件被文字内容撑宽了,而不是我们希望的各50%,而如果将layout_width仍然改为“0dp”,则一切正常:

我们再看第二个例子,有三个按钮控件,其中A按钮占 50%,B和C按钮分别占25%,如下图:

如果我们把这三个按钮的layout_width属性都设成“math_parent”:

[html] view plain copy

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:orientation="horizontal">
  5. <Button
  6. android:layout_width="match_parent"
  7. android:layout_height="wrap_content"
  8. android:layout_weight="2"
  9. android:text="A"
  10. android:background="#fdb6b6"/>
  11. <Button
  12. android:layout_width="match_parent"
  13. android:layout_height="wrap_content"
  14. android:layout_weight="1"
  15. android:text="B"
  16. android:background="#b6d5fd"/>
  17. <Button
  18. android:layout_width="match_parent"
  19. android:layout_height="wrap_content"
  20. android:layout_weight="1"
  21. android:text="C"
  22. android:background="#b6fdc5"/>
  23. </LinearLayout>

会是什么效果呢?

时间: 2024-08-06 06:30:47

Android百分比布局的相关文章

Android 百分比布局库扩展 为了适配而改写

转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Android 百分比布局库(percent-support-lib) 解析与扩展中对percent-support这个库进行了解析和添加了PercentLinearLayout的支持. 那么为什么本篇博客的存在的意义是什么呢? 首先我们回顾下百分比布局库的用法,提供了PercentRelativeLayo

Android百分比布局支持库介绍——com.android.support:percent

在此之前,相信大家都已经对Android API所提供的布局方式非常熟悉了.也许在接触Android的时候都有过这样的想法,如果可以按照百分比的方式进行界面布局,这样适配各种屏幕就简单多了吧!!以前的一个小梦想,现在终于得以实现,谷歌正式提供百分比布局支持库(percent-support-lib). <ignore_js_op> 获取支持库: 使用Android studio在build.gradle添加以下信息就可以获取支持库,当然了,如果你没有下载到该支持库会提示你下载. [AppleS

Android百分比布局成功导入及简单使用

最近学习第一行代码第二版这本书,里面有介绍百分比布局的使用,经过一番摸索,终于是成功导入了百分比布局 就是这样,appcompat是25.3.1,那么百分比布局percent也是25.3.1 这样便是配置成功了,之后直接使用在textview或者是button等控件使用app:layout_heightPercent和app:layout_widthPercent两个属性便是可以了 这一行是是否重要的 xmlns:app="http://schemas.android.com/apk/res-a

Android 百分比布局库(percent-support-lib) 解析与扩展

idxkhrsoyl.mag.mybaby.com.cn/wylcvzaxir.mag.mybaby.com.cn/vofjbsfzzq.mag.mybaby.com.cn/bpqccmjsjl.mag.mybaby.com.cn/fbiwzmrxky.mag.mybaby.com.cn/jgbhxguvpu.mag.mybaby.com.cn/hjwkryckpq.mag.mybaby.com.cn/ndprddekmr.mag.mybaby.com.cn/kcncwrjsqm.mag.myb

Android 屏幕适配(二)增强版百分比布局库(percent-support-lib)

转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Android 百分比布局库(percent-support-lib) 解析与扩展中对percent-support这个库进行了解析和添加了PercentLinearLayout的支持. 那么为什么本篇博客的存在的意义是什么呢? 首先我们回顾下百分比布局库的用法,提供了PercentRelativeLayo

Android Support库百分比布局

之前写过一篇屏幕适配的文章Android 屏幕适配最佳实践,里面提到了类似百分比布局的东西,但是该方法缺点很明显,就会增加很多无用的数据,导致apk包变大. 而谷歌的support库中,增加了一个叫做percent库,该库在如图目录下,如果没有,请使用sdk manager更新至最新 在使用前,我们先看下这个库有哪些类 很显里面有一个FrameLayout布局的子类和RelativeLayout布局的子类,此外还有一个Helper类,这个Helper类主要是完成百分比的测量工作,里面有一个接口P

Android添加百分比布局库时显示Failed to resolve: com.android.support.percent:问题

这是看第一行代码中遇到的问题,要添加百分比布局库的依赖时要在app下的bulid.gradle添加以下代码 implementation fileTree(dir:'libs',include:['*.jar'])implementation 'com.android.support:appcompat-v7:28.0.0'implementation 'com.android.support:percent:28.0.0' testCompile 'junit:junit:4.12' 注意这一

Android可伸缩布局-FlexboxLayout(支持RecyclerView集成)

Android可伸缩布局-FlexboxLayout(支持RecyclerView集成) 1 . 前言 前几天看到Google官方的博客介绍了Google开源的一个强大的布局-FlexboxLayout,看见第一眼我心里的想法是,卧槽,Android 居然有这么一个强大的布局.作为一个有好奇心的工程狮,当然第一时间就去试了试手,效果非常赞,因此这篇文章就介绍一下它的用法和最新版添加的一些特性(支持集成RecyclerView),Github地址:https://github.com/google

Android:percent 布局

Android 新引入的布局,百分比布局,Percent 布局 主要分为两种:PercentFrameLayout he PercentRelativeLayout 布局 通过 support 库引入, 在 module 的 gradle 中加入 compile:com.android.support.percent:24.2.1 主要新加入的属性: app:layout_widthPercent app:layout_heightPercent 不需要指定宽和高了,只需要指定在父布局的百分比,