自定义View----滑动刻度尺与流式布局 实例（四）

近在系统学习自定义View这一块的知识，前面几篇基本都是理论知识，这篇博客着重从实战来增强对自定义View的理解与运用。实现的两种效果，分别表明自定义View与自定义ViewGroup。

效果图：

上面的是一个能够滑动的刻度尺，支持快速滑动，选择的数字也会显示在下方；下面的是一个经典的流式布局，会根据文字长度自动进行布局。一块儿看看怎么实现的吧：

一.准备工做

1.布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:myscroll="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_five"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical">


    <org.tyk.android.artstudy.MySelectView
        android:id="@+id/my_selectview"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="50dp"
        myscroll:lineColor="@color/font_text"
        myscroll:textColor="@color/strong"
        myscroll:textSize="20dp"></org.tyk.android.artstudy.MySelectView>

    <TextView
        android:id="@+id/number_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="20dp"
        android:text="选择的数字为:"
        android:textSize="20dp" />

    <org.tyk.android.artstudy.MyFlowLayout
        android:id="@+id/my_flowlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="50dp"
        android:background="@color/bg_page">
    </org.tyk.android.artstudy.MyFlowLayout>


</LinearLayout>

 

从上到下的线性布局，依次是滑动刻度尺，数字TextView，流式布局，以及设置了一些自定义的属性。

2.自定义滑动刻度尺的初始准备

public MySelectView(Context context) {
        this(context, null);
    }

    public MySelectView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MySelectView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);


        //获取咱们自定义的样式属性
        TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MySelectView, defStyleAttr, 0);
        int n = array.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = array.getIndex(i);
            switch (attr) {
                case R.styleable.MySelectView_lineColor:
                    // 默认颜色设置为黑色
                    lineColor = array.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.MySelectView_textColor:
                    textColor = array.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.MySelectView_textSize:
                    // 默认设置为16sp，TypeValue也能够把sp转化为px
                    textSize = array.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
                    break;
            }
        }


        array.recycle();
        init();
    }

    public void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        bigBound = new Rect();
        smallBound = new Rect();
    }


    public void setmStartWidth(int mStartWidth) {
        this.mStartWidth = mStartWidth;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int width;
        int height;
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else {
            width = widthSize * 1 / 2;
        }
        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            height = heightSize * 1 / 2;
        }

        setMeasuredDimension(width, height);

    }


    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mWidth = getWidth();
        mHeight = getHeight();
        mStartWidth = 0;
    }

 

初始化自定义控件，获取自定义控件的样式属性，初始化相关工具，重写onMeasure()测量自定义控件大小，重写onLayout()获取自定义控件宽高。

二.自定义滑动刻度尺的实现

1.重写onDraw()方法绘制刻度尺

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(lineColor);
        //画背景
        canvas.drawLine(0, 0, mWidth, 0, mPaint);
        canvas.drawLine(0, mHeight, mWidth, mHeight, mPaint);

        //画数字
        for (int i = 0; i < 1000; i++) {
            if (i % 5 == 0) {
                mPaint.setColor(textColor);
                canvas.drawLine(mStartWidth, 0, mStartWidth, getHeight() / 3, mPaint);
                mPaint.setTextSize(textSize);
                mPaint.getTextBounds(String.valueOf(i), 0, String.valueOf(i).length(), bigBound);
                canvas.drawText(String.valueOf(i), mStartWidth - bigBound.width() / 2, getHeight() / 2 + bigBound.height() * 3 / 4, mPaint);
            } else {
                mPaint.setColor(lineColor);
                mPaint.setTextSize(textSize - 15);
                canvas.drawLine(mStartWidth, 0, mStartWidth, getHeight() / 5, mPaint);
                mPaint.getTextBounds(String.valueOf(i), 0, String.valueOf(i).length(), smallBound);
                canvas.drawText(String.valueOf(i), mStartWidth - smallBound.width() / 2, getHeight() / 2 + smallBound.height() * 3 / 4, mPaint);
            }
            mStartWidth += mWidth / 10;
        }
        //画中间刻度线
        mPaint.setColor(textColor);
        canvas.drawLine(mWidth / 2, 0, mWidth / 2, getHeight() / 3, mPaint);
    }

 

绘制背景的两条实线，绘制中间的数字，绘制中间的刻度线。

2.重写onTouchEvent()方法处理滑动事件

