ConstraintLayout (constraint layout) replaces the weight of LinearLayout to solve the problem of omitting one row of multiple Views

 1. Look at the area circled in red in the above design diagram: the design diagram on the left is a message flow in the live broadcast room, and the message flow marked in red means:
User's level label (a picture) + user name + hard-coded text send, these three Views are required to write a line, but when the user name is too long, the user name will appear....... omitted
The design drawing on the right is a common chat list (Conversation list), and the places circled in red generally require:
User name + multiple user labels + time of the last message (residence on the far right), if the user name is too long, the user name should be omitted and displayed as the end...

 2. Conventional writing method before: Generally, when the text cannot fit and needs to be omitted, write the length of the View to death or use the LinearLayout weight to set the weight for the View, that is, dynamically set the width of the View

Conventional writing of the red area in design drawing 1:

 <LinearLayout
        android:id="@+id/ll_user_info"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal">
        
        <ImageView
            android:id="@+id/iv_vip_tag"
            style="@style/VipLevelTag"
            android:layout_marginEnd="4dp"
            android:visibility="gone"
            tools:visibility="gone" />
        
        <ImageView
            android:id="@+id/iv_svip_tag"
            style="@style/SVipLevelTag"
            android:layout_marginEnd="4dp"
            android:visibility="gone" />
        
        <TextView
            android:id="@+id/tv_send_user_name"
            style="@style/TextStyleRobotoMedium"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:shadowColor="#66000000"
            android:shadowDx="0"
            android:shadowDy="1"
            android:shadowRadius="3.0"
            android:singleLine="true"
            android:textColor="#ffdddddd"
            android:textSize="12sp"
            tools:text="WWWWWWWWWWWWWWWWWWWW" />
        
        <TextView
            style="@style/TextStyleRobotoMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:shadowColor="#66000000"
            android:shadowDx="0"
            android:shadowDy="1"
            android:shadowRadius="3.0"
            android:singleLine="true"
            android:text="@string/send_gift_sender_chat_message"
            android:textColor="#ffdddddd"
            android:textSize="12sp" />
    
    </LinearLayout>
    

This way of writing is possible if there is a single View, but if the View is an Adapter Item, there may be View reuse measurement errors. For this reason, this layout is implemented with ConstraintLayout

ConstraintLayout (constraint layout) implementation code:

  <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/ll_user_info"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/iv_svip_tag"
            style="@style/SVipLevelTag"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/iv_vip_tag"
            style="@style/VipLevelTag"
            android:layout_marginStart="4dp"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/iv_svip_tag"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_goneMarginStart="0dp" />

        <TextView
            android:id="@+id/tv_send_user_name"
            style="@style/TextStyleRobotoMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:shadowColor="#66000000"
            android:shadowDx="0"
            android:shadowDy="1"
            android:shadowRadius="3.0"
            android:singleLine="true"
            android:textColor="#ffdddddd"
            android:textSize="12sp"
            app:layout_constrainedWidth="true"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/tv_send"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toEndOf="@+id/iv_vip_tag"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_goneMarginStart="0dp"
            tools:text="WWWWWWWWWWWWWWWWWWWW" />

        <TextView
            android:id="@+id/tv_send"
            style="@style/TextStyleRobotoMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="2dp"
            android:layout_marginEnd="15dp"
            android:shadowColor="#66000000"
            android:shadowDx="0"
            android:shadowDy="1"
            android:shadowRadius="3.0"
            android:singleLine="true"
            android:text="@string/send_gift_sender_chat_message"
            android:textColor="#ffdddddd"
            android:textSize="12sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/tv_send_user_name"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

There are a few points to note here: the user name should be added:

app:layout_constrainedWidth="true" Only in this way can the subsequent send be displayed
app:layout_constraintHorizontal_bias="0" 

Remarks: app:layout_constraintHorizontal_bias="" The range of horizontal offset is a decimal of 0-1 app:layout_constraintVertical_bias="" The range of vertical offset is a decimal of 0-1

Guess you like

Origin blog.csdn.net/Jason_HD/article/details/131834884