自定义表情控件：
public class FaceView extends LinearLayout { private Context mContext; private OnItemClickListener mListener; private int mCurrentPageNumber; public int getCurrentPageNumber() { return mCurrentPageNumber; } public CustomGridview(Context context) { super(context); this.mContext = context; init(context); } public CustomGridview(Context context, AttributeSet attrs) { super(context, attrs); this.mContext = context; init(context); } private void init(Context context) { setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT)); setOrientation(LinearLayout.VERTICAL); View customgridview = LayoutInflater.from(context).inflate(R.layout.face, null, false); addView(customgridview); } private List<Map<String, Object>> getFaceData(int n) { List<Map<String, Object>> list = new ArrayList<Map<String, Object>>(); Map<String, Object> map = null; int[] arr = FaceUtil.getFaceUtil().faceIds; for(int i = n*28; arr.length > i && i< n*28 + 28; i++){ map = new HashMap<String, Object>(); map.put("face", arr[i]); list.add(map); } return list; } private List<Integer> getFaceViewIds(){ List<Integer> viewIds = new ArrayList<Integer>(); viewIds.add(R.id.face_item_iv); return viewIds; } private GridView initFaceUI(Context context, int len){ GridView gridView = new GridView(context); gridView.setAdapter(new MainBaseAdapter(context, R.layout.face_item, getFaceViewIds(), getFaceData(len))); gridView.setNumColumns(7); gridView.setColumnWidth(80); gridView.setHorizontalSpacing(1); gridView.setVerticalSpacing(1); gridView.setGravity(Gravity.CENTER); gridView.setBackgroundColor(Color.parseColor("#f2f2f2")); gridView.setOnItemClickListener(mListener); return gridView; } public void setOnItemClickListener(OnItemClickListener listener) { this.mListener = listener; //表情界面左右拖动控件类 ScrollViewGroup scrollViewGroup = (ScrollViewGroup) findViewById(R.id.scrollViewGroup); //加入2页表情 for (int i = 0; i < 2; i++) { scrollViewGroup.addView(initFaceUI(mContext, i)); } scrollViewGroup.setCurrentPageNumber(0); //当拖动表情界面时更新底部图标为选中状态 scrollViewGroup.setOnScrollListener(new OnScrollListener() { @Override public void onSroll(int currentPage) { mCurrentPageNumber = currentPage; } }); //底部图标切换类 PageControlView pageControlView = (PageControlView) findViewById(R.id.pageControlView); pageControlView.bindScrollViewGroup(scrollViewGroup); } }
face.xml：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="215dip" android:background="#FFFFFF" android:orientation="vertical" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="215dip" android:layout_weight="1" > <com.g.im.widget.ScrollViewGroup android:id="@+id/face_scrollv" android:layout_width="fill_parent" android:layout_height="175dip" /> <com.g.im.widget.PageControlView android:id="@+id/face_controlv" android:layout_width="fill_parent" android:layout_height="40dip" android:layout_marginTop="175dip" android:background="#8f00000f" android:gravity="center" /> </RelativeLayout> </LinearLayout> face_item.xml： <?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="wrap_content" android:layout_gravity="center" android:background="@color/white" android:gravity="center" android:orientation="vertical" android:paddingBottom="10dip" android:paddingTop="10dip" > <ImageView android:id="@+id/face_item_iv" android:layout_width="23dip" android:layout_height="23dip" android:gravity="center" /> </LinearLayout> 显示表情页的类，可左右拖动：
public class ScrollViewGroup extends ViewGroup { private Scroller mScroller; private VelocityTracker mVelocityTracker; private static final int TOUCH_STATE_REST = 0; private static final int TOUCH_STATE_SCROLLING = 1; private static final int SNAP_VELOCITY = 600; private int mTouchState = TOUCH_STATE_REST; private int mTouchSlop; private float mLastMotionX; private int mCurrentPageNumber; //页码 /**指定表情界面默认显示为指定页，供外部调用**/ public void setCurrentPageNumber(int currentPageNumber) { this.mCurrentPageNumber = currentPageNumber; } /**取得当前页码**/ public int getCurrentPageNumber() { return mCurrentPageNumber; } public ScrollViewGroup(Context context, AttributeSet attrs) { this(context, attrs, 0); } public ScrollViewGroup(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); mScroller = new Scroller(context); mCurrentPageNumber = 0; mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); final int width = MeasureSpec.getSize(widthMeasureSpec); final int widthMode = MeasureSpec.getMode(widthMeasureSpec); if (widthMode != MeasureSpec.EXACTLY) { throw new IllegalStateException("ScrollLayout only canmCurScreen run at EXACTLY mode!"); } final int heightMode = MeasureSpec.getMode(heightMeasureSpec); if (heightMode != MeasureSpec.EXACTLY) { throw new IllegalStateException("ScrollLayout only can run at EXACTLY mode!"); } final int count = getChildCount(); for (int i = 0; i < count; i++) { getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec); } scrollTo(mCurrentPageNumber * width, 0); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { if (changed) { int childLeft = 0; final int childCount = getChildCount(); //设置子view的位置为按顺德序横向排列 for (int i = 0; i < childCount; i++) { final View childView = getChildAt(i); if (childView.getVisibility() != View.GONE) { final int childWidth = childView.getMeasuredWidth(); childView.layout(childLeft, 0, childLeft + childWidth, childView.getMeasuredHeight()); childLeft += childWidth; } } } } @Override public void computeScroll() { //滚动动作已经结束进执行 if (mScroller.computeScrollOffset()) { //设置视图的滚动位置。会触发 onScrollChanged(int, int, int, int) 事件，并使视图失效重绘。 scrollTo(mScroller.getCurrX(), mScroller.getCurrY()); //更新视图 postInvalidate(); } } @Override public boolean onTouchEvent(MotionEvent event) { if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain(); } mVelocityTracker.addMovement(event); final int action = event.getAction(); final float x = event.getX(); switch (action) { case MotionEvent.ACTION_DOWN: if (!mScroller.isFinished()) { mScroller.abortAnimation(); } mLastMotionX = x; break; case MotionEvent.ACTION_MOVE: int deltaX = (int) (mLastMotionX - x); mLastMotionX = x; scrollBy(deltaX, 0); break; case MotionEvent.ACTION_UP: final VelocityTracker velocityTracker = mVelocityTracker; //初始化速率的单位，1000毫秒内运动了多少个像素 velocityTracker.computeCurrentVelocity(1000); int velocityX = (int) velocityTracker.getXVelocity(); //判断横向的速率 if (velocityX > SNAP_VELOCITY && mCurrentPageNumber > 0) {//右移，显示上个页面 scrollToScreen(mCurrentPageNumber - 1); } else if (velocityX < -SNAP_VELOCITY && mCurrentPageNumber < getChildCount() - 1) {//左移，显示下个页面 scrollToScreen(mCurrentPageNumber + 1); } else {//根据滚动位置回弹 snapToDestination(); } //释放 if (mVelocityTracker != null) { mVelocityTracker.recycle(); mVelocityTracker = null; } mTouchState = TOUCH_STATE_REST; break; case MotionEvent.ACTION_CANCEL: mTouchState = TOUCH_STATE_REST; break; } return true; } @Override public boolean onInterceptTouchEvent(MotionEvent ev) { final int action = ev.getAction(); if ((action == MotionEvent.ACTION_MOVE) && (mTouchState != TOUCH_STATE_REST)) { return true; } final float x = ev.getX(); switch (action) { case MotionEvent.ACTION_MOVE: final int xDiff = (int) Math.abs(mLastMotionX - x); if (xDiff > mTouchSlop) { mTouchState = TOUCH_STATE_SCROLLING; } break; case MotionEvent.ACTION_DOWN: mLastMotionX = x; mTouchState = mScroller.isFinished() ? TOUCH_STATE_REST : TOUCH_STATE_SCROLLING; break; case MotionEvent.ACTION_CANCEL: case MotionEvent.ACTION_UP: mTouchState = TOUCH_STATE_REST; break; } return mTouchState != TOUCH_STATE_REST; } /** * 根据当前x坐标位置确定切换到第几屏 */ public void snapToDestination() { final int screenWidth = getWidth(); final int destScreen = (getScrollX() + screenWidth / 2) / screenWidth; scrollToScreen(destScreen); } /** * 切换到指定屏 * * @param whichScreen 切换页码 */ public void scrollToScreen(int whichScreen) { whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1)); if (getScrollX() != (whichScreen * getWidth())) { final int delta = whichScreen * getWidth() - getScrollX(); mScroller.startScroll(getScrollX(), 0, delta, 0, Math.abs(delta) * 2); mCurrentPageNumber = whichScreen; invalidate(); /** 切换屏后回调，更新底部图标 **/ if (onScreenChangeListener != null) { onScreenChangeListener.onScreenChange(mCurrentPageNumber); } if (onScrollListener != null) { onScrollListener.onSroll(mCurrentPageNumber); } } } /**供底部图标切换类使用**/ private OnScreenChangeListener onScreenChangeListener; public void setOnScreenChangeListener(OnScreenChangeListener onScreenChangeListener) { this.onScreenChangeListener = onScreenChangeListener; } public interface OnScreenChangeListener { void onScreenChange(int currentIndex); } /**供底外部GridView获取当前页码使用**/ private OnScrollListener onScrollListener; public void setOnScrollListener(OnScrollListener onScrollListener) { this.onScrollListener = onScrollListener; } public interface OnScrollListener { void onSroll(int currentPage); } } 切换控件底部图标的类：
public class PageControlView extends LinearLayout { private Context mContext; private int mPageNumber; // 页数 private ScrollViewGroup mScrollViewGroup; public PageControlView(Context context) { super(context); init(context); } public PageControlView(Context context, AttributeSet attrs) { super(context, attrs); init(context); } private void init(Context context) { this.mContext = context; } /** * 据据表情页更新底部对应图标为选中状态 * * @param scrollViewGroup 仿lauch可左右拖动界面的对象 */ public void bindScrollViewGroup(ScrollViewGroup scrollViewGroup) { this.mScrollViewGroup = scrollViewGroup; this.mPageNumber = scrollViewGroup.getChildCount(); generatePageControl(scrollViewGroup.getCurrentPageNumber()); /** 当拖动表情界面时更新底部图标为选中状态 **/ scrollViewGroup.setOnScreenChangeListener(new OnScreenChangeListener() { @Override public void onScreenChange(int currentPage) { generatePageControl(currentPage); } }); } /** * 跟据当前页码将当前页的图标换成选中状态样式的图片 * * @param currentIndex 当前页码 */ private void generatePageControl(int currentPage) { this.removeAllViews(); for (int i = 0; i < mPageNumber; i++) { ImageView imageView = new ImageView(mContext); imageView.setPadding(5, 5, 5, 5); if (currentPage == i) { imageView.setImageResource(R.drawable.page_indicator_focused); } else { imageView.setImageResource(R.drawable.page_indicator_unfocused); } this.addView(imageView); } } @Override public boolean onTouchEvent(MotionEvent event) { boolean temp = event.getX() > getWidth() / 2; if (temp && mScrollViewGroup.getCurrentPageNumber() < 1) {// 下一页 mScrollViewGroup.scrollToScreen(mScrollViewGroup.getCurrentPageNumber() + 1); } else if (!temp && mScrollViewGroup.getCurrentPageNumber() > 0) {// 上一页 mScrollViewGroup.scrollToScreen(mScrollViewGroup.getCurrentPageNumber() - 1); } return super.onTouchEvent(event); } }
在聊天界面中加入自定义表情布局： <com.g.im.widget.FaceView android:id="@+id/talk_face_gridview" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@color/face_gridview_bg" android:columnWidth="80dip" android:gravity="center" android:horizontalSpacing="1dip" android:listSelector="@color/transparent" android:numColumns="7" android:verticalSpacing="1dip" />
