展会信息港展会大全

Android开发系列(十四) QQ聊天界面——QQ气泡效果与ListView
来源:互联网   发布日期:2015-11-26 13:11:18   浏览:2920次  

导读: 大体的构造思路是这样:整个界面采用RelativeLayout布局,标题栏自己是一个LinearLayout子布局,下面文本编辑框也是一个LinearLayout子布局,中间是一个自定义的...

大体的构造思路是这样:整个界面采用RelativeLayout布局,标题栏自己是一个LinearLayout子布局,下面文本编辑框也是一个LinearLayout子布局,中间是一个自定义的ListView,关于自定义的ListView的使用方法见系列(六),这里唯一特殊的地方时ListView中的子条目有两种布局文件,“我”发出的信息对应一个布局文件,而对方发来的信息对应另一个布局文件。我们发出的信息存放在一个ArrayList<HashMap<>>中,在自定义的适配器的getView()方法中根据是谁发出的信息选择相应的ListItem的布局文件即可。

这个Activity分析起来其实挺简单,但有一个难点耗费了我一天的时间,不过先不着急吐槽,先上传这次Activity的代码:

activity_chat 布局文件:

复制代码

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

>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="44dip"

android:id="@+id/chat_title"

android:layout_alignParentTop="true"

android:background="@drawable/chat_title_layer">

<Button

android:id="@+id/chat_msg_button"

android:layout_width="match_parent"

android:layout_height="36dip"

android:layout_weight="1.9"

android:layout_marginLeft="8dip"

android:layout_marginTop="3dip"

android:text="消息(0)"

android:textColor="@android:color/white"

android:textSize="7pt"

android:background="@drawable/msg_button_back"/>

<TextView

android:id="@+id/chat_contact_name"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="龙行天下"

android:textSize="8pt"

android:textColor="@android:color/white"

android:gravity="center"

android:layout_gravity="center_vertical"/>

<ImageButton

android:id="@+id/chat_contact_button"

android:layout_width="match_parent"

android:layout_height="36dip"

android:layout_weight="2"

android:layout_marginRight="8dip"

android:layout_marginTop="3dip"

android:background="@drawable/chat_contact_back"/>

</LinearLayout>

<LinearLayout

android:id="@+id/chat_bottom_linear"

android:layout_width="match_parent"

android:layout_height="42dip"

android:background="@drawable/chat_title_layer"

android:orientation="horizontal"

android:layout_alignParentBottom="true"

android:paddingTop="7dip"

android:paddingBottom="3dip">

<ImageButton

android:id="@+id/chat_bottom_look"

android:layout_width="match_parent"

android:layout_height="26dip"

android:layout_weight="3.5"

android:layout_marginLeft="7dip"

android:layout_marginTop="3dip"

android:background="@drawable/chat_bottom_look"/>

<ImageButton

android:id="@+id/chat_bottom_add"

android:layout_width="match_parent"

android:layout_height="26dip"

android:layout_weight="3.5"

android:layout_marginLeft="7dip"

android:layout_marginTop="3dip"

android:background="@drawable/chat_bottom_add"/>

<EditText

android:id="@+id/chat_bottom_edittext"

android:layout_width="match_parent"

android:layout_height="32dip"

android:layout_marginLeft="5dip"

android:layout_marginRight="7dip"

android:layout_weight="1.5"

android:background="@drawable/edit_fillet_shape"/>

<Button

android:id="@+id/chat_bottom_sendbutton"

android:layout_width="match_parent"

android:layout_height="26dip"

android:layout_weight="3.2"

android:layout_marginRight="4dip"

android:layout_marginBottom="3dip"

android:background="@drawable/chat_button_fillet_shape"

android:text="发送"

android:textColor="@android:color/white"/>"

</LinearLayout>

<ListView

android:id="@+id/chat_list"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@id/chat_title"

android:layout_above="@id/chat_bottom_linear"

android:fadingEdge="none"

android:background="#f0f0f0"

android:divider="#aaaaaa"

android:dividerHeight="0px">

</ListView>

</RelativeLayout>

复制代码

“我”发出的信息对应的子条目的布局文件:

复制代码

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#f0f0f0"

android:paddingLeft="80dip"

android:paddingRight="8dip"

android:paddingBottom="10dip"

android:paddingTop="10dip">

<ImageView

android:id="@+id/chatlist_image_me"

android:layout_width="40dip"

android:layout_height="40dip"

android:layout_marginLeft="5dip"

android:layout_alignParentRight="true"

android:background="@drawable/contact_3"/>

<TextView

android:id="@+id/chatlist_text_me"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_toLeftOf="@id/chatlist_image_me"

android:layout_alignTop="@id/chatlist_image_me"

android:text="会忽悠了gyughiulhlluihui过"

android:background="@drawable/balloon_back_right"

android:paddingTop="13dip"

android:paddingBottom="18dip"/>

</RelativeLayout>

复制代码

“对方”发出的信息对应的布局文件:

复制代码

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

android:background="#f0f0f0"

