自定义控件--仿QQ表情面板

最新推荐文章于 2021-05-27 00:21:37 发布

置顶 o君莫笑o

最新推荐文章于 2021-05-27 00:21:37 发布

阅读量1.4k

点赞数 1

分类专栏： android 文章标签： android QQ表情面板 android 表情面板表情

本文链接：https://blog.csdn.net/zhangxyfs/article/details/17848789

版权

android 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在Android中创建一个仿QQ表情面板，包括FaceGridView的实现、ViewPageAdapter的使用以及DotFile的详细讲解。

摘要由CSDN通过智能技术生成

上个图:

1、FaceGridView.java

package com.example.test;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Color;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.AdapterView.OnItemClickListener;
public class FaceGridView extends LinearLayout {
	private Context _context;
	private ViewPager _viewPager;
	private LinearLayout _llDot;

	private OnFaceGridViewItemClick onFaceGridViewItemClick;

	private ImageView[] dots;
	/** ViewPager当前页 */
	private int currentIndex;
	/** ViewPager页数 */
	private int viewPager_size;
	/** 默认一页20个item */
	private double pageItemCount = 20d;

	/** 保存每个页面的GridView视图 */
	private List<GridView> list_Views;
	/** viewpage高度 */
	private int viewPageHeight = 380;
	/** viewpage背景颜色 */
	private int backColor = 0xffcccfd0;
	/** assets图片名 */
	public String[] faceNames;
	/** assets图片路径 */
	private String facePath = "faces";
	/** assets 返回按钮图片 */
	private String backBtnName = "back_normal.png";

	public FaceGridView(Context context) {
		super(context);
		_context = context;
		initViewPage();
		initFootDots();
	}

	public FaceGridView(Context context, AttributeSet attrs) {
		super(context, attrs);
		_context = context;
		initViewPage();
		initFootDots();
	}

	private void initViewPage() {
		setOrientation(VERTICAL);
		setBackgroundColor(backColor);// 灰色
		_viewPager = new ViewPager(_context);
		_llDot = new LinearLayout(_context);
		_viewPager.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, viewPageHeight));
		_llDot.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
		_llDot.setGravity(Gravity.CENTER);
		_llDot.setOrientation(HORIZONTAL);
		addView(_viewPager);
		addView(_llDot);
	}

	private void initFootDots() {
		try {
			faceNames = getResources().getAssets().list(facePath);
		} catch (IOException e) {
			e.printStackTrace();
		}
		viewPager_size = (int) Math.ceil(faceNames.length / pageItemCount);

		if (0 < viewPager_size) {
			if (viewPager_size == 1) {
				_llDot.setVisibility(View.GONE);
			} else {
				_llDot.setVisibility(View.VISIBLE);
				for (int i = 0; i < viewPager_size; i++) {
					ImageView image = new ImageView(_context);
					image.setTag(i);
					LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20, 20);
					params.setMargins(5, 5, 5, 15);
					// 两种调用图片方式
					image.setBackgroundDrawable(DotFile.setStateDrawable());
					// image.setBackgroundResource(R.drawable.dots_set);
					image.setEnabled(false);
					_llDot.addView(image, params);
				}
			}
		}
		if (1 != viewPager_size) {
			dots = new ImageView[viewPager_size];
			for (int i = 0; i < viewPager_size; i++) {
				dots[i] = (ImageView) _llDot.getChildAt(i);
				dots[i].setEnabled(true);
				dots[i].setTag(i);
			}
			currentIndex = 0;
			dots[currentIndex].setEnabled(false);
			_viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

				@Override
				public void onPageSelected(int arg0) {
					setCurDot(arg0);
				}

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

				}

				@Override
				public void onPageScrollStateChanged(int arg0) {
				}
			});
		}
	}

	private void setCurDot(int position) {
		if (position < 0 || position > viewPager_size - 1 || currentIndex == position) {
			return;
		}
		dots[position].setEnabled(false);
		dots[currentIndex].setEnabled(true);
		currentIndex = position;
	}

	public void setAdapter() {
		if (onFaceGridViewItemClick == null) {
			Log.e("tag", "请先实现接口OnFaceGridViewItemClick");
			return;
		}
		list_Views = new ArrayList<GridView>();
		for (int i = 0; i < viewPager_size; i++) {
			list_Views.add(getViewPagerItem(i));
		}
		_viewPager.setAdapter(new ViewPageAdapter(list_Views));

	}

	/** 生成gridView数据 */
	private String[] getGridViewData(int index) {
		index++;
		int startPos = (index - 1) * 20;
		int endPos = index * 20;
		int length = 0;

		if (endPos > faceNames.length) {
			endPos = faceNames.length - 1;
		}
		length = endPos - startPos + 1;
		String[] tmps = new String[length];

		int num = 0;
		for (int i = startPos; i < endPos; i++) {
			tmps[num] = facePath + "/" + faceNames[i];
			num++;
		}
		tmps[length - 1] = backBtnName;
		return tmps;
	}

	private GridView getViewPagerItem(int index) {
		GridView gridView = new GridView(_context);
		gridView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
		gridView.setNumColumns(7);
		gridView.setVerticalScrollBarEnabled(false);
		gridView.setHorizontalScrollBarEnabled(false);
		gridView.setBackgroundColor(Color.TRANSPARENT);
		gridView.setAdapter(new GridViewAdapter(_context, getGridViewData(index)));
		gridView.setOnItemClickListener(new OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
				for (int i = 0; i < faceNames.length; i++) {
					if ((facePath + "/" + faceNames[i]).hashCode() == id) {
						onFaceGridViewItemClick.onItemClick(i);
					}
				}
			}
		});
		return gridView;
	}

	public void setOnFaceGridViewItemClick(OnFaceGridViewItemClick onFaceGridViewItemClick) {
		this.onFaceGridViewItemClick = onFaceGridViewItemClick;
	}

	public interface OnFaceGridViewItemClick {
		public void onItemClick(int facesPos);
	}
}

