我正在设计一个看起来类似于whatsapp风格的聊天界面的聊天项目,但问题是左侧约束似乎不起作用。
这是我的代码。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Guideline
android:id="@+id/left_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.20" />
<LinearLayout
android:id="@+id/chat_bubble"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/chat_sender_bubble"
android:orientation="vertical"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toRightOf="@id/left_guideline"
app:layout_constraintRight_toRightOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginEnd="22dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="22dp"
android:layout_marginStart="10dp"
android:layout_marginTop="5dp"
android:orientation="vertical">
<ImageView
android:id="@+id/sender_image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginBottom="5dp"
android:layout_marginEnd="5dp"
android:layout_marginRight="5dp"
android:adjustViewBounds="true"
android:background="@color/transparent"
android:scaleType="center"
android:src="@mipmap/ic_launcher"
android:visibility="gone" />
<TextView
android:id="@+id/sender_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginBottom="5dp"
android:layout_marginEnd="5dp"
android:layout_marginRight="5dp"
android:text="This is a really long message that could cross the
left guideline."
android:textColor="@color/senderBubbleTextColor" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginBottom="5dp"
android:orientation="horizontal">
<TextView
android:id="@+id/sender_timestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="27th june, 2017"
android:textColor="@color/senderBubbleTextColor"
android:textSize="12sp" />
<ImageView
android:id="@+id/synced"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="3dp"
android:layout_marginStart="3dp"
android:src="@drawable/clock"
android:tint="@color/senderBubbleTextColor" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
我已经设置了一个0.20的左侧指南,所以它永远不应该越过那个,但是当有一个非常长的消息时,它会这样做。如果有更好的方法来编写xml,那将非常有帮助。
答案 0 :(得分:5)
将chat_bubble的LinearLayout
宽度更改为0dp
。这将使LinearLayout
保持在左侧指南和父级的右侧之间。
<LinearLayout
android:id="@+id/chat_bubble"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@drawable/chat_sender_bubble"
android:orientation="vertical"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toRightOf="@id/left_guideline"
app:layout_constraintRight_toRightOf="parent">