美文网首页
ConstraintLayout布局下让TextView自适应布

ConstraintLayout布局下让TextView自适应布

作者: 苏未_ | 来源:发表于2024-04-08 19:28 被阅读0次
    image.png

    有时候在做页面的时候,会碰到这种情况,昵称这个TextView需要适配文字的长度,且昵称后面带有一些图片标识(比如vip等级),如果昵称文字超过一定长度之后,将会阶段并以...结尾,此时就可以通过ConstraintLayout布局相关的属性实现该页面:
    其中用到的属性为:
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintVertical_chainStyle="spread"
    app:layout_constraintWidth_default="wrap"//主要是该属性标记TextView的内容自适应

    <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    
                <ImageView
                    android:id="@+id/img_avatar"
                    android:layout_width="56dp"
                    android:layout_height="56dp"
                    android:layout_marginStart="15dp"
                    android:layout_marginTop="68dp"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:shape_radius="38dp"
                    app:shape_strokeColor="@color/white"
                    app:shape_strokeWidth="2dp" />
    
    
                <TextView
                    android:id="@+id/tv_user_name"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    android:ellipsize="end"
                    android:maxLines="1"
                    android:textColor="@color/white"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toTopOf="@+id/tvVipPeriod"
                    app:layout_constraintEnd_toStartOf="@+id/ivVipSmall"
                    app:layout_constraintHorizontal_bias="0.0"
                    app:layout_constraintHorizontal_chainStyle="packed"
                    app:layout_constraintStart_toEndOf="@+id/img_avatar"
                    app:layout_constraintTop_toTopOf="@id/img_avatar"
                    app:layout_constraintVertical_chainStyle="spread"
                    app:layout_constraintWidth_default="wrap"
                    tools:text="@string/sign_in" />
    
                <ImageView
                    android:id="@+id/ivVipSmall"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_marginStart="8dp"            
                    app:layout_constraintBottom_toBottomOf="@+id/tv_user_name"
                    app:layout_constraintEnd_toStartOf="@+id/tvVipSmall"
                    app:layout_constraintStart_toEndOf="@+id/tv_user_name"
                    app:layout_constraintTop_toTopOf="@+id/tv_user_name" />
    
                <TextView
                    android:id="@+id/tvVipSmall"
                    android:layout_width="wrap_content"
                    android:layout_height="11dp"
                    android:layout_gravity="bottom"
                    android:layout_marginBottom="2dp"
                    android:enabled="false"
                    android:gravity="center"
                    android:text="@string/vip"
                    android:textSize="8sp"
                    app:layout_constraintBottom_toBottomOf="@id/ivVipSmall"
                    app:layout_constraintEnd_toStartOf="@+id/img_vip"
                    app:layout_constraintStart_toEndOf="@+id/ivVipSmall" />
    
                <ImageView
                    android:id="@+id/img_vip"
                    android:layout_width="86dp"
                    android:layout_height="86dp"
                    android:layout_marginTop="52dp"
                    android:layout_marginEnd="15dp"
                    android:visibility="invisible"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:visibility="visible" />
           
            </androidx.constraintlayout.widget.ConstraintLayout>
    

    相关文章

      网友评论

          本文标题:ConstraintLayout布局下让TextView自适应布

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