1. 程式人生 > >一個簡單聊天介面的UI實現

一個簡單聊天介面的UI實現

能力是在不斷學習和實踐中提升的,閒來沒事,就寫了這個簡單的聊天介面,沒有什麼難點,但絕對實用。下面請看介面顯示:

其實,這個介面的實現是很簡單的,就是一個ListView的應用,話不多說,直接貼程式碼了,首先是MainActivity

public 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);
	}	
}
接下來是,ListView的Adapter
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;
	}	
}
下面說一下,佈局的實現,main.xml就不多說了,我們直接貼msg_item.xml的程式碼
<?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>
點選下載原始碼