ConstraintLayout分享

栏目: Android · 发布时间: 7年前

内容简介:控件如何确定自己的位置,最简单的基本操作就是:基本布局属性:举个例子:

控件如何确定自己的位置,最简单的基本操作就是:

layout_constraint[自己位置]_[目标位置]=目标ID

基本布局属性:

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

layout_constraintBaseline_toBaselineOf
复制代码

举个例子:

ConstraintLayout分享

可以看到B在A的右边,我们可以这么写:

<Button android:id="@+id/buttonA" ... />

<Button android:id="@+id/buttonB" ...
    app:layout_constraintLeft_toRightOf="@+id/buttonA" />
复制代码

可以理解B的左边在A的右边,这样B就贴在A的右边了。

我们发现上面还有一个 layout_constraintBaseline_toBaselineOf ,直接看下图就可以理解所有相关的属性:

ConstraintLayout分享

如果是相对于父布局,我们也可以不写入另外一个控件的id值,直接填parent值就可以了

<android.support.constraint.ConstraintLayout ...>
    <Button android:id="@+id/button" ...
     app:layout_constraintLeft_toLeftOf="parent" />
<android.support.constraint.ConstraintLayout/>
复制代码

Margin相关

ConstraintLayout分享

当A处于gone的时候,我们可以让B的margin值是根据以下的属性值:

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
复制代码

水平和垂直方向所占比例

layout_constraintHorizontal_bias
layout_constraintVertical_bias
复制代码
  • 水平居中
    ConstraintLayout分享
<android.support.constraint.ConstraintLayout ...>
    <Button android:id="@+id/button" ...
     app:layout_constraintLeft_toLeftOf="parent"
     app:layout_constraintRight_toRightOf="parent/>
     
<android.support.constraint.ConstraintLayout/>
复制代码
  • 水平方向占比
    ConstraintLayout分享
<android.support.constraint.ConstraintLayout ...>
    <Button android:id="@+id/button" ...
     app:layout_constraintHorizontal_bias="0.3"
     app:layout_constraintLeft_toLeftOf="parent"
     app:layout_constraintRight_toRightOf="parent/>
</android.support.constraint.ConstraintLayout>
复制代码

圆形布局

ConstraintLayout分享

例如:

<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
  app:layout_constraintCircle="@+id/buttonA"
  app:layout_constraintCircleRadius="100dp"
  app:layout_constraintCircleAngle="45" />
复制代码

尺寸限制

  • 对ConstraintLayout进行限制
android:minWidth设置布局的最小宽度
android:minHeight设置布局的最小高度
android:maxWidth设置布局的最大宽度
android:maxHeight设置布局的最大高度
复制代码
  • 对内部的控件进行限制
// WRAP_CONTENT
app:layout_constrainedWidth ="true|false"
app:layout_constrainedHeight ="true|false"

// MATCH_CONSTRAINT(也就是0dp)
layout_constraintWidth_min和layout_constraintHeight_min:将设置此维度的最小尺寸
layout_constraintWidth_max和layout_constraintHeight_max:将设置此维度的最大尺寸
layout_constraintWidth_percent和layout_constraintHeight_percent:将设置此维度的大小为父级的百分比
复制代码
  • 宽高比
app:layout_constraintDimensionRatio="W|H,1:1"
复制代码

ConstraintLayout分享
链样式:
layout_constraintHorizontal_chainStyle
layout_constraintVertical_chainStyle
复制代码
ConstraintLayout分享

其他辅助控件

  • Guideline
  • Barrier
  • Group
  • Placeholder 这些在分享的时候在演示QAQ

以上所述就是小编给大家介绍的《ConstraintLayout分享》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web开发秘方

Web开发秘方

Brian P. Hogan、Chris Warren、Mike Weber、Chris Johnson、Aaron Godin / 七印部落 / 华中科技大学出版社 / 2013-7-10 / 66.00元

猜猜硅谷的前端工程师怎么折腾JS的?想知道无限下拉的列表怎么做吗?你知道DropBox可以当Web服务器用吗?你知道怎么做出跨平台的幻灯片效果吗?不借助插件,怎样在移动设备上实现动画效果?怎样快速搭建和测试HTML电子邮箱?怎样制作跨PC和移动设备显示的应用界面?怎样利用最新的JavaScript框架(Backbone和Knockout)提高应用的响应速度?怎样有效利用CoffeeScript和S......一起来看看 《Web开发秘方》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器