帶有動(dòng)畫效果的注冊(cè)控件
代碼下載

signup.png

signup.gif

一共有4個(gè)動(dòng)畫效果
1，點(diǎn)擊sign up轉(zhuǎn)變成輸入框
2，點(diǎn)擊下一步
3，最后一步歡迎文字漸變
4，輸入框非法抖動(dòng)效果
canvas 畫板
1，drawBg(canvas);
2，drawTitleAndText(canvas);
3，drawGoButton(canvas);
因?yàn)槭抢^承了EditText，所以要監(jiān)聽onTextChanged,來重新繪制。如果文字超出view的寬度要將背景進(jìn)行平移，如果文字在view寬度內(nèi)，隨文字長(zhǎng)度顯示寬度

        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);
        }

如果文字超出最長(zhǎng)寬度的距離，只顯示能容納最大字?jǐn)?shù)的字符串后幾位。

        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);
            } }
        } 

簡(jiǎn)單的抖動(dòng)動(dòng)畫

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

使用方式

        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) {

            }
        });

代碼下載