转载请注明出处：王亟亟的大牛之路
近期看了一大堆的自己定义View多数都能够充当耗时操作的交互界面。再接再厉再传一个SubmitView。一个和可用于模仿提交等待与用户交互用的一个自己定义View
效果图：
项目结构：
一个Android Studio项目。也能够转成Eclipse，由于没有涉及到打包啊lib的一些操作。连资源文件都没用，所以能够直接Copy过去。
自己定义View
public class SubmitView extends View {
private static final int COLOR_BACK = 0xff00cd97;
private static final int COLOR_GREY = 0xffb9b9b9;
private int mColor = COLOR_BACK;
//
private Paint mBorderPaint;
private Paint mTextPaint;
private Paint mBackPaint;
private int mWidth;
private int mHeight;
private int mRadius;
private static final int PADDING = 5;
private Rect mTextBounds;
private boolean mShowText = true;
private static final String TEXT_SUBMIT = "提交";
private String mText = TEXT_SUBMIT;
private int mStrokeWidth;
// indicate if view can click
private boolean mCanClick = true;
// indicate the animator state
private AniState mAniState = AniState.INIT;
private boolean mIfReset = false;
enum AniState {
INIT,
FIRST_START, // start animation which change backcolor and text color
FIRST_STOP,
SECOND_START, // second animation which change "submit" size for a while
SECOND_STOP,
THIRD_START, // third animation which convert to circle and change back color
THIRD_STOP,
FOURTH_START, // fourth animation which show the progress
FOURTH_STOP,
FIFTH_START, // fifth animation which can narrow the back and border and show "correct" sign
FIFTH_STOP;
public boolean isPlaying() {
return this==FIRST_START
|| this==SECOND_START
|| this == THIRD_START
|| this == FOURTH_START
|| this == FIFTH_START;
}
@Override
public String toString() {
switch (this) {
case INIT:
return "***init***";
case FIRST_START:
return "***first start***";
case FIRST_STOP:
return "***first stop***";
case SECOND_START:
return "***second start***";
case SECOND_STOP:
return "***second stop***";
case THIRD_START:
return "***third start***";
case THIRD_STOP:
return "****third stop**";
case FOURTH_START:
return "***fourth start***";
case FOURTH_STOP:
return "***fourth stop***";
case FIFTH_START:
return "***fifth start***";
case FIFTH_STOP:
return "***fifth stop";
default:
return "unknown state";
}
}
}
public SubmitView(Context context) {
this(context, null, 0);
}
public SubmitView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SubmitView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context, attrs, defStyleAttr);
}
private void initView(Context context, AttributeSet attrs, int defStyleAttr) {
mBorderPaint = new Paint();
mBorderPaint.setStyle(Paint.Style.STROKE);
mBorderPaint.setStrokeWidth(5);
mBorderPaint.setAntiAlias(true);
mBackPaint = new Paint();
mBackPaint.setAntiAlias(true);
mBackPaint.setStyle(Paint.Style.FILL);
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextBounds = new Rect();
mCanClick = true;
mProgress = 0;
mTargetProgress = 0;
setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mCanClick) {
mCanClick = false;
if (mAniState == AniState.INIT) {
mAniState = AniState.FIRST_START;
firstAniStart();
invalidate();
}
}
}
});
}
private void firstAniStart() {
mFirstStartT = System.currentTimeMillis();
mFirstStopT = mFirstStartT + FIRST_DURATION;
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if (changed) {
mWidth = getWidth();
mHeight = getHeight();
int width = mWidth - (PADDING * 2);
int height = mHeight - (PADDING * 2);
mRadius = width/3 > height ?
height/2 : width/6;
mStrokeWidth = mRadius/12;
mBorderPaint.setStrokeWidth(mStrokeWidth);
// Log.i("SubmitView", "width=" + mWidth + ", height=" + mHeight + ", radius=" + mRadius + ", strokeWidth=" + mStrokeWidth);
}
}
private RectF rectF = new RectF();
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Log.i("submit", "cur state: " + mAniState); // open for debug
switch (mAniState) {
case INIT:
mBorderPaint.setColor(mColor);
mBackPaint.setColor(mColor);
mTextPaint.setColor(mColor);
canvas.drawRoundRect(new RectF(PADDING, mHeight / 2 - mRadius, mWidth - PADDING, mHeight / 2 + mRadius), mRadius, mRadius, mBorderPaint);
mTextPaint.setTextSize(mRadius/2);
mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBounds);
canvas.drawText(mText, mWidth / 2 - mTextBounds.width() / 2, mHeight / 2 + mTextBounds.height() / 2, mTextPaint);
break;
case FIRST_START:
canvas.drawRoundRect(new RectF(PADDING, mHeight / 2 - mRadius, mWidth - PADDING, mHeight / 2 + mRadius), mRadius, mRadius, mBorderPaint);
mBackPaint.setColor(getFirstColor());
canvas.drawRoundRect(new RectF(PADDING, mHeight / 2 - mRadius, mWidth - PADDING, mHeight / 2 + mRadius),
mRadius, mRadius, mBackPaint);
mTextPaint.setColor(getFirstTextColor());
canvas.drawText(mText, mWidth/2 - mTextBounds.width()/2, mHeight/2 + mTextBounds.height()/2, mTextPaint);
break;
case SECOND_START:
canvas.drawRoundRect(new RectF(PADDING, mHeight / 2 - mRadius, mWidth - PADDING, mHeight / 2 + mRadius), mRadius, mRadius, mBorderPaint);
canvas.drawRoundRect(new RectF(PADDING, mHeight / 2 - mRadius, mWidth - PADDING, mHeight / 2 + mRadius),
mRadius, mRadius, mBackPaint);
mTextPaint.setTextSize(getSecondTextSize());
mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBounds);
canvas.drawText(mText, mWidth/2 - mTextBounds.width()/2, mHeight/2 + mTextBounds.height()/2, mTextPaint);
break;
case THIRD_START:
int leftRect = mWidth/2 - getHorizonRadius();
int rightRect = mWidth/2 + getHorizonRadius();
mBackPaint.setColor(getThirdColor());
canvas.drawRoundRect(new RectF(leftRect, mHeight / 2 - mRadius, rightRect, mHeight / 2 + mRadius),
mRadius, mRadius, mBackPaint);
mBorderPaint.setColor(getThirdBorderColor());
canvas.drawRoundRect(new RectF(leftRect, mHeight / 2 - mRadius, rightRect, mHeight / 2 + mRadius), mRadius, mRadius, mBorderPaint);
break;
case FOURTH_START:
// Log.i("submit", "" + progress);
if (mProgress>=1) {
if (mOnProgressDone!=null) {
mOnProgressDone.progressDone();
}
mAniState = AniState.FOURTH_STOP;
mAniState = AniState.FIFTH_START;
initFifthAni();
}
mBorderPaint.setColor(COLOR_GREY);
canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mBorderPaint);
mBorderPaint.setColor(mColor);
canvas.drawArc(new RectF(mWidth / 2 - mRadius, mHeight / 2 - mRadius, mWidth / 2 + mRadius, mHeight/2 + mRadius),
START_DEGREE, 360 * mProgress, false, mBorderPaint);
if (mProgress < mTargetProgress) {
mProgress += 0.005;
mProgress = Math.min(mProgress, 1);
}
break;
case FIFTH_START:
int leftFifthR = mWidth/2 - getFifthHorizonR();
int rightFifthR = mWidth/2 + getFifthHorizonR();
canvas.drawRoundRect(new RectF(leftFifthR, mHeight/2-mRadius, rightFifthR, mHeight/2 + mRadius),
mRadius, mRadius, mBorderPaint);
mBackPaint.setColor(getFifthColor());
canvas.drawRoundRect(new RectF(leftFifthR, mHeight / 2 - mRadius, rightFifthR, mHeight / 2 + mRadius),
mRadius, mRadius, mBackPaint);
drawCorrectSign(canvas, getFifthRatio());
if (getFifthRatio()>=1 && mIfReset) {
Log.i("submit", "reset is valid");
mIfReset = false;
mAniState = AniState.INIT;
initView(null, null, 0);
invalidate();
}
break;
case FIFTH_STOP:
canvas.drawRoundRect(new RectF(PADDING, mHeight/2 - mRadius, mWidth - PADDING, mHeight/2 + mRadius),
mRadius, mRadius, mBorderPaint);
canvas.drawRoundRect(new RectF(PADDING, mHeight/2 - mRadius, mWidth - PADDING, mHeight/2 + mRadius),
mRadius, mRadius, mBackPaint);
drawCorrectSign(canvas, 1);
break;
}
if (mAniState.isPlaying()) {
invalidate();
}
}
// private int forDeubug = 0; // to count for debug
// first animation
private static final int FIRST_DURATION = 300;
private long mFirstStartT;
private long mFirstStopT;
private float getFirstRatio() {
long now = System.currentTimeMillis();
if (now >= mFirstStopT) {
mAniState = AniState.FIRST_STOP;
mAniState = AniState.SECOND_START;
initSecAni();
return 1;
}
float ratio = (float)(now - mFirstStartT) / (float) FIRST_DURATION;
return ratio > 1 ? 1 : ratio;
}
private int getFirstColor() {
return Color.argb(getFirstRatio()==1 ? 0xff : (int)(getFirstRatio() * 0xff), Color.red(mColor), Color.green(mColor), Color.blue(mColor));
}
private int getFirstTextColor() {
float ratio = getFirstRatio();
if (ratio==1) {
return 0xffffffff;
}
int startRed = Color.red(mColor);
int red = startRed + (int) ((0xff - startRed) * ratio);
int startGreen = Color.green(mColor);
int green = startGreen + (int) ((0xff - startGreen) * ratio);
int startBlue = Color.blue(mColor);
int blue = startBlue + (int) ((0xff - startBlue) * ratio);
return Color.argb(0xff, red, green, blue);
}
// second animation which resize the "submit" size
private static final long SECOND_DURATION = 300;
private long mSecStartT;
private long mSecStopT;
private void initSecAni() {
mSecStartT = System.currentTimeMillis();
mSecStopT = mSecStartT + SECOND_DURATION;
}
private float getSecondTextSize() {
long now = System.currentTimeMillis();
if (now >= mSecStopT) {
mAniState = AniState.SECOND_STOP;
mAniState = AniState.THIRD_START;
initThirdAni();
return mRadius/2;
}
float ratio = (now - (mSecStartT + SECOND_DURATION/2))/(float)(SECOND_DURATION/2);
return mRadius*3/8 + mRadius/8 * Math.abs(ratio);
}
// third animation which change back color and change to a circle
private long mThirdStartT;
private long mThirdStopT;
private long THIRD_DURATION = 400;
private void initThirdAni() {
mThirdStartT = System.currentTimeMillis();
mThirdStopT = mThirdStartT + THIRD_DURATION;
}
private float getThirdRatio() {
long now = System.currentTimeMillis();
if (now >= mThirdStopT) {
mAniState = AniState.THIRD_STOP;
mAniState = AniState.FOURTH_START;
initFourthAni();
return 1;
}
float ratio = (now - mThirdStartT)/(float)THIRD_DURATION;
return ratio >= 1 ? 1 : ratio;
}
private int getHorizonRadius() {
float ratio = getThirdRatio();
int horizonRadius = mRadius + (int) ((1-ratio) * (mWidth/2 - PADDING - mRadius));
return horizonRadius;
}
private int getThirdColor() {
float ratio = getThirdRatio();
int alpha = (int) ((1-ratio) * 0xff);
return Color.argb(alpha, Color.red(mColor), Color.green(mColor), Color.blue(mColor));
}
private int getThirdBorderColor() {
float ratio = getThirdRatio();
int redStart = Color.red(mColor);
int greenStart = Color.green(mColor);
int blueStart = Color.blue(mColor);
int curRed = redStart + (int) ((Color.red(COLOR_GREY) - redStart) * ratio);
int curGreen = greenStart + (int) ((Color.green(COLOR_GREY) - greenStart) * ratio);
int curBlue = blueStart + (int) ((Color.blue(COLOR_GREY) - blueStart) * ratio);
return Color.argb(0xff, curRed, curGreen, curBlue);
}
// used for fourth animation but this not use time to calculate animation
private static final int START_DEGREE = 270;
private float mProgress = 0f;
private float mTargetProgress = mProgress;
private OnProgressDone mOnProgressDone;
private OnProgressStart mOnProgressStart; // listener for when progress start
private void initFourthAni() {
if (mOnProgressStart!=null) {
mOnProgressStart.progressStart();
}
}
// set current progress
public void setProgress(float progress) {
mTargetProgress = progress > 1 ? 1 : progress;
}
public void setOnProgressDone(OnProgressDone onProgressDone) {
mOnProgressDone = onProgressDone;
}
public void setOnProgressStart(OnProgressStart onProgressStart) {
mOnProgressStart = onProgressStart;
}
public boolean isProgressDone() {
return mAniState== AniState.FOURTH_STOP
|| mAniState == AniState.FIFTH_START
|| mAniState == AniState.FIFTH_STOP;
}
public void setText(String str) {
if (str==null || TextUtils.isEmpty(str)) {
throw new IllegalArgumentException("text can't be null or empty");
}
mText = str;
}
public void reset() {
mIfReset = true;
}
public void setBackColor(int color) {
mColor = color;
invalidate();
}
// used for fifth animation by time
private static final long FIFTH_DURATION = 600;
private long mFifthStartT;
private long mFifthStopT;
private void initFifthAni() {
mFifthStartT = System.currentTimeMillis();
mFifthStopT = mFifthStartT + FIFTH_DURATION;
}
private float getFifthRatio() {
long now = System.currentTimeMillis();
if (now >= mFifthStopT) {
mAniState = AniState.FIFTH_STOP;
return 1;
}
float ratio = (now - mFifthStartT) / (float) FIFTH_DURATION;
return ratio >= 1 ? 1 : ratio;
}
private int getFifthHorizonR() {
float ratio = getFifthRatio();
if (ratio==1) {
return mWidth/2 - PADDING;
}
int horizonR = mRadius + (int) (((mWidth/2 - PADDING) - mRadius) * ratio);
return horizonR;
}
private int getFifthColor() {
float ratio = getFifthRatio();
if (ratio==1) {
return mColor;
}
int alpha = (int) (ratio * 0xff);
return Color.argb(alpha, Color.red(mColor), Color.green(mColor), Color.blue(mColor));
}
// drawing "correct" sign
private void drawCorrectSign(Canvas canvas, float ratio) {
Paint correctPaint = new Paint();
correctPaint.setAntiAlias(true);
correctPaint.setStyle(Paint.Style.STROKE);
correctPaint.setStrokeWidth(10f);
correctPaint.setColor(0xffffffff);
correctPaint.setDither(true);
correctPaint.setStrokeJoin(Paint.Join.ROUND);
correctPaint.setStrokeCap(Paint.Cap.ROUND);
// correctPaint.setPathEffect(new CornerPathEffect(5));
int centerX = mWidth/2;
int centerY = mHeight/2 + mRadius/4;
Path path = new Path();
path.moveTo(centerX - (mRadius*ratio/4), centerY - (mRadius*ratio/4));
path.lineTo(centerX, centerY);
path.lineTo(centerX + (mRadius*ratio/2), centerY -(mRadius*ratio/2));
canvas.drawPath(path, correctPaint);
}
public interface OnProgressDone {
void progressDone();
}
public interface OnProgressStart {
void progressStart();
}
}
分析：
详细的实现，待会看源代码吧，给伸手党几个使用的得到的地方
private static final String TEXT_SUBMIT 初始化看到试图时的那个 String 上图为Submit
操作结束后调用的方法
public interface OnProgressDone {
void progressDone();
}操作開始时调用的方法
public interface OnProgressStart {
void progressStart();
}控制进度的方法（名为setProgress可是实质上仅仅分1和0。0就停止，1就是继续，而且 不管你传入的參数>1或者等于1都没有差别，假设你開始时传入1，执行过程中不传0，那么动画走完时候就切换到操作成功的界面了。所以须要暂停的话，要在适当的地方调用setProgress(0)）
public void setProgress(float progress) {
mTargetProgress = progress > 1 ? 1 : progress;
}今天一下子看了4篇。。。有点累的。。
。
下班！！
！
源代码地址：http://yunpan.cn/cdDeLvTEeQeTk 訪问password 0475