专栏首页青蛙要fly的专栏项目需求讨论 — ConstraintLayout 详细使用教程

项目需求讨论 — ConstraintLayout 详细使用教程

题外话

关于ConstraintLayout的文章网上一抓一大把,而且ConstraintLayout在16年就已经出来了,但是我一直没有试着去使用(别问我为什么不去使用,当然是因为懒啊)。毕竟前面的LinearLayout搭配RelativeLayout用习惯了,但是毕竟能减少布局的嵌套。还是要抱着多学习的方式去接触。所以写下文章作为总结。

前言

大家都知道AS在写相关布局的时候,有二种方式:

1. 拖拽方式

就是在这里进行拖控件,各种操作,因为在以前RelativeLayout和LinearLayout的年代,自己拖会自动帮我们添加各种属性值不说,而且还很不方便,但是对于ConstraintLayout来说添加各种约束在这里操作反而很方便,而且这里的功能面板也增加了很多新功能,方便了很多。

当然我也不多说,贴上郭霖大神写得在这里功能面板里面对ConstraintLayout 各种操作方式: 操作面板拖拽方式来使用ConstraintLayout

2.编写代码

这种更为大家使用,而我这里也更多的是直接写代码的方式。

正文

控件如何确定自己的位置

1.直接确定控件左上角的坐标

在约束布局中,一个控件如何来确定自己的位置呢,有人可能说直接写死让它在界面的(XXX,XXX)位置不就好了么。

比如在拖拽界面,我们把一个TextView拖到了界面中间。

我们发现这个TextView的确在中间了,这时候我们看下它的代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我在哪里"
        tools:layout_editor_absoluteX="164dp"
        tools:layout_editor_absoluteY="263dp" />


</android.support.constraint.ConstraintLayout>
复制代码

我们发现了:

tools:layout_editor_absoluteX="164dp"
tools:layout_editor_absoluteY="263dp"
复制代码

的确我们告诉了TextView的左上角的坐标,这个TextView的确可以确定了位置,但是这二个属性只是单纯的进行演示,在真机操作的时候是无效的,就像"tools:text"一样,可以在写布局的时候方便查看TextView显示的文字,但是实际运行app的时候不会有相应内容。

而且我们也可以看到布局文件中有错误提示,也告诉我们在真实运行时候会跳到(0,0)位置:

This view is not constrained, it only has designtime positions, so it will jump to (0,0) unless you add constraints less...

2.告诉控件相邻的二个边的位置情况

如下图所示:

我们怎么来确定它们的位置?比如我们红色的矩形A,我们是不是告诉它:你的左边靠着外面界面的左边,你的顶边靠着外面界面的顶边(然后是不是A就处在现在这个位置了)。绿色的矩形B我们可以告诉它:你的右边靠着外面界面的右边,你的底边靠着外面界面的底边(然后B就处在了现在这个位置)。

所以基本操作就是:确定某个控件二个边的位置(比如靠在哪个控件旁边)。

我们来看最简单的基本操作: 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_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
复制代码

举个例子:

比如我们A按钮已经确定好位置了。我们现在要放B按钮,就像我们上面说的,我们B按钮的二个边的位置,我们可以设置让B按钮的左边靠着A按钮的右边(相当于B按钮的左边与A按钮的右边处于同一位置)。

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

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

我们可以看到app:layout_constraintLeft_toRightOf="@+id/buttonA",B的leftidbuttonA的控件的right相同位置。所以B的左侧就和A的右侧贴在了一起。

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

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

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

所以以上就是基本的操作。我们接下来看下其他的特殊属性。


Margin值相关

比如我们上面的A和B按钮通过了app:layout_constraintLeft_toRightOf拼接在一起了,但是我同时希望A和B按钮中间能空一些距离,如下图所示:

我们可以直接使用:

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
复制代码

这时候就又会有一个问题,如果这时候A的visiblegone,这时候B的位置就会自动往左边了。因为A的所占的宽度没有了(但是A在里面对于其他控件的约束性都是还是存在的)

但是如果我的需求就是A隐藏后,B还是在这个位置(当然有些人可能会说你可以让B根据其他控件来确定位置),而且我的B的位置就是根据A来确定的。那我们怎么处理,我们可以设置B的以下属性,就是当A处于gone的时候,我们可以让B的margin值是根据以下的属性值:

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

