Registration control code download with animation effect




signup.png




signup.gif

There are 4 animation effects 1, click Sign Up to change to input box 2, click next step 3, welcome text gradient 4, input box illegal shake effect Canvas artboard 1, drawBg(Canvas); 2, drawTitleAndText (canvas); 3, drawGoButton (canvas); Because you inherit EditText, listen for onTextChanged to redraw. Pan the background if the text is outside the width of the view. If the text is inside the width of the view, display the width with the text length

        textWidth = getPaint().measureText(getText().toString().trim());
        float marLeft = 0f;


        if (mWidth - 2 * mPadding < textWidth) {
            marLeft = textWidth - mWidth;
            bgRectF.left = mPadding + marLeft;
            bgRectF.top = mPadding;
            bgRectF.right = mWidth - mPadding + marLeft;
            bgRectF.bottom = mHeight - mPadding;
            bgPaint.setStyle(Paint.Style.FILL);
            bgPaint.setColor(bgColor);
            canvas.drawRoundRect(bgRectF, bgRectF.height() / 2, bgRectF.height() / 2, bgPaint);
            bgPaint.setStyle(Paint.Style.STROKE);
            if (inputError)
                bgPaint.setColor(errorColor);
            else
                bgPaint.setColor(Color.WHITE);

            canvas.drawRoundRect(bgRectF, bgRectF.height() / 2, bgRectF.height() / 2, bgPaint);
        } else if (mWidth / 2 >= textWidth) {

            bgRectF.left = mWidth / 2 - mWidth / 4;
            bgRectF.right = mWidth / 2 + mWidth / 4;
            float w = 0f;
            if (mStep == 1) {
                w = (bgRectF.width() - bgRectF.height()) / 2 * (interpolatedTimeFirst);
                bgRectF.left = mWidth / 2 - mWidth / 4 + w;
                bgRectF.right = mWidth / 2 + mWidth / 4 - w;

            } else {//if (mStep == 2) {
                bgRectF.left = mWidth / 2 - mWidth / 4 - textWidth / 2f;
                bgRectF.right = mWidth / 2 + mWidth / 4 + textWidth / 2f;

            }

            bgRectF.top = mPadding;
            bgRectF.bottom = mHeight - mPadding;
            bgPaint.setStyle(Paint.Style.FILL);
            bgPaint.setColor(bgColor);
            canvas.drawRoundRect(bgRectF, bgRectF.height() / 2, bgRectF.height() / 2, bgPaint);
            bgPaint.setStyle(Paint.Style.STROKE);
            if (inputError)
                bgPaint.setColor(errorColor);
            else
                bgPaint.setColor(Color.WHITE);
            canvas.drawRoundRect(bgRectF, bgRectF.height() / 2, bgRectF.height() / 2, bgPaint);


        } else {
            marLeft = 0;
            bgRectF.left = mPadding + marLeft;
            bgRectF.top = mPadding;
            bgRectF.right = mWidth - mPadding + marLeft;
            bgRectF.bottom = mHeight - mPadding;
            bgPaint.setStyle(Paint.Style.FILL);
            bgPaint.setColor(bgColor);
            canvas.drawRoundRect(bgRectF, bgRectF.height() / 2, bgRectF.height() / 2, bgPaint);
            bgPaint.setStyle(Paint.Style.STROKE);

            if (inputError)
                bgPaint.setColor(errorColor);
            else
                bgPaint.setColor(Color.WHITE);
            canvas.drawRoundRect(bgRectF, bgRectF.height() / 2, bgRectF.height() / 2, bgPaint);
        }Copy the code

If the text is beyond the maximum width distance, only the last few bits of the string that can hold the maximum word count are displayed.

canvastextlength = bgRectF.width() - bgRectF.height() * 2 - 10; if (canvastextlength < textWidth) { int count = (int) (textcount * canvastextlength / textWidth); canvasText = getText().toString().trim().substring(textcount - count); if (MInputType == InputType.EDITTEXT) { canvas.drawText(canvasText, bgRectF.centerX() - getFontlength(textPaint, canvasText) / 2f, bgRectF.centerY() + getFontHeight(textPaint, canvasText) / 2, textPaint); }}}Copy the code

Simple dither animation

           TranslateAnimation errorAnim = new TranslateAnimation(-3,
                    3, 0, 0);
            errorAnim.setInterpolator(new CycleInterpolator(2f));
            errorAnim.setDuration(400);Copy the code

use

mSignUpInputView.setBgPaintColor(Color.BLACK); mSignUpInputView.setTextPaintColor(Color.WHITE); mSignUpInputView.setTitlePaintColor(Color.GRAY); mSignUpInputView.setSetpIcon(R.mipmap.user, R.mipmap.email, R.mipmap.pwd); //set icon mSignUpInputView.setSetpName("Name", "Email", "PassWord"); //set title mSignUpInputView.setmButtonText("Sign up"); //button text mSignUpInputView.setVerifyTypeStep(SignUpInputView.VerifyType.NULL, SignUpInputView.VerifyType.EMAIL, SignUpInputView.VerifyType.PASSWORD); mSignUpInputView.setOnGetStepInfo(new SignUpInputView.GetStepAndText() { @Override public void GetInfo(int step, String stepName, String text) { } });Copy the code

The code download