簡易版聊天介面

原创 2016年06月01日 13:19:42

定義聊天記錄佈局 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/message_left"
        >
        <TextView 
            android:id="@+id/left_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textColor="#fff"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/right_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@drawable/message_right"
        >
        <TextView 
            android:id="@+id/rigth_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textColor="#fff"/>
    </LinearLayout>
</LinearLayout>

分別包含接收記錄(left_msg)以及發送記錄(right_msg)以及各自的背景圖片

定義主佈局 main_activity.xml:

<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:background="#d8e0e8"
    android:orientation="vertical"
    >
    <ListView 
        android:id="@+id/msg_list_view"
        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">
        <EditText
            android:id="@+id/input_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="Type somthing here"
            android:maxLines="2"
            />
        <Button
            android:id="@+id/send"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Send"
            />
    </LinearLayout>
</LinearLayout>

定義一個ListView 、輸入文本框以及發送按鈕
定義Msg類:

package com.example.uibestpractive;

public class Msg {
    private String content; //消息的內容
    private int type;  //消息的類型
    public static final int TYPE_RECEIVED = 0;  //接收信息
    public static final int TYPE_SEND = 1; //發送信息

    public Msg (String content,int type){
        this.content = content;
        this.type = type;
    }
    public String getContent() {
        return content;
    }
    public int getType() {
        return type;
    }
}

content 表示消息的內容,type表示消息的類型,消息的類型包含:TYPE_RECEIVED、TYPE_SEND。
創建ListView適配類,MsgAdapter:

package com.example.uibestpractive;

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 textViewResourceId, List<Msg> objects) {
        super(context, textViewResourceId, objects);
        // TODO Auto-generated constructor stub
        resourceId = textViewResourceId;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        Msg msg = getItem(position);
        View view ;
        ViewHolder viewHolder = null;
        if(convertView == null){
            view = LayoutInflater.from(getContext()).inflate(resourceId, null);
            viewHolder = new ViewHolder();
            viewHolder.leftLayout = (LinearLayout)view.findViewById(R.id.left_layout);
            viewHolder.rightLayout = (LinearLayout)view.findViewById(R.id.right_layout);
            viewHolder.leftMsg = (TextView)view.findViewById(R.id.left_msg);
            viewHolder.rightMsg = (TextView)view.findViewById(R.id.rigth_msg);
            view.setTag(viewHolder);
        }else{
            view = convertView;
            viewHolder = (ViewHolder)view.getTag();
        }
        if(msg.getType() == msg.TYPE_RECEIVED){ //如果是接收的信息,則顯示左邊的消息佈局,將右邊的消息佈局隱藏
            viewHolder.leftLayout.setVisibility(View.VISIBLE); 
            viewHolder.rightLayout.setVisibility(View.GONE);
            viewHolder.leftMsg.setText(msg.getContent());
        }else if (msg.getType() == msg.TYPE_SEND){//如果是發送的信息,則顯示左邊的消息佈局,將右邊的消息佈局隱藏
            viewHolder.rightLayout.setVisibility(View.VISIBLE);
            viewHolder.leftLayout.setVisibility(View.GONE);         
            viewHolder.rightMsg.setText(msg.getContent());
        }
        return view ;
    }
    class ViewHolder{
        LinearLayout leftLayout;
        LinearLayout rightLayout;
        TextView leftMsg;
        TextView rightMsg;  
    }
}

在getView()方法中,通過消息的類型判斷 如果是收到的消息,則顯示左邊的消息佈局,如果是發送的消息,則顯示右邊的消息佈局。
MainActivity類:

package com.example.uibestpractive;

import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;