复制代码

位置约束不止二个边

我们上面提过,二个边的位置确定好了(也可以说二个边的位置被约束了),我们就可以确定这个控件的相应位置,而且还可以通过margin的改变,来继续调节控件的位置。那如果我这时候是三个边约束或者四个边都约束了呢,比如:

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

我们让按钮的左边与父布局的左边对齐,让按钮的右边与父布局的右边对齐。这时候因为不是单纯的一边对齐,而是相同直线上的二个边都被约束了。所以按钮无法紧靠着左边的或者右边的其中一个边界,所以这时候,这个按钮就会居于二个约束边界的中间位置。如下图所示:

也许也有人问,我想在这二个约束条件下时候不是处于正中间,而是处于左边三分之一的位置,这时候你可以使用:

layout_constraintHorizontal_bias
layout_constraintVertical_bias
复制代码

分别是水平和垂直方向上的所占比例。

<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>
复制代码

圆形布局

有些需求我们可能需要让控件以某个控件为中心,绕着进行布局,如下图所示:

ConstarintLayout自带了这些功能,我们可以使用:

layout_constraintCircle : 引用另一个控件的id
layout_constraintCircleRadius : 距离另外一个控件中心的距离
layout_constraintCircleAngle : 应该在哪个角度(从0到360度)
复制代码

例如:

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

尺寸限制(Dimensions constraints)

1.对ConstraintLayout进行限制:

您可以为ConstraintLayout本身定义最小和最大尺寸:

android:minWidth设置布局的最小宽度
android:minHeight设置布局的最小高度
android:maxWidth设置布局的最大宽度
android:maxHeight设置布局的最大高度
复制代码

这些最小和最大尺寸将在ConstraintLayout使用

2.对内部的控件进行限制:

可以通过以3种不同方式设置android:layout_widthandroid:layout_height属性来指定控件的尺寸:

  • 用特定的值(如123dp等)
  • 使用WRAP_CONTENT,它会要求控件计算自己的大小
  • 使用0dp,相当于“MATCH_CONSTRAINT”

WRAP_CONTENT(在1.1中添加)

如果设置为WRAP_CONTENT,则在1.1之前的版本中, 约束不会限制生成的尺寸值。但是在某些情况下,您可能需要使用WRAP_CONTENT,但仍然执行约束来限制生成的尺寸值。在这种情况下,你可以添加一个相应的属性:

应用:layout_constrainedWidth =”真|假”
应用:layout_constrainedHeight =”真|假”
复制代码

MATCH_CONSTRAINT尺寸(也就是0dp)(在1.1中添加)

设置为MATCH_CONSTRAINT时,默认是大小是占用所有可用空间。有几个额外的修饰符可用:

layout_constraintWidth_min和layout_constraintHeight_min:将设置此维度的最小尺寸
layout_constraintWidth_max和layout_constraintHeight_max:将设置此维度的最大尺寸
layout_constraintWidth_percent和layout_constraintHeight_percent:将设置此维度的大小为父级的百分比
复制代码

百分比尺寸(Percent Dimensions)

说到Percent Dimensions就不得不说ConstraintLayout中的0dp问题,当控件设置为0dp的时候(0dp的称呼又叫match_constraint),默认的行为是撑开(spread),占满可用空间,但是这个行为是可以用layout_constraintWidth_default 属性来设置的。在 ConstraintLayout 1.0.x中,这个属性还可以把它设置为wrap。而到了1.1.x,它又有了一个新的值:percent,允许我们设置控件占据可用空间的百分比。

(注意:这在1.1-beta1和1.1-beta2中layout_constraintWidth_default是必须的,但是如果percent属性被定义,则在以下版本中不需要,然后将layout_constraintWidth_percent或layout_constraintHeight_percent属性设置为介于0和1之间的值)

下面的TextView控件将占据剩余宽度的50%和剩余高度的50%:

  <TextView
    android:id="@+id/textView6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.5"
    
    app:layout_constraintWidth_default="percent"
    app:layout_constraintWidth_percent="0.5" />
复制代码

宽高比(Ratio)

您还可以控制控件的height或者width这二个值,让其中一个值与另外一个值的成特定的比例。为此,需要至少将一个值设置为0dp(即,MATCH_CONSTRAINT),并将属性layout_constraintDimensionRatio设置为给定比率。例如:

