RecyclerView 中的项目未按预期对齐 [英] Item in RecyclerView not aligning as expected

问题描述

我的应用有一个包含回收视图的聊天活动.这个 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.

我需要 ui 的外观:我希望灰色消息从屏幕右侧对齐，如下图所示.

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="真".

You could also warp your RelativeLayout in another RelativeLayout and change from android:gravit="right" to android:layout_alignParentRight="true".

这篇关于RecyclerView 中的项目未按预期对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！