好几天没有更新博客了，马上就要开学，心情悲怆。
首先说一下 QQ开源项目的Demo已经更新至本节，欢迎下载~ 地址： http://ishare.iask.sina.com.cn/f/67274366.html
本节继续介绍QQ界面的开发，上一节做了QQ聊天界面的1.0版，前几日上传的Demo发现有很多下载（导致我的新浪爱问积分瞬间爆满^^，过几日我会取消下载积分，供大家自由下载），使用过的朋友会发现上一节并没有实现QQ聊天表情的效果，本节的主要内容就是实现这一功能，首先呈上效果图：
虽然只是增加一个表情功能，但使用到的知识点相当多：
一、表情列表的实现
需要用到的控件：GridView和ViewFlipper用GridView存放表情，因为可能有多个页面的表情，所以要把GridView放进ViewFlipper中
首先讲一下GridView：GridView类似于ListView，也需要自己定义适配器，只不过ListView的每一个条目是一行一行排放的，而GridView则是以格子的形式排放的，因此完全可以按照ListView的方式设置这里的GridView，GridView有两个特殊的方法：
setNumColumns() 设置GridView的行数；
setSelector(new ColorDrawable(Color.TRANSPARENT)); 设置选中GridView的某一个格子时，改格子的颜色为透明色，默认是橘黄色
GridView的每一个格子我称其为GridItem，其对应的布局为：
<?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:background="@android:color/transparent" > <ImageView android:id="@+id/gridImage" android:layout_width="30dip" android:layout_height="30dip" android:layout_margin="10dip"/> </RelativeLayout>
GridView自定义的适配器如下（和ListView其实很像）
class MyGridAdapter extends BaseAdapter{ Context context; ArrayList<HashMap<String,Object>> list; int layout; String[] from; int[] to; public MyGridAdapter(Context context, ArrayList<HashMap<String, Object>> list, int layout, String[] from, int[] to) { super(); this.context = context; this.list = list; this.layout = layout; this.from = from; this.to = to; } @Override public int getCount() { // TODO Auto-generated method stub return list.size(); } @Override public Object getItem(int position) { // TODO Auto-generated method stub return null; } @Override public long getItemId(int position) { // TODO Auto-generated method stub return position; } class ViewHolder{ ImageView image=null; } @Override public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub ViewHolder holder=null; if(convertView==null){ convertView=LayoutInflater.from(context).inflate(layout, null); holder=new ViewHolder(); holder.image=(ImageView)convertView.findViewById(to[0]); convertView.setTag(holder); } else{ holder=(ViewHolder)convertView.getTag(); } holder.image.setImageResource((Integer)list.get(position).get(from[0])); class MyGridImageClickListener implements OnClickListener{ int position; public MyGridImageClickListener(int position) { super(); this.position = position; } @Override public void onClick(View v) { // TODO Auto-generated method stub editText.append((String)list.get(position).get("faceName")); } } //这里创建了一个方法内部类 holder.image.setOnClickListener(new MyGridImageClickListener(position)); return convertView; } }
然后在Java代码中通过findViewById()方法获得GridView对象，然后设置适配器即可，关于如何配置数据后面会讲。
ViewFlipper：ViewFlipper用来实现翻页效果，即如果有多个页数的表情，那么把每一个GridView作为ViewFlipper的一个ChildView添加进去，形成多个页面，最后通过设置onTouchListener实现翻页效果，这和我之前做过的一个ImageSwitcher的思路是完全相同的，当时的那个项目完全可以用ViewFlipper实现
ViewFlipper 对象常用的一些方法：
addView() 把ChildView添加进去；
setDisplayedChild(int index) 人为设置要显示的childView
getDisplayedChild(); 获得当前显示的childView的索引
showNext(); 显示下一个childView；
showPrevious(); 显示前一个 childView；
注意在ViewFlipper中添加GridView后 ViewFlipper的onTouchListener就失效了，因此这里为GridView设置的监听器，根据滑动情况设置翻页效果。
class MyTouchListener implements OnTouchListener{ ViewFlipper viewFlipper=null; public MyTouchListener(ViewFlipper viewFlipper) { super(); this.viewFlipper = viewFlipper; } @Override public boolean onTouch(View v, MotionEvent event) { // TODO Auto-generated method stub switch(event.getAction()){ case MotionEvent.ACTION_DOWN:startX=event.getX(); moveable=true; break; case MotionEvent.ACTION_MOVE: if(moveable){ if(event.getX()-startX>60){ moveable=false; int childIndex=viewFlipper.getDisplayedChild(); /** * 这里的这个if检测是防止表情列表循环滑动 */ if(childIndex>0){ viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ChatActivity.this, R.anim.left_in)); viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ChatActivity.this, R.anim.right_out)); viewFlipper.showPrevious(); setPointEffect(childIndex-1); } } else if(event.getX()-startX<-60){ moveable=false; int childIndex=viewFlipper.getDisplayedChild(); /** * 这里的这个if检测是防止表情列表循环滑动 */ if(childIndex<listGrid.size()-1){ viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ChatActivity.this, R.anim.right_in)); viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ChatActivity.this, R.anim.left_out)); viewFlipper.showNext(); setPointEffect(childIndex+1); } } } break; case MotionEvent.ACTION_UP:moveable=true;break; default:break; } return false; } }
下面讲一下如何配置GridView的数据源和把GridView添加进ViewFlipper，这里我设计了两个方法，根据 表情图片资源数组 faceId[] 和 表情名称数组 faceName[] 自动生成
GridView的数据源ArrayList<ArrayList<HashMap<String,Object>>> gridList对象，并把多个（根据表情的个数决定）GridView设置onTouchListener 然后添加进 ViewFlipper中，代码如下：
private void addFaceData(){ ArrayList<HashMap<String,Object>> list=null; for(int i=0; i<faceId.length; i++){ if(i%14==0){ list=new ArrayList<HashMap<String,Object>>(); listGrid.add(list); } HashMap<String,Object> map=new HashMap<String,Object>(); map.put("image", faceId[i]); map.put("faceName", faceName[i]); /** * 这里把表情对应的名字也添加进数据对象中，便于在点击时获得表情对应的名称 */ listGrid.get(i/14).add(map); } System.out.println("listGrid size is "+listGrid.size()); } private void addGridView(){ for(int i=0; i< listGrid.size();i++){ View view=LayoutInflater.from(this).inflate(R.layout.view_item, null); GridView gv=(GridView)view.findViewById(R.id.myGridView); gv.setNumColumns(5); gv.setSelector(new ColorDrawable(Color.TRANSPARENT)); MyGridAdapter adapter=new MyGridAdapter(this, listGrid.get(i), R.layout.chat_grid_item, new String[]{"image"}, new int[]{R.id.gridImage}); gv.setAdapter(adapter); gv.setOnTouchListener(new MyTouchListener(viewFlipper)); viewFlipper.addView(view); // ImageView image=new ImageView(this); // ImageView image=(ImageView)LayoutInflater.from(this).inflate(R.layout.image_point_layout, null); /** * 这里不喜欢用Java代码设置Image的边框大小等，所以单独配置了一个Imageview的布局文件 */ View pointView=LayoutInflater.from(this).inflate(R.layout.point_image_layout, null); ImageView image=(ImageView)pointView.findViewById(R.id.pointImageView); image.setBackgroundResource(R.drawable.qian_point); pagePoint.addView(pointView); /** * 这里验证了LinearLayout属于ViewGroup类型，可以采用addView 动态添加view */ pointList.add(image); /** * 将image放入pointList，便于修改点的颜色 */ } }
注意addGridView最后一部分是用来设置效果图最下方的那两个圆点，关于实现原理接下来会讲。
表情列表的布局分析：
<?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> <RelativeLayout android:id="@+id/faceLayout" android:layout_width="match_parent" android:layout_height="1dip" android:layout_alignParentBottom="true"> <ViewFlipper android:id="@+id/faceFlipper" android:layout_width="match_parent" android:layout_height="130dip" android:background="#d0d3d5" > </ViewFlipper> <LinearLayout android:id="@+id/fill_the_gap" android:layout_width="match_parent" android:layout_height="1dip" android:background="#272b34" android:orientation="horizontal"> </LinearLayout> <LinearLayout android:id="@+id/pagePoint" android:layout_width="match_parent" android:layout_height="20dip" android:layout_below="@id/faceFlipper" android:background="#d0d3d5" android:gravity="center" android:orientation="horizontal"> </LinearLayout> </RelativeLayout> <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_above="@id/faceLayout" android:paddingTop="5dip" 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="5dip" 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="5dip" 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_marginBottom="9dip" android:layout_marginRight="4dip" android:layout_weight="3.2" android:layout_gravity="top" 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>
这是整个ChatActivity的布局文件，找到含有ViewFlipper的那一块：
<RelativeLayout
android:id="@+id/faceLayout"
android:layout_width="match_parent"
android:layout_height="1dip"
android:layout_alignParentBottom="true">
<ViewFlipper
android:id="@+id/faceFlipper"
android:layout_width="match_parent"
android:layout_height="130dip"
android:background="#d0d3d5"
>
</ViewFlipper>
<LinearLayout
android:id="@+id/fill_the_gap"
android:layout_width="match_parent"
android:layout_height="1dip"
android:background="#272b34"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout
android:id="@+id/pagePoint"
android:layout_width="match_parent"
android:layout_height="20dip"
android:layout_below="@id/faceFlipper"
android:background="#d0d3d5"
android:gravity="center"
android:orientation="horizontal">
</LinearLayout>
</RelativeLayout>
id为pagePoint 的的LinearLayout就是盛放圆点ImageView的一个布局空间（ViewGroup），ViewFlipper中有几个子View就对应几个圆点，也通过addView()添加ImageView,这一点在addGridView中有体现，为了实现好看的效果这里为每一个圆点设置了布局文件，具体可参考我上传的Demo中point_image_layout
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/pointImageView" android:layout_width="6dip" android:layout_height="6dip" android:layout_marginLeft="8dip" android:layout_marginRight="8dip"/> </LinearLayout>
为什么设置id为 fill_the_gap的Linearlayout? 这个比较麻烦讲，在本例中我关闭表情界面的方法是把id为faceLayout的RelativeLayout高度设为1dip。我想在关闭表情时，让表情界面回到初始状态（即显示第一页表情），这样每次打开表情界面都是第一页，和官方QQ一样，但是如果viewFlipper如果在屏幕上没有一点像素显示就无法调用setDisplayedChild(0)方法，因此需要把faceLayout的高度设为1dip 而非0dip ,这样又带来另一个问题是屏幕最下方出现了一条白线，不好看，所以就在ViewFlipper的最上方重叠了一个高为1dip 的色条，用于把这个白缝“封住”，大家可以尝试直接把高度设为0dip，会发现体验较差。
这里封装了一个设置高度的方法：
private void setFaceLayoutExpandState(boolean isexpand){ if(isexpand==false){ viewFlipper.setDisplayedChild(0); ViewGroup.LayoutParams params=faceLayout.getLayoutParams(); params.height=1; faceLayout.setLayoutParams(params); /**height不设为0是因为，希望可以使再次打开时viewFlipper已经初始化为第一页 避免 *再次打开ViewFlipper时画面在动的结果, *为了避免因为1dip的高度产生一个白缝，所以这里在ViewFlipper所在的RelativeLayout中ViewFlipper *上层添加了一个1dip高的黑色色块 * *viewFlipper必须在屏幕中有像素才能执行setDisplayedChild()操作 */ chatBottomLook.setBackgroundResource(R.drawable.chat_bottom_look); } else{ /** * 让软键盘消失 */ ((InputMethodManager)getSystemService(INPUT_METHOD_SERVICE)).hideSoftInputFromWindow (ChatActivity.this.getCurrentFocus().getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS); ViewGroup.LayoutParams params=faceLayout.getLayoutParams(); params.height=150; faceLayout.setLayoutParams(params); chatBottomLook.setBackgroundResource(R.drawable.chat_bottom_keyboard); } }
另外这里涉及到了对键盘的操作，主要目的是为了实现和官方版差不多的效果：
实现关闭键盘的方法：
((InputMethodManager)getSystemService(INPUT_METHOD_SERVICE)).hideSoftInputFromWindow
(ChatActivity.this.getCurrentFocus().getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
实现切换键盘状态的方法：原来打开则关闭，原来关闭则打开
((InputMethodManager)ChatActivity.this.getSystemService(INPUT_METHOD_SERVICE)).toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);
由于本节的内容相对较多，所以临时决定拆成两节，下一节会介绍如何在textView 中添加表情SpannableString的使用方法，并可能会添加进TabHost+FrameLayout控件，敬请期待~
最后附上ChatActivity的代码：点击展开
package com.example.android_qqfix; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Color; import android.graphics.drawable.ColorDrawable; import android.os.Bundle; import android.text.Spannable; import android.text.SpannableString; import android.text.SpannableStringBuilder; import android.text.style.ImageSpan; import android.view.LayoutInflater; import android.view.MotionEvent; import android.view.View; import android.view.View.OnClickListener; import android.view.View.OnTouchListener; import android.view.ViewGroup.LayoutParams; import android.view.animation.AnimationUtils; import android.view.inputmethod.InputMethodManager; import android.view.ViewGroup; import android.view.Window; import android.widget.*; import android.widget.AdapterView.OnItemClickListener; import java.util.*; import java.util.regex.Matcher; import java.util.regex.Pattern; public class ChatActivity extends Activity{ int[] faceId={R.drawable.f_static_000,R.drawable.f_static_001,R.drawable.f_static_002,R.drawable.f_static_003 ,R.drawable.f_static_004,R.drawable.f_static_005,R.drawable.f_static_006,R.drawable.f_static_009,R.drawable.f_static_010,R.drawable.f_static_011 ,R.drawable.f_static_012,R.drawable.f_static_013,R.drawable.f_static_014,R.drawable.f_static_015,R.drawable.f_static_017,R.drawable.f_static_018}; String[] faceName={"\呲牙","\淘气","\流汗","\偷笑","\再见","\敲打","\擦汗","\流泪","\掉泪","\小声","\炫酷","\发狂" ,"\委屈","\便便","\菜刀","\微笑","\色色","\害羞"}; HashMap<String,Integer> faceMap=null; 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; ArrayList<ImageView> pointList=null; ArrayList<ArrayList<HashMap<String,Object>>> listGrid=null; protected ListView chatListView=null; protected Button chatSendButton=null; protected EditText editText=null; protected ViewFlipper viewFlipper=null; protected ImageButton chatBottomLook=null; protected RelativeLayout faceLayout=null; protected LinearLayout pagePoint=null,fillGapLinear=null; private boolean expanded=false; 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); faceMap=new HashMap<String,Integer>(); chatList=new ArrayList<HashMap<String,Object>>(); listGrid=new ArrayList<ArrayList<HashMap<String,Object>>>(); pointList=new ArrayList<ImageView>(); addTextToList("不管你是谁", ME); addTextToList("群发的我不回 ^_^", 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); viewFlipper=(ViewFlipper)findViewById(R.id.faceFlipper); chatBottomLook=(ImageButton)findViewById(R.id.chat_bottom_look); faceLayout=(RelativeLayout)findViewById(R.id.faceLayout); pagePoint=(LinearLayout)findViewById(R.id.pagePoint); fillGapLinear=(LinearLayout)findViewById(R.id.fill_the_gap); chatBottomLook.setOnClickListener(new OnClickListener(){ @Override public void onClick(View v) { // TODO Auto-generated method stub if(expanded){ setFaceLayoutExpandState(false); expanded=false; InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE); imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS); /**height不设为0是因为，希望可以使再次打开时viewFlipper已经初始化为第一页 避免 *再次打开ViewFlipper时画面在动的结果, *为了避免因为1dip的高度产生一个白缝，所以这里在ViewFlipper所在的RelativeLayout *最上面添加了一个1dip高的黑色色块 */ } else{ setFaceLayoutExpandState(true); expanded=true; setPointEffect(0); } } }); /**EditText从未获得焦点到首次获得焦点时不会调用OnClickListener方法，所以应该改成OnTouchListener * 从而保证点EditText第一下就能够把表情界面关闭 editText.setOnClickListener(new OnClickListener(){ @Override public void onClick(View v) { // TODO Auto-generated method stub ViewGroup.LayoutParams params=viewFlipper.getLayoutParams(); params.height=0; viewFlipper.setLayoutParams(params); expanded=false; System.out.println("WHYWHWYWHYW is Clicked"); } }); **/ editText.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { // TODO Auto-generated method stub if(expanded){ setFaceLayoutExpandState(false); expanded=false; } return false; } }); 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); chatListView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) { // TODO Auto-generated method stub setFaceLayoutExpandState(false); ((InputMethodManager)ChatActivity.this.getSystemService(INPUT_METHOD_SERVICE)). hideSoftInputFromWindow(ChatActivity.this.getCurrentFocus().getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS); expanded=false; } }); /** * 为表情Map添加数据 */ for(int i=0; i<faceId.length; i++){ faceMap.put(faceName[i], faceId[i]); } addFaceData(); addGridView(); } private void addFaceData(){ ArrayList<HashMap<String,Object>> list=null; for(int i=0; i<faceId.length; i++){ if(i%14==0){ list=new ArrayList<HashMap<String,Object>>(); listGrid.add(list); } HashMap<String,Object> map=new HashMap<String,Object>(); map.put("image", faceId[i]); map.put("faceName", faceName[i]); /** * 这里把表情对应的名字也添加进数据对象中，便于在点击时获得表情对应的名称 */ listGrid.get(i/14).add(map); } System.out.println("listGrid size is "+listGrid.size()); } private void addGridView(){ for(int i=0; i< listGrid.size();i++){ View view=LayoutInflater.from(this).inflate(R.layout.view_item, null); GridView gv=(GridView)view.findViewById(R.id.myGridView); gv.setNumColumns(5); gv.setSelector(new ColorDrawable(Color.TRANSPARENT)); MyGridAdapter adapter=new MyGridAdapter(this, listGrid.get(i), R.layout.chat_grid_item, new String[]{"image"}, new int[]{R.id.gridImage}); gv.setAdapter(adapter); gv.setOnTouchListener(new MyTouchListener(viewFlipper)); viewFlipper.addView(view); // ImageView image=new ImageView(this); // ImageView image=(ImageView)LayoutInflater.from(this).inflate(R.layout.image_point_layout, null); /** * 这里不喜欢用Java代码设置Image的边框大小等，所以单独配置了一个Imageview的布局文件 */ View pointView=LayoutInflater.from(this).inflate(R.layout.point_image_layout, null); ImageView image=(ImageView)pointView.findViewById(R.id.pointImageView); image.setBackgroundResource(R.drawable.qian_point); pagePoint.addView(pointView); /** * 这里验证了LinearLayout属于ViewGroup类型，可以采用addView 动态添加view */ pointList.add(image); /** * 将image放入pointList，便于修改点的颜色 */ } } /** * 打开或者关闭软键盘，之前若打开，调用该方法后关闭；之前若关闭，调用该方法后打开 */ private void setSoftInputState(){ ((InputMethodManager)ChatActivity.this.getSystemService(INPUT_METHOD_SERVICE)).toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS); } private void setFaceLayoutExpandState(boolean isexpand){ if(isexpand==false){ viewFlipper.setDisplayedChild(0); ViewGroup.LayoutParams params=faceLayout.getLayoutParams(); params.height=1; faceLayout.setLayoutParams(params); /**height不设为0是因为，希望可以使再次打开时viewFlipper已经初始化为第一页 避免 *再次打开ViewFlipper时画面在动的结果, *为了避免因为1dip的高度产生一个白缝，所以这里在ViewFlipper所在的RelativeLayout中ViewFlipper *上层添加了一个1dip高的黑色色块 * *viewFlipper必须在屏幕中有像素才能执行setDisplayedChild()操作 */ chatBottomLook.setBackgroundResource(R.drawable.chat_bottom_look); } else{ /** * 让软键盘消失 */ ((InputMethodManager)getSystemService(INPUT_METHOD_SERVICE)).hideSoftInputFromWindow (ChatActivity.this.getCurrentFocus().getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS); ViewGroup.LayoutParams params=faceLayout.getLayoutParams(); params.height=150; faceLayout.setLayoutParams(params); chatBottomLook.setBackgroundResource(R.drawable.chat_bottom_keyboard); } } /** * 设置游标（小点）的显示效果 * @param darkPointNum */ private void setPointEffect(int darkPointNum){ for(int i=0; i<pointList.size(); i++){ pointList.get(i).setBackgroundResource(R.drawable.qian_point); } pointList.get(darkPointNum).setBackgroundResource(R.drawable.shen_point); } /** * GridViewAdapter * @param textView * @param text */ class MyGridAdapter extends BaseAdapter{ Context context; ArrayList<HashMap<String,Object>> list; int layout; String[] from; int[] to; public MyGridAdapter(Context context, ArrayList<HashMap<String, Object>> list, int layout, String[] from, int[] to) { super(); this.context = context; this.list = list; this.layout = layout; this.from = from; this.to = to; } @Override public int getCount() { // TODO Auto-generated method stub return list.size(); } @Override public Object getItem(int position) { // TODO Auto-generated method stub return null; } @Override public long getItemId(int position) { // TODO Auto-generated method stub return position; } class ViewHolder{ ImageView image=null; } @Override public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub ViewHolder holder=null; if(convertView==null){ convertView=LayoutInflater.from(context).inflate(layout, null); holder=new ViewHolder(); holder.image=(ImageView)convertView.findViewById(to[0]); convertView.setTag(holder); } else{ holder=(ViewHolder)convertView.getTag(); } holder.image.setImageResource((Integer)list.get(position).get(from[0])); class MyGridImageClickListener implements OnClickListener{ int position; public MyGridImageClickListener(int position) { super(); this.position = position; } @Override public void onClick(View v) { // TODO Auto-generated method stub editText.append((String)list.get(position).get("faceName")); } } //这里创建了一个方法内部类 holder.image.setOnClickListener(new MyGridImageClickListener(position)); return convertView; } } private boolean moveable=true; private float startX=0; /** * 用到的方法 viewFlipper.getDisplayedChild() 获得当前显示的ChildView的索引 * @author Administrator * */ class MyTouchListener implements OnTouchListener{ ViewFlipper viewFlipper=null; public MyTouchListener(ViewFlipper viewFlipper) { super(); this.viewFlipper = viewFlipper; } @Override public boolean onTouch(View v, MotionEvent event) { // TODO Auto-generated method stub switch(event.getAction()){ case MotionEvent.ACTION_DOWN:startX=event.getX(); moveable=true; break; case MotionEvent.ACTION_MOVE: if(moveable){ if(event.getX()-startX>60){ moveable=false; int childIndex=viewFlipper.getDisplayedChild(); /** * 这里的这个if检测是防止表情列表循环滑动 */ if(childIndex>0){ viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ChatActivity.this, R.anim.left_in)); viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ChatActivity.this, R.anim.right_out)); viewFlipper.showPrevious(); setPointEffect(childIndex-1); } } else if(event.getX()-startX<-60){ moveable=false; int childIndex=viewFlipper.getDisplayedChild(); /** * 这里的这个if检测是防止表情列表循环滑动 */ if(childIndex<listGrid.size()-1){ viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ChatActivity.this, R.anim.right_in)); viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ChatActivity.this, R.anim.left_out)); viewFlipper.showNext(); setPointEffect(childIndex+1); } } } break; case MotionEvent.ACTION_UP:moveable=true;break; default:break; } return false; } } private void setFaceText(TextView textView,String text){ SpannableString spanStr=parseString(text); textView.setText(spanStr); } private void setFace(SpannableStringBuilder spb, String faceName){ Integer faceId=faceMap.get(faceName); if(faceId!=null){ Bitmap bitmap=BitmapFactory.decodeResource(getResources(), faceId); bitmap=Bitmap.createScaledBitmap(bitmap, 30, 30, true); ImageSpan imageSpan=new ImageSpan(this,bitmap); SpannableString spanStr=new SpannableString(faceName); spanStr.setSpan(imageSpan, 0, faceName.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); spb.append(spanStr); } else{ spb.append(faceName); } } private SpannableString parseString(String inputStr){ SpannableStringBuilder spb=new SpannableStringBuilder(); Pattern mPattern= Pattern.compile("\\.."); Matcher mMatcher=mPattern.matcher(inputStr); String tempStr=inputStr; while(mMatcher.find()){ int start=mMatcher.start(); int end=mMatcher.end(); spb.append(tempStr.substring(0,start)); String faceName=mMatcher.group(); setFace(spb, faceName); tempStr=tempStr.substring(end, tempStr.length()); /** * 更新查找的字符串 */ mMatcher.reset(tempStr); } spb.append(tempStr); return new SpannableString(spb); } 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(holder.imageView); holder.imageView.setBackgroundResource((Integer)chatList.get(position).get(from[0])); setFaceText(holder.textView, chatList.get(position).get(from[1]).toString()); return convertView; } } }
希望大家继续支持我，你们的支持是我前进的动力^^