preface

We’ve talked a little bit about Paint and Canvas in the past, but we haven’t solved all the problems yet. Do you need something like this in our project — sliding and animation? Right!! How to implement a sliding effect like RecyclerView, and an animation effect, which we’ll talk about next.

directory

1. Real cool custom View (1)
2. Custom View (2)
3. Custom View (3)

sliding

In fact, in order to seek convenience, we directly use the GestureDetector class that Has been packaged by Android. There is a simple gesture-resolved inner class SimpleOnGestureListener that we can call and then swipe.

private inner class BarGesture : SimpleOnGestureListener() {

        override fun onDown(e: MotionEvent?).: Boolean {
            return true
        }

        override fun onScroll(
            e1: MotionEvent? , e2:MotionEvent? , distanceX:Float,
            distanceY: Float
        ): Boolean {
            if (mBarShowNum <= mMinBarScrollShowNum) return false

            val position = dp2px(context, scrollX.toFloat())
            if (distanceX >= 0) {
                if (position <= mBarMaxWidth) {
                    scrollBy(distanceX.toInt(), 0)}}else {
                if (distanceX >= - 1 * position) {
                    scrollBy(distanceX.toInt(), 0)}}return false}}Copy the code

In order to slide, there is an automatic distance requirement, so we call the ScrollBy defined by the View, and we can move it.

In general, in fact, he has given us encapsulated, to do is a direction of judgment. The other thing that we can see in the code is the variable scrollX, which is a variable that the View has already defined, so remember it’s very useful.

On performance

One of the things we talked about earlier is what the Android coordinate system looks like. For those who have forgotten, take a look at Android custom Views. Did you get the hang of it? . Do we draw patterns that go beyond the width of the screen?

Let’s do a test on the whole drawing, and the test code is given first

override fun onDraw(canvas: Canvas?). {
        super.onDraw(canvas)
        / / 1
        var count:Int = 0
        for (i inmData!! .indices) {// if (! checkIsNeedDraw(i)) {
                valheight = (mMaxData - mData!! [i]) / mMaxData * mBarMaxHeight mBarPaint? .shader =nulldrawBarValue(canvas, i, height) drawDescriptions(canvas, i) mBarPaint? .shader = shader drawBars(canvas, height)/ / 2
                count++
/ /}
            if(i ! = mData!! .size -1) { canvas? .translate(mBarSingleWidth,0f)
            }
        }
        / / 3
        Log.e("onDraw", count.toString())
    }
Copy the code

The annotated code should be added to the BarChartView class source code. I give the amount of data is 7, then let’s see how many times the result is given!!

Oh my God!! Seven times, really seven times. Oh, my God, doesn’t that mean you have to draw ？？？？ as well What do I need you for? Don’t draw for me.

Well, we know what to draw, so we need to find a solution. We just mentioned a variable called scrollX, which basically records where the leftmost part of our screen is relative to the X-axis, and the screen size is fixed, so we can derive this idea.

private fun checkIsNeedDraw(i: Int): Boolean {
        if (mBarSingleWidth * (i + 1) < scrollX) return true
        if (mBarSingleWidth * i > scrollX + mWidth) return true
        return false
    }
Copy the code

Let’s see what happens with him.

Six values appear, indicating that the number of plots we draw has decreased significantly. Prove the method is effective ！！！！

animation

In fact, animation is a very big knowledge point, and I will not talk about it in detail here, on the one hand, because he has a large amount of knowledge, on the other hand, MY contact is not comprehensive enough.

private fun initAnimation(a) {
        animator = ValueAnimator.ofFloat(0.3f, 1f)
        // Use interpolators to animateanimator? .interpolator = LinearInterpolator() animator?.duration =1500animator? .addUpdateListener { animation -> scale = animation.animatedValueas Float
            postInvalidate()
        }
    }
Copy the code

Let’s take a look at my code. We can see a LinearInterpolator() like this. If we locate it, we can see who the members of his family are.

With the timing of the animation, and a scale, which is changing the value, dynamically changing the data, which is essentially redrawing, to achieve the incremental effect that we can see. You can call these classes directly to do some simple animations.

Histogram drawing

Big deal, big deal!!

In fact, we have considered a lot of problems I encountered when writing bar charts, so roughly speaking, or to look at the source code as the benchmark, here is mainly a design of my draft, because you want to draw a bar chart, there must be a certain amount of calculation.

Basic is to rely on this simple design draft to complete my class, there are bugs, please forgive me.

But I also hope you can Star my project View_How_To_Make_It