ConstraintLayout 几种复杂布局的实现

Myth丶恋晨 2023-10-03 19:37 1阅读 0赞

#### 原则 ####

拒绝嵌套

#### 两个view同时居中 ####

![两个view同时居中][view]

<?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">
        
        <ImageView
            android:id="@+id/view1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            app:layout_constraintBottom_toTopOf="@+id/view2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed" />
    
        <ImageView
            android:id="@+id/view2"
            android:layout_width="100dp"
            android:layout_height="100dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view1" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>

##### 关键点 #####

1.  两个view互相约束
2.  将第一个view与父布局上部添加约束、将最后一个布局下部与父布局添加约束，形成一个链子的效果
3.  app:layout\_constraintVertical\_chainStyle=“packed”，意思是将当前约束链的view打包到一起，所以说才有了图中的效果，这个属性只有在约束链的第一个view设置才会生效，chainStyle的其他几个属性可以自己尝试设置观察效果

##### 设置负值 #####

![在这里插入图片描述][55a55b8b667f4953a652afb9dd141a0e.png_pic_center]

<?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">
    
        <ImageView
            android:id="@+id/view1"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed" />
    
        <ImageView
            android:id="@+id/view2"
            android:layout_width="100dp"
            android:layout_height="100dp"
            app:layout_constraintBottom_toBottomOf="@+id/view1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view1" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>

##### 关键点 #####

view2的头、尾，都约束到view1的底部

##### 偏移 #####

![在这里插入图片描述][cb1de37e3be844b5aba8290ed4d4e479.png_pic_center]  
![在这里插入图片描述][18c98556515e42e7aca649cafe7c1999.png_pic_center]  
![在这里插入图片描述][7d005c4af3c04f9a88f1d1bb04412d8b.png_pic_center]

<?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">
    
        <ImageView
            android:id="@+id/view1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingEnd="16dp"
            app:layout_constrainedWidth="true"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0"
            android:text="dsgjksfksfgfdksfksfgf"
            app:layout_constraintStart_toEndOf="@+id/view1"
            app:layout_constraintTop_toTopOf="parent" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>

##### 关键点 #####

1.  app:layout\_constrainedWidth=“true” 约束住宽度，不超出自己的范围
2.  app:layout\_constraintHorizontal\_bias=“0” 偏移量：取值范围 0 - 1

[view]: https://img-blog.csdnimg.cn/c02daed3efdc46a4995eff5f8f813506.png#pic_center
[55a55b8b667f4953a652afb9dd141a0e.png_pic_center]: https://img-blog.csdnimg.cn/55a55b8b667f4953a652afb9dd141a0e.png#pic_center
[cb1de37e3be844b5aba8290ed4d4e479.png_pic_center]: https://img-blog.csdnimg.cn/cb1de37e3be844b5aba8290ed4d4e479.png#pic_center
[18c98556515e42e7aca649cafe7c1999.png_pic_center]: https://img-blog.csdnimg.cn/18c98556515e42e7aca649cafe7c1999.png#pic_center
[7d005c4af3c04f9a88f1d1bb04412d8b.png_pic_center]: https://img-blog.csdnimg.cn/7d005c4af3c04f9a88f1d1bb04412d8b.png#pic_center