“This is the 16th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Custom View to achieve digital rain

In Android, there are many types of animation, frame animation, tween animation, attribute animation, in addition, the use of custom View combined with mathematical formula, you can draw a complex interface or animation. This article records the digital rain modeled after the Matrix, to see the effect.

Implementation steps

Preparation work, constant configuration information

Final int DEFAULT_TEXT_COLOR = color.argb (255, 0, 255, 70); final int DEFAULT_TEXT_COLOR = color.argb (255, 0, 255, 70); Final int TEXT_SIZE = 24; // Paint mPaint; // Highlight Paint mPaintLight; Int switchInternal = interval[random.nextint (interval.length)]; Int speed;Copy the code

Build the content of the display text, because a computer is made up of zeros and ones, so zeros and ones represent its content data.

// Construct strings 0 and 1 if (contentArray == null) {contentArray = new String[2]; contentArray[0] = "0"; contentArray[1] = "1"; }Copy the code

Because the display is random, we use random numbers to get the content

private String getChar() {
            return contentArray[random.nextInt(2)];
        }
Copy the code

Since it is a custom View, the entry is in the constructor of the custom View.

public NumberView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
Copy the code

Initialize the above configuration information in the init method, such as creating a specific brush color, text size, and so on

private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setARGB(255, 0, 255, 70);
        mPaint.setTextSize(TEXT_SIZE);
        a = textColor >> 24 & 0xff;
        r = textColor >> 16 & 0xff;
        g = textColor >> 8 & 0xff;
        b = textColor & 0xff;
        mPaint.setARGB(a, r, g, b);

        mPaintLight = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintLight.setARGB(255, 140, 255, 170);
        mPaintLight.setTextSize(TEXT_SIZE);
    }
Copy the code

The onMeasure method measures the size of the View. The size of the View itself is determined by onMeasure().

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        if (widthMode == MeasureSpec.EXACTLY) {
            mWidth = widthSize;
        }
        if (heightMode == MeasureSpec.EXACTLY) {
            mHeight = heightSize;
        }
        setMeasuredDimension((int) mWidth, (int) mHeight);
  }
Copy the code

OnDraw () defines how to draw the View, so in the onDraw method you must draw in order to display the animation.

@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); render(canvas); rain(); } private void rain() { for (int j = 0; j < streams.length; j++) { Symbol[] symbols = (Symbol[]) streams[j]; for (int i = 0; i < symbols.length; i++) { Symbol symbol = symbols[i]; symbol.y = symbol.y >= mHeight ? 0 : symbol.y + symbol.speed; }}}Copy the code

No matter what kind of operation, custom View is always inseparable from the core method of onMeasure onLayout onDraw. For example, if we want to draw a picture, we also need to design it in this way, its size, its position, and how to draw it. Just like these code methods. OnMeasure: Determine the size of the view onLayout: determine the position of the view onLayout: How to draw the view this article came up with the animation of the Matrix on a whim, we refer to this project on Github, the reference code is in the portal, salute.