2、GridViewAdapter.java

package com.example.test;

import java.io.IOException;
import java.io.InputStream;

import android.content.Context;
import android.content.res.AssetManager;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView.LayoutParams;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class GridViewAdapter extends BaseAdapter {
	private Context context;
	private String[] facesName;
	private AssetManager assetManager;

	public GridViewAdapter(Context context, String[] facesName) {
		this.context = context;
		this.facesName = facesName;
		assetManager = context.getResources().getAssets();
	}

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

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

	@Override
	public long getItemId(int position) {
		return facesName[position].hashCode();
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		GridViewHolder gridViewHolder = null;
		if (convertView == null) {
			gridViewHolder = new GridViewHolder();
			convertView = gridViewHolder.layoutView;
			convertView.setTag(gridViewHolder);
		} else {
			gridViewHolder = (GridViewHolder) convertView.getTag();
		}
		gridViewHolder.faceIv.setImageBitmap(getBitmap(position));
		return convertView;
	}

	private Bitmap getBitmap(int position) {
		Bitmap bitmap = null;
		InputStream is = null;
		try {
			is = assetManager.open(facesName[position]);
			bitmap = BitmapFactory.decodeStream(is);
		} catch (IOException e) {
			e.printStackTrace();
		}
		is = null;
		return bitmap;

	}

	public class GridViewHolder {
		public LinearLayout layoutView;
		public ImageView faceIv;

		public GridViewHolder() {
			LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
			layoutView = new LinearLayout(context);
			faceIv = new ImageView(context);
			layoutView.setLayoutParams(layoutParams);
			layoutView.setOrientation(LinearLayout.VERTICAL);
			layoutView.setGravity(Gravity.CENTER);
			LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(80, 80);
			params.setMargins(0, 20, 0, 20);
			layoutView.addView(faceIv, params);
		}
	}
}

3、ViewPageAdapter.java

package com.example.test;

import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.GridView;

public class ViewPageAdapter extends PagerAdapter {
	private List<GridView> mListViews;

	public ViewPageAdapter(List<GridView> mListViews) {
		this.mListViews = mListViews;// 构造方法，参数是我们的页卡，这样比较方便。
	}

	@Override
	public int getCount() {
		return mListViews.size();// 返回页卡的数量
	}

	@Override  
    public int getItemPosition(Object object) {  
        return super.getItemPosition(object);  
    }  
	
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		container.removeView(mListViews.get(position));// 删除页卡
	}

	@Override
	public Object instantiateItem(ViewGroup container, int position) { // 这个方法用来实例化页卡
		container.addView(mListViews.get(position), 0);// 添加页卡
		return mListViews.get(position);
	}

	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0 == arg1;// 官方提示这样写
	}

}

4、DotFile.java

package com.example.test;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.StateListDrawable;

public class DotFile {
	private static int[] uPic = {  };//为16进制图片数据

	private static int[] downPic = { };//为16进制图片数据

	public static Bitmap getCircle(int which) {
		Bitmap bm = null;
		byte[] b = null;
		switch (which) {
		case 0:
			b = new byte[uPic.length];
			for (int i = 0; i < uPic.length; i++) {
				b[i] = (new Integer(uPic[i])).byteValue();
			}
			bm = BitmapFactory.decodeByteArray(b, 0, b.length);
			break;
		case 1:
			b = new byte[downPic.length];
			for (int i = 0; i < downPic.length; i++) {
				b[i] = (new Integer(downPic[i])).byteValue();
			}
			bm = BitmapFactory.decodeByteArray(b, 0, b.length);
			break;
		}
		return bm;
	}

	public static StateListDrawable setStateDrawable() {
		StateListDrawable sd = new StateListDrawable();
		Drawable up = new BitmapDrawable(getCircle(0));
		Drawable down = new BitmapDrawable(getCircle(1));
		// 负号代表false
		sd.addState(new int[] { -android.R.attr.state_enabled }, down);
		sd.addState(new int[] { android.R.attr.state_enabled }, up);
		return sd;
	}
}

调用方式:

<com.example.test.FaceGridView
        android:id="@+id/faceGridView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/editText" />

faceGridView = (FaceGridView) findViewById(R.id.faceGridView1);
faceGridView.setOnFaceGridViewItemClick(new OnFaceGridViewItemClick() {
	@Override
	public void onItemClick(int facesPos) {
		editText.setText(facesPos+"");
	}
});
faceGridView.setAdapter();

下载地址: 点击打开链接