@Override
    public boolean onTouchEvent(MotionEvent event) {


        if (velocityTracker == null) {
            velocityTracker = VelocityTracker.obtain();
        }
        velocityTracker.addMovement(event);

        int x = (int) event.getX();
        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:
                xDown = x;
                break;
            case MotionEvent.ACTION_MOVE:
                xMove = x;
                mStartWidth = xScroll + (xMove - xDown);
                invalidate();
                int numberScroll = (int) Math.round(Double.valueOf(mStartWidth) / Double.valueOf(mWidth / 10));
                listener.getNumber(Math.abs(numberScroll - 5));
                break;
            case MotionEvent.ACTION_UP:
                xUp = x;
                xScroll = xScroll + (xUp - xDown);
                //处理快速滑动
                velocityTracker.computeCurrentVelocity(1000);
                int scrollX = (int) velocityTracker.getXVelocity();
                xScroll = xScroll + scrollX;
                ValueAnimator walkAnimator = ValueAnimator.ofInt(mStartWidth, xScroll);
                walkAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        mStartWidth = (int) animation.getAnimatedValue();
                        invalidate();
                    }
                });
                walkAnimator.setDuration(500);
                walkAnimator.start();
                walkAnimator.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animator animation) {

                        //处理惯性滑动
                        int endX = xScroll % (mWidth / 10);
                        if (Math.abs(endX) < mWidth / 20) {
                            xScroll = xScroll - endX;
                            mStartWidth = xScroll;
                            invalidate();
                        } else {
                            xScroll = xScroll + (Math.abs(endX) - mWidth / 10);
                            mStartWidth = xScroll;
                            invalidate();
                        }
                    }

                    @Override
                    public void onAnimationCancel(Animator animation) {

                    }

                    @Override
                    public void onAnimationRepeat(Animator animation) {

                    }
                });
                int number = (int) Math.round(Double.valueOf(xScroll) / Double.valueOf(mWidth / 10));
                listener.getNumber(Math.abs(number - 5));
                break;
        }
        return true;
    }

这一块是整个自定义滑动刻度尺的重点，慢慢分析一下：

初始化VelocityTracker，而且把要追踪的MotionEvent注册到VelocityTracker的监听中，用来跟踪触摸屏事件，主要用来处理滑动刻度尺的快速滑动。

MotionEvent.ACTION_DOWN: 获取水平方向X的坐标

MotionEvent.ACTION_MOVE: 获取水平方向滑动的距离，而后不断改变绘制的开始位置，再调用invalidate()来进行重绘，达到滑动的效果。后面两句代码是为了让下面显示的数字可以实时更新，接口回调。

MotionEvent.ACTION_UP: 
1.获取滑动到总距离。 
2.处理快速滑动，首先获取1秒内X方向所滑动像素值,而后肯定最终滑动的位置。经过一个属性动画，不断改变绘制的开始位置，再调用invalidate()来进行重绘，达到快速滑动的效果。 
3.处理惯性滑动，仔细查看效果图你会发现，当最后滑动的终点位置不足一半时，会自动滑动到前一个位置；当最后滑动的终点位置超过一半时，会自动滑动到下一个位置。这里其实就是在动画结束的时候，进行判断，而后调用invalidate()来进行重绘，达到惯性滑动的效果。 
4.最后两句代码是为了让下面显示的数字最终可以实时更新，接口回调。

三.自定义流式布局的实现

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);

        // 计算出全部的childView的宽和高
        for (int i = 0; i < getChildCount(); i++) {
            View childView = getChildAt(i);
            measureChild(childView, widthMeasureSpec, heightMeasureSpec);
        }
        setMeasuredDimension(sizeWidth, sizeHeight);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int left = 0;
        int top = 0;
        for (int i = 0; i < getChildCount(); i++) {
            View childView = getChildAt(i);
            MarginLayoutParams params = (MarginLayoutParams) childView.getLayoutParams();
            int lc = left + params.leftMargin;
            int rc = childView.getMeasuredWidth() + lc;
            int tc = top + params.topMargin;
            int bc = childView.getMeasuredHeight() + tc;
            childView.layout(lc, tc, rc, bc);
            //超过宽度则换行
            if (rc + childView.getMeasuredWidth() > getMeasuredWidth()) {
                left = 0;
                top = bc;
            } else {
                left = rc;
            }
        }
    }

1.重写generateLayoutParams()方法返回MarginLayoutParams的实例，使自定义的流式布局可以支持margin属性 
2.重写onDraw()方法计算出全部的childView的宽和高以及测量模式，而且设置本身的宽高 
3.重写onLayout()方法对全部childView进行定位(设置childView的绘制区域),而且根据childView的宽度进行自动换行。

具体使用：

public void init() {

        stringList.add("数据库");
        stringList.add("移动开发");
        stringList.add("前端开发");
        stringList.add("微信小程序");
        stringList.add("服务器开发");
        stringList.add("PHP");
        stringList.add("人工智能");
        stringList.add("大数据");
        mySelectView = (MySelectView) findViewById(R.id.my_selectview);
        myFlowLayout = (MyFlowLayout) findViewById(R.id.my_flowlayout);
        for (String textView : stringList) {
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);
            params.setMargins(40, 40, 40, 40);
            TextView showText = new TextView(this);
            showText.setLayoutParams(params);
            showText.setTextColor(getResources().getColor(R.color.text_color));
            showText.setTextSize(20);
            showText.setText(textView);
            showText.setBackground(getResources().getDrawable(R.drawable.flag_01));
            myFlowLayout.addView(showText);
        }
        numberTxt = (TextView) findViewById(R.id.number_txt);
        mySelectView.setListener(this);
    }

将须要设置的文字动态添加到咱们的流式布局中去便可，自定义的流式布局会自动根据添加文字的大小进行布局，达到最后的效果。

源码地址：

https://github.com/18722527635/AndroidArtStudy