即时聊天表情功能的实现

前段时间做了个即时聊天的项目，聊天表情那块是由我来做的，之前没有写过类似的东西，然后自己研究了一下，发现比较容易

表情都是一张张的图片资源，这些图片预先放在drawable文件夹下（类似于QQ的个性表情下载另当别论，其实无非也就是下载了一批图片，然后加到界面中显示而已）。

1.这里先把图片资源封装成一个类，这个类用于存放图片的名称以及资源位置信息

public class EmotionInfo {
private String imgName;
private int sourceId;
public String getImgName() {
      return imgName;
      }
public void setImgName(String imgName) {

      this.imgName = imgName;
      }
public int getSourceId() {
      return sourceId;
      }
public void setSourceId(int sourceId) {
      this.sourceId = sourceId;
      }

public static EmotionInfo codeFromId(String imgName,int sourceId){
EmotionInfo emo=new EmotionInfo();
emo.setImgName(imgName);
emo.setSourceId(sourceId);
return emo;
}

}

2.然后将每一张图片生成一个图片信息对象，放在数组中：

public class EmotionImages {
public static EmotionInfo[] emotion=new EmotionInfo[]{
EmotionInfo.codeFromId("emoji_1f600", R.drawable.emoji_1f600),
EmotionInfo.codeFromId("emoji_1f601", R.drawable.emoji_1f601),
EmotionInfo.codeFromId("emoji_1f602", R.drawable.emoji_1f602),
EmotionInfo.codeFromId("emoji_1f603", R.drawable.emoji_1f603),
EmotionInfo.codeFromId("emoji_1f604", R.drawable.emoji_1f604),
EmotionInfo.codeFromId("emoji_1f605", R.drawable.emoji_1f605),
EmotionInfo.codeFromId("emoji_1f606", R.drawable.emoji_1f606),
EmotionInfo.codeFromId("emoji_1f607", R.drawable.emoji_1f607),
EmotionInfo.codeFromId("emoji_1f608", R.drawable.emoji_1f608),
EmotionInfo.codeFromId("emoji_1f609", R.drawable.emoji_1f609),
EmotionInfo.codeFromId("emoji_1f60a", R.drawable.emoji_1f600),
EmotionInfo.codeFromId("emoji_1f60b", R.drawable.emoji_1f60b),
EmotionInfo.codeFromId("emoji_1f60c", R.drawable.emoji_1f60c),
EmotionInfo.codeFromId("emoji_1f60d", R.drawable.emoji_1f60d),
EmotionInfo.codeFromId("emoji_1f60e", R.drawable.emoji_1f60e),
EmotionInfo.codeFromId("emoji_1f60f", R.drawable.emoji_1f60f),

EmotionInfo.codeFromId("emoji_1f610", R.drawable.emoji_1f610),
EmotionInfo.codeFromId("emoji_1f611", R.drawable.emoji_1f611),
EmotionInfo.codeFromId("emoji_1f612", R.drawable.emoji_1f612),
EmotionInfo.codeFromId("emoji_1f613", R.drawable.emoji_1f613),
EmotionInfo.codeFromId("emoji_1f614", R.drawable.emoji_1f614),
EmotionInfo.codeFromId("emoji_1f615", R.drawable.emoji_1f615),
EmotionInfo.codeFromId("emoji_1f616", R.drawable.emoji_1f616),
EmotionInfo.codeFromId("emoji_1f617", R.drawable.emoji_1f617),
EmotionInfo.codeFromId("emoji_1f618", R.drawable.emoji_1f618),
EmotionInfo.codeFromId("emoji_1f619", R.drawable.emoji_1f619),
EmotionInfo.codeFromId("emoji_1f61a", R.drawable.emoji_1f61a),
EmotionInfo.codeFromId("emoji_1f61b", R.drawable.emoji_1f61b),
EmotionInfo.codeFromId("emoji_1f61c", R.drawable.emoji_1f61c),
EmotionInfo.codeFromId("emoji_1f61d", R.drawable.emoji_1f61d),
EmotionInfo.codeFromId("emoji_1f61e", R.drawable.emoji_1f61e),
EmotionInfo.codeFromId("emoji_1f61f", R.drawable.emoji_1f61f),

EmotionInfo.codeFromId("emoji_1f620", R.drawable.emoji_1f620),
EmotionInfo.codeFromId("emoji_1f621", R.drawable.emoji_1f621),
EmotionInfo.codeFromId("emoji_1f622", R.drawable.emoji_1f622),
EmotionInfo.codeFromId("emoji_1f623", R.drawable.emoji_1f623),
EmotionInfo.codeFromId("emoji_1f624", R.drawable.emoji_1f624),
EmotionInfo.codeFromId("emoji_1f625", R.drawable.emoji_1f625),
EmotionInfo.codeFromId("emoji_1f626", R.drawable.emoji_1f626),
EmotionInfo.codeFromId("emoji_1f627", R.drawable.emoji_1f627),
EmotionInfo.codeFromId("emoji_1f628", R.drawable.emoji_1f628),
EmotionInfo.codeFromId("emoji_1f629", R.drawable.emoji_1f629),
EmotionInfo.codeFromId("emoji_1f62a", R.drawable.emoji_1f62a),
EmotionInfo.codeFromId("emoji_1f62b", R.drawable.emoji_1f62b),
EmotionInfo.codeFromId("emoji_1f62c", R.drawable.emoji_1f62c),
EmotionInfo.codeFromId("emoji_1f62d", R.drawable.emoji_1f62d),
EmotionInfo.codeFromId("emoji_1f62e", R.drawable.emoji_1f62e),
EmotionInfo.codeFromId("emoji_1f62f", R.drawable.emoji_1f62f),

EmotionInfo.codeFromId("emoji_1f630", R.drawable.emoji_1f630),
EmotionInfo.codeFromId("emoji_1f631", R.drawable.emoji_1f631),
EmotionInfo.codeFromId("emoji_1f632", R.drawable.emoji_1f632),
EmotionInfo.codeFromId("emoji_1f633", R.drawable.emoji_1f633),
EmotionInfo.codeFromId("emoji_1f634", R.drawable.emoji_1f634),
EmotionInfo.codeFromId("emoji_1f635", R.drawable.emoji_1f635),
EmotionInfo.codeFromId("emoji_1f636", R.drawable.emoji_1f636),
EmotionInfo.codeFromId("emoji_1f637", R.drawable.emoji_1f637),

};

3.后面的操作其实很简单，定义一个带有小圆点的自定义viewPager，然后将图片分为三等份填入到三个Gridview中，再将三个gridView分别作为ViewPager的三个条目填充到ViewPager里面，自定义控件代码如下：

public class EmotionViewPager extends RelativeLayout {
private Context context;
private ArrayList<EmotionPager> list;
private ViewPager viewpager;
private LinearLayout llpoint;


private OnPagerEmotionItemClickListener listener;


public EmotionViewPager(Context context) {
super(context);


initView(context);
}


public EmotionViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
initView(context);
}


public EmotionViewPager(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initView(context);
}


private void initView(Context context) {
this.context = context;
View view = LayoutInflater.from(context).inflate(R.layout.layout_emotion_viewpager, this);
viewpager = (ViewPager) view.findViewById(R.id.emo_view_pager);
llpoint = (LinearLayout) view.findViewById(R.id.emo_ll_point);
}


public void setData(ArrayList<EmotionPager> list) {
this.list = list;
EmotionAdapter emoAdapter = new EmotionAdapter();
viewpager.setAdapter(emoAdapter);
setPoint();
viewpager.setOnPageChangeListener(new OnPageChangeListener() {


@Override
public void onPageSelected(int position) {


for (int i = 0; i < llpoint.getChildCount(); i++) {
ImageView image = (ImageView) llpoint.getChildAt(i);
if (i == position) {
image.setImageResource(R.drawable.emotion_pager_point_black);
} else {
image.setImageResource(R.drawable.emotion_pager_point_white);
}


}
}


@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {


}


@Override
public void onPageScrollStateChanged(int arg0) {


}
});
}


/**
* 设置小圆点
*/
public void setPoint() {
ImageView ivPoint;
for (int i = 0; i < list.size(); i++) {


ivPoint = new ImageView(context);
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.setMargins(50, 10, 50, 10);
ivPoint.setLayoutParams(params);
if (i == 0) {
ivPoint.setImageResource(R.drawable.emotion_pager_point_black);
} else {
ivPoint.setImageResource(R.drawable.emotion_pager_point_white);
}
llpoint.addView(ivPoint);
}
}


private class EmotionAdapter extends PagerAdapter {


@Override
public Object instantiateItem(ViewGroup container, int position) {
EmotionPager pager = list.get(position);
container.addView(pager.getEmotionPagerView());
LogUtils.e("EmotionAdapter", "EmotionAdapter" + position);
pager.setOnEmotionItemClickListener(new OnEmotionItemClickListener() {


@Override
public void onEmotionItemClick(String EmotionImgName) {
listener.onPagerEmotionItemClick(EmotionImgName);
}
});
return pager.getEmotionPagerView();
}


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


@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}


@Override
public void destroyItem(ViewGroup container, int position, Object object) {


container.removeView(list.get(position).getEmotionPagerView());
}


};


