No trivial interface (a): RecyclerView+CardView to know

No trivial interface (two): RecyclerView to show more different views

Interface no trivial (three): RecyclerView + Toolbar to make a file selector

Interface no small matter (4): write a scroll selector!

Interface no small matter (five): custom TextView

Interface no small matter (six): to make a good-looking side pull menu!

Go to Github to see the source code

directory

  • rendering
  • preface
  • Paint class
  • The timer
  • Baseline baseline
  • Scroll selector implementation
  • The last

rendering

All right, let’s start with the renderings. Read on for more fun. Go to Github to see the source code

preface

In the PC era, input generally relied on a keyboard. For operations like time selection, Win lists all the dates and lets you click select. To tell you the truth, the dirt blew up. Of course, the scrolling time is pretty lame (awkward manually), but it’s a lot more fun than Windows. And I think there are a lot of good scenarios for scrolling selectors, so THIS time I will write one to share with you.

Paint class

Paint is a good class to be familiar with. Most of the functions are set methods. This article has two instances of Paint, one for drawing text and one for drawing lines.

mPaint = new Paint(); // Set anti-aliasing mPaint. SetFlags (paint.anti_alias_flag); // Set the text alignment to mPaint. SetTextAlign (paint.align.CENTER); // Set the paint color to mPaint. SetColor (uiutil.getColor (r.color.colortext)); mLinePaint = new Paint(); mLinePaint.setColor(UIUtil.getColor(R.color.colorPrimaryTrans));Copy the code

In subsequent code, the Paint instance sets the text size and transparency based on the curve. Therefore, we need to set our own minimum and maximum size, minimum and maximum transparency, so that we can change within the range according to the function curve. It looks something like this, but y is greater than 0.

// Set the size according to the curvefloat scale = gradient(mMax, mMoveLen);
float size = (mMax - mMin) * scale + mMin; mPaint.setTextSize(size); SetAlpha ((int) ((mMaxAlpha -mm))inAlpha) * scale + mMinAlpha));
Copy the code

The timer

Timers are often used. Android uses a combination of Timer, TimerTask and Handler. The idea is that the Timer instance uses the schedule function, passing in the TimerTask instance and the time parameters. Then, in the Run method of the TimerTask instance, have the Handler instance call the sendMessage method to send the message. It is finally handled in the handleMessage method. The code is as follows:

mTask = new MyTimerTask(mHandler);
mTimer.schedule(mTask, 0, 10);
Copy the code
private class MyTimerTask extends TimerTask {
    Handler handler;

    public MyTimerTask(Handler handler) {
        this.handler = handler;
    }

    @Override
    public void run() { handler.sendMessage(handler.obtainMessage()); }}Copy the code
Handler mHandler = new Handler() {@override public void handleMessage(Message MSG) {// Roll back the Message step by step until it is smaller than the specified value and the target is selectedifMath.abs(mMoveLen) < BACK_SPEED) {// select mMoveLen = 0;if (mTask != null) {
                mTask.cancel();
                mTask = null;
                select();
            }
        } else{// scroll mMoveLen = mMoveLen - mMoveLen/math.abs (mMoveLen) * BACK_SPEED; } invalidate(); }};Copy the code

Baseline baseline

Finally, metaphysics, baseline. Android draws based on a baseline. So what is baseline? Look at two pictures:

In other words, to center some text vertically, you need to get the height of the text as well as the height of the View. Here we need the Paint.FontMetrics class, which has the parameters we want. Ascent and descent are both ways of calculating text height depending on top and bottom, or ascent and descent. Whichever picture you understand better, use it. Another point to make is that all parameters are relative to the baseline, so top could be -100, and bottom could be 30.

floatBaseline = y - (fmi.top + fmi.bottom) / 2.0f;floatBaseline = y - (fmi.ascent + fmi.descent) / 2.0f;Copy the code

Scroll selector implementation

In order to implement scroll selectors, you still have to deal with touches. If you’re not familiar with custom views, check out my previous article. Or Google it. The point is to start the timer when you raise your hand, click to record position, move and redraw. Then, in order to connect, you need to process the contents of the List at the top and the bottom.

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getActionMasked()) {
        case MotionEvent.ACTION_DOWN: {
            if(mTask ! = null) { mTask.cancel(); mTask = null; } mLastDownY = event.getY(); }break;

        case MotionEvent.ACTION_MOVE: {
            mMoveLen += (event.getY() - mLastDownY);

            if (mMoveLen > DIS * mMin / 2) {
                tailToHead();
                mMoveLen = mMoveLen - DIS * mMin;
            } else if (mMoveLen < -DIS * mMin / 2) {
                headToTail();
                mMoveLen = mMoveLen + DIS * mMin;
            }

            mLastDownY = event.getY();
            invalidate();
        }
        break;

        caseMotionevent.action_up: {// Move too small, do not moveif (Math.abs(mMoveLen) < 0.001) {
                mMoveLen = 0;
                break;
            }
            if(mTask ! = null) { mTask.cancel(); mTask = null; } mTask = new MyTimerTask(mHandler); mTimer.schedule(mTask, 0, 10); }break;
    }
    return true;
}
Copy the code
private void headToTail() {
    String head = mData.get(0);
    mData.remove(0);
    mData.add(head);
}

private void tailToHead() {
    String tail = mData.get(mData.size() - 1);
    mData.remove(mData.size() - 1);
    mData.add(0, tail);
}
Copy the code

The last

Have a period of time did not write an article, is also busy with some messy things to go. Write a little lost feeling, will try to write an interesting article to share later. If you like, you can like me or follow me