Android编写界面的最佳实践——写个聊天界面

看了《第二行代码》一段时间了，这次按照书上的内容，写个聊天界面。
先新建一个空项目day05_UIBestPractice

一、制作Nine-Patch图片

准备一张message图片，在AS中右击并选择Create 9-Patch file，保存时命名为message_left.9.png

拖动黑线选择拉伸区域【上左黑边】和放置内容区域【下右】：

原来的message.png可以删除了，然后修改主布局查看拉伸效果：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/message_left">

</LinearLayout>

运行:

类似的，再做一张message_right.9.png

二、编写聊天界面

1、添加依赖库

implementation 'androidx.recyclerview:recyclerview:1.0.0'

2、编写主界面

RecyclerView用于显示聊天内容，EditView输入聊天消息，Button发送按钮

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#d8e0e8">
    
    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/msg_recycler_view"
        android:layout_weight="1"
        />
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="输入消息"
            android:maxLines="2"
            android:id="@+id/input_text"
            />
        
        <Button
            android:id="@+id/send"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发送"
            />
        
    </LinearLayout>

</LinearLayout>

3、定义消息类

Msg.java
content表示消息的内容，type表示消息类型，用两个值表示消息是收到或发出的

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

4、子项布局

msg_item.xml
我们让收到的消息左对齐，发出的消息右对齐

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
    
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/left_layout"
        android:layout_gravity="start"
        android:background="@drawable/message_left">
        
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/left_msg"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:textColor="#fff"/>
    
    </LinearLayout>
    
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/right_layout"
        android:layout_gravity="end"
        android:background="@drawable/message_right">
        
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/right_msg"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:textColor="#ffa"/>
    
    </LinearLayout>  

</LinearLayout>

5、适配器

MsgAdapter.java
下列代码应该熟悉了，可以参考之前的两篇文章：

• Android控件学习（十）——RecyclerView
• Android控件学习（九）——ListView

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;

        ViewHolder(View view){
            super(view);
            leftLayout = view.findViewById(R.id.left_layout);
            rightLayout = view.findViewById(R.id.right_layout);
            leftMsg = view.findViewById(R.id.left_msg);
            rightMsg = view.findViewById(R.id.right_msg);
        }
    }

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

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

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

    @Override
    public void onBindViewHolder(@NonNull 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 if (msg.getType() == Msg.TYPE_SENT){
            holder.leftLayout.setVisibility(View.GONE);
            holder.rightLayout.setVisibility(View.VISIBLE);
            holder.rightMsg.setText(msg.getContent());
        }
    }
}

6、主活动

初始化数据以及添加按钮响应

public class MainActivity extends AppCompatActivity {
    private List<Msg> msgList = new ArrayList<>();
    private EditText inputText;
    private Button send;
    private RecyclerView msgRecyclerView;
    private MsgAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initMsgs();
        inputText = findViewById(R.id.input_text);
        send = findViewById(R.id.send);

        msgRecyclerView = findViewById(R.id.msg_recycler_view);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        msgRecyclerView.setLayoutManager(layoutManager);
        adapter = new MsgAdapter(msgList);
        msgRecyclerView.setAdapter(adapter);

        send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String content = inputText.getText().toString();
                if(!"".equals(content)){
                    msgList.add(new Msg(content, Msg.TYPE_SENT));
                    adapter.notifyItemInserted(msgList.size()-1);  //当有新消息时，刷新RecyclerView中的显示
                    msgRecyclerView.scrollToPosition(msgList.size()-1);  //定位到最后一行
                    inputText.setText("");  //清空输入框
                }
            }
        });

    }

    private void initMsgs(){
        msgList.add(new Msg("Knock, knock !", Msg.TYPE_RECEIVED));
        msgList.add(new Msg("Who's there ?", Msg.TYPE_SENT));
        msgList.add(new Msg("Ice cream.", Msg.TYPE_RECEIVED));
        msgList.add(new Msg("Ice cream who ?", Msg.TYPE_SENT));
        msgList.add(new Msg("Ice cream (I scream) so loud,", Msg.TYPE_RECEIVED));
        msgList.add(new Msg(" windows will break !", Msg.TYPE_RECEIVED));
    }
}

notifyItemInserted(最后一项索引) ：当有新消息时，刷新RecyclerView中的显示
scrollToPosition(最后一项索引))：定位到最后一行

7、运行

初始界面

发送三条消息


完美！