1. 程式人生 > >仿寫聊天氣泡介面

仿寫聊天氣泡介面

首先利用listview+EditText+Button構建一個主佈局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
  tools:context="com.example.liaotian.MainActivity" >

    <ListView 
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:divider="#0000">
    </ListView>
    
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        
        <EditText 
            android:id="@+id/text"
            android:layout_width="0dp" 
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:maxLines="2"/>
        
        <Button
            android:id="@+id/send"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="傳送"/>
    </LinearLayout>
</LinearLayout>


然後進行list_item佈局的編寫,這裡把左佈局和右佈局寫在同一個介面裡,將來再通過呼叫setVisible方法進行隱藏來形成一左一右對話效果

<?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" >

    <LinearLayout
        android:id="@+id/left_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_marginLeft="10dp"
        android:background="@drawable/from" >

        <TextView
            android:id="@+id/left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="#080808" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/right_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginRight="10dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/to" >

        <TextView
            android:id="@+id/right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="#080808" />
    </LinearLayout>

</LinearLayout>


佈局書寫完畢,然後進行java程式碼的書寫,手寫書寫Msg.java

package com.example.liaotian;

public class Msg {

	public static final int TYPE_SENT = 1;
	public static final int TYPE_RECEIVED = 0;
	private String content;
	private int type;

	public Msg(String content, int type) {
		// TODO Auto-generated constructor stub
		this.content = content;
		this.type = type;
	}

	public String getContent() {
		return this.content;
	}

	public int getType() {
		return this.type;
	}
}


繼續是Adapter的編寫

package com.example.liaotian;

import java.util.List;

import android.content.Context;
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 MsgAdapter extends ArrayAdapter<Msg> {

	private int resourceId;

	public MsgAdapter(Context context, int resource, List<Msg> objects) {
		super(context, resource, objects);
		// TODO Auto-generated constructor stub
		this.resourceId = resource;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		// return super.getView(position, convertView, parent);
		Msg msg = getItem(position);
		ViewHolder holder;
		View view;
		if (convertView == null) {
			view = LayoutInflater.from(getContext()).inflate(resourceId, null);
			holder = new ViewHolder();
			holder.leftLayout = (LinearLayout) view
					.findViewById(R.id.left_layout);
			holder.rightLayout = (LinearLayout) view
					.findViewById(R.id.right_layout);
			holder.leftMsg = (TextView) view.findViewById(R.id.left);
			holder.rightMsg = (TextView) view.findViewById(R.id.right);
			view.setTag(holder);
		} else {
			view = convertView;
			holder = (ViewHolder) view.getTag();
		}

		// 判斷是收到還是傳送的訊息
		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.rightLayout.setVisibility(View.VISIBLE);
			holder.leftLayout.setVisibility(View.GONE);
			holder.rightMsg.setText(msg.getContent());
		}
		return view;
	}

	class ViewHolder {
		LinearLayout leftLayout;
		LinearLayout rightLayout;
		TextView leftMsg;
		TextView rightMsg;
	}

}


最後是MainActivity的編寫

package com.example.liaotian;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends Activity {

	private ListView listview;
	private EditText text;
	private Button send;
	private MsgAdapter adapter;
	private List<Msg> msgList = new ArrayList<Msg>();

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

		initMsgs();

		adapter = new MsgAdapter(getApplicationContext(), R.layout.list_item,
				msgList);
		listview = (ListView) this.findViewById(R.id.listview);
		listview.setAdapter(adapter);
		text = (EditText) this.findViewById(R.id.text);
		send = (Button) this.findViewById(R.id.send);

		this.send.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				String content = text.getText().toString();
				if (!"".equals(content)) {
					Msg msg = new Msg(content, Msg.TYPE_SENT);
					msgList.add(msg);
					adapter.notifyDataSetChanged();
					listview.setSelection(msgList.size());
					text.setText("");
				} else {
					Toast.makeText(getApplicationContext(), "不準傳送空訊息",
							Toast.LENGTH_SHORT).show();
				}

			}
		});

	}

	private void initMsgs() {
		Msg msg1 = new Msg("你好啊", Msg.TYPE_RECEIVED);
		msgList.add(msg1);
		Msg msg2 = new Msg("你好啊,逗比", Msg.TYPE_SENT);
		msgList.add(msg2);
	}

}
效果圖(顏值略低。。。):