public void setOnPagerEmotionItemClickListener(OnPagerEmotionItemClickListener listener) {
this.listener = listener;
}


public interface OnPagerEmotionItemClickListener {
public void onPagerEmotionItemClick(String EmotionImgName);
}
}

，定义一个pager类，将图片分为三等份生成三个pager对象，pager类如下：

public class EmotionPager {
public static int FRIST_PAGER = 1;
public static int SECOND_PAGER = 2;
public static int THIRD_PAGER = 3;


private Context context;
private View view;
private int whichPager;


private EmotionInfo[] emoImages = EmotionImages.emotion;
private ArrayList<EmotionInfo> fristPagerData = new ArrayList<EmotionInfo>();
private GridView emotion_pager_gv;


private OnEmotionItemClickListener listener;
private EmoPagerAdapter emoAdapter;


public EmotionPager(Context context, int whichPager) {
this.context = context;
this.whichPager = whichPager;
int start, end;
if (whichPager == FRIST_PAGER) {
start = 0;
end = 20;
} else if (whichPager == SECOND_PAGER) {
start = 21;
end = 41;
} else {
start = 42;
end = 55;
}
for (int i = start; i <= end; i++) {
fristPagerData.add(emoImages[i]);
}
}


public View getEmotionPagerView() {
if (view == null) {
view = LayoutInflater.from(context).inflate(R.layout.layout_emotion_pager, null);
emotion_pager_gv = (GridView) view.findViewById(R.id.emotion_pager_gv);
emoAdapter = new EmoPagerAdapter();
emotion_pager_gv.setAdapter(emoAdapter);
}
emotion_pager_gv.setOnItemClickListener(new OnItemClickListener() {


@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
EmotionInfo emotionInfo = (EmotionInfo) emoAdapter.getItem(position);
listener.onEmotionItemClick(emotionInfo.getImgName());
}
});
return view;
}


public void setOnEmotionItemClickListener(OnEmotionItemClickListener listener) {
this.listener = listener;
}


private class EmoPagerAdapter extends BaseAdapter {


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


}


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


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


@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
holder = new ViewHolder();
convertView = LayoutInflater.from(context).inflate(R.layout.item_emotion_pager, parent, false);
holder.ivEmotion = (ImageView) convertView.findViewById(R.id.item_emotion_pager_item_iv);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.ivEmotion.setImageResource(fristPagerData.get(position).getSourceId());
return convertView;
}


}


public class ViewHolder {
public ImageView ivEmotion;
}


public interface OnEmotionItemClickListener {
public void onEmotionItemClick(String EmotionImgName);
}

接下来的事情大家都知道了，无非就是定义一个PagerAdapter，将pager填充进去就好了！