android - RecyclerView 中的项目未按预期对齐

Question

我的应用有一个包含回收 View 的聊天 Activity 。这个 recyclerview 包含两个项目，分别显示用户收到的消息和用户发送的消息。

用户收到的消息按预期从 recyclerview 的左侧对齐，但用户发送的消息没有按预期从 recyclerview 的右侧对齐。

现在是这样的:蓝色消息是收到的消息，灰色消息是发送的消息。

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

代码

activity.java 文件:

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);
        }
    }
}

Activity layout.xml文件:

<?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 布局(蓝色消息):

<?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 布局(灰色消息):

<?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"但结果仍然相同。有人可以指出我做错了什么吗？

Answer 1

例如，您可以将 RelativeLayout 包装在 FrameLayout 中的灰色消息布局中，并将 android:gravity="right" 更改为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 ="真"。