帶有動畫效果的注冊控件
代碼下載
signup.png
signup.gif
一共有4個動畫效果
1，點擊sign up轉變成輸入框
2，點擊下一步
3，最后一步歡迎文字漸變
4，輸入框非法抖動效果
canvas 畫板
1，drawBg(canvas);
2，drawTitleAndText(canvas);
3，drawGoButton(canvas);
因為是繼承了EditText，所以要監(jiān)聽onTextChanged,來重新繪制。如果文字超出view的寬度要將背景進行平移，如果文字在view寬度內，隨文字長度顯示寬度
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);
}
如果文字超出最長寬度的距離，只顯示能容納最大字數(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);
} }
}
簡單的抖動動畫
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) {
}
});