android:paddingRight="80dip"

android:paddingLeft="8dip"

android:paddingBottom="10dip"

android:paddingTop="10dip">

<ImageView

android:id="@+id/chatlist_image_other"

android:layout_width="40dip"

android:layout_height="40dip"

android:layout_marginRight="5dip"

android:layout_alignParentLeft="true"

android:background="@drawable/contact_3"/>

<TextView

android:id="@+id/chatlist_text_other"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_toRightOf="@id/chatlist_image_other"

android:layout_alignTop="@id/chatlist_image_other"

android:text="hewdfb"

android:background="@drawable/balloon_back_left"

android:paddingTop="13dip"

android:paddingBottom="18dip"/>

</RelativeLayout>

复制代码

这里遇到了一个问题:即两个布局文件中的空间能不能共用同一个id?答案是不能,因为ListView在绘制的过程中会反复调用findViewById()方法,共用ID会导致显示混乱,即对应错位。

然后就是ChatActivity了

复制代码

package com.example.android_qqfix;

import android.app.Activity;

import android.content.Context;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.view.Window;

import android.widget.*;

import java.util.*;

public class ChatActivity extends Activity{

ArrayList<HashMap<String,Object>> chatList=null;

String[] from={"image","text"};

int[] to={R.id.chatlist_image_me,R.id.chatlist_text_me,R.id.chatlist_image_other,R.id.chatlist_text_other};

int[] layout={R.layout.chat_listitem_me,R.layout.chat_listitem_other};

String userQQ=null;

/**

* 这里两个布局文件使用了同一个id,测试一下是否管用

* TT事实证明这回产生id的匹配异常!所以还是要分开。。

*

* userQQ用于接收Intent传递的qq号,进而用来调用数据库中的相关的联系人信息,这里先不讲

* 先暂时使用一个头像

*/

public final static int OTHER=1;

public final static int ME=0;

protected ListView chatListView=null;

protected Button chatSendButton=null;

protected EditText editText=null;

protected MyChatAdapter adapter=null;

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_chat);

chatList=new ArrayList<HashMap<String,Object>>();

addTextToList("不管你是谁", ME);

addTextToList("群发的我不回\n^_^", OTHER);

addTextToList("哈哈哈哈", ME);

addTextToList("新年快乐!", OTHER);

chatSendButton=(Button)findViewById(R.id.chat_bottom_sendbutton);

editText=(EditText)findViewById(R.id.chat_bottom_edittext);

chatListView=(ListView)findViewById(R.id.chat_list);

adapter=new MyChatAdapter(this,chatList,layout,from,to);

chatSendButton.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

String myWord=null;

/**

* 这是一个发送消息的监听器,注意如果文本框中没有内容,那么getText()的返回值可能为

* null,这时调用toString()会有异常!所以这里必须在后面加上一个""隐式转换成String实例

* ,并且不能发送空消息。

*/

myWord=(editText.getText()+"").toString();

if(myWord.length()==0)

return;

editText.setText("");

addTextToList(myWord, ME);

/**

* 更新数据列表,并且通过setSelection方法使ListView始终滚动在最底端

*/

adapter.notifyDataSetChanged();

chatListView.setSelection(chatList.size()-1);

}

});

chatListView.setAdapter(adapter);

}

protected void addTextToList(String text, int who){

HashMap<String,Object> map=new HashMap<String,Object>();

map.put("person",who );

map.put("image", who==ME?R.drawable.contact_0:R.drawable.contact_1);

map.put("text", text);

chatList.add(map);

}

private class MyChatAdapter extends BaseAdapter{

Context context=null;

ArrayList<HashMap<String,Object>> chatList=null;

int[] layout;

String[] from;

int[] to;

public MyChatAdapter(Context context,

ArrayList<HashMap<String, Object>> chatList, int[] layout,

String[] from, int[] to) {

super();

this.context = context;

this.chatList = chatList;

this.layout = layout;

this.from = from;

this.to = to;

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return chatList.size();

}

@Override

public Object getItem(int arg0) {

// TODO Auto-generated method stub

return null;

}

@Override

public long getItemId(int position) {

// TODO Auto-generated method stub

return position;

}

class ViewHolder{

public ImageView imageView=null;

public TextView textView=null;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

// TODO Auto-generated method stub

ViewHolder holder=null;

int who=(Integer)chatList.get(position).get("person");

convertView= LayoutInflater.from(context).inflate(

layout[who==ME?0:1], null);

holder=new ViewHolder();

holder.imageView=(ImageView)convertView.findViewById(to[who*2+0]);

holder.textView=(TextView)convertView.findViewById(to[who*2+1]);

System.out.println(holder);

System.out.println("WHYWHYWHYWHYW");

System.out.println(holder.imageView);

holder.imageView.setBackgroundResource((Integer)chatList.get(position).get(from[0]));

holder.textView.setText(chatList.get(position).get(from[1]).toString());

return convertView;

}

}

}

赞助本站

人工智能实验室

相关热词: android开发 教程

AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港