Android基础之布局ConstraintLayout
2017-08-15 18:10
190 查看
Google I/O 2016 上发布了 ConstraintLayout,据说很强大,那就一探究竟吧!
gradle配置
1
1
阅读前提:熟悉四大基础布局
注:最左边表示可移动的最左边,左边表示View的左边边界
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
不明白没关系,看例子。
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
如上图中,最左边和最右边的位置已经确定,B出现在A和C中间,但是如果我不想在中间怎么办(比如说我想靠右一点)
这里引入2个偏移属性
1
2
1
2
怎么理解?我只发图不说话,看图
如图:B的水平偏移为0
1
1
如图:B的水平偏移为0.5
1
1
如图:B的水平偏移为0.7
1
1
如图:B的水平偏移为1
1
1
总结:(明白了吗?不明白请继续看图),
1.通过8个边界约束属性可以固定View的最左边、最右边、最上面、最下面的位置
2.通过设置偏移属性,可以控制View在边界范围移动,最左边是0,最右边是1,中间是0.5
3.当设置了边界约束属性后,View会自动出现在中间,也就是说,默认的偏移属性是0.5
1
2
1
2
下面我将用ConstraintLayout来模仿一个水平方向的线性布局的例子
完整布局文件:
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
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
效果如下(效果图中C明显比较小,说明C 比重设置没有效果)
结论:
1.实现水平方向线性布局,所有的View都必须设置左右边界控制属性,而且相互控制
2.实现比重大小控制,必须设置layout_width=”0dp”
如图布局(能看懂基本上说明你已经掌握了比重控制)
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
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
效果图如下:
1
2
1
2
当设置了左边界控制属性,x绝对坐标失效,请使用基础布局的(layout_marginLeft替代)
当设置了上边界控制属性,y绝对坐标失效,请使用基础布局的(layout_marginTop替代)
因此,,绝对坐标。。不好适配,也不好控制。差评。
另外附上一张
Android Studio 超智能的控制设置图,如下
顶4 踩0
上一篇Android分享之时间日期转换工具类DateTime
下一篇Android分享之Log工具类
• Android新特性介绍,ConstraintLayout完全解析
• 有关Activity样式 、状态栏透明、屏幕亮度问题应用场景及其总结
• ConstraintLayout 的入门用法
• Android ConstraintLayout 约束布局详解
• 历久而新,我的新书《第二行代码》已出版!
• Android图片加载框架最全解析(一),Glide的基本用法
• android网络编程--从网络下载图片,并保存到内存卡
• 了解使用Android ConstraintLayout
• Android ConstraintLayout详解
• 探索Android ConstraintLayout布局
猜你在找
gradle配置
compile 'com.android.support.constraint:constraint-layout:1.0.0-beta2'
1
1
阅读前提:熟悉四大基础布局
一、位置控制
8个边界控制属性注:最左边表示可移动的最左边,左边表示View的左边边界
app:layout_constraintLeft_toLeftOf app:layout_constraintLeft_toRightOf 我最左边的位置 在别人的右边 下面的意思类似 app:layout_constraintRight_toRightOf app:layout_constraintRight_toLeftOf app:layout_constraintTop_toTopOf app:layout_constraintTop_toBottomOf app:layout_constraintBottom_toBottomOf app:layout_constraintBottom_toTopOf
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
不明白没关系,看例子。
* 例如:
<!--如图,左边一个A,右边一个C,我如果想新建一个B在A C之间,如下--> <Button app:layout_constraintLeft_toRightOf="@+id/bt_a" app:layout_constraintRight_toLeftOf="@+id/bt_c" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="B"/> <!--字面理解:1.我最左边的位置,在button A的右边--> <!--字面理解:1.我最右边的位置,在button C的左边-->
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
如上图中,最左边和最右边的位置已经确定,B出现在A和C中间,但是如果我不想在中间怎么办(比如说我想靠右一点)
这里引入2个偏移属性
layout_constraintHorizontal_bias(水平方向偏移)(范围0-1) layout_constraintVertical_bias(垂直方向偏移)(范围0-1)
1
2
1
2
怎么理解?我只发图不说话,看图
如图:B的水平偏移为0
app:layout_constraintHorizontal_bias="0"
1
1
如图:B的水平偏移为0.5
app:layout_constraintHorizontal_bias="0.5"
1
1
如图:B的水平偏移为0.7
app:layout_constraintHorizontal_bias="0.7"
1
1
如图:B的水平偏移为1
app:layout_constraintHorizontal_bias="1"
1
1
总结:(明白了吗?不明白请继续看图),
1.通过8个边界约束属性可以固定View的最左边、最右边、最上面、最下面的位置
2.通过设置偏移属性,可以控制View在边界范围移动,最左边是0,最右边是1,中间是0.5
3.当设置了边界约束属性后,View会自动出现在中间,也就是说,默认的偏移属性是0.5
二、大小控制
先介绍两个布局大小控制属性layout_constraintHorizontal_weight //水平方向上比重,类似线性布局 layout_constraintVertical_weight //垂直方向上比重,类似线性布局
1
2
1
2
下面我将用ConstraintLayout来模仿一个水平方向的线性布局的例子
完整布局文件:
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:ignore="MissingConstraints"> <!--A边界控制属性 有 左 和 右--> <Button android:id="@+id/bt_a" android:layout_width="0dp" android:layout_height="wrap_content" android:text="A" app:layout_constraintHorizontal_weight="1" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/bt_b"/> <!--B边界控制属性 也有 左 和 右--> <Button android:id="@+id/bt_b" android:layout_width="0dp" android:layout_height="wrap_content" android:text="B" app:layout_constraintHorizontal_weight="1" app:layout_constraintLeft_toRightOf="@id/bt_a" app:layout_constraintRight_toLeftOf="@id/bt_c"/> <!--C边界控制属性 只有右--> <Button android:id="@+id/bt_c" android:layout_width="0dp" android:layout_height="wrap_content" android:text="C" app:layout_constraintHorizontal_weight="1" app:layout_constraintRight_toRightOf="parent"/> </android.support.constraint.ConstraintLayout>
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
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
效果如下(效果图中C明显比较小,说明C 比重设置没有效果)
结论:
1.实现水平方向线性布局,所有的View都必须设置左右边界控制属性,而且相互控制
2.实现比重大小控制,必须设置layout_width=”0dp”
如图布局(能看懂基本上说明你已经掌握了比重控制)
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:ignore="MissingConstraints"> <TextView android:background="#0f0" android:id="@+id/bt_a" android:layout_width="0dp" android:layout_height="0dp" android:text="A" app:layout_constraintBottom_toTopOf="@id/bt_b" app:layout_constraintHorizontal_weight="1" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/bt_b" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_weight="1"/> <TextView android:background="#0f0" android:id="@+id/bt_b" android:layout_width="0dp" android:layout_height="0dp" android:text="B" app:layout_constraintBottom_toTopOf="@id/bt_c" app:layout_constraintHorizontal_weight="1" app:layout_constraintLeft_toRightOf="@id/bt_a" app:layout_constraintRight_toLeftOf="@id/bt_c" app:layout_constraintTop_toBottomOf="@id/bt_a" app:layout_constraintVertical_weight="1"/> <TextView android:background="#0f0" android:id="@+id/bt_c" android:layout_width="0dp" android:layout_height="0dp" android:text="C" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintHorizontal_weight="1" app:layout_constraintLeft_toRightOf="@id/bt_b" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@id/bt_b" app:layout_constraintVertical_weight="1"/> </android.support.constraint.ConstraintLayout>
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
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
效果图如下:
三、位置控制补充
绝对坐标:父布局左上角默认为(0,0),这个坐标是是相对于父布局左上角的坐标layout_editor_absoluteX 绝对坐标x layout_editor_absoluteY 绝对坐标y
1
2
1
2
当设置了左边界控制属性,x绝对坐标失效,请使用基础布局的(layout_marginLeft替代)
当设置了上边界控制属性,y绝对坐标失效,请使用基础布局的(layout_marginTop替代)
因此,,绝对坐标。。不好适配,也不好控制。差评。
另外附上一张
Android Studio 超智能的控制设置图,如下
顶4 踩0
上一篇Android分享之时间日期转换工具类DateTime
下一篇Android分享之Log工具类
相关文章推荐
• Android新特性介绍,ConstraintLayout完全解析
• 有关Activity样式 、状态栏透明、屏幕亮度问题应用场景及其总结
• ConstraintLayout 的入门用法
• Android ConstraintLayout 约束布局详解
• 历久而新,我的新书《第二行代码》已出版!
• Android图片加载框架最全解析(一),Glide的基本用法
• android网络编程--从网络下载图片,并保存到内存卡
• 了解使用Android ConstraintLayout
• Android ConstraintLayout详解
• 探索Android ConstraintLayout布局
猜你在找
相关文章推荐
- android布局基础及范例(一):QQ登陆界面设计
- Android零基础入门第28节:轻松掌握RelativeLayout相对布局
- Android基础教程之-----布局
- Android基础——6:布局详解
- android应用开发---(第1章)android基础学习之六大Layout布局
- android基础——界面布局(一)
- Android基础入门教程——2.4.8 ListView Item多布局的实现
- android 基础 布局优化
- 可动态布局的Android抽屉之基础
- android基础知识复习——RelativeLayout布局属性、背景、半透明设置(XML设置)
- android基础之LinearLayout布局
- [Android基础]布局属性
- Android零基础入门第29节:善用TableLayout表格布局,事半功倍
- android第二天早:简单工具和布局基础
- Android基础教程(二)之五大布局对象---FrameLayout,LinearLayout ,AbsoluteLayout,RelativeLayout,TableLayout.
- 可动态布局的Android抽屉之基础
- 可动态布局的Android抽屉之基础
- android布局的基础学习
- android布局基础及范例(二):人人android九宫格布局
- android内部培训视频_第二节 布局基础