public class MainActivity extends Activity implements OnClickListener{
    private ListView msgListView;
    private Button send;
    private EditText inputText;
    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(MainActivity.this, R.layout.msg_item, msgList);
        send = (Button)findViewById(R.id.send);
        inputText = (EditText)findViewById(R.id.input_text);
        msgListView = (ListView)findViewById(R.id.msg_list_view);
        msgListView.setAdapter(adapter);
        send.setOnClickListener(this);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.quit) {
            finish();
        }
        return super.onOptionsItemSelected(item);
    }
    private void initMsgs(){
        Msg mgs1 = new Msg("hello guy", Msg.TYPE_RECEIVED);
        msgList.add(mgs1);
        Msg mgs2 = new Msg("hello, who is that ?", Msg.TYPE_SEND);
        msgList.add(mgs2);
        Msg msg3 = new Msg("This is tom.nick talking for you ",Msg.TYPE_RECEIVED);
        msgList.add(msg3);
    }
    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        String content = inputText.getText().toString();
        if(! "".equals(content)){
            Msg msg = new Msg(content, Msg.TYPE_SEND);
            msgList.add(msg);
            adapter.notifyDataSetChanged();  //當有新消息時,刷新ListView 中的顯示
            msgListView.setSelection(msgList.size()); //將ListView定位到最後一行
            inputText.setText("");
        }
    }
}

當有信息發出時,如果content不為空,則創建一個新的Msg對象,並把它添加到msgList中,又調用notifyDataSetChanged()方法通知列表發生了變化,新增的消息才能在ListView中顯示,然後再調用setSelection()方法將顯示的數據定位在最後一行。

相关文章推荐

建置一個 WINCE 下的 XML BASE 的人機介面引擎 ---- 繪圖引擎篇 (1)

本BLOG所有原創之原始程式碼皆為本人創作,非經本人同意不得轉載,非經本人授權不得使用在營利用途 前言 由於我本身的工作一直和寫引擎級的程式有不解之緣,每至一家公司在離開之前 至少都會留下一套引...

links lynx linux 字符介面网页浏览

转自 : 鳥哥的Linux 私房菜 什么? 文字界面竟然有浏览器! 别逗了好不好? 呵呵! 谁有那个时间在逗你呦! 真的啦! 有这个东西, 是在文字界面下上网浏览的好工具! 分别是link...

深刻解析 Android 的 AIDL 介面

深刻解析 Android 的 AIDL 介面 在Android應用框架裡,應用層級的軟體大多是Java類別,而系統層級的軟體大多是C或 C++類別。Android使用JNI介面來達成這個目標。例...
  • myspor
  • myspor
  • 2011年03月30日 19:17
  • 576

PhoneGap 命令列介面

命令列介面 本指南演示如何創建應用程式並將它們部署到各種本機移動平臺,使用 cordova 命令列介面 (CLI)。 此工具允許您創建新專案、 建立他們在不同平臺上,和在模擬器中運行它們。 此外...
  • dulgao
  • dulgao
  • 2013年12月03日 11:43
  • 743

C++並發 練習筆記(二)使用boost Asio的async I/O技術實作簡易網路聊天室 (上)

這次代碼閱讀主要來自boost asio開發團隊 的C++11 標準範例。 範例連結 我會對我自己閱讀的部份加上註釋,並從中學習函數的意義及使用方式。 希望能給一同在學習路上的大家一些幫助。 如果對...

设定网路介面命令--ifconfig(包含txqueuelen参数说明)

一. ifconfig 指令.      ifconfig 指令用来设定网路介面, 并可查询目前网路介面的设定情形.      语法:      1. ifconfig [介面]  ...

NI推出Single-BoardRIO嵌入式介面卡

NI美商国家仪器发表新的4款NISingle-BoardRIO机板层级嵌入式介面卡,搭载1组Real-Time处理器、Spartan-6FPGA、类比与数位I/O,同时内建更多周边设备,适合客制化的嵌...

Chapter8 自訂使用者介面

  • 2015年06月26日 09:36
  • 14.61MB
  • 下载

Android ProgressBar 自定义样式(七),仿真QQ聊天、网易新闻客户端加载图片Loading

先上图,有图有真相:     其实也很简单,也是用了一下投机取巧的方法,大家有更多的方法的话,可以和我交流一下。 xml布局文件如下: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:簡易版聊天介面
举报原因:
原因补充:

(最多只允许输入30个字)