Android开发学习 -- Day8 UI开发（三）-- 编写

之前我们学习了各种常用的控件，体验了ListView和RecycleView的强大之处。今天便来实战一番，尝试编写一个聊天界面。

既然是聊天界面，那么肯定有收到的消息和发出去的消息，此外我们还需要与之对应的两张背景图（点九图）。资源都准备好了，我们就可以开始编写界面了，简单的用微信的截屏工具涂鸦了一个示意图：

---

编辑xml布局文件

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#d8e0e8"
    tools:context="com.johnhao.listviewdemo.Activity.UIBestPraticeActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/msg_recycle_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/input_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:maxLines="2"
            android:hint="Type your words"/>

        <Button
            android:id="@+id/btn_send"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Send"
            android:textAllCaps="false"/>

    </LinearLayout>

</LinearLayout>

我们在主界面放置了一个RecycleView用于显示聊天的消息内容，又放置了一个EditText用于输入消息，还有个用于发送消息的Button。

然后我们需要定义一个消息的实体类，创建Msg类：

public class Msg {

    public static final int TYPE_RECEIVED = 0;
    public static final int TYPE_SENT = 1;

    private String content;
    private int type;

    public Msg(String content, int type){
        this.content = content;
        this.type = type;
    }

    public String getContent() {
        return content;
    }

    public int getType() {
        return type;
    }
}

Msg中有两个字段，content表示消息的内容，type表示消息的类型。类型有两个可选值，TYPE_RECEIVED代表是接收到的消息，TYPE_SENT代表发送的消息。

接下来编写RecycleView的子项布局，新建msg_item.xml，添加代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:id="@+id/left_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:background="@drawable/message_left">

        <TextView
            android:id="@+id/msg_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:textColor="#fff"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/right_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@drawable/message_right">

        <TextView
            android:id="@+id/msg_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp" />

    </LinearLayout>

</LinearLayout>

我们让收到的消息居左对齐，发出的消息居右对齐，分别设置不同的背景图@drawable/message_left和@drawable/message_right。

这里可能会感觉到疑惑，怎么发送和接收的消息都在一个布局中呢。其实不用担心，我们在之前的学习中使用过让布局展示和消失的方法，后面再代码中，通过判断消息的类型来决定隐藏和显示哪种消息。

接下来，我们需要创建RecycleView的适配器，新建MsgAdapter：

public class MsgAdapter extends RecyclerView.Adapter<MsgAdapter.ViewHolder>{

    private List<Msg> mMsgList;

    static class ViewHolder extends RecyclerView.ViewHolder {

        LinearLayout leftLayout;
        LinearLayout rightLayout;
        TextView leftMsg;
        TextView rightMsg;

        public ViewHolder(View itemView) {
            super(itemView);
            leftLayout = itemView.findViewById(R.id.left_layout);
            rightLayout = itemView.findViewById(R.id.right_layout);
            leftMsg = itemView.findViewById(R.id.msg_left);
            rightMsg = itemView.findViewById(R.id.msg_right);
        }
    }

    public MsgAdapter(List<Msg> msgList) {
        mMsgList = msgList;
    }

    @Override
    public MsgAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.msg_item, parent, false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(MsgAdapter.ViewHolder holder, int position) {
        Msg msg = mMsgList.get(position);
        if (msg.getType() == Msg.TYPE_RECEIVED) {
            holder.leftLayout.setVisibility(View.VISIBLE);
            holder.rightLayout.setVisibility(View.GONE);
            holder.leftMsg.setText(msg.getContent());
        }
        else {
            holder.leftLayout.setVisibility(View.GONE);
            holder.rightLayout.setVisibility(View.VISIBLE);
            holder.rightMsg.setText(msg.getContent());
        }
    }

    @Override
    public int getItemCount() {
        return mMsgList.size();
    }
}

看到这里是不是很眼熟，没错，和学习RecycleView那章的代码基本一致。只是在onBindViewHolder()方法中，增加了对消息类型的判断。如果是接收到的消息，则展示左边的消息布局；如果是发出去的消息，就展示右侧的消息布局。

最后修改Activity中的代码，先给RecycleView初始化一些数据，并给发送按钮加入事件响应：

public class UIBestPraticeActivity extends BaseActivity {

    private List<Msg> msgList = new ArrayList<>();

    private RecyclerView msgView;
    private EditText input_text;
    private Button btn_send;
    private MsgAdapter msgAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_uibest_pratice);
        initMsgs();
        msgView = findViewById(R.id.msg_recycle_view);
        input_text = findViewById(R.id.input_text);
        btn_send = findViewById(R.id.btn_send);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        msgView.setLayoutManager(layoutManager);
        msgAdapter = new MsgAdapter(msgList);
        msgView.setAdapter(msgAdapter);

        btn_send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String input = input_text.getText().toString();
                if (!"".equals(input)) {
                    Msg msg = new Msg(input, Msg.TYPE_SENT);
                    msgList.add(msg);
                    // 当有新消息是，刷新ListView页面中的显示
                    msgAdapter.notifyItemInserted(msgList.size() - 1);
                    // 滚动页面到ListView的最后一行
                    msgView.scrollToPosition(msgList.size() - 1);
                    // 将输入框置为空
                    input_text.setText("");
                }
            }
        });
    }

    private void initMsgs() {
        Msg msg1 = new Msg("Hello, guy", Msg.TYPE_RECEIVED);
        msgList.add(msg1);

        Msg msg2 = new Msg("How are you", Msg.TYPE_RECEIVED);
        msgList.add(msg2);

        Msg msg3 = new Msg("fine thank you, and you?", Msg.TYPE_RECEIVED);
        msgList.add(msg3);
    }
}

在initMsgs() 方法中我们先初始化了几条数据用于在RecycleView中的展示，然后发送按钮的点击事件里获取了EditText的输入内容，如果内容不为空，则创建一个新的Msg对象，并把它添加到msgList中去。之后又调用了适配器的notifyItemInserted()方法，用于通知列表有新的数据插入，这样新增的消息才能够在RecycleView中显示。接着调用RecycleView的scrollToPosition()方法将显示的数据定位到最后一行，以保证一定能看到最后发出的消息。最后调用setText()方法将输入的内容清空。

这样，一个“精美”的聊天界面就完成了，重新运行程序，体验一下：

---

关注获取更多