android:自定义横向滑动的 ViewGroup

效果图：

大概就是这样子的，然后可以左右滑动。

原来是想做成ViewPager的那种效果的，但是感觉那种更不实用。

这个效果很类似系统控件 HorizontalScrollView 了。

关键代码还是测量，布局，触摸事件拦截，触摸滑动。

完整代码：

public class HorizontalView extends ViewGroup {

    private static final int DEFAULT_DP = 20;
    int defaultSize;
    private int touchSlop;
    private float downInterceptX;
    private float downInterceptY;
    private int tapTimeout;
    private Scroller mScroller;
    private long elapsedRealtime;
    private int goodSize;

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

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

    public HorizontalView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    public HorizontalView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context);
    }


    private void init(Context context) {
        defaultSize = (int) ViewUtils.dp2px(context, DEFAULT_DP);
        LogUtils.e("default size ========%s", defaultSize);
        setWillNotDraw(false);
        ViewConfiguration configuration = ViewConfiguration.get(context);
        touchSlop = configuration.getScaledTouchSlop();
        tapTimeout = ViewConfiguration.getTapTimeout();
        mScroller = new Scroller(context);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        LogUtils.w(ViewUtils.logMeasureSpec(widthMeasureSpec, "1-w"));
        LogUtils.w(ViewUtils.logMeasureSpec(heightMeasureSpec, "1-h"));
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        LogUtils.i(ViewUtils.logMeasureSpec(widthMeasureSpec, "2-w"));
        LogUtils.i(ViewUtils.logMeasureSpec(heightMeasureSpec, "2-h"));

        int wMode = MeasureSpec.getMode(widthMeasureSpec);
        int wSize = MeasureSpec.getSize(widthMeasureSpec);
        int hMode = MeasureSpec.getMode(heightMeasureSpec);
        int hSize = MeasureSpec.getSize(heightMeasureSpec);
        this.goodSize = wSize;
        int childCount = getChildCount();
        if (childCount == 0) {
            LogUtils.e("no need to set wh, use super.");
            return;
        }
        // measureChildren(widthMeasureSpec, heightMeasureSpec); // 必须要调用
        int w = 0, h = defaultSize;
        for (int i = 0; i < childCount; ++i) {
            View child = getChildAt(i);
            if (child == null || child.getVisibility() == GONE) {
                continue;
            }
            measureChildWithMargins(child,
                    0, widthMeasureSpec,
                    0, heightMeasureSpec);
            int measuredWidth = child.getMeasuredWidth();
            int measuredHeight = child.getMeasuredHeight();
            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            LogUtils.i("index=%s,wh=(%s,%s), lp:[%s,%s]", i,
                    measuredWidth, measuredHeight,
                    lp.leftMargin, lp.rightMargin);
            h = Math.max(h, measuredHeight + lp.topMargin + lp.bottomMargin);
            w += measuredWidth + lp.leftMargin + lp.rightMargin;
        }
        w += getPaddingStart() + getPaddingEnd();
        h += getPaddingTop() + getPaddingBottom();
        // w = Math.min(w, wSize); // 此时的 wSize 为 match_parent具体数值的大小
        // 保证 w 不会超过 parent 预期大小
        LogUtils.e("计算前的 ow,oh=(%s,%s),#,计算后的 wh(%s,%s)", wSize, hSize, w, h);
        if (wMode == MeasureSpec.EXACTLY && hMode == MeasureSpec.EXACTLY) {
            // LogUtils.e("no need to set wh, use super.");
            LogUtils.e("m1");
            setMeasuredDimension(w > wSize ? w : wSize, h > hSize ? h : hSize);
        } else if (wMode == MeasureSpec.EXACTLY) {
            LogUtils.e("m2");
            setMeasuredDimension(wSize, h);
        } else if (hMode == MeasureSpec.EXACTLY) {
            LogUtils.e("m3");
            setMeasuredDimension(w, hSize);
        } else {
            LogUtils.e("m4");
            setMeasuredDimension(w, h);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        LogUtils.i("- -onLayout(%s,%s,%s,%s)", l, t, r, b);
        l += getPaddingStart();
        r -= getPaddingEnd();
        t += getPaddingTop();
        b -= getPaddingBottom();
        int childCount = getChildCount();
        LogUtils.e("childCount = %s", childCount);
        for (int i = 0; i < childCount; ++i) {
            View child = getChildAt(i);
            if (child == null || child.getVisibility() == GONE) {
                continue;
            }
            int measuredWidth = child.getMeasuredWidth();
            int measuredHeight = child.getMeasuredHeight();
            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            int w = measuredWidth + lp.leftMargin + lp.rightMargin;
            l += lp.leftMargin;
            t += lp.topMargin;
            LogUtils.d("layout child:");
            LogUtils.d("index=%s,#,l,t,r,b (%s,%s,%s,%s)",
                    i,
                    l, t,
                    l + measuredWidth, t + measuredWidth);
            child.layout(l, t, l + measuredWidth, t + measuredHeight);
            // for next child
            l += measuredWidth + lp.rightMargin;
            t -= lp.topMargin; // 下一个不能沿用上一个的 marginTop, 因为是横向排列，不是总纵向
            // t += measuredHeight + lp.bottomMargin;
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        LogUtils.e("old(%s,%s), now(%s,%s)", oldw, oldh, w, h);
    }

    @Override
    protected LayoutParams generateDefaultLayoutParams() {
        LogUtils.e("generateDefaultLayoutParams");
        return new MarginLayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    }

    @Override
    protected LayoutParams generateLayoutParams(LayoutParams p) {
        LogUtils.e("generateLayoutParams p");
        return new MarginLayoutParams(p);
    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(), attrs);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        boolean intercept = false;
        int actionMasked = ev.getActionMasked();
        float x = ev.getX();
        float y = ev.getY();
        switch (actionMasked) {
            case MotionEvent.ACTION_DOWN:
                downInterceptX = x;
                downInterceptY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                if (Math.abs(x - downInterceptX) > Math.abs(y - downInterceptY)
                        && Math.abs(x - downInterceptX) > touchSlop) {
                    intercept = true;
                }
                break;
            case MotionEvent.ACTION_UP:
                break;
            case MotionEvent.ACTION_CANCEL:
                break;
        }
        return intercept || super.onInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                elapsedRealtime = SystemClock.elapsedRealtime();
                break;
            case MotionEvent.ACTION_MOVE:
                float diffX = x - downInterceptX;
                float diffY = y - downInterceptY;
                scrollBy((int) -diffX, 0);
                // 由于 move 会被多次调用
                downInterceptX = x;
                downInterceptY = y;
                break;
            case MotionEvent.ACTION_UP:
                long realtime = SystemClock.elapsedRealtime();
                if (Math.abs(y - downInterceptY) < touchSlop
                        && Math.abs(x - downInterceptX) < touchSlop
                        && realtime - elapsedRealtime < tapTimeout) {
                    LogUtils.e("click me....");
                    performClick();
                }
                break;
            case MotionEvent.ACTION_CANCEL:
                break;
        }
        return true;
    }

    @Override
    public boolean performClick() {
        return super.performClick();
    }


    @Override
    public void computeScroll() {
        // 没用上，没处理 ACTION_UP
        super.computeScroll();
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            postInvalidate();
        }
    }

    @Override
    public void scrollTo(int x, int y) {
        // 重写 scrollTo 之后，不让其滑动超出边界
        LogUtils.v("scrollTo(%s,%s)", x, y);

        if (x > getWidth() - goodSize) {
            LogUtils.v("getWidth(), goodSize=%s,%s", getWidth(), goodSize);
            x = getWidth() - goodSize;
        }
        if (x < 0) {
            x = 0;
        }
        if (x != getScrollX()) {
            super.scrollTo(x, y);
        }
    }
}

主要步骤：

0. 重写 generateLayoutParams 三个方法，让 child 支持 margin 属性
1. 重写 onMeasure , 自己的宽度是 children 宽度总和
2. 重写 onLayout , 自己的高度是 children 的最大值
3. 重写 onIntercept, 是横向滑动就拦截
4. 重写 onTouch, move 的时候，通过 scrollBy 进行滑动
5. 重写 scrollTo, 不让其滑动超过自身的左右最大边界