android 约束布局优点 约束布局属性

很久没写文章了，但是针对今天这篇文章还是值得记录下，供大家参考学习，目前布局中用ConstraintLayout（简称cons）应该很常见了，至于为什么要用这个布局，我想大家用过的都知道cons没有出现之前稍微复杂点的界面就各种嵌套，对于维护，修改也不是很方便。cons它作用就是控件与控件直接约束，不需要额外的嵌套。好了说下今天的正题：

1.首先了解下cons中的Margin属性:

cons中用Margin属性必须有个条件就是约束，比如你要设置marginStart=15dp.那么你必须有个横向约束，要设置margintop，必须要有竖向约束。不然就算你设置了值也不会生效的，当然这是约束布局的基本原则。
2.当组件设置View.GONE时，Margin属性以及goneMargin属性的作用：

这个就是今天的重点，前面讲了margin属性的设置，现在模拟一个场景假如有A，B,C三个控件，依次ABC顺序：

<?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="wrap_content"
    android:background="@mipmap/shadow">

    <TextView
        android:id="@+id/textview_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@id/textview_c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_a" />

    <TextView
        android:id="@+id/textview_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="C"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_b" />
</androidx.constraintlayout.widget.ConstraintLayout>

每个都设置了10dp间隔,现在C在底部，并且距离底部有10dp，（我们假如设计图就是这么设计的），现在需要根据数据控制C是否显示，假如C不显示那么B是什么效果呐，改下布局

<?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="wrap_content"
    android:background="@mipmap/shadow">

    <TextView
        android:id="@+id/textview_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@id/textview_c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_a" />

    <TextView
        android:id="@+id/textview_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="C"
        android:textColor="@color/black"
        android:visibility="gone"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_b" />
</androidx.constraintlayout.widget.ConstraintLayout>

很明显B挨着底部了，没有10dp间距，这样跟设计图不符，这时候有朋友在想我给B设置个marginBottom=10dp不就行了，雀氏在C控件不显示情况下没有问题，C控件显示是不是间距就是20dp了？

<?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="wrap_content"
    android:background="@mipmap/shadow">

    <TextView
        android:id="@+id/textview_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        android:layout_marginBottom="10dp"
        app:layout_constraintBottom_toTopOf="@id/textview_c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_a" />

    <TextView
        android:id="@+id/textview_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="C"
        android:textColor="@color/black"

        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_b" />
</androidx.constraintlayout.widget.ConstraintLayout>

等会，抽支烟冷静下。这时候就有了goneMargin了，顾名思义，就是在约束布局中对于控件设置了gone时该属性起效。我们先改下代码看下效果:
 

<?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="wrap_content"
    android:background="@mipmap/shadow">

    <TextView
        android:id="@+id/textview_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_goneMarginBottom="10dp"
        app:layout_constraintBottom_toTopOf="@id/textview_c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_a" />

    <TextView
        android:id="@+id/textview_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="C"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_b" />
</androidx.constraintlayout.widget.ConstraintLayout>

是不是就有了，这个属性是针对可见属性设置的，如果约束的控件不可见（C）该属性起效。

有人在想如果这时候c可见了会不会跟上面一样20dp间距，骚年别慌，看下面代码就知道了
 

<?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="wrap_content"
    android:background="@mipmap/shadow">

    <TextView
        android:id="@+id/textview_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_goneMarginBottom="10dp"
        app:layout_constraintBottom_toTopOf="@id/textview_c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_a" />

    <TextView
        android:id="@+id/textview_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="C"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_b" />
</androidx.constraintlayout.widget.ConstraintLayout>

总结:cons布局功能虽然强大，但是使用过程中还是有许多细节地方需要注意的，比如ScroolView嵌套cons，cons高度最好建议设置成match_partent（如果cons中还有rv显示不全的话也设置match_partent），此外对于goneMarin属性的其他方向间距是类似的（说明：不是说只能用goneMargin才能实现上面效果）。如果此篇文章有帮助到你，就请给个赞吧！