AndroidカスタムViewは宝胡麻のクレジットカードを支払ってダッシュボードを分けます。
まずiOSのゴマ信用分スクリーンを見てください。
これは私がやった効果ですか?それともちょっと差がありますか?
アリペイ9.9バージョンのゴマ信用分の実現
まず各種の画筆を初期化して、標準的な
(原書の胡麻信用のぼかし効果のある小さな円がなかなか見つからないので、これを使うしかないです。)
外側の円弧を描くのは簡単です。円弧の開始角度、角度。
6角ごとに目盛線を描きます。
キャンバスを回転させ、目盛線の開始点を計算し、回転角度を35度ごとに回転させ、対応する大きな目盛線を順次描きます。
その後、対応するテキストの内容をプロットし、
現在の点の実際の位置
この文章は新版の実現過程を分析しただけで、旧版の実現構想も似ています。コードも複雑ではありません。この文章が皆さんのAndroid開発に役立つことを願っています。
これは私がやった効果ですか?それともちょっと差がありますか?
アリペイ9.9バージョンのゴマ信用分の実現
まず各種の画筆を初期化して、標準的な
size
、padding
、小さい円.(原書の胡麻信用のぼかし効果のある小さな円がなかなか見つからないので、これを使うしかないです。)
//View
defaultSize = dp2px(250);
// Padding
arcDistance = dp2px(14);
//
mMiddleArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mMiddleArcPaint.setStrokeWidth(8);
mMiddleArcPaint.setColor(Color.WHITE);
mMiddleArcPaint.setStyle(Paint.Style.STROKE);
mMiddleArcPaint.setAlpha(80);
//
mInnerArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mInnerArcPaint.setStrokeWidth(30);
mInnerArcPaint.setColor(Color.WHITE);
mInnerArcPaint.setAlpha(80);
mInnerArcPaint.setStyle(Paint.Style.STROKE);
//
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setColor(Color.WHITE);
mTextPaint.setTextAlign(Paint.Align.CENTER);
//
mCalibrationPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mCalibrationPaint.setStrokeWidth(4);
mCalibrationPaint.setStyle(Paint.Style.STROKE);
mCalibrationPaint.setColor(Color.WHITE);
mCalibrationPaint.setAlpha(120);
//
mSmallCalibrationPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mSmallCalibrationPaint.setStrokeWidth(1);
mSmallCalibrationPaint.setStyle(Paint.Style.STROKE);
mSmallCalibrationPaint.setColor(Color.WHITE);
mSmallCalibrationPaint.setAlpha(130);
//
mCalibrationTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mCalibrationTextPaint.setTextSize(30);
mCalibrationTextPaint.setColor(Color.WHITE);
//
mArcProgressPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mArcProgressPaint.setStrokeWidth(8);
mArcProgressPaint.setColor(Color.WHITE);
mArcProgressPaint.setStyle(Paint.Style.STROKE);
mArcProgressPaint.setStrokeCap(Paint.Cap.ROUND);
// Bitmap
mBitmapPaint = new Paint();
mBitmapPaint.setStyle(Paint.Style.FILL);
mBitmapPaint.setAntiAlias(true);
//
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_circle);
//
pos = new float[2];
// tangent
tan = new float[2];
matrix = new Matrix();
コードは簡単です。各種初期化です。下を見てください。View
の測定は、主にwarp_content
を設定する際に、デフォルトの幅の高い値を与えられる。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
setMeasuredDimension(resolveMeasure(widthMeasureSpec, defaultSize),
resolveMeasure(heightMeasureSpec, defaultSize));}
//
public int resolveMeasure(int measureSpec, int defaultSize){
int result = 0;
int specSize = MeasureSpec.getSize(measureSpec);
switch (MeasureSpec.getMode(measureSpec))
{
case MeasureSpec.UNSPECIFIED:
result = defaultSize;
break;
case MeasureSpec.AT_MOST:
// warp_content
result = Math.min(specSize, defaultSize);
break;
case MeasureSpec.EXACTLY:
// math_parent
break;
default:
result = defaultSize;
}
return result;}
その後、View
の幅の高いコールバック方法を決定する。
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh){
super.onSizeChanged(w, h, oldw, oldh);
width = w;
height = h;
radius = width / 2;
//
mMiddleRect = new RectF(defaultPadding, defaultPadding,width - defaultPadding, height - defaultPadding);
//
mInnerRect = new RectF(defaultPadding + arcDistance, defaultPadding + arcDistance,width - defaultPadding - arcDistance, height - defaultPadding - arcDistance);
//
mMiddleProgressRect = new RectF(defaultPadding, defaultPadding,width - defaultPadding, height - defaultPadding);
}
ここでは、円弧を初期化するために必要な長方形を実現します。下から重点的に描画します。外側の円弧を描くのは簡単です。円弧の開始角度、角度。
private void drawMiddleArc(Canvas canvas){
canvas.drawArc(mMiddleRect, mStartAngle, mEndAngle, false, mMiddleArcPaint);
}
内側の円弧を描く
private void drawInnerArc(Canvas canvas){
canvas.drawArc(mInnerRect, mStartAngle, mEndAngle, false, mInnerArcPaint);
}
内側の円弧の小さな目盛を描き、カンバスは円弧の左下の角の始点まで回転し、各目盛線の始点を計算した後、円弧全体は210度である。6角ごとに目盛線を描きます。
private void drawSmallCalibration(Canvas canvas){
//
canvas.save();
canvas.rotate(-105, radius, radius);
//
int startDst = (int) (defaultPadding + arcDistance - mInnerArcPaint.getStrokeWidth() / 2 - 1);
int endDst = (int) (startDst + mInnerArcPaint.getStrokeWidth());
for (int i = 0; i <= 35; i++) {
// 6
canvas.drawLine(radius, startDst, radius, endDst, mSmallCalibrationPaint);
canvas.rotate(6, radius, radius);
}
canvas.restore();
}
内側の円弧の上の大きな目盛りを描き、350、550、600、650、700、950、対応する信用分値、キャンバスを回転させ、目盛線の開始点を計算し、回転角度を35度ごとに回転させ、対応する大きな目盛線を順次描きます。
その後、対応するテキストの内容をプロットし、
paint
のmeasureText
方法を用いてテキストの長さを測定し、対応するテキストの内容を順次描画する。
private void drawCalibrationAndText(Canvas canvas){
//
canvas.save();
canvas.rotate(-105, radius, radius);
//
int startDst = (int) (defaultPadding + arcDistance - mInnerArcPaint.getStrokeWidth() / 2 - 1);
int endDst = (int) (startDst + mInnerArcPaint.getStrokeWidth());
//
int rotateAngle = 210 / 10;
for (int i = 1; i < 12; i++) {
if (i % 2 != 0)
{
canvas.drawLine(radius, startDst, radius, endDst, mCalibrationPaint);
}
//
float textLen = mCalibrationTextPaint.measureText(sesameStr[i - 1]);
canvas.drawText(sesameStr[i - 1], radius - textLen / 2, endDst + 40, mCalibrationTextPaint);
canvas.rotate(rotateAngle, radius, radius);
}
canvas.restore();}
中間の信用分値、信用等級、評価時間などのテキストを描きます。これは比較的簡単です。
private void drawCenterText(Canvas canvas){
// Logo
mTextPaint.setTextSize(30);
canvas.drawText("BETA", radius, radius - 130, mTextPaint);
//
mTextPaint.setTextSize(200);
mTextPaint.setStyle(Paint.Style.STROKE);
canvas.drawText(String.valueOf(mMinNum), radius, radius + 70, mTextPaint);
//
mTextPaint.setTextSize(80);
canvas.drawText(sesameLevel, radius, radius + 160, mTextPaint);
//
mTextPaint.setTextSize(30);
canvas.drawText(evaluationTime, radius, radius + 205, mTextPaint);
}
最も外側の層の進捗を描画し、ここで使用されるdrawText
は、プロットする円弧を追加します。これは、座標点を計算し続ける必要があるため、主にPath
というクラスを使用して、描いた円弧をPathMeasure
に追加します。現在の点の実際の位置
path
現在のタブ値private float[] pos;
パスの終点の正接値と座標を取得し、スナップポイントに応じて小さな円を描画します。
PathMeasure pathMeasure = new PathMeasure(path, false);
pathMeasure.getPosTan(pathMeasure.getLength() * 1, pos, tan);
private void drawRingProgress(Canvas canvas){
Path path = new Path();
path.addArc(mMiddleProgressRect, mStartAngle, mCurrentAngle);
PathMeasure pathMeasure = new PathMeasure(path, false);
pathMeasure.getPosTan(pathMeasure.getLength() * 1, pos, tan);
matrix.reset();
matrix.postTranslate(pos[0] - bitmap.getWidth() / 2, pos[1] - bitmap.getHeight() / 2);
canvas.drawPath(path, mArcProgressPaint);
// 0
if (mCurrentAngle == 0)
return;
canvas.drawBitmap(bitmap, matrix, mBitmapPaint);
mBitmapPaint.setColor(Color.WHITE);
canvas.drawCircle(pos[0], pos[1], 8, mBitmapPaint);
}
はい、ここですべての描画が終わりました。次に円弧プログレスバーを動かしましょう。private float[] tan;
を使って、プログレスバーアニメーションは円弧プログレスバーの開始角度ValueAnimator
を定義しています。円弧角度mCurrentAngle
、数値アニメーションは初期化mTotalAngle
を定義しています。
public void startAnim(){
ValueAnimator mAngleAnim = ValueAnimator.ofFloat(mCurrentAngle, mTotalAngle);
mAngleAnim.setInterpolator(new AccelerateDecelerateInterpolator());
mAngleAnim.setDuration(3000);
mAngleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator){
mCurrentAngle = (float) valueAnimator.getAnimatedValue();
postInvalidate();
}
});
mAngleAnim.start();
ValueAnimator mNumAnim = ValueAnimator.ofInt(mMinNum, mMaxNum);
mNumAnim.setDuration(3000);
mNumAnim.setInterpolator(new LinearInterpolator());
mNumAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator){
mMinNum = (int) valueAnimator.getAnimatedValue();
postInvalidate();
}
});
mNumAnim.start();}
最後に、入力された信用分値に基づいて円弧プログレスバーの到達角度を計算します。
public void setSesameValues(int values){
if (values <= 350){
mMaxNum = values;
mTotalAngle = 0f;
sesameLevel = " ";
evaluationTime = " :" + getCurrentTime();
} else if (values <= 550){
mMaxNum = values;
mTotalAngle = (values - 350) * 80 / 400f + 2;
sesameLevel = " ";
evaluationTime = " :" + getCurrentTime();
} else if (values <= 700)
{
mMaxNum = values;
if (values > 550 && values <= 600){
sesameLevel = " ";
} else if (values > 600 && values <= 650){
sesameLevel = " ";
} else {
sesameLevel = " ";
}
mTotalAngle = (values - 550) * 120 / 150f + 43;
evaluationTime = " :" + getCurrentTime();
} else if (values <= 950){
mMaxNum = values;
mTotalAngle = (values - 700) * 40 / 250f + 170;
sesameLevel = " ";
evaluationTime = " :" + getCurrentTime();
} else{
mTotalAngle = 240f;
}
startAnim();
}
締め括りをつけるこの文章は新版の実現過程を分析しただけで、旧版の実現構想も似ています。コードも複雑ではありません。この文章が皆さんのAndroid開発に役立つことを願っています。