<Button android:layout_width="wrap_content"
   android:layout_height="0dp"
   app:layout_constraintDimensionRatio="1:1" />
复制代码

这样这个按钮的宽和高是一样大小的。

Ratio可以设置为:

  • 浮点值,表示宽度和高度之间的比率
  • “宽度:高度”形式的比率

如果两个维都设置为MATCH_CONSTRAINT(0dp),则也可以使用比率: 在这种情况下,系统设置满足所有约束条件的最大尺寸并保持指定的宽高比。

为了约束一个特定的边,可以根据另一个边的大小来限定宽度或高度: 可以通过在比率前面添加字母W(用于限制宽度)或H(用于限制高度),用逗号分隔来指示哪一边应该受到约束:

<Button android:layout_width="0dp"
   android:layout_height="0dp"
   app:layout_constraintDimensionRatio="H,16:9"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintTop_toTopOf="parent"/>
复制代码

将按照16:9的比例设置按钮的高度,而按钮的宽度将匹配父布局的约束。


链(Chains)

链在单个轴(水平或垂直)中提供类似组的行为。

  • 创建一个链: 如果一组小部件通过双向连接链接在一起,则认为它们是一个链,如下图所示,是一个具有二个控件的最小的链:
  • 链头: 链由在链的第一个元素(链的“头”)上设置的属性控制:

(头是水平链最左边的部件,也是垂直链最顶端的部件。)

  • 链样式: 在链的第一个元素上设置属性layout_constraintHorizontal_chainStylelayout_constraintVertical_chainStyle时,链的行为将根据指定的样式进行更改(默认为CHAIN_SPREAD)。

例如:

<?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">
    

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AAAA"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/textView3"
        />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BBBB"
        app:layout_constraintEnd_toStartOf="@id/textView4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView2" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CCCC"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView3" />
</android.support.constraint.ConstraintLayout>
复制代码

效果如下:


屏障 (Barrier)

Barrier是一个虚拟的辅助控件,它可以阻止一个或者多个控件越过自己,就像一个屏障一样。当某个控件要越过自己的时候,Barrier会自动移动,避免自己被覆盖。

关于这个控件其他文章有详细的介绍,我直接附上地址: ConstraintLayout之Barrier


组(Group)

Group帮助你对一组控件进行设置。最常见的情况是控制一组控件的visibility。你只需把控件的id添加到Group,就能同时对里面的所有控件进行操作。

<android.support.constraint.ConstraintLayout ...>
  <TextView
    android:id=”@+id/text1" ... />
  <TextView
    android:id=”@+id/text2" ... />
  <android.support.constraint.Group
    android:id=”@+id/group”
    ...
    app:constraint_referenced_ids=”text1,text2" />
</android.support.constraint.ConstraintLayout>
复制代码

此时如果我们调用group.setVisibility(View.GONE);那么text1 和 text2 都将不可见。


Guideline

ConstraintLayout的辅助对象的实用程序类。Guideline不会显示在设备上(它们被标记为View.GONE),仅用于布局。他们只能在ConstraintLayout中工作。

指引可以是水平的也可以是垂直的: 垂直指南的宽度为零,它们的ConstraintLayout父项的高度为零 水平指南的高度为零,其ConstraintLayout父项的宽度为零 定位准则有三种不同的方式:

  • 指定布局左侧或顶部的固定距离(layout_constraintGuide_begin)
  • 从布局的右侧或底部指定固定距离(layout_constraintGuide_end)
  • 指定布局的宽度或高度的百分比(layout_constraintGuide_percent)

相应的代码为setGuidelineBegin(int,int),setGuidelineEnd(int,int)和setGuidelinePercent(int,float)函数。

然后控件就可以被Guideline来约束。(换句话就是说弄了一个隐藏的View,来约束我们的控件,我们的控件相对的就更容易进行位置定位)。

限制于垂直Guideline的按钮示例:

<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">

    <android.support.constraint.Guideline
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline"
            app:layout_constraintGuide_begin="100dp"
            android:orientation="vertical"/>

    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            android:layout_marginTop="16dp"
            app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

复制代码

Placeholder

大家具体使用可以看这篇文章: New features in ConstraintLayout 1.1.x。 我以下Placeholder内容也就转载这个文章里面的例子:

