一個簡單聊天介面的UI實現
阿新 • • 發佈:2019-01-08
能力是在不斷學習和實踐中提升的,閒來沒事,就寫了這個簡單的聊天介面,沒有什麼難點,但絕對實用。下面請看介面顯示:
其實,這個介面的實現是很簡單的,就是一個ListView的應用,話不多說,直接貼程式碼了,首先是MainActivity
接下來是,ListView的Adapterpublic class MainActivity extends Activity { private List<Message> list = new ArrayList<>(); private ListView listView; private EditText inputText; private Button send; private MsgAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { // 遮蔽系統標題欄 requestWindowFeature(Window.FEATURE_NO_TITLE); super.onCreate(savedInstanceState); //createAd(); setContentView(R.layout.activity_main); listView=(ListView) findViewById(R.id.list_view); inputText=(EditText) findViewById(R.id.input_text); send=(Button) findViewById(R.id.send); adapter=new MsgAdapter(this, R.layout.msg_item, list); listView.setAdapter(adapter); initData(); send.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub String text=inputText.getText().toString(); if (!"".equals(text)) { Message msg=new Message(text, Message.TYPE_SENT); list.add(msg); //有新訊息,通知更新listView adapter.notifyDataSetChanged(); //listView定位到最後一個 listView.setSelection(list.size()); inputText.setText(""); } } }); } private void initData(){ Message msg1=new Message("Hello guy.", Message.TYPE_RECEIVED); list.add(msg1); Message msg2=new Message("Hello. Who is that?", Message.TYPE_SENT); list.add(msg2); Message msg3=new Message("This is Tom. Nice talking to you. ", Message.TYPE_RECEIVED); list.add(msg3); } }
下面說一下,佈局的實現,main.xml就不多說了,我們直接貼msg_item.xml的程式碼public class MsgAdapter extends ArrayAdapter<Message> { private int resourceId; public MsgAdapter(Context context, int resource, List<Message> objects) { super(context, resource,objects); // TODO Auto-generated constructor stub resourceId=resource; } @Override public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub Message msg=getItem(position); ViewHolder holder; View view; if (convertView==null) { view=View.inflate(getContext(), resourceId, null); holder=new ViewHolder(); holder.left_layout=(LinearLayout) view.findViewById(R.id.left_layout); holder.right_layout=(LinearLayout) view.findViewById(R.id.right_layout); holder.left_msg=(TextView) view.findViewById(R.id.left_msg); holder.right_msg=(TextView) view.findViewById(R.id.right_msg); view.setTag(holder); }else { view=convertView; holder=(ViewHolder) view.getTag(); } if (msg.getType()==Message.TYPE_RECEIVED) { //訊息顯示左邊顯示,右邊隱藏 holder.left_layout.setVisibility(View.VISIBLE); holder.right_layout.setVisibility(View.GONE); holder.left_msg.setText(msg.getContent()); }else if (msg.getType()==Message.TYPE_SENT) { holder.left_layout.setVisibility(View.GONE); holder.right_layout.setVisibility(View.VISIBLE); holder.right_msg.setText(msg.getContent()); } return view; } class ViewHolder{ LinearLayout left_layout,right_layout; TextView left_msg,right_msg; } }
點選下載原始碼<?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="match_parent" 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/someone" android:orientation="horizontal" > <TextView android:id="@+id/left_msg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="10dp" android:textColor="@color/textcolor" /> </LinearLayout> <LinearLayout android:id="@+id/right_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:background="@drawable/me" android:orientation="horizontal" > <TextView android:id="@+id/right_msg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="10dp" /> </LinearLayout> </LinearLayout>