QQ聊天

bianshaopeng

于 2015-09-05 20:41:56 发布

阅读量573

点赞数

本文链接：https://blog.csdn.net/bianshaopeng/article/details/48229305

版权

QQ聊天主界面

<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=".MainActivity">
    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="QQ聊天"
            android:textColor="#ffffff"
            android:background="#0779DB"
            android:textSize="20sp"
            android:gravity="center"/>
    </LinearLayout>
    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:divider="@null"
        android:cacheColorHint="#00000000"
        android:background="@drawable/listview_background">
    </ListView>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:gravity="center_vertical">
            <ImageView
                android:id="@+id/imageview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/dvb"/>
            <Button
                android:id="@+id/button_send_left"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@drawable/but"
                android:text="发送"
                android:layout_marginLeft="10dp"/>
            <EditText
                android:id="@+id/edittext"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:hint="请输入内容"
                android:background="@mipmap/et_box"
                android:layout_margin="2dp"/>
            <Button
                android:id="@+id/button_send_righht"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@drawable/but"
                android:text="发送"/>
        </LinearLayout>
    <GridView
        android:id="@+id/girdview"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:numColumns="6">

    </GridView>
</LinearLayout>

聊天人物

左边

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textview_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="星期五 14:20"
        android:textColor="#000000"
        android:gravity="center"
        android:padding="10dp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/imageview_head"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                <TextView
                    android:id="@+id/textview_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="营长"
                    android:textColor="#000000"
                    android:textSize="15dp"
                    android:padding="10dp"
                    android:background="@drawable/text_back" />
                <TextView
                    android:id="@+id/textview_nickname"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="昵称"
                    android:textColor="#000000"
                    android:textSize="15dp"
                    android:padding="10dp"/>
            </LinearLayout>
            <TextView
                android:id="@+id/textview_message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我是内容啊手机的萨克的凯撒的卡按时打卡时间的撒娇看得见啊大家撒娇的骄傲打手机点卡技术"
                android:background="@mipmap/qq"
                android:padding="10dp"
                android:layout_marginRight="50dp"/>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

右边

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textview_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="星期五 14:20"
        android:textColor="#000000"
        android:gravity="center"
        android:padding="10dp"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right">

                <TextView
                    android:id="@+id/textview_nickname"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="昵称"
                    android:textColor="#000000"
                    android:textSize="15dp"
                    android:padding="10dp"/>
                <TextView
                    android:id="@+id/textview_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="营长"
                    android:textColor="#000000"
                    android:textSize="15dp"
                    android:padding="10dp"
                    android:background="@drawable/text_back" />
            </LinearLayout>
            <TextView
                android:id="@+id/textview_message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我是内容啊手机的手机点卡技术"
                android:background="@mipmap/qq"
                android:padding="10dp"
                android:layout_marginLeft="50dp"/>
        </LinearLayout>
        <ImageView
            android:id="@+id/imageview_head"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"/>
    </LinearLayout>

</LinearLayout>

表情

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
<ImageView
    android:id="@+id/imageview_expression"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/dja"
    android:padding="10dp"/>

</LinearLayout>

用gridview添加表情

往gridview中添加表情图片

public class ExpressionAdapter extends BaseAdapter {
    private LayoutInflater mInflater;
    private int  [] mData={R.mipmap.dja,R.mipmap.djb,R.mipmap.dje,R.mipmap.djf,R.mipmap.djg,R.mipmap.djh,R.mipmap.dji,R.mipmap.djj,
                              R.mipmap.djk,R.mipmap.djl,R.mipmap.djm,R.mipmap.djn,R.mipmap.djo,R.mipmap.djp,R.mipmap.djq,R.mipmap.djr,
                               R.mipmap.djs,R.mipmap.djt,R.mipmap.dju,R.mipmap.djv,R.mipmap.djw,R.mipmap.djx,R.mipmap.djy,R.mipmap.djz,};

    public ExpressionAdapter(LayoutInflater mInflater) {
        this.mInflater = mInflater;
    }

    @Override
    public int getCount() {
        return mData.length;
    }

    @Override
    public Object getItem(int position) {
        return position;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        viewHoder vh=null;
        if (convertView==null){
            convertView=  mInflater.inflate(R.layout.activity_expression,null);
            vh=new viewHoder();
            vh.imageView= (ImageView) convertView.findViewById(R.id.imageview_expression);
            convertView.setTag(vh);
        }
           vh= (viewHoder) convertView.getTag();
           vh.imageView.setImageResource(mData[position]);
            return convertView;
    }
    class viewHoder{
        ImageView imageView;
    }
}

用popupwindow添加表情

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <GridView
        android:id="@+id/girdview_pop"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:numColumns="5"></GridView>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
