【android】聊天界面的製作-簡易版實現

看完了第一行代碼第三章，改進了一些基本功能，下面就聽小弟一一道來：

也參考了很多別人的代碼，但是總覺得一些功能可以比較輕鬆的實現就不繞那麼多彎子，就用最基礎的碼代碼實現一樣的功能：（1）整體佈局代碼一樣是精簡的；（2）實現左右按鈕互發信息；（3）收發表情效果代碼部分正在解bug中等後續更新

下面趕緊來看看實現過程吧（按我寫代碼的思路來寫文章，如果不習慣大家見諒）：

標題欄的製作：

定義一個xml文件，在該xml文件中採用水平排列的屬性分別放置兩個ImageButton控件以及一個ImageView控件，代碼如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#8A2BE2"
    android:gravity="center"
    android:orientation="horizontal" >
    
    <ImageButton 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:background="@drawable/nf"/>
    <TextView 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textSize="15sp"
        android:text="羣聊（4）"/>
    <ImageButton 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5dp"
        android:background="@drawable/icon_friend_w"/>

效果如圖所示：

然後再主佈局中加入該標題欄的子佈局：

<include
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        layout="@layout/top_layout" />

整體佈局

聊天界面的整體佈局主界面中放置了一個ListView用於顯示聊天的消息內容，與它成線性佈局豎直放置了輸入框，輸入框子佈局中水平放置了一個ImageButton控件、兩個Button（背景色的製作見我前面幾篇文章）以及一個EditText控件：

<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.chattingtest.MainActivity" >

    <include
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        layout="@layout/top_layout" />
    <ListView 
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:divider="#0000"
        android:background="#DCDCDC">
        
    </ListView>
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="#DCDCDC"
        android:orientation="horizontal">
        
        <ImageButton 
            android:id="@+id/image_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:background="@drawable/yx_soundwhitebutton"/>
        <Button 
            android:id="@+id/left_button"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginTop="4dp"
            android:layout_marginLeft="5dp"
            android:background="@drawable/bluetomi"
            android:text="發送"
            android:textColor="#ffffff"
            android:textSize="15sp"/>
        <EditText 
            android:id="@+id/edit_view"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="4dp"
            android:background="@drawable/mise"/>
         <Button 
            android:id="@+id/right_button"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginTop="4dp"
            android:layout_marginLeft="5dp"
            android:background="@drawable/bluetomi"
            android:text="發送"
            android:textColor="#ffffff"
            android:textSize="15sp"/>
    </LinearLayout>

</LinearLayout>

整體效果如下：

左右鍵發送顯示功能的實現

然後來定義消息實體類，新建Msg類，代碼如下：

public class Msg {
	public static final int TYPE_RECEIVED = 0;
	public static final int TYPE_SENT = 1;
	private String content;
	private int type;
	
	public Msg(String content,int type)
	{
		this.content = content;
		this.type = type;
	}
	
	public String getContent()
	{
		return content;
	}
	
	public int getType()
	{
		return type;
	}
}

定義彎消息實體類，下面當然來創建顯示消息內容的ListView子佈局（樓主這邊讓收到的消息和發出的消息都在同一個佈局中哦!!怎麼實現還是直接看代碼先把）

<span style="color:#330033;"><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="match_parent"
	    android:layout_height="wrap_content"
	    android:layout_gravity="left"
	    android:orientation="horizontal">
	    
	    <ImageView 
	    android:id="@+id/image_viewleft"
	    android:layout_width="50dp"
	    android:layout_height="50dp"
	    android:background="@drawable/xc"/>
	    <LinearLayout 
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"
	    	android:orientation="vertical">
	    
	    	<TextView 
	        	android:id="@+id/text_viewleft"
	        	android:layout_width="wrap_content"
	        	android:layout_height="wrap_content"
	        	android:textSize="15sp"
	        	android:layout_marginLeft="5dp"
	        	android:textColor="#5E2612"
	        	android:text="小鵬飛"/>
	    	<TextView 
	    	    android:id="@+id/text_viewleft1"
	    	    android:layout_width="wrap_content"
	    	    android:layout_height="wrap_content"
	    	    android:layout_gravity="center"
	    	    android:background="@drawable/yx_orangebubblebgright"
	    	    android:text="左邊輸入哈哈哈哈哈哈哈哈哈哈哈哈哈"
	    	    />
	    
		</LinearLayout>
	    
	</LinearLayout>
	
	<LinearLayout 
	    android:id="@+id/right_layout"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_gravity="right"
	    android:orientation="horizontal">
	    <LinearLayout 
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"
	    	android:orientation="vertical">

	        <TextView
	            android:id="@+id/text_viewright"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:layout_marginRight="5dp"
	            android:layout_gravity="right"
	            android:text="張胖子"
	            android:textColor="#5E2612"
	            android:textSize="15sp" />

	    	<TextView
	    	    android:id="@+id/text_viewright1"
	    	    android:layout_width="wrap_content"
	    	    android:layout_height="wrap_content"
	    	    android:layout_gravity="center"
	    	    android:background="@drawable/yx_orangebubblebg_left"
	    	    android:text="右邊輸入哈" />
	    
		</LinearLayout>
		<ImageView 
	    		android:id="@+id/image_viewright"
	    		android:layout_width="50dp"
	    		android:layout_height="50dp"
	    		android:background="@drawable/xd"/>

	 
	</LinearLayout>
	

</LinearLayout>
</span>

