相信大家都已经对Android API所提供的布局方式非常熟悉了。也许在接触Android的时候都有过这样的想法,如果可以按照百分比的方式进行界面布局,这样适配各种屏幕就简单多了吧!谷歌正式提供百分比布局支持库(android-support-percent-lib)。当然了android-percent-support这个库,基本可以解决上述问题,下面我们将对这个支持库进行介绍
这个库提供了:
-
两种布局供大家使用:
PercentRelativeLayout、PercentFrameLayout,通过名字就可以看出,这是继承自FrameLayout和RelativeLayout两个容器类;
-
支持的属性有:
layout_widthPercent、layout_heightPercent、
layout_marginPercent、layout_marginLeftPercent、
layout_marginTopPercent、layout_marginRightPercent、
layout_marginBottomPercent、layout_marginStartPercent、layout_marginEndPercent。
可以看到支持宽高,以及margin。
也就是说,大家只要在开发过程中使用PercentRelativeLayout、PercentFrameLayout替换FrameLayout、RelativeLayout即可。
官方文档地址:https://juliengenoud.github.io/android-percent-support-lib-sample/
使用:
关于使用,其实及其简单,并且github上也有例子,android-percent-support-lib-sample。
使用Android studio在build.gradle添加以下信息就可以获取支持库,当然了,如果你没有下载到该支持库会提示你下载。
1
2
3
4
5
|
dependencies {
compile
'com.android.support:percent:22.2.0'
}
|
(一)PercentFrameLayout
1
2
3
4
5
6
7
8
9
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
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
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"
>
<
TextView
android:layout_width
=
"0dp"
android:layout_height
=
"0dp"
android:layout_gravity
=
"left|top"
android:background
=
"#44ff0000"
android:text
=
"width:30%,height:20%"
app:layout_heightPercent
=
"20%"
android:gravity
=
"center"
app:layout_widthPercent
=
"30%"
/>
<
TextView
android:layout_width
=
"0dp"
android:layout_height
=
"0dp"
android:layout_gravity
=
"right|top"
android:gravity
=
"center"
android:background
=
"#4400ff00"
android:text
=
"width:70%,height:20%"
app:layout_heightPercent
=
"20%"
app:layout_widthPercent
=
"70%"
/>
<
TextView
android:layout_width
=
"0dp"
android:layout_height
=
"0dp"
android:layout_gravity
=
"bottom"
android:background
=
"#770000ff"
android:text
=
"width:100%,height:10%"
android:gravity
=
"center"
app:layout_heightPercent
=
"10%"
app:layout_widthPercent
=
"100%"
/>
</
android.support.percent.PercentFrameLayout
>
|
3个TextView,很简单,直接看效果图:
(二) PercentRelativeLayout
<?xml version="1.0" encoding="utf-8"?>
1
2
3
4
5
6
7
8
9
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
|
<
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"
android:clickable
=
"true"
>
<
TextView
android:id
=
"@+id/row_one_item_one"
android:layout_width
=
"0dp"
android:layout_height
=
"0dp"
android:layout_alignParentTop
=
"true"
android:background
=
"#7700ff00"
android:text
=
"w:70%,h:20%"
android:gravity
=
"center"
app:layout_heightPercent
=
"20%"
app:layout_widthPercent
=
"70%"
/>
<
TextView
android:id
=
"@+id/row_one_item_two"
android:layout_width
=
"0dp"
android:layout_height
=
"0dp"
android:layout_toRightOf
=
"@+id/row_one_item_one"
android:background
=
"#396190"
android:text
=
"w:30%,h:20%"
app:layout_heightPercent
=
"20%"
android:gravity
=
"center"
app:layout_widthPercent
=
"30%"
/>
<
ImageView
android:id
=
"@+id/row_two_item_one"
android:layout_width
=
"match_parent"
android:layout_height
=
"0dp"
android:src
=
"@drawable/tangyan"
android:scaleType
=
"centerCrop"
android:layout_below
=
"@+id/row_one_item_one"
android:background
=
"#d89695"
app:layout_heightPercent
=
"70%"
/>
<
TextView
android:layout_width
=
"0dp"
android:layout_height
=
"0dp"
android:layout_below
=
"@id/row_two_item_one"
android:background
=
"#770000ff"
android:gravity
=
"center"
android:text
=
"width:100%,height:10%"
app:layout_heightPercent
=
"10%"
app:layout_widthPercent
=
"100%"
/>
</
android.support.percent.PercentRelativeLayout
>
|
ok,依然是直接看效果图:
使用没什么好说的,就是直观的看一下。