[英]Chat layout left and right align with wrapped background
Im in developing chat view layout. 我正在开发聊天视图布局。 and trying to left and right align the message and time according to sender and user. 并尝试根据发件人和用户左右对齐消息和时间。 each message and time wrapped in rounded corner background view. 每个消息和时间都包裹在圆角背景视图中。 Here is my layout view. 这是我的布局视图。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/senderHead"
android:layout_height="40dp"
android:layout_width="40dp"
android:text="Sender"
android:textColor="#fff"
android:textSize="16sp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
/>
<RelativeLayout
android:id="@+id/chatLayout"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/chat_background_rounded">
<TextView
android:text="Hi John Are you available?"
android:inputType="textMultiLine"
android:id="@+id/txtMessage"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textColor="#FF000000" />
<TextView
android:layout_below="@id/txtMessage"
android:text="12:45PM"
android:id="@+id/txtTime"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textColor="@color/colorSecondaryText" />
</RelativeLayout>
<TextView
android:id="@+id/userHead"
android:layout_height="40dp"
android:layout_width="40dp"
android:text="User"
android:textColor="#fff"
android:textSize="16sp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
/>
</RelativeLayout>
And in the coding i do the alignment. 在编码中,我进行对齐。
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
if(user){
txtMessage.setGravity(Gravity.RIGHT);
txtTime.setGravity(Gravity.RIGHT);
params.addRule(RelativeLayout.LEFT_OF, R.id.userHead);
params.addRule(RelativeLayout.START_OF, R.id.userHead);
}else{
txtMessage.setGravity(Gravity.START);
txtTime.setGravity(Gravity.START);
params.addRule(RelativeLayout.RIGHT_OF, R.id.senderHead);
params.addRule(RelativeLayout.END_OF, R.id.senderHead);
}
chatBgLayout.setLayoutParams(params);
but im not getting perfect layout because userHead
side message and time is not aligned to right perfectly. 但我无法获得完美的布局,因为userHead
边消息和时间未正确对齐。 if i put those Textview
layouts width to match_parent
then it works fine. 如果我将那些Textview
布局的宽度放到match_parent
那么它将正常工作。 but in that case bubble not wrapping to text because it is match parent. 但在那种情况下,气泡不会包装到文本,因为它是父对象。 also longer text takes device width. 较长的文本也会占用设备宽度。 i want it to limit. 我想要限制。 can some one help me on this? 有人可以帮我吗?
So check the below code i replaced the relative layout with linear layout.check whether it may solve your problem 所以检查下面的代码我用线性布局替换了相对布局。检查是否可以解决您的问题
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/senderHead"
android:layout_height="40dp"
android:layout_width="40dp"
android:text="Sender"
android:textColor="#fff"
android:textSize="16sp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
/>
<LinearLayout
android:id="@+id/chatLayout"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/chat_background_rounded"
android:layout_toLeftOf="@+id/userHead"
android:orientation="vertical">
<TextView
android:text="Hi John Are you available?"
android:inputType="textMultiLine"
android:id="@+id/txtMessage"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textColor="#FF000000" />
<TextView
android:layout_below="@id/txtMessage"
android:text="12:45PM"
android:id="@+id/txtTime"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textColor="@color/colorSecondaryText"
android:layout_gravity="end"/>
</LinearLayout>
<TextView
android:id="@+id/userHead"
android:layout_height="40dp"
android:layout_width="40dp"
android:text="User"
android:textColor="#fff"
android:textSize="16sp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
/>
I ended up using two views for sender and receiver. 我最终对发送者和接收者使用了两个视图。 that way i can hide and show layout for each easy way. 这样,我可以隐藏和显示每种简单方法的布局。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.