主要利用了可見屬性，在後面的代碼中根據消息的類型來決定隱藏或顯示那一邊消息就行效果如下圖（這兩張圖樓主感覺比較符合我室友的形象，也可以動態設置圖像，比較簡單這裏就不說了）

左右鍵發送顯示：

既然定義好了實體類，下面馬上來定義一個ListView的適配器，讓他繼承自ArrayAdapter並泛型指向Msg類。代碼如下

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;
		
	}
	
	public View getView(int position,View convertView,ViewGroup parent)
	{
		Msg mMsg = getItem(position);
		View mView;
		ViewHolder mViewHolder;
		if(convertView == null)
		{
			mView = LayoutInflater.from(getContext()).inflate(resourceId, null);
			mViewHolder = new ViewHolder();
			mViewHolder.leftLayout = (LinearLayout) mView.findViewById(R.id.left_layout);
			mViewHolder.rightLayout = (LinearLayout) mView.findViewById(R.id.right_layout);
			mViewHolder.leftMsg = (TextView) mView.findViewById(R.id.text_viewleft1);
			mViewHolder.rightMsg = (TextView) mView.findViewById(R.id.text_viewright1);
			mView.setTag(mViewHolder);
		}else
		{
			mView = convertView;
			mViewHolder = (ViewHolder) mView.getTag();
		}
		if(mMsg.getType() == Msg.TYPE_RECEIVED)
		{
			mViewHolder.leftLayout.setVisibility(View.VISIBLE);
			mViewHolder.rightLayout.setVisibility(View.GONE);
			mViewHolder.leftMsg.setText(mMsg.getContent());
		}else if(mMsg.getType() == Msg.TYPE_SENT)
		{
			mViewHolder.leftLayout.setVisibility(View.GONE);
			mViewHolder.rightLayout.setVisibility(View.VISIBLE);
			mViewHolder.rightMsg.setText(mMsg.getContent());
		}
		return mView;
		
	}
	
	class ViewHolder{
		LinearLayout leftLayout;
		LinearLayout rightLayout;
		TextView leftMsg;
		TextView rightMsg;
	}
}

上面的代碼和定義我相信大家再熟悉不過了，我這邊只不過在getView方法中增加了對消息類型的判斷。如果收到消息則顯示左邊佈局，如果發送消息則顯示右邊佈局。

最後主活動代碼實現如下：

public class MainActivity extends Activity implements android.view.View.OnClickListener{
	private ListView mListView;
	private Button left_Button;
	private Button right_button;
	private EditText mEditText;
	private MsgAdapter mMsgAdapter;
	private List<Msg> mList = new ArrayList<Msg>();
	/*
	private int[] drawer = {R.drawable.emoji_1f385,R.drawable.emoji_1f38e,R.drawable.emoji_1f466,R.drawable.emoji_1f467,
							R.drawable.emoji_1f468,R.drawable.emoji_1f469,R.drawable.emoji_1f46b,R.drawable.emoji_1f46e,
							R.drawable.emoji_1f46f,R.drawable.emoji_1f471,R.drawable.emoji_1f472,R.drawable.emoji_1f473,
							R.drawable.emoji_1f474,R.drawable.emoji_1f475,R.drawable.emoji_1f476,R.drawable.emoji_1f477,
							R.drawable.emoji_1f478,R.drawable.emoji_1f480};
							*/
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        
        mListView = (ListView) findViewById(R.id.list_view);
        left_Button = (Button) findViewById(R.id.left_button);
        right_button = (Button) findViewById(R.id.right_button);
        mEditText = (EditText) findViewById(R.id.edit_view);
        mMsgAdapter = new MsgAdapter(this, R.layout.list_layout, mList);
        mListView.setAdapter(mMsgAdapter);
        left_Button.setOnClickListener(this);
        right_button.setOnClickListener(this);
        mEditText.setOnClickListener(this);
        
    }

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		String content = mEditText.getText().toString();
		switch(v.getId())
		{
		case R.id.left_button:
			if (mEditText.getText().equals("")) {
				Toast.makeText(this, "發送的消息不能爲空！", Toast.LENGTH_SHORT).show();
				return;
			}
	        	Msg mMsg = new Msg(content, Msg.TYPE_RECEIVED);
	        	mList.add(mMsg);
	        	mMsgAdapter.notifyDataSetChanged();
	        	mListView.setSelection(mList.size());
	        	mEditText.setText("");
			break;
		case R.id.right_button:
			if (mEditText.getText().equals("")) {
				Toast.makeText(this, "發送的消息不能爲空！", Toast.LENGTH_SHORT).show();
				return;
			}
	        	Msg mMsg1 = new Msg(content, Msg.TYPE_SENT);
	        	mList.add(mMsg1);
	        	mMsgAdapter.notifyDataSetChanged();
	        	mListView.setSelection(mList.size());
	        	mEditText.setText("");
	        	break;
	    }
		
	}

}

總體效果如下圖：

【android】聊天界面的製作-簡易版實現

PDManer [元數建模]-v4.9.0 發佈：一款簡單好用的數據庫建模平臺

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

sql求連續值問題

cs01 CSS Syntax

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

[MASM拾遺]Offset僞指令

h30 HTML Layout Elements

瞭解顯卡

一款基於C#開發的通訊調試工具（支持Modbus RTU、MQTT調試）

Linux/Golang/glibC系統調用

input子系統整體框架

ap6212移植

【android】聊天界面的製作-簡易版實現

通過一個內存泄漏問題去再探探Handler源碼

input自系統之gsensor模塊開發

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結