Android学习开发之路——简单UI聊天界面的实现

　　

　　学了很多的安卓的知识，今天就记录一下简单聊天界面的实现，首先先看XMl,代码如下：聊天气泡布局代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <!-- 发送时间 -->
    <TextView android:id="@+id/tv_chattime" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" android:layout_marginTop="14dp"
        android:padding="3dp"
        android:text="2016年9月13日10:55:58" android:textColor="#FFFFFF"
        android:textSize="12sp" />
    
    <!-- 文字内容 -->
    <TextView android:id="@+id/tv_chatneirong" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_alignTop="@+id/iv_chattou"
        android:layout_toLeftOf="@+id/iv_chattou" android:background="@drawable/skin_aio_user_bubble_nor"
        android:gravity="center" android:padding="10dp"
        android:text="发送的内容" android:layout_marginTop="10dp"
         android:textSize="16sp"  android:maxLines="10"
         android:maxEms="10"
         />

    <!-- 头像 -->
    <ImageView android:id="@+id/iv_chattou" android:layout_width="40dp"
        android:layout_height="40dp" android:layout_alignParentRight="true"
        android:layout_below="@+id/tv_chattime" android:layout_marginRight="14dp"
        android:src="@drawable/ic_launcher" />

 

</RelativeLayout>

　　activiti_main.XML代码如下

<RelativeLayout 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"
    tools:context="${relativePackage}.${activityClass}" >
    <!-- 用来显示消息的列表 -->
    <ListView android:id="@+id/wo" android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/neirong"></ListView>
    <!-- 用来输入文本的 -->
    <EditText android:id="@+id/neirong" android:layout_width="match_parent"
        android:layout_height="wrap_content" android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/fasong" android:text="少时诵诗书" />
    <!-- 用于发送的按钮 -->
    <Button android:id="@+id/fasong" android:layout_width="wrap_content"
        android:layout_height="wrap_content"  android:text="发送"
        android:layout_alignParentBottom="true"  
        android:layout_alignParentRight="true"/>

</RelativeLayout>

　　　　　　　　　　　　　　　　　　　　　　　主页面布局效果图
　　

这里主要是通过ListView的更新数据来实现聊天，EditText用来接收内容，Button用来发送消息

接下来 来实现Java代码 MainActivity.java

package com.example.androidliaotian;

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



import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
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 {
    private ListView listview;//列表
    private EditText neirong;//内容
    private Button fasong;//按钮
    private List<JavaBean> list = new ArrayList<JavaBean>();//填充数据的list集合
    private MainAdapten adapten; //构建数据源
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        setContentView(R.layout.activity_main);
        super.onCreate(savedInstanceState);
        
        listview = (ListView) findViewById(R.id.wo);
        //构建adapten数据源
        adapten = new MainAdapten(list, this);
        listview.setAdapter(adapten);
        neirong = (EditText) findViewById(R.id.neirong);
        fasong = (Button) findViewById(R.id.fasong);
    　　//发送按钮的点击事件
        fasong.setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View v) {
                //String text = ;
                //实例化Bean文件
                JavaBean javaBean = new JavaBean();
                //取当前文本内容并利用set方法赋值
                javaBean.setNeirong(neirong.getText().toString());
                javaBean.setTime(System.currentTimeMillis()+"");
                list.add(javaBean);
                //更新数据源
                adapten.setList(list);
                adapten.notifyDataSetChanged();
                //列表显示最后一条数据
                listview.setSelection(list.size()-1);
                //发送完毕之后要让输入框清空
                 neirong.setText("");
            }
        });
        
        
        
    }
    
}

 　　接下来是Bean文件代码

package com.example.androidliaotian;

public class JavaBean {
    private String neirong;
    private String time;
    public String getNeirong() {
        return neirong;
    }
    public void setNeirong(String neirong) {
        this.neirong = neirong;
    }
    public String getTime() {
        return time;
    }
    public void setTime(String time) {
        this.time = time;
    }
    @Override
    public String toString() {
        return "JavaBean [neirong=" + neirong + ", time=" + time + "]";
    }
    
    
}

　　ChatAdapter.java

package com.example.androidliaotian;

import java.util.List;



import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class MainAdapten extends BaseAdapter{
    private List<JavaBean> list;
    private Context context;
    
    public MainAdapten(List<JavaBean> list,Context context){
        this.context = context;
        this.list = list;
    }
    //用于更新集合
    public void setList(List<JavaBean> list) {
        this.list = list;
        notifyDataSetChanged();
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }
    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        
        final Hui hui;
        if(convertView == null){
            hui = new Hui();
            convertView = LayoutInflater.from(context).inflate(R.layout.item_chatqipao, null);
            hui.chatneirong = (TextView) convertView.findViewById(R.id.tv_chatneirong);
            hui.chattime = (TextView) convertView.findViewById(R.id.tv_chattime);
            hui.tou = (ImageView) convertView.findViewById(R.id.iv_chattou);
        
            convertView.setTag(hui);
        }else{
            hui = (Hui) convertView.getTag();
        }
        JavaBean javaBean  = list.get(position);
        hui.chatneirong.setText("我是"+javaBean.getNeirong());
        hui.chattime.setText(javaBean.getTime());
        return convertView;
    }

    class Hui{
        ImageView tou,tupian;
        TextView chattime,chatneirong;
    }
}

　　好了，一个简单的聊天界面就这么实现了，下面附上源代码

　　下载地址：链接: http://pan.baidu.com/s/1nvk3feT 密码: nj4z