Android ListView自定义Adapter实现仿QQ界面

下面是详细讲解“Android ListView自定义Adapter实现仿QQ界面”的完整攻略。

简介

在Android开发中，ListView是常见的视图控件之一，用来展示一系列的元素。而自定义Adapter可以让我们更加灵活地设置ListView中的每一个Item的布局和内容。本文将介绍如何使用自定义Adapter，实现具有聊天界面中消息气泡特效的QQ界面。

步骤

步骤一：准备布局文件

我们先来创建聊天气泡的布局文件，包括左右两种对话框样式，并用drawable文件分别设置对话框的背景。其中，左对话框样式设置在left_chat_layout.xml中，右对话框样式设置在right_chat_layout.xml中，示例如下：

<!--left_chat_layout.xml-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="@drawable/left_chat_bg"
    android:orientation="horizontal"
    android:padding="10dp" >
    <TextView
        android:id="@+id/left_msg_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white" />
</LinearLayout>

<!--right_chat_layout.xml-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="@drawable/right_chat_bg"
    android:layout_gravity="end"
    android:orientation="horizontal"
    android:padding="10dp" >
    <TextView
        android:id="@+id/right_msg_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white" />
</LinearLayout>

步骤二：创建自定义Adapter

接下来我们需要将上面这两个布局作为ListView的Item使用。我们可以通过继承BaseAdapter或ArrayAdapter来实现自定义Adapter，这里我们选择继承BaseAdapter。

public class ChatListAdapter extends BaseAdapter {
    private List<ChatMessage> chatMsgList;
    private LayoutInflater inflater;

    public ChatListAdapter(Context context, List<ChatMessage> msgList) {
        this.chatMsgList = msgList;
        this.inflater = LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
        return chatMsgList.size();
    }

    @Override
    public Object getItem(int position) {
        return chatMsgList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ChatMessage chatMsg = chatMsgList.get(position);
        ViewHolder viewHolder = null;
        if(convertView == null) { // 没有缓存的view
            viewHolder = new ViewHolder();
            if(chatMsg.isComMeg()) { // 根据是否是对方消息来显示不同的item布局
                convertView = inflater.inflate(R.layout.left_chat_layout, null);
                viewHolder.msgTv = convertView.findViewById(R.id.left_msg_tv);
            } else {
                convertView = inflater.inflate(R.layout.right_chat_layout, null);
                viewHolder.msgTv = convertView.findViewById(R.id.right_msg_tv);
            }
            convertView.setTag(viewHolder); // 缓存viewHolder对象
        } else { // 有缓存的view，直接取出缓存的viewHolder对象
            viewHolder = (ViewHolder)convertView.getTag();
        }

        viewHolder.msgTv.setText(chatMsg.getMsg()); // 设置消息内容

        return convertView;
    }

    class ViewHolder {
        public TextView msgTv;
    }
}

步骤三：设置ListView的Adapter

最后一步是将Adapter与ListView关联起来：

ListView chatListView = findViewById(R.id.lv_chat);
List<ChatMessage> msgList = initChatMsgList(); // 从服务器读取聊天消息列表
ChatListAdapter adapter = new ChatListAdapter(this, msgList);
chatListView.setAdapter(adapter);

这样，我们就完成了一个仿QQ聊天界面的ListView自定义Adapter实现。

示例说明

示例一：在Activity中使用ListView

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ListView chatListView = findViewById(R.id.lv_chat);
        List<ChatMessage> msgList = initChatMsgList(); // 从服务器读取聊天消息列表
        ChatListAdapter adapter = new ChatListAdapter(this, msgList);
        chatListView.setAdapter(adapter);
    }

    // 初始化消息列表
    private List<ChatMessage> initChatMsgList() {
        List<ChatMessage> msgList = new ArrayList<>();
        msgList.add(new ChatMessage(true, "你好，很高兴见到你！"));
        msgList.add(new ChatMessage(false, "同样很高兴见到你！"));
        return msgList;
    }
}

示例二：在Fragment中使用ListView

public class ChatFragment extends Fragment {
    private ListView chatListView;
    private ChatListAdapter adapter;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_chat, container, false);
        chatListView = view.findViewById(R.id.lv_chat);
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        List<ChatMessage> msgList = initChatMsgList(); // 从服务器读取聊天消息列表
        adapter = new ChatListAdapter(getActivity(), msgList);
        chatListView.setAdapter(adapter);
    }

    // 初始化消息列表
    private List<ChatMessage> initChatMsgList() { ... }
}

以上就是“Android ListView自定义Adapter实现仿QQ界面”的完整攻略。