Placeholder顾名思义,就是用来一个占位的东西,它可以把自己的内容设置为ConstraintLayout内的其它view。因此它用来写布局的模版,也可以用来动态修改UI的内容。

用作模版: 我们用Placeholder创建一个名为template.xml的模版:

模版写好了我们来填充真正的东西。

我们把刚才定义的模版include到真正的布局文件中,并且在这个布局文件中添加真实的控件,注意这里的控件无需添加任何约束,因为它们的位置是由Placeholder决定的。

还有一点就是模版要放在被引用的所有控件之前:

<?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:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.app.androidkt.constraintlayoutb.MainActivity"
    tools:showIn="@layout/activity_main">
    <include layout="@layout/template" />
    <ImageView
        android:id="@+id/top_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/place_holder_demo" />
    
    <ImageButton
        android:id="@+id/save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:srcCompat="@drawable/ic_save_black_24dp" />
 
    <ImageButton
        android:id="@+id/edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_edit_black_24dp" />
 
    <ImageButton
        android:id="@+id/cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
 
        app:srcCompat="@drawable/ic_cancel_black_24dp" />
 
    <ImageButton
        android:id="@+id/delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
 
        app:srcCompat="@drawable/ic_delete_black_24dp" />
 
 
</android.support.constraint.ConstraintLayout>
复制代码

以上就是PlaceHolder的使用场景之一模版功能。

动态替换: PlaceHolder还可以在Java代码中动态替换自己的内容:

public class MainActivity extends AppCompatActivity {
  private Placeholder placeholder;
  private ConstraintLayout root;
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ...
  }
  public void onClick(View view) {
    placeholder.setContentId(view.getId());
  }
}
复制代码

如果结合过渡动画的话,就可以实现一些比较有趣的效果:

public class MainActivity extends AppCompatActivity {
  private Placeholder placeholder;
  private ConstraintLayout root;
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ...
  }
  public void onClick(View view) {
    TransitionManager.beginDelayedTransition(root);
    placeholder.setContentId(view.getId());
  }
}
复制代码

下面是使用PlaceHolder结合过渡动画实现的效果:

而这个Demo也是上面那篇文章作者附上的,Demo地址是PlaceHolder动态替换


结语:

还是老话,哪里不对。可以在留言处写出来。我会进行更正,哈哈。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SQL中GROUP BY用法示例

    GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

    Awesome_Tang
  • 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

    haifeiWu
  • 我不是算命先生,却对占卜有了疑惑——如何论证“占卜前提”的正确与否

    事出有因,我对《周易》感兴趣了很多年。只是觉得特别有趣,断断续续学习了一些皮毛。这几天又偶然接触到了《梅花易数》,觉得很是精彩,将五行八卦天干地支都串联了起来。...

    一石匠人
  • 【系统设置】CentOS 修改机器名

    ken.io
  • 一张图理清《梅花易数》梗概

    学《易经》的目的不一定是为了卜卦,但是了解卜卦绝对能够让你更好地了解易学。今天用一张思维导图对《梅花易数》的主要内容进行概括,希望能够给学友们提供帮助。

    一石匠人
  • 声音功能让儿童编程更有创造性

    导读:Scratch中声音功能非常强大,除了常规的音效,你甚至可以模拟各种乐器的各个发音、设置节拍、休止……如果你愿意,甚至可以用它创作一个交响乐。我们可以引导...

    一石匠人
  • 儿童创造力教育与编程教育的碰撞——MIT雷斯尼克教授最新理论梗概

    儿童编程教育已经在我国各一线二线城市疯狂出现,颇有“烂大街”的趋势。我们不禁要问很多很多问题:

    一石匠人
  • 天干地支五行八卦的对应关系

    一石匠人
  • 什么样的人生才是有意义的人生——没有标准的标准答案

    【导读】其实我们可以跳出这个小圈圈去更加科客观地看一下这个世界。在夜晚的时候我们仰望天空,浩瀚的宇宙中整个地球只是一粒浮尘,何况地球上一个小小的人类?在漫长的历...

    一石匠人
  • 《动物魔法学校》儿童学编程Scratch之“外观”部分

    导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

    一石匠人

扫码关注云+社区

领取腾讯云代金券