Android实战:ConstraintLayout 和 iOS AutoLayout的关系

截屏2020-03-03上午12.02.29.png

起点：坐标点的约束：从iOS的坐标体系说起

iOS坐标体系中任何View都必须有一个frame才能显示，frame=(x,y,width,height),可以这么理解：(x，y)决定了view的坐标点，(width，height)决定了view的尺寸。

给红色View添加约束：

  • 相对于父布局左边(leading)对齐，间距50 (x = 父布局leading+50)
  • 相对于父布局上部(top)对齐，间距50 (y = 父布局top+50)

  • 宽度width = 100， 高度 height = 100


    截屏2020-03-03上午9.50.25.png

    截屏2020-03-03上午9.50.39.png

ConstraintLayout正是完美复刻这一坐标体系和view显示方式

我们创建一个TextView,设置宽高为100dp,代码如下

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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/mTvRed"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="中间"
        android:textColor="#fff"
        android:textSize="20dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

但是，编译器报错了
截屏2020-03-03上午12.33.22.png

意思就是缺少水平约束和垂直约束，这就像frame，view只有宽高，没有xy就找不到view的坐标点。
于是，来给TextView设置x,y吧

      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"

这2句的意思是view的左边与父布局的左边对齐(x=0)，顶部与父布局的顶部对齐(y=0)，这样就可以确定TextView的坐标点(x=0,y=0)了，


截屏2020-03-03上午12.38.25.png

这时的代码就相当于frame:(x=0,y=0,width=100,height=100),如果让(x,y)=(100,100)呢？

 android:layout_marginStart="100dp"
 android:layout_marginTop="100dp"
截屏2020-03-03上午12.41.43.png

总结：
1.约束布局的坐标体系类似于iOS，其中view的显示也与iOS的frame类似，都需要确定坐标点(x,y)和尺寸(width,height)才能显示view
2.layout_constraintXXX_toXXXOf 语句可以确定view的坐标点：

layout_constraintRight_toLeftOf                 :   当前view的右边与目标view的左边对齐
layout_constraintRight_toRightOf                :   当前view的右边与目标view的右边对齐
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf

练一练:在红色TextView的右(10dp)下(10dp)角创建一个宽高为100dp的绿色TextView（关键点：如何确定绿色Tv的坐标点）

iOS 实现：


截屏2020-03-03上午10.16.12.png

1.确定绿色View的宽高为100，
2.确定绿色View的坐标点为：top与红色View的bottom对齐间距50，leading(左边)与红色View的trailing(右边)对齐间距50

左下角.top = iOS中间.bottom + 50
左下角.leading = iOS中间.trailing + 50
截屏2020-03-03上午10.13.05.png

Android实现: 同样也是确定绿色View的坐标点


截屏2020-03-03上午12.59.44.png
<TextView
        android:id="@+id/mTvGreen"
        android:layout_width="100dp"
        android:layout_height="100dp"
        
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="左下角"
        android:textColor="#fff"
        android:textSize="20dp"
        app:layout_constraintStart_toEndOf="@+id/textView5"   //mTvGreen的start与mTvRed的end对齐
        app:layout_constraintTop_toBottomOf="@+id/textView5" //mTvGreen的top与mTvRed的bottom对齐
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"/>

后四行代码确定了绿色View的坐标点：

  • 绿色View的start(左边)与红色View的end(右边)对齐，间距为10dp，(绿色View的start = 红色View的end+10dp)，
  • 绿色View的top与红色View的bottom对齐，间距为10dp，（绿色View的top = 红色View的bottom+10dp）

案例:设置View2相对于View1居中

iOS：
截屏2020-03-03下午12.35.23.png

Center Vertically 即刻解决
Android：
app:layout_constraintBaseline_toBaselineOf ？是不行滴。
这样写就ok

 app:layout_constraintBottom_toBottomOf="@+id/textView5"
        app:layout_constraintStart_toEndOf="@+id/textView5"
        app:layout_constraintTop_toTopOf="@+id/textView5"
截屏2020-03-03下午12.37.26.png

2.尺寸的约束

Android
1.固定尺寸
2.wrap_content:根据内容伸缩

  1. MATCH_CONSTRAINT 相当于match_parent，它的值为0dp


    截屏2020-03-03上午10.59.47.png
 <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="#ffa"
        android:text="Macth_Parent（0dp）"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:background="#03A9F4"
        android:text="Wrap_Content"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="#FFEB3B"
        android:text="固定长度"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintBottom_toTopOf="@+id/textView7"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

iOS ：没有Warp_content，其他一样

3.比例：约束布局的最大特点就是不用把宽高写死，根据尺寸比例达到各种机型的屏幕适配。

其中iOS和Android的不同在于:
iOS可以相对于其他View进行比例设置，Android只能相对于父布局进行比例设置
Android：
1.1View的宽度与父布局宽度的比例

android:layout_width="0dp"
app:layout_constraintWidth_default="percent" //设置宽为百分比
app:layout_constraintWidth_percent="0.5"

1.2View的高度与父布局高度的比例

android: layout_height ="0dp"
app:layout_constraintHeight_default="percent" //设置高为百分比
app:layout_constraintHeight_percent="0.5"

注意:View没有与其他View进行宽高比例的设置方法，只有与父布局的
2.View自己的宽高比例

app:layout_constraintDimensionRatio="2:1"

iOS:脱线即刻

案例：View的宽高比例1:1,View与父布局高度比例1:5

步骤:

1.设置View的宽高比例
截屏2020-03-03上午11.51.09.png
01.gif

2.设置View与父布局高度比例


02.gif
截屏2020-03-03上午11.34.24.png

Android实现：
1.设置View的高度与父控件高度比例为1:5

        android:layout_height="0dp"
        app:layout_constraintHeight_percent="0.2"

2.设置View的宽高比例为1:1

        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1:1"

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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/textView5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintHeight_percent="0.2"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="中间"
        android:textColor="#fff"
        android:textSize="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

3.Android特有
3.1辅助线Guideline：
3.2位置偏向 :把他理解成margin的比例版就ok，margin只能设置数值

layout_constraintHorizontal_bias  //水平偏向
layout_constraintVertical_bias  //竖直偏向


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:background="@color/colorAccent"
        android:gravity="center"
        android:textColor="#fff"
        android:textSize="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左边偏向30%"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
</androidx.constraintlayout.widget.ConstraintLayout>
截屏2020-03-03下午12.31.05.png

3.2Group用于控制多个控件的可见性

参考：
Android新特性介绍，ConstraintLayout完全解析
实战篇ConstraintLayout的崛起之路
带你了解Android约束布局ConstraintLayout
ConstraintLayout 完全解析 快来优化你的布局吧

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容