<ImageView
    android:id="@+id/imageview_expression"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/dja"
    android:padding="10dp"/>

</LinearLayout>

主界面

public class Chat {
    private  int img;
    private String title;
    private String nickname;
    private long time;
    private  String message;
    private int type;
    public Chat(){

    }

    public Chat(int img, String title, String nickname, long time, String message) {
        this.img = img;
        this.title = title;
        this.nickname = nickname;
        this.time = time;
        this.message = message;
    }

    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }

    public int getImg() {
        return img;
    }

    public void setImg(int img) {
        this.img = img;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    public long getTime() {
        return time;
    }

    public void setTime(long time) {
        this.time = time;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}

向主界面中添加元素

public class ChatAdapter extends BaseAdapter{
    private LayoutInflater mInlater;
    private List<Chat> mData;
    private Html.ImageGetter imageGetter;
    private SimpleDateFormat format;
    public static final int MESSAGE_LEFT=0;
    public static final int MESSAGE_RIGHT=1;
    public static final int MAX_TYPE=2;

    public ChatAdapter(LayoutInflater inflater,List<Chat> data,Html.ImageGetter imageGetter){
        this.mInlater=inflater;
        this.mData=data;
        this.imageGetter=imageGetter;
        format=new SimpleDateFormat("EEE HH:mm");

    }

    @Override
    public int getViewTypeCount() {
        return MAX_TYPE;
    }

    @Override
    public int getItemViewType(int position) {
        return mData.get(position).getType();
    }

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

    @Override
    public Object getItem(int position) {
        return position;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        viewHoder vh=null;
        viewHoderRight vhr=null;
        int  type=getItemViewType(position);
        if (convertView==null){
            switch (type){
                case MESSAGE_LEFT:
                    vh=new viewHoder();
                    convertView=mInlater.inflate(R.layout.activity_masege,null);
                    vh.imageView_head= (ImageView) convertView.findViewById(R.id.imageview_head);
                    vh.textView_title= (TextView) convertView.findViewById(R.id.textview_title);
                    vh.textView_nickname= (TextView) convertView.findViewById(R.id.textview_nickname);
                    vh.textView_message= (TextView) convertView.findViewById(R.id.textview_message);
                    vh.textView_time= (TextView) convertView.findViewById(R.id.textview_time);
                    convertView.setTag(vh);
                    break;
                case MESSAGE_RIGHT:
                    vhr=new viewHoderRight();
                    convertView=mInlater.inflate(R.layout.activity_right,null);
                    vhr.imageView_head= (ImageView) convertView.findViewById(R.id.imageview_head);
                    vhr.textView_title= (TextView) convertView.findViewById(R.id.textview_title);
                    vhr.textView_nickname= (TextView) convertView.findViewById(R.id.textview_nickname);
                    vhr.textView_message= (TextView) convertView.findViewById(R.id.textview_message);
                    vhr.textView_time= (TextView) convertView.findViewById(R.id.textview_time);
                    convertView.setTag( vhr);
                    break;
                default:
                    break;
            }
        }

        Chat chat=mData.get(position);
        switch (type){
            case MESSAGE_LEFT :
                vh= (viewHoder) convertView.getTag();
                vh.imageView_head.setImageResource(chat.getImg());
                vh.textView_title.setText(chat.getTitle());
                vh.textView_nickname.setText(chat.getNickname());
                Spanned spanned= Html.fromHtml(chat.getMessage(),imageGetter,null);
                vh.textView_message.setText(spanned);
                String time=format.format(chat.getTime());
                vh.textView_time.setText(time);

            break;
            case MESSAGE_RIGHT:
                vhr= (viewHoderRight) convertView.getTag();
                vhr.imageView_head.setImageResource(chat.getImg());
                vhr.textView_title.setText(chat.getTitle());
                vhr.textView_nickname.setText(chat.getNickname());
                Spanned spanned1= Html.fromHtml(chat.getMessage(),imageGetter,null);
                vhr.textView_message.setText(spanned1);
                String time1=format.format(chat.getTime());
               vhr.textView_time.setText(time1);

                break;
            default:
                break;

        }
        return convertView;
    }
    class viewHoder{
        ImageView imageView_head;
        TextView textView_title;
        TextView textView_nickname;
        TextView textView_message;
        TextView textView_time;
    }
    class viewHoderRight{
        ImageView imageView_head;
        TextView textView_title;
        TextView textView_nickname;
        TextView textView_message;
        TextView textView_time;
    }
}

Mainactivity

public class MainActivity extends Activity implements View.OnClickListener {
    private ListView mListview;
    private EditText mEditText;
    private Button mButton_send_Left;
    private Button mButton_send_Right;
    private LayoutInflater mInflater;
    private List<Chat> mData=new ArrayList<>();
    private ChatAdapter adapter;
    private ImageView mImageView;
    private Html.ImageGetter imageGetter;
    private ExpressionAdapter adapter1;
    private GridView mGridView;
    private String [] data={"dja","djb","djc","djd","dje","djf","djg","djh","dji","djj","djk","djl","djm","djn","djo","djq","djr","djs",
            "djt","dju","djv","djw","djx","djy","djz"};
    private PopupWindow mPopupWindow;
    private LinearLayout mLniear;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mPopupWindow=new PopupWindow(this);
        View  viewPopup=getLayoutInflater().inflate(R.layout.activity_popupwindow,null);
        mPopupWindow.setContentView(viewPopup);
        mPopupWindow.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
        mPopupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
        //在默认情况下弹出的窗口不可定焦
        mPopupWindow.setFocusable(true);
        //mPopupWindow.setTouchable(true);
        mGridView= (GridView)viewPopup.findViewById(R.id.girdview_pop);
        mLniear= (LinearLayout) findViewById(R.id.linear);
//        mGridView= (GridView) findViewById(R.id.girdview);
        mListview= (ListView) findViewById(R.id.listview);
        mEditText= (EditText) findViewById(R.id.edittext);
        mButton_send_Left= (Button) findViewById(R.id.button_send_left);
        mButton_send_Right= (Button) findViewById(R.id.button_send_righht);
        mImageView= (ImageView) findViewById(R.id.imageview);
        mImageView.setOnClickListener(this);
        mButton_send_Left.setOnClickListener(this);
        mButton_send_Right.setOnClickListener(this);
        imageGetter= new Html.ImageGetter() {
            @Override
            public Drawable getDrawable(String source) {
                Drawable drawable=null;
                if (source!=null){

                    Class clazz=R.mipmap.class;
                    try {
                        Field field=clazz.getDeclaredField(source);
                        int sourceId=field.getInt(clazz);
                        drawable=getResources().getDrawable(sourceId);
                        drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());
                    } catch (NoSuchFieldException e) {
                        e.printStackTrace();
                    } catch (IllegalAccessException e) {
                        e.printStackTrace();
                    }
                }else {
                    drawable = getResources().getDrawable(R.mipmap.ic_launcher);
                    drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
                }
                return drawable;
            }
        };
        mInflater=getLayoutInflater();
        adapter=new ChatAdapter(mInflater,mData,imageGetter);
        mListview.setAdapter(adapter);
        adapter1=new ExpressionAdapter(mInflater);
        mGridView.setAdapter(adapter1);
        mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Spanned spanned=Html.fromHtml("<img src='" + data[position] + "'/>",imageGetter,null);
               mEditText.getText().insert(mEditText.getSelectionStart(),spanned);
            }
        });



    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.imageview:
