Constraintlayout进阶

使用约束布局

    <?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="schemas.android.com/apk/res/and…" xmlns:app="schemas.android.com/apk/res-aut…" xmlns:tools="schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">

<!--    top-->
<TextView
    android:id="@+id/v1"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@color/colorAccent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"></TextView>

<TextView
    android:id="@+id/tv1"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#CDCD00"
    android:gravity="center"
    android:text="图1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toStartOf="@id/tv2"
    app:layout_constraintTop_toBottomOf="@id/v1"></TextView>

<TextView
    android:id="@+id/tv2"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#FF7F24"
    android:gravity="center"
    android:text="图2"
    app:layout_constraintStart_toEndOf="@id/tv1"
    app:layout_constraintEnd_toStartOf="@id/tv3"
    app:layout_constraintTop_toBottomOf="@id/v1"></TextView>

<TextView
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#AB82FF"
    android:gravity="center"
    android:text="图3"
    android:id="@+id/tv3"
    app:layout_constraintStart_toEndOf="@id/tv2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/v1">
</TextView>
</androidx.constraintlayout.widget.ConstraintLayout>

    <?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"
tools:context=".MainActivity">


<TextView
    android:id="@+id/tv1"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginLeft="30dp"
    android:layout_marginTop="30dp"
    android:background="#CDCD00"
    android:gravity="center"
    android:text="左边头像"
    app:layout_constraintEnd_toStartOf="@id/tv2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"></TextView>

<TextView
    android:id="@+id/tv2"
    android:layout_width="60dp"
    android:layout_height="30dp"
    android:background="#FF7F24"
    android:gravity="center"
    android:text="编辑资料"
    android:layout_marginLeft="30dp"
    app:layout_constraintStart_toEndOf="@id/tv1"
    app:layout_constraintBottom_toBottomOf="@id/tv1"
    app:layout_constraintTop_toTopOf="@id/tv1"></TextView>


<TextView
    android:id="@+id/tv3"
    android:layout_width="60dp"
    android:layout_height="30dp"
    android:background="#00FF7F"
    android:gravity="center"
    android:text="+好友"
    android:layout_marginLeft="30dp"
    app:layout_constraintStart_toEndOf="@id/tv2"
    app:layout_constraintBottom_toBottomOf="@id/tv1"
    app:layout_constraintTop_toTopOf="@id/tv1"></TextView>

</androidx.constraintlayout.widget.ConstraintLayout>

    <?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="schemas.android.com/apk/res/and…" xmlns:app="schemas.android.com/apk/res-aut…" xmlns:tools="schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">

<View
    android:id="@+id/tv1"
    android:layout_width="0dp"
    android:layout_height="200dp"
    android:background="#CDCD00"
    android:gravity="center"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"></View>

<TextView
    android:id="@+id/tv2"
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:background="#FF7F24"
    android:gravity="center"
    android:text="一半在兄弟节点中"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/tv1"
    app:layout_constraintBottom_toBottomOf="@id/tv1"></TextView>

</androidx.constraintlayout.widget.ConstraintLayout>

baseline 对齐 与 组件对齐

    <?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"
tools:context=".MainActivity">

<!--    top-->
<TextView
    android:id="@+id/v1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginTop="30dp"
    android:layout_marginLeft="30dp"
    android:gravity="center"
    android:text="哈哈哈哈"
    android:background="@color/colorAccent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"></TextView>



<TextView
    android:id="@+id/v2"
    android:layout_width="80dp"
    android:layout_height="50dp"
    android:layout_marginTop="30dp"
    android:layout_marginLeft="30dp"
    android:gravity="center"
    android:text="组件对齐"
    android:background="@color/colorAccent"
    app:layout_constraintLeft_toRightOf="@id/v1"
    app:layout_constraintBottom_toBottomOf="@id/v1"></TextView>

</androidx.constraintlayout.widget.ConstraintLayout>

只要增加一个属性

app:layout_constraintBaseline_toBaselineOf="@id/v1"

    <?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"
tools:context=".MainActivity">



<View
    android:id="@+id/v1"
    android:visibility="gone"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginLeft="30dp"
    android:layout_marginTop="30dp"
    android:background="@color/colorPrimary"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"></View>

<View
    android:id="@+id/v2"
    app:layout_goneMarginLeft="130dp"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:layout_constraintLeft_toRightOf="@id/v1"
    app:layout_constraintTop_toTopOf="@id/v1"
    android:background="@color/colorAccent"></View>

</androidx.constraintlayout.widget.ConstraintLayout>

我们让蓝色图消失，但是蓝绿色的图 还保持原位

其实重要就是 app:layout_goneMarginLeft 这个属性在发挥作用

    <?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"
tools:context=".MainActivity">

<View
    android:id="@+id/v1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@color/colorPrimary"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toTopOf="@id/v2"
    app:layout_constraintVertical_chainStyle="packed"

    ></View>

<View
    android:id="@+id/v2"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_marginTop="30dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/v1"
    app:layout_constraintBottom_toBottomOf="parent"
    android:background="@color/colorAccent"></View>


</androidx.constraintlayout.widget.ConstraintLayout>

    要注意 app:layout_constraintVertical_chainStyle 他的使用，一定要头尾相接.

宽高比view 有时 我们希望 给定一个宽度 和一个宽高比 来动态设置一个view的高度，或者高度固定 动态设置宽度。以往要实现还要自己写自定义view 或者代码中动态计算。

<View
    android:id="@+id/v1"
    android:layout_width="100dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="2:5"
    android:background="@color/colorPrimary"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintVertical_chainStyle="packed"
    ></View>

注意 app:layout_constraintDimensionRatio 与android:layout_height="0dp" 要搭配使用
app:layout_constraintWidth_percent= 这个与之类似 是百分比布局的关键属性

利用不可见的辅助线 削减嵌套布局

    <?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"
tools:context=".MainActivity">


<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.3" />

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="80dp"
    android:text="用户名"
    android:gravity="right|center_vertical"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    tools:layout_editor_absoluteY="36dp" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="63dp"
    android:layout_height="80dp"
    android:gravity="right|center_vertical"
    android:text="密码"
    tools:layout_editor_absoluteX="60dp"
    tools:layout_editor_absoluteY="158dp" />

<EditText
    android:id="@+id/editText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:inputType="textPassword"
    app:layout_constraintBottom_toBottomOf="@+id/textView"
    app:layout_constraintTop_toTopOf="@+id/textView"
    app:layout_constraintVertical_bias="0.6"
    tools:layout_editor_absoluteX="123dp" />

<EditText
    android:id="@+id/editText2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:inputType="textPassword"
    tools:layout_editor_absoluteX="123dp"
    tools:layout_editor_absoluteY="169dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

    关键字就是androidx.constraintlayout.widget.Guideline

设置一组view 的可见性

    <androidx.constraintlayout.widget.Group android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:visibility="gone"
    app:constraint_referenced_ids="textView3,textView4,textView5"
    >

</androidx.constraintlayout.widget.Group>