程序员人生 网站导航

【安卓笔记】气泡式ListView

栏目:综合技术时间:2014-12-16 08:34:59

实现效果:


要想实现这个效果,我们需要找到气泡背景的9.png图片,大家可以从qq微信等apk包中提取。

实现步骤:

1.编写布局文件。

每一个条目的布局
activity_chat_singlemessage.xml
<?xml version="1.0" encoding="utf⑻"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" > <LinearLayout android:id="@+id/singleMessageContainer" android:layout_width="fill_parent" android:layout_height="wrap_content" > <TextView android:id="@+id/singleMessage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="5dip" android:background="@drawable/bubble_b" android:paddingLeft="10dip" android:textSize="18sp" android:text="Hello bubbles!" android:textColor="@android:color/primary_text_light" /> </LinearLayout> </LinearLayout>
界面布局:
activity_main.xml
<?xml version="1.0" encoding="utf⑻"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ListView android:id="@+id/listView1" android:divider="@null" android:listSelector="@android:color/transparent" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="80dp" > </ListView> <RelativeLayout android:id="@+id/form" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:orientation="vertical" > <EditText android:id="@+id/chatText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_toLeftOf="@+id/buttonSend" android:ems="10" android:inputType="textMultiLine" /> <Button android:id="@+id/buttonSend" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/chatText" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:text="Send" /> </RelativeLayout> </RelativeLayout>
2.编写业务数据类:

package com.example.chatbubble; public class ChatMessage {//代表每条消息 public boolean left;//是不是在左侧 public String message; public ChatMessage(boolean left, String message) { super(); this.left = left; this.message = message; } }

3.编写适配器类
package com.example.chatbubble; import java.util.ArrayList; import java.util.List; import android.content.Context; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.LinearLayout; import android.widget.TextView; public class ChatArrayAdapter extends ArrayAdapter<ChatMessage> { private TextView chatText; private LinearLayout container; private List<ChatMessage> chatData = new ArrayList<>(); @Override public void add(ChatMessage object) { chatData.add(object); super.add(object); } @Override public int getCount() { return chatData.size(); } @Override public ChatMessage getItem(int position) { return chatData.get(position); } @Override public View getView(int position, View convertView, ViewGroup parent) { if(convertView == null) { LayoutInflater inflater = (LayoutInflater) this.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE); convertView = inflater.inflate(R.layout.activity_chat_singlemessage,parent, false); } chatText = (TextView) convertView.findViewById(R.id.singleMessage); container = (LinearLayout) convertView.findViewById(R.id.singleMessageContainer); ChatMessage msg = getItem(position); chatText.setText(msg.message); /*根据msg的内部left标识来判定应当选择甚么背景,和位置(左/右)*/ chatText.setBackgroundResource(msg.left ? R.drawable.bubble_b : R.drawable.bubble_a); container.setGravity(msg.left ? Gravity.LEFT : Gravity.RIGHT); return convertView; } public ChatArrayAdapter(Context context, int resource) { super(context, resource); } }
4.编写主界面的代码:
package com.example.chatbubble; import android.app.Activity; import android.database.DataSetObserver; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.AbsListView; import android.widget.Button; import android.widget.EditText; import android.widget.ListView; public class MainActivity extends Activity { private ListView lv; private Button but; private EditText et; private ChatArrayAdapter adapter; private boolean side = false; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); lv = (ListView) findViewById(R.id.listView1); but = (Button) findViewById(R.id.buttonSend); et = (EditText) findViewById(R.id.chatText); adapter = new ChatArrayAdapter(this, R.layout.activity_chat_singlemessage); lv.setAdapter(adapter); but.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { sendChatMessage();//发送消息 } }); lv.setTranscriptMode(AbsListView.TRANSCRIPT_MODE_ALWAYS_SCROLL); //注册视察者,数据改变时滑到底部 adapter.registerDataSetObserver(new DataSetObserver() { @Override public void onChanged() { super.onChanged(); lv.setSelection(adapter.getCount() - 1); } }); } private boolean sendChatMessage() { /*add方法内部会调用notifyDataSetChanged方法,故我们不需要手动调用!*/ adapter.add(new ChatMessage(side, et.getText().toString())); /*清空数据*/ et.setText(""); side = !side; return true; } }

效果完成!

源码地址:https://github.com/Rowandjj/BubbleStyleListViewDemo






------分隔线----------------------------
------分隔线----------------------------

最新技术推荐