Android ConstrainLayout布局中View位置的介绍与使用

一、介绍

        ConstrainLayout是一款布局View，再Design库中，现已被大家广泛接受并使用。ConstrainLayout的布局采用的方式和其他都不同，他的对其方式是类似RelativeLayout，但是和RelativeLayout有明显的区别。

        在布局渲染的时候，ConstrainLayout的子View是通过在一个容器中找到自己的位置，通过位置和对其方式来固定，所以在布局优化中，尝尝被提起到。

二、布局的对其方式

        好多小伙伴在使用的时候，发现ConstrainLayout的对其并不想RelativeLayout那么好用。想居父控件中间或底部已无法通过android:layout_gravity或者android:layout_alignParentRight来完成；

    <attr name="gravity">
        <!-- Push object to the top of its container, not changing its size. -->
        <flag name="top" value="0x30" />
        <!-- Push object to the bottom of its container, not changing its size. -->
        <flag name="bottom" value="0x50" />
        <!-- Push object to the left of its container, not changing its size. -->
        <flag name="left" value="0x03" />
        <!-- Push object to the right of its container, not changing its size. -->
        <flag name="right" value="0x05" />
        <!-- Place object in the vertical center of its container, not changing its size. -->
        <flag name="center_vertical" value="0x10" />
        <!-- Grow the vertical size of the object if needed so it completely fills its container. -->
        <flag name="fill_vertical" value="0x70" />
        <!-- Place object in the horizontal center of its container, not changing its size. -->
        <flag name="center_horizontal" value="0x01" />
        <!-- Grow the horizontal size of the object if needed so it completely fills its container. -->
        <flag name="fill_horizontal" value="0x07" />
        <!-- Place the object in the center of its container in both the vertical and horizontal axis, not changing its size. -->
        <flag name="center" value="0x11" />
        <!-- Grow the horizontal and vertical size of the object if needed so it completely fills its container. -->
        <flag name="fill" value="0x77" />
        <!-- Additional option that can be set to have the top and/or bottom edges of
             the child clipped to its container's bounds.
             The clip will be based on the vertical gravity: a top gravity will clip the bottom
             edge, a bottom gravity will clip the top edge, and neither will clip both edges. -->
        <flag name="clip_vertical" value="0x80" />
        <!-- Additional option that can be set to have the left and/or right edges of
             the child clipped to its container's bounds.
             The clip will be based on the horizontal gravity: a left gravity will clip the right
             edge, a right gravity will clip the left edge, and neither will clip both edges. -->
        <flag name="clip_horizontal" value="0x08" />
        <!-- Push object to the beginning of its container, not changing its size. -->
        <flag name="start" value="0x00800003" />
        <!-- Push object to the end of its container, not changing its size. -->
        <flag name="end" value="0x00800005" />
    </attr>

为什么？

这是因为ConstrainLayout已不采用这一套，而是通过自定义的位置来遍历view的位置。

所以针对常用的特色位置我已整理出来，可供参考

常见子View在父控件ConstrainLayout的位置设置

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:text="左上角"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:text="顶部居中"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:text="右上角"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:text="左边垂直居中"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"

        android:text="居父控件中间"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:text="右边垂直居中"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:text="左边底部垂直居底"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />


    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:text="底部居中"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />


    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:text="右边底部垂直居底"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

layout xml 效果图

通过以上大家可以很直观的看到View在parentView中该如何设置。

三、其他对其API的详解

待定

四、总结

其实位置就是通过各种对其方式进行固定，最后将view的坐标固定在父控件中。