使用ConstrainLayout进行复杂布局的绘制

最新推荐文章于 2024-04-01 10:22:05 发布

pan_blog

最新推荐文章于 2024-04-01 10:22:05 发布

阅读量495

点赞数

分类专栏： android ui

本文链接：https://blog.csdn.net/Peterpan1223/article/details/100661409

版权

android 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

13 篇文章 0 订阅

订阅专栏

本文不赘述ConstrainLayout的基本用法，而是通过三个实际案例展示其在创建1:1比例图片布局、比例分配及圆头像覆盖效果等方面的应用。

摘要由CSDN通过智能技术生成

关于基本使用在此就不讲了，放几个小案例直接看看怎么使用。

需求

三张图宽高比为1:1
左边图片占总宽度的2份，右边占1份
圆头像一半覆盖左边大图

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_ui_alert_view"
        android:padding="@dimen/dp_10">

        <ImageView
            android:id="@id/imag"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintHorizontal_weight="2"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/img2"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_weight="1"/>

        <ImageView
            android:id="@+id/img2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginLeft="@dimen/dp_8"
            android:layout_marginBottom="@dimen/dp_4"
            android:scaleType="fitXY"
            app:layout_constraintBottom_toTopOf="@id/img3"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@id/imag"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_weight="0.5"/>

        <ImageView
            android:id="@+id/img3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginLeft="@dimen/dp_8"
            android:scaleType="fitXY"
            app:layout_constraintBottom_toBottomOf="@id/imag"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@id/imag"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/img2"
            app:layout_constraintVertical_weight="0.5"/>

        <View
            android:id="@+id/guideline"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dp_0_1"
            app:layout_constraintBottom_toBottomOf="@id/imag"/>

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/head_img"
            android:layout_width="@dimen/dp_60"
            android:layout_height="@dimen/dp_60"
            app:civ_border_color="@color/white"
            app:civ_border_width="@dimen/dp_2"
            app:layout_constraintBottom_toBottomOf="@id/guideline"
            app:layout_constraintLeft_toLeftOf="@id/imag"
            app:layout_constraintTop_toTopOf="@id/guideline"/>

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/dp_10"
            android:layout_marginTop="@dimen/dp_10"
            android:text=""
            android:textColor="@color/black1"
            app:layout_constraintLeft_toRightOf="@id/head_img"
            app:layout_constraintTop_toBottomOf="@id/imag"/>

        <TextView
            android:id="@+id/num"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/dp_5"
            android:layout_marginTop="@dimen/dp_10"
            android:text=""
            android:textSize="@dimen/sp_12"
            app:layout_constraintBaseline_toBaselineOf="@id/name"
            app:layout_constraintLeft_toRightOf="@id/name"/>

        <ImageView
            android:id="@id/code"
            android:layout_width="@dimen/dp_80"
            android:layout_height="@dimen/dp_80"
            android:layout_margin="@dimen/dp_10"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/imag"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="@dimen/dp_5"
            android:text="@string/long_click_analyze"
            android:textSize="@dimen/sp_10"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/code"/>

        <TextView
            android:id="@id/content"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="2"
            android:padding="@dimen/dp_5"
            android:text=""
            android:textColor="@color/black1"
            app:layout_constraintBottom_toBottomOf="@id/code"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toLeftOf="@id/imag"
            app:layout_constraintRight_toLeftOf="@id/code"/>

    </androidx.constraintlayout.widget.ConstraintLayout>