//                           Spanned spanned=Html.fromHtml("<img src=''/>",imageGetter,null);
                mEditText.getText().insert(mEditText.getSelectionStart(),spanned);
//                    if (mGridView.getVisibility() == View.VISIBLE) {
//                        mGridView.setVisibility(View.GONE);
//                    } else {
//                        mGridView.setVisibility(View.VISIBLE);
//                    }
                mPopupWindow.showAsDropDown(mLniear);
                break;
            case R.id.button_send_left:
                Chat chat=new Chat();
                chat.setImg(R.mipmap.ic_launcher);
                chat.setTitle("营长");
                chat.setNickname("落叶");
                chat.setType(ChatAdapter.MESSAGE_LEFT);
                chat.setMessage(filterHtml(Html.toHtml(mEditText.getText())));
                chat.setTime(System.currentTimeMillis());
                mData.add(chat);
                adapter.notifyDataSetChanged();
                mListview.setSelection(mData.size()-1);
                mEditText.setText("");
                break;
            case R.id.button_send_righht:
                Chat chat1=new Chat();
                chat1.setImg(R.mipmap.ic_launcher);
                chat1.setTitle("营长");
                chat1.setNickname("落叶");
                chat1.setType(ChatAdapter.MESSAGE_RIGHT);
                chat1.setMessage(filterHtml(Html.toHtml(mEditText.getText())));
                chat1.setTime(System.currentTimeMillis());
                mData.add(chat1);
                adapter.notifyDataSetChanged();
                mListview.setSelection(mData.size()-1);
                mEditText.setText("");
            default:
                break;
        }

    }

    private String filterHtml(String str) {
        str = str.replaceAll("<(?!br|img)[^>]+>", "").trim();
        return str;

    }

}

设置主界面的背景颜色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#024EA2"
    android:centerColor="#0F90ED"
    android:endColor="#3DC2FA"
    android:angle="270"/>
</shape>

bianshaopeng

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
QQ聊天

QQ聊天主界面<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_p
复制链接

扫一扫