自定义使用Adapter的组件（二）

上篇只实现了效果但是图片不能随手势滑动，要想实现这个效果，需要实现接口GestureDetector.OnGestureListener。

 实现GestureDetector.OnGestureListener接口需要实现以下方法

• onDown   
  
• onShowPress
  
• onSingleTapUp
  
• onScroll
  
• onLongPress
  
• onFling

在这个组件中，我们只需要实现onDown、onScroll就可以了，onDown返回true时才会响应触屏手势事件。onScroll中实现图片的滑动。

接下来，我们说下图片随手势滑动的 原理： 其实，不是图片滑动，是组件在滑动，屏幕沿X轴运动，看起来就像图片在随着手势滑动。

接下来，我们看下代码：

public class ImageWallView extends AdapterView<ListAdapter> implements GestureDetector.OnGestureListener{

    private ListAdapter mAdapter;
    private GestureDetector gestureDetector;         //监听屏幕事件
    private float offset=0;                     // 相对于(0,0)点水平方向滑动的距离
    private int unitWidth;                      //每个单元的宽
    private int numColumns;                //屏幕展示的孩子的数目

    /**
     * 构造方法
     */

    public ImageWallView(Context context) {
        super(context);
        init();
    }

    public ImageWallView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();

    }

    public ImageWallView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init(){
        gestureDetector = new GestureDetector(this.getContext(),this);
        gestureDetector.setIsLongpressEnabled(true);  //监听长按事件
    }
    /**
     * 继承AdapterView需要实现以下四个方法
     *  getAdapter()
     *  setAdapter(ListAdapter adapter)
     *  getSelectedView()
     *  setSelection(int position)
     */
    @Override
    public ListAdapter getAdapter() {
        return mAdapter;
    }

    @Override
    public void setAdapter(ListAdapter adapter) {
        this.mAdapter = adapter;
        //把所有的child添加到布局中
        for(int i=0;i<mAdapter.getCount();i++){
            View child = mAdapter.getView(i,null,this);
            addViewInLayout(child,i,child.getLayoutParams());
        }
    }

    @Override
    public View getSelectedView() {
        return null;
    }

    @Override
    public void setSelection(int position) { }


    /**
     * 实现GestureDetector.OnGestureListener接口需要实现以下方法
     *   onDown    //响应触屏事件 这个必须返回true
     *   onShowPress
     *   onSingleTapUp
     *   onScroll
     *   onLongPress
     *   onFling
     */
    public boolean onDown(MotionEvent e) {

        return true;
    }

    public void onShowPress(MotionEvent e) {

    }

    /**
     * 单击松开时响应
     */
    public boolean onSingleTapUp(MotionEvent e) {

        return false;
    }

    /**
     * 图片顺手势滑动
     * @param distanceX      往右滑动是负值 往左滑动是正值
     */
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {

        offset = offset- distanceX;
        //确保不滑出界
        if(offset>0){
            offset=0;
        }
       else if(offset < (getChildCount()-numColumns)*unitWidth*-1) {
            offset = (getChildCount()-numColumns)*unitWidth*-1;
        }
        //重绘布局
        requestLayout();

        return true;
    }

    public void onLongPress(MotionEvent e) {
        
    }

    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {;
        return true;
    }


    /**
     * 设置布局
     */
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        int childCount = getChildCount();
        int pLeft = 0;
        int pTop = 0;
        int childWidth=0;
        int childHeight=0;

        if(childCount>0){
            View child = getChildAt(0);
            LayoutParams p = child.getLayoutParams();
            childWidth = p.width + child.getPaddingLeft() + child.getPaddingRight() ;                 // child 的宽
            childHeight = p.height + child.getPaddingTop() + child.getPaddingBottom();            // child 的高

            numColumns = (getMeasuredWidth() - getPaddingLeft() - getPaddingRight())/childWidth;  //计算屏幕中可以放置几个child
            int spacing = (getMeasuredWidth() - getPaddingLeft() - getPaddingRight() - numColumns * childWidth)/numColumns;  //计算child之间的平均空隙

            int spacingLR = (getPaddingLeft() + getPaddingRight() )/2;//组件左右边的平均空隙

            if(spacing > spacingLR){
                  int outSpacing = spacing - spacingLR;
                  setPadding(spacingLR+outSpacing,getPaddingTop(),spacingLR+outSpacing,getPaddingBottom());
             }
            unitWidth = childWidth + spacing ;
        }

        for(int i=0;i<childCount;i++){
             View child = getChildAt(i);

            pLeft = getPaddingLeft() + i * unitWidth+(int)offset;                 //child距离左端的距离


            pTop = getPaddingTop();                                         //child距离顶端的距离
            child.layout(pLeft,pTop,pLeft + childWidth,pTop + childHeight);
            
        }

    }

    /**
     * 设置大小
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //设置宽度和高度
        setMeasuredDimension(
                getDefaultSize(getSuggestedMinimumWidth(),widthMeasureSpec),
                getDefaultSize(getSuggestedMinimumHeight(),heightMeasureSpec)
        );
    }




    /**
     * 响应触屏事件
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if(mAdapter == null){
            return true;
        }
        boolean touchValue = gestureDetector.onTouchEvent(event);

        if(event.getAction() == MotionEvent.ACTION_UP ){ //在手指抬起时调用onUp方法
            onUp();
        }
        return touchValue;
    }

    /**
     * 实现屏幕只显示整章的商品图片
     */
    private void onUp(){

        int index = (int) (Math.abs(offset) / unitWidth);

        index += (Math.abs(offset) - index*unitWidth) > unitWidth/2 ? 1:0;

        offset = offset>0? index*unitWidth : -1*index*unitWidth;

        requestLayout();

    }



}