Android(安卓)百分比布局支持库介绍
16lz
2021-01-25
在此之前,相信大家都已经对 Android API 所提供的布局方式非常熟悉了。也许在接触 Android 的时候都有过这样的想法,如果可以按照百分比的方式进行界面布局,这样适配各种屏幕就简单多了吧!!以前的一个小梦想,现在终于得以实现,谷歌正式提供百分比布局支持库( percent-support-lib )。
获取支持库: 使用 Android studio 在 build.gradle 添加以下信息就可以获取支持库,当然了,如果你没有下载到该支持库会提示你下载。 [AppleScript] 纯文本查看 复制代码 ?
新的布局组件: 在这个包里面有两个新的容器类 1 、 PercentRelativeLayout
2 、 PercentFrameLayout
在此看来,这两个类很显然是继承自 FrameLayout 和 RelativeLayout 两个容器类。
新的属性设置: 新的容器有了一些设置百分比的属性,下面我们来了解一下:
从命名的方式我们可以知道,原来用某些具体单位(如 dp )的设置现在都可以用百分比的方式进行设置了,例如设置控件的宽度 layout_width 原来我们是这样玩的 android:layout_width="match_parent" 现在用了百分比的属性之后呢,可以这样玩了 app:layout_widthPercent="50%" ,这里的百分比是相对于父容器而言的。
使用介绍: 官方文档地址: https://juliengenoud.github.io/android-percent-support-lib-sample/
在布局的 xml 文件需要添加下面这行来声明 [XML] 纯文本查看 复制代码 ?
官方示例代码: [XML] 纯文本查看 复制代码 ?
上面是官方文档的使用示例代码,但是实际上使用的时候如果没设置控件的宽高是会报错的。
实验的布局代码:
[XML] 纯文本查看 复制代码 ?
布局图1
下面我对百分比布局的属性进行了一些小实验,来验证我的几个问题:
1、layout_marginTopPercent这种类型的参数具体的意义是什么? 答:中间的蓝色 view 设置了我们疑惑的属性 [XML] 纯文本查看 复制代码 ?
然后我们在看看实现的效果,请看布局图 1 。 再将 layout_marginLeftPercent 这类型的属性跟以前我们熟悉的 layout_marginLeft 类型属性对比可知, layout_marginLeftPercent 属性是控件距离左边控件的距离为父类容器的宽度的百分比,其余属性类似。(其实这里不能证明是相对于父容器还是相对于屏幕而言,我们在下面进行证明)
2、控件设置的百分比是相对于屏幕还是相对于父容器而言呢? 答:从上面的实验代码我们基本了解了各种属性的使用,但是不禁疑惑百分比这个是相对父容器而言的吗?也许自然我们就会想到应该是相对于父容器,但是不在实践中证明始终都是不放心的。实践是证明真理的唯一标准!!
好的,其实要证明也很容易。下面我们对容器类的宽度和高度分别进行修改,然后看看显示的情况。 1 )修改高度为定值 300dp [XML] 纯文本查看 复制代码 ?
然后我们看看显示的情况
2 )修改宽度为 200dp [XML] 纯文本查看 复制代码 ?
再看看效果
实验结论: 从实验结果可知,百分比布局设置的属性都是相对于父容器而言的。
最后:
获取支持库: 使用 Android studio 在 build.gradle 添加以下信息就可以获取支持库,当然了,如果你没有下载到该支持库会提示你下载。 [AppleScript] 纯文本查看 复制代码 ?
1 2 3 4 5 | dependencies { compile 'com.android.support : percent : 22.2 . 0 ' } |
新的布局组件: 在这个包里面有两个新的容器类 1 、 PercentRelativeLayout
2 、 PercentFrameLayout
在此看来,这两个类很显然是继承自 FrameLayout 和 RelativeLayout 两个容器类。
新的属性设置: 新的容器有了一些设置百分比的属性,下面我们来了解一下:
- layout_widthPercent
- layout_heightPercent
- layout_marginPercent
- layout_marginLeftPercent
- layout_marginTopPercent
- layout_marginRightPercent
- layout_marginBottomPercent
- layout_marginStartPercent
- layout_marginEndPercent
从命名的方式我们可以知道,原来用某些具体单位(如 dp )的设置现在都可以用百分比的方式进行设置了,例如设置控件的宽度 layout_width 原来我们是这样玩的 android:layout_width="match_parent" 现在用了百分比的属性之后呢,可以这样玩了 app:layout_widthPercent="50%" ,这里的百分比是相对于父容器而言的。
使用介绍: 官方文档地址: https://juliengenoud.github.io/android-percent-support-lib-sample/
在布局的 xml 文件需要添加下面这行来声明 [XML] 纯文本查看 复制代码 ?
1 | xmlns:app="http://schemas.android.com/apk/res-auto" |
官方示例代码: [XML] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 | < android.support.percent.PercentFrameLayout xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:app = "http://schemas.android.com/apk/res-auto" android:layout_width = "match_parent" android:layout_height = "match_parent" /> < ImageView app:layout_widthPercent = "50%" app:layout_heightPercent = "50%" app:layout_marginTopPercent = "25%" app:layout_marginLeftPercent = "25%" /> </ android.support.percent.PercentFrameLayout /> |
上面是官方文档的使用示例代码,但是实际上使用的时候如果没设置控件的宽高是会报错的。
实验的布局代码:
[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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | < android.support.percent.PercentRelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:app = "http://schemas.android.com/apk/res-auto" android:layout_width = "match_parent" android:layout_height = "match_parent" > < View android:id = "@+id/top_left" android:layout_width = "0dp" android:layout_height = "0dp" android:layout_alignParentTop = "true" android:background = "#ff0000" app:layout_heightPercent = "30%" app:layout_widthPercent = "70%" /> < View android:id = "@+id/top_right" android:layout_width = "0dp" android:layout_height = "0dp" android:layout_alignParentTop = "true" android:layout_toRightOf = "@+id/top_left" android:background = "#00ff00" app:layout_heightPercent = "30%" app:layout_widthPercent = "30%" /> < View android:id = "@+id/centre" android:layout_width = "match_parent" android:layout_height = "0dp" android:layout_below = "@+id/top_left" android:background = "#0000ff" app:layout_marginLeftPercent = "10%" app:layout_marginRightPercent = "20%" app:layout_marginTopPercent = "10%" app:layout_marginBottomPercent = "10%" app:layout_heightPercent = "40%" /> < View android:layout_width = "match_parent" android:layout_height = "0dp" android:id = "@+id/bottom" android:layout_below = "@+id/centre" android:background = "#00f0ff" android:layout_alignParentLeft = "true" android:layout_alignParentStart = "true" app:layout_heightPercent = "10%" /> </ android.support.percent.PercentRelativeLayout > |
下面我对百分比布局的属性进行了一些小实验,来验证我的几个问题:
1、layout_marginTopPercent这种类型的参数具体的意义是什么? 答:中间的蓝色 view 设置了我们疑惑的属性 [XML] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 | < View android:id = "@+id/centre" android:layout_width = "match_parent" android:layout_height = "0dp" android:layout_below = "@+id/top_left" android:background = "#0000ff" app:layout_marginLeftPercent = "10%" app:layout_marginRightPercent = "20%" app:layout_marginTopPercent = "10%" app:layout_marginBottomPercent = "10%" app:layout_heightPercent = "40%" /> |
然后我们在看看实现的效果,请看布局图 1 。 再将 layout_marginLeftPercent 这类型的属性跟以前我们熟悉的 layout_marginLeft 类型属性对比可知, layout_marginLeftPercent 属性是控件距离左边控件的距离为父类容器的宽度的百分比,其余属性类似。(其实这里不能证明是相对于父容器还是相对于屏幕而言,我们在下面进行证明)
2、控件设置的百分比是相对于屏幕还是相对于父容器而言呢? 答:从上面的实验代码我们基本了解了各种属性的使用,但是不禁疑惑百分比这个是相对父容器而言的吗?也许自然我们就会想到应该是相对于父容器,但是不在实践中证明始终都是不放心的。实践是证明真理的唯一标准!!
好的,其实要证明也很容易。下面我们对容器类的宽度和高度分别进行修改,然后看看显示的情况。 1 )修改高度为定值 300dp [XML] 纯文本查看 复制代码 ?
1 2 3 4 5 6 7 8 9 | < android.support.percent.PercentRelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:app = "http://schemas.android.com/apk/res-auto" android:layout_width = "match_parent" android:layout_height = "300dp" > |
2 )修改宽度为 200dp [XML] 纯文本查看 复制代码 ?
1 2 3 4 5 6 7 8 9 | < android.support.percent.PercentRelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:app = "http://schemas.android.com/apk/res-auto" android:layout_width = "200dp" android:layout_height = "match_parent" > |
再看看效果
实验结论: 从实验结果可知,百分比布局设置的属性都是相对于父容器而言的。
最后:
谷歌提供的新的布局方式给我们,百分比布局的方式。但是可惜的是以支持库的形式,也就是说需要给我们的项目增加一些体积咯。百分比布局的方式对于屏幕适配有了不少的进步,至少我是这么认为的。希望以后的安卓系统直接支持百分比布局吧。
原文链接:http://www.apkbus.com/forum.php?mod=viewthread&tid=244752&extra=&_dsign=0b699c42
更多相关文章
- Android自定义控件实现环形播放进度条
- Android控件——ViewFlipper的使用,垂直滚动广告条
- Android中的Shape的使用
- Android中利用shape定制控件边框
- android 重新加载网络页面设置
- Android(安卓)应用开发笔记 - UI开发详解
- 【Android】超简单!打造一个任意View缩放平移工具
- Android(安卓)View的onClick事件监听
- Android入门教程(八)之-----简单的Button事件响应综合提示控件To