美文网首页
ConstraintLayout 左文右图,图片紧贴文字

ConstraintLayout 左文右图,图片紧贴文字

作者: 咚咚蹡蹡 | 来源:发表于2022-09-02 16:49 被阅读0次
    微信截图_20220902164548.png
    微信截图_20220902164603.png

    使用ConstraintLayout 、要实现上方这种效果、需要用到下列方法

     <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/clTeam"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/actionBarView">
    
            <cn.gavinliu.android.lib.shapedimageview.ShapedImageView
                android:id="@+id/ivHead"
                android:layout_width="58dp"
                android:layout_height="58dp"
                android:scaleType="centerCrop"
                android:src="@drawable/ic_user_default_bg"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:shape_mode="circle" />
    
            <TextView
                android:id="@+id/tvName"
                style="@style/tv_18_color_00_font_b"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:includeFontPadding="false"
                android:maxLines="1"
                android:text="老阿姨赛事老阿姨赛事老阿姨赛事老阿姨赛事老阿姨赛事"
                app:layout_constrainedWidth="true"
                app:layout_constraintHorizontal_bias="0"
                app:layout_constraintHorizontal_chainStyle="packed"
                app:layout_constraintLeft_toRightOf="@+id/ivHead"
                app:layout_constraintRight_toLeftOf="@+id/ivFormalDanceTeam" />
    
            <ImageView
                android:id="@+id/ivFormalDanceTeam"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_formal_dance_team"
                app:layout_constraintLeft_toRightOf="@+id/tvName"
                app:layout_constraintRight_toRightOf="parent" />
    
        </androidx.constraintlayout.widget.ConstraintLayout>
    

    1:首先设置左右约束,建立链,使其在横向宽度内完全展开。
    2:设置TextView的宽度为wrap_content,表示子view自己决定自己的宽度。ImageView设置固定大小。
    3:设置layout_constraintHorizontal_chainStyle属性,多个view 成链以后,只要设置第一个即可,设置为packed,表示为多个view紧密相邻,这样做的目的是为了ImageView可以紧密的跟在TextView后面
    4:在TextView上设置以下这两个属性
    layout_constraintHorizontal_bias 表示在水平方向左右所占的比例,当设置为0的时候,那就是靠最左边展示,0.5左右比一样,1表示在最右边
    layout_constrainedWidth 官方解释 Enforcing constraints ,强制约束,表示当我view为wrap_content时,强制约束在夫控件内

    相关文章

      网友评论

          本文标题:ConstraintLayout 左文右图,图片紧贴文字

          本文链接:https://www.haomeiwen.com/subject/pvcynrtx.html