RecyclerView中的项目未按预期对齐 [英] Item in RecyclerView not aligning as expected
问题描述
我的应用程序有一个聊天活动,其中包含一个recyclerview.此recyclerview包含两个项目,显示用户接收的消息和用户发送的消息.
My app has a chat activity which contains a recyclerview. This recyclerview contains two items that display the messages received by the user and the messages sent by the user.
用户收到的消息按预期的那样从recyclerview的左侧对齐,但是用户发送的消息没有按预期的那样从recyclerview的右侧对齐.
The messages received by the user is aligning from the left of the recyclerview as expected but the messages sent by the user is not aligning from the right of the recyclerview as expected.
这是现在的样子:蓝色消息是收到的消息,灰色消息是已发送的消息.
This is how it looks right now: The blue colored messages are the messages received and the gray colored messages are the messages sent.
我需要用户界面如何显示:我希望灰色消息像下面的图片一样从屏幕的右侧对齐.
How I need the ui to look: I want the grey colored messages to align from the right of the screen like in the picture below.
代码
activity.java文件:
The activity.java file:
public class IMActivity extends AppCompatActivity{
private RecyclerView recyclerView;
private ImAdapter imAdapter;
private List<ChatMsg> chatMsgList = new ArrayList<>();
Socket mSocket;
EditText etIM;
ImageButton ibSend;
String otherUserName;
List<Msg> msgList;
DBAct db;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_im);
Toolbar toolbar = (Toolbar)findViewById(R.id.imlist_toolbar);
setSupportActionBar(toolbar);
etIM = (EditText)findViewById(R.id.et_im);
recyclerView = (RecyclerView)findViewById(R.id.rv_im);
imAdapter = new ImAdapter(chatMsgList);
LinearLayoutManager layoutManager = new LinearLayoutManager(getApplicationContext());
layoutManager.setStackFromEnd(true);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(imAdapter);
db = new DBAct(IMActivity.this,otherUserName);
msgList = db.getAllMessages();
db.close();
prepareChatData();
}
private void prepareChatData() {
for (int i=0; i<msgList.size(); i++) {
ChatMsg chatMsg = new ChatMsg(msgList.get(i).getMessage(),msgList.get(i).getOther());
chatMsgList.add(chatMsg);
}
imAdapter.notifyDataSetChanged();
}
}
适配器类文件:
public class ImAdapter extends RecyclerView.Adapter <RecyclerView.ViewHolder> {
private List<ChatMsg> chatMsgList = new ArrayList<ChatMsg>();
final int VIEW_TYPE_USER = 1;
final int VIEW_TYPE_OTHER = 0;
public ImAdapter(List<ChatMsg> chatMsgList){
this.chatMsgList = chatMsgList;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType==VIEW_TYPE_USER){
View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_chat_msg_user,parent,false);
return new ImUserViewHolder(itemView);
}else {
View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_chat_msg_other,parent,false);
return new ImOtherViewHolder(itemView);
}
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if (holder.getItemViewType()==VIEW_TYPE_USER){
ChatMsg chatMsg = chatMsgList.get(position);
ImUserViewHolder imUserViewHolder = (ImUserViewHolder)holder;
imUserViewHolder.msg.setText(chatMsg.getMsg());
}else {
ChatMsg chatMsg = chatMsgList.get(position);
ImOtherViewHolder imOtherViewHolder = (ImOtherViewHolder) holder;
imOtherViewHolder.msg.setText(chatMsg.getMsg());
}
}
@Override
public int getItemViewType(int position) {
ChatMsg chatMsg = chatMsgList.get(position);
if (chatMsg.getOther().equals("true")){
return VIEW_TYPE_OTHER;
}else {
return VIEW_TYPE_USER;
}
}
@Override
public int getItemCount() {
return chatMsgList.size();
}
public class ImOtherViewHolder extends RecyclerView.ViewHolder{
public TextView msg;
public ImOtherViewHolder(View itemView) {
super(itemView);
msg = (TextView)itemView.findViewById(R.id.tv_chat_msg_other);
}
}
public class ImUserViewHolder extends RecyclerView.ViewHolder{
public TextView msg;
public ImUserViewHolder(View itemView) {
super(itemView);
msg = (TextView)itemView.findViewById(R.id.tv_chat_msg_user);
}
}
}
活动layout.xml文件:
The activity layout.xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/activity_im"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.abdralabs.talksee.IMActivity"
android:weightSum="10">
<android.support.design.widget.AppBarLayout
android:id="@+id/im_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/im_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/title">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_im"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scrollbars="vertical"
android:layout_weight="8.7"/>
<RelativeLayout
android:id="@+id/rl_im"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="12dp"
android:orientation="vertical"
android:layout_weight="1.3">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<EditText
android:id="@+id/et_im"
android:layout_width="290dp"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Enter message..."
android:inputType="textPersonName">
</EditText>
<android.support.v7.widget.AppCompatImageButton
android:id="@+id/ib_cam_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_menu_camera"
android:layout_gravity="end|center_vertical"/>
</FrameLayout>
<ImageButton
android:id="@+id/ib_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:contentDescription="send"
app:srcCompat="@android:drawable/ic_menu_send" />
</RelativeLayout>
</LinearLayout>
收到的消息(蓝色消息)的xml布局:
The xml layout of the messages received (blue colored messages):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_im_chat_msg_other"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp">
<TextView
android:id="@+id/tv_chat_msg_other"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="this is other"
android:textSize="16dp"
android:layout_alignParentTop="true"
android:textColor="@color/black"/>
<TextView
android:id="@+id/tv_time_chat_msg_other"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:00"
android:textSize="11dp"
android:layout_alignLeft="@+id/tv_chat_msg_other"
android:layout_alignStart="@+id/tv_chat_msg_other"
android:layout_below="@+id/tv_chat_msg_other"/>
</RelativeLayout>
已发送消息(灰色消息)的xml布局:
The xml layout of the messages sent (gray colored messages):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:background="@drawable/bg_im_chat_msg_user"
android:gravity="right">
<TextView
android:id="@+id/tv_chat_msg_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="this is me"
android:background="@drawable/bg_im_chat_msg_user"
android:textColor="@color/black"
android:textSize="16dp"
android:layout_alignParentTop="true" />
<TextView
android:id="@+id/tv_time_chat_msg_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:00"
android:textSize="11dp"
android:layout_alignLeft="@+id/tv_chat_msg_user"
android:layout_alignStart="@+id/tv_chat_msg_user"
android:layout_below="@+id/tv_chat_msg_user" />
</RelativeLayout>
我已经设置了相对布局的android:gravity ="right",以使灰色消息将向右对齐,但是显然这是行不通的.我什至尝试设置android:layout_gravity ="right",但结果仍然相同.有人可以指出我在做什么错吗?
I have set the relative layout's android:gravity="right" so that the gray message will be aligned to the right but apparently this isn't working. I even tried setting the android:layout_gravity="right" but the result is still the same. Could someone please point out what I'm doing wrong?
推荐答案
例如,您可以将 RelativeLayout
包装在 FrameLayout
中的灰色消息布局中,然后更改 android:gravity ="right"
到 android:layout_gravity ="right"
.
You can for example wrap your RelativeLayout
in the gray colored message layout in a FrameLayout
and change android:gravity="right"
to android:layout_gravity="right"
.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_im_chat_msg_user"
android:layout_gravity="right"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp">
<TextView
android:id="@+id/tv_chat_msg_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="@drawable/bg_im_chat_msg_user"
android:text="this is me"
android:textColor="@color/black"
android:textSize="16dp"/>
<TextView
android:id="@+id/tv_time_chat_msg_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/tv_chat_msg_user"
android:layout_alignStart="@+id/tv_chat_msg_user"
android:layout_below="@+id/tv_chat_msg_user"
android:text="00:00"
android:textSize="11dp"/>
</RelativeLayout>
</FrameLayout>
您还可以在另一个 RelativeLayout
中扭曲您的 RelativeLayout
,然后从 android:gravit ="right"
更改为 android:layout_alignParentRight="true"
.
You could also warp your RelativeLayout
in another RelativeLayout
and change from android:gravit="right"
to android:layout_alignParentRight="true"
.
这篇关于RecyclerView中的项目未按预期对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!