Android Material Design控件使用(一)——ConstraintLayout 约束布局
参考文章:
约束布局ConstraintLayout看这一篇就够了
ConstraintLayout - 属性篇
介绍
Android
ConstraintLayout
是谷歌推出替代PrecentLayout
的组件。
支持相对布局、线性布局、帧布局,看来更像是
FrameLayout
、LinearLayou
t、`RelativeLayout·三者的结合体,并且比这三者更强大的是实现了百分比布局。
大家都知道安卓碎片严重,使用百分比适配,那么将彻底解决适配问题
总结:我最近也是刚学,学完之后,发现这个布局已经将上述的所有布局的特点全部融合在一起了,使用起来简单方便的不要不要的,就是学习的属性有点多啊。
不过,多也是正常的,毕竟融合了五大布局的所有特点,学完这个布局,各种界面UI都难不倒我们了
添加依赖
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
我使用的是Android Studio3.0.1版本,已经自动导入了,默认使用的就是这个布局
属性及对应的方法
我们先了解一下一些基本的概念
这里提一下,start和left其实都是指控件的左边,end和right都事指控件的右边
基本属性
注意,这里的属性都得使用命名空间来才能使用
宽高属性与之前的layout相同,wrap_content
和match_parent
,但除此之外,还多出了一种,名为match contraint
实际上,这个多出来的相当于0dp
,如果之前使用过LinearLayout
的权重的话,应该对0dp
有印象.
这里,约束布局应该是继承了Linearlayout
的特性,之后我们设置权重与Linearlayout
的操作也是类似,具体的请往后面看,这可是实现了百分比布局的强大布局。
属性值为控件id
layout_constraintLeft_toLeftOf
当前控件的左边依赖于属性控件的左边layout_constraintLeft_toRightOf
当前控件的左边依赖于属性控件的右边layout_constraintRight_toLeftOf
ayout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
当前的控件基线与属性控件的基线对齐layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
示例:
<?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">
<Button
android:id="@+id/btnA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/btnB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="@id/btnA"/>
</android.support.constraint.ConstraintLayout>
A左边依赖总布局的左边,顶部则是依赖总布局的顶部,B则是左边依赖于A的右边,顶部依赖父布局的顶部
其他的就不一一列举了,举一反三,挺容易的
mragin 边距
只有在设置了依赖,之后设置边距才会效果
这个属性不需要使用app开头,属于原本的属性
android:layout_marginStart
设置左边的边距android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
例如:
<?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">
<Button
android:id="@+id/btnA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:layout_marginLeft="30dp"
android:layout_marginTop="50dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/btnB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="60dp"
android:text="B"
app:layout_constraintStart_toEndOf="@id/btnA"/>
</android.support.constraint.ConstraintLayout>
示例:
使控件B与A垂直对齐
B的左边依赖A的左边,B的右边依赖A的右边即可
<?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">
<Button
android:id="@+id/btnA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="124dp"
android:layout_marginTop="16dp"
android:text="A"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/btnB"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:text="B"
app:layout_constraintEnd_toEndOf="@+id/btnA"
app:layout_constraintStart_toStartOf="@+id/btnA"
app:layout_constraintTop_toBottomOf="@+id/btnA"/>
</android.support.constraint.ConstraintLayout>
辅助类或属性使用
1. Barrier 屏障 控件
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="right"
app:constraint_referenced_ids="TextView1,TextView2" />
app:barrierDirection
为屏障所在的位置,可设置的值有:bottom
、end
、left
、right
、start
、top
app:constraint_referenced_ids
为屏障引用的控件,可设置多个(用“,”隔开)
2. Gruop 组 控件
Group可以把多个控件归为一组,方便隐藏或显示一组控件,举个例子:
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:constraint_referenced_ids="TextView1,TextView3" />
3. Placeholder 占位符 控件
设置好占位符控件的位置,之后调用setContent,把指定id的控件放在占位符的位置
app:content=
4. Guideline 辅助线 控件
可以使用这个控件达到百分比布局的效果,或者是当前的控件没有符合条件的参照物的情况使用
Guideline
还有三个重要的属性,每个Guideline
只能指定其中一个:
layout_constraintGuide_begin
,指定左侧或顶部的固定距离,如100dp,在距离左侧或者顶部100dp的位置会出现一条辅助线layout_constraintGuide_end
,指定右侧或底部的固定距离,如30dp,在距离右侧或底部30dp的位置会出现一条辅助线layout_constraintGuide_percent
,指定在父控件中的宽度或高度的百分比,如0.8,表示距离顶部或者左侧的80%的距离。android:orientation
设置垂直或者是水平
Guideline
是隐藏的,不用我们进行多余的设置,虽然外面在预览面板可以死看到它的存在
例子:使一个按钮的长度占满屏幕一半
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guidelineBegin"
app:layout_constraintGuide_percent="0.5"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guidelineBegin"
app:layout_constraintTop_toTopOf="parent" />
Radio 比例 属性
方便快捷调整控件的宽高比,结合Guideline使用更佳
例子:
app:layout_constraintDimensionRatio
想要宽度与总布局一样,但高度是宽度的三分之一
宽高比为3:1
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="3:1"/>
Chain 链 属性
可以把这个当做成一个加强版的LinearLayout
由上图,很好的知道了A与B的约束,A的左边是父控件的左边,右边则是B,B的左边是A,B的右边的是父控件的右边
chainstyle
有三种属性,分别是spread
,spread_inside
,pack
,效果如下图
spread
元素将展开(默认)spread_inside
元素展开,但链的端点不会展开pack
链中的元素将包裹在一起。子控件的水平或垂直方向的偏置bias
属性会影响包裹中元素的位置
剩下的两种则是通过添加属性实现的
weighted chain
是在spread chain
的基础上,而packed chain with bias
则是在weight chain
的基础上
style为spread
的,使用layout_constraintHorizontal_weight
或layout_constraintVertical_weight
来设置weigh
权重
style为pack
的,使用layout_constraintHorizontal_bias
或layout_constraintVertical_bias
进行偏移设置,属性值0-1,也是百分比,改第一个元素
这里需要说明的是,除了水平,还可以是垂直排列,不过,不能通过属性来更改,而是通过约束来更改,把左边改为顶端,右边改为底部
如果是水平的,使用属性layout_constraintHorizontal_chainStyle
进行chainstyle属性的更改
垂直的则是使用layout_constraintVertical_chainStyle
例子:
三个按钮平分宽度(只需要将宽度设置为0dp
就可以达到目的)
<Button
android:id="@+id/btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toStartOf="@id/btn1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<Button
android:id="@+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintStart_toEndOf="@id/btn"
app:layout_constraintEnd_toStartOf="@id/btn2"/>
<Button
android:id="@+id/btn2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintStart_toEndOf="@id/btn1"
app:layout_constraintEnd_toEndOf="parent"/>
Android Material Design控件使用(一)——ConstraintLayout 约束布局的更多相关文章
- Android Material Design控件学习(三)——使用TextInputLayout实现酷市场登录效果
前言 前两次,我们学习了 Android Material Design控件学习(一)--TabLayout的用法 Android Material Design控件学习(二)--Navigation ...
- Android Material Design控件学习(一)——TabLayout的用法
前言 Google官方在14年Google I/O上推出了全新的设计语言--Material Design.一并推出了一系列实现Material Design效果的控件库--Android Desig ...
- Android Material Design控件学习(二)——NavigationView的学习和使用
前言 上次我们学习了TabLayout的用法,今天我们继续学习MaterialDesign(简称MD)控件--NavigationView. 正如其名,NavigationView,导航View.一般 ...
- Android Material Design控件使用(四)——下拉刷新 SwipeRefreshLayout
使用下拉刷新SwipeRefreshLayout 说明 SwipeRefreshLayout是Android官方的一个下拉刷新控件,一般我们使用此布局和一个RecyclerView嵌套使用 使用 xm ...
- Android Material Design控件使用(二)——FloatButton TextInputEditText TextInputLayout 按钮和输入框
FloatingActionButton 1. 使用FloatingActionButton的情形 FAB代表一个App或一个页面中最主要的操作,如果一个App的每个页面都有FAB,则通常表示该App ...
- Android Material Design 控件常用的属性
android:fitsSystemWindows="true" 是一个boolean值的内部属性,让view可以根据系统窗口(如status bar)来调整自己的布局,如果值为t ...
- Android Material Design控件使用(三)——CardView 卡片布局和SnackBar使用
cardview 预览图 常用属性 属性名 说明 cardBackgroundColor 设置背景颜色 cardCornerRadius 设置圆角大小 cardElevation 设置z轴的阴影 ca ...
- Android Support Design 控件 FloatingActionButton
经常刚可以看到悬浮控件,比如印象笔记的下面那个绿色的悬浮按钮,这个控件非常简单也是来自Design Support Library中同理需要在android studio中加入依赖库:design库 ...
- Material Design控件使用学习 TabLayout+SwipeRefreshlayout
效果: Tablayout有点类似之前接触过的开源ViewPagerIndicator,将其与viewpager绑定,可实现viewpager的导航功能. SwipeRefreshLayout是官方出 ...
随机推荐
- 『OGG 01』Win7 配置 Oracle GoldenGate 踩坑指南
安装 Oracle 安装 Oracle11g 32位[Oracle 32位的话,OGG 也必须是 32位,否则会有0xc000007b无法正常启动 错误] 安装目录为 D:\oracle\produc ...
- 模块使用:time、datetime、calendar、sys、os、os.path、normcase和normapath、random、json、pickle
## time:时间 时间戳(timestamp):time.time() 延迟线程的运行:time.sleep(secs) (指定时间戳下的)当前时区时间:time.localtime([secs] ...
- [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-MapView,SceneView简介
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/index.html] 一.Intro to MapView(2D ...
- 2017-12-24 手机编程环境初尝试-用AIDE开发Android应用
前不久才接触到纯粹用手机进行编程的开发者, 当时颇有孤陋寡闻之感, 因为之前听说过手机编程还是一些在线编程学习网站开发的学习环境, 没有想过真的有用它做实际开发的. 此文用AIDE免费版在自己的手机上 ...
- Accesss数据库的DBhelper类(带分页)
首先配置web.config,使配置文件连接access数据库: <connectionStrings> <add name="DBConnection" con ...
- 白话kubernetes的十万个为什么(持续更新中...) - kubernetes
Kubernetes简称? 答:k8s或kube. Kubernetes是什么? 答:由Google开发的一个强大的平台,可以在集群环境中管理容器化应用程序.本质上是一种特殊的数据库,里面存储的是能够 ...
- 【AI开发】基于深度学习的卡口车型、车牌识别
服务端代码后面给出 卡口车型.车牌识别demo截图 服务器:
- Java地位被撼动?Java与JavaScript的趣事连载
第一回 JavaScript的进攻 公元2014年,Java 第八代国王终于登上了王位. 第一次早朝,国王坐在高高的宝座上,看着毕恭毕敬的大臣,第一次体会到了皇权的威力. 德高望重的IO大臣颤悠悠地走 ...
- .NET之微信消息模板推送
最近在项目中使用到了微信消息模板推送的功能,也就是将对应的消息推送到对应的用户微信上去,前提是你必须要有一个微信公众号并且是付费了的才会有这个功能,还有就是要推送的用户必须是的关注了你的微信公众号的. ...
- springboot实现数据库中数据导出Excel功能
[转载]原文地址:https://blog.csdn.net/wilson_m/article/details/79021458 功能介绍 网上查找了一堆的数据导出代码,可能是自己基础比较薄弱的原因还 ...