支付宝效果
支付宝效果.gif
高仿效果
高仿效果.gif
1、自定义控件分析
该控件需要分为三个部分进行单独绘制，灰色圆环、白色圆圈和多颜色圆环(余额、余额宝、定期和基金四种不同的颜色，可在布局文件中设置)。在这里，多颜色圆环的绘制利用Animation类中的方法applyTransformation(float interpolatedTime, Transformation t)入参interpolatedTime计算当前时间扫过的角度，并重绘UI完成多颜色圆环的绘制工作，interpolated的值范围为0~1， 当前时间扫过的角度mSweepAngle = interpolatedTime * 360。
2、实现过程
2.1、自定义属性代码
<!--
<attr name="first_color" format="color" /> 对应于余额的颜色
<attr name="second_color" format="color" /> 余额宝的颜色
<attr name="third_color" format="color" /> 定期颜色
<attr name="fourth_color" format="color" /> 基金颜色
<attr name="ring_width" format="dimension" /> 圆环的宽度
-->
<declare-styleable name="AlipayAssetsView">
<attr name="first_color" format="color" />
<attr name="second_color" format="color" />
<attr name="third_color" format="color" />
<attr name="fourth_color" format="color" />
<attr name="ring_width" format="dimension" />
</declare-styleable>
2.2、获取自定义属性，自定义动画，初始化画笔
private static final String TAG = "AlipayAssetsView";
private int mFirstSquareColor;//第一种颜色
private int mSecondSquareColor;//第二种颜色
private int mThirdSquareColor;//第三种颜色
private int mFourthSquareColor;//第四种颜色
private RotateAnimation mSweepAnim;//扫描动画
private RectF mGrayRingRectF;//灰色圆环矩形
private RectF mColorRingRectF;//五颜六色矩形
private Paint mColorRingPaint;//五颜六色画笔
private Paint mCirclePaint;//白色圆形画笔
private Paint mGrayRingPaint;//灰色圆环画笔
private int mRingWidth;//圆环宽度
private float mFirstSweep, mSecondSweep, mThirdSweep, mFourSweep;//每一种颜色对应的度数
private float mTotalPri;//总金额
private float mCenterX;//中心点x坐标
private float mSweepAngle = 360;//每次绘制的度数
public AlipayAssetsView(Context context) {
this(context, null);
}
public AlipayAssetsView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public AlipayAssetsView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.AlipayAssetsView, defStyleAttr, 0);
mFirstSquareColor = a.getColor(R.styleable.AlipayAssetsView_first_color, Color.parseColor("#faa62a"));//第一种方块颜色
mSecondSquareColor = a.getColor(R.styleable.AlipayAssetsView_second_color, Color.parseColor("#f26a55"));//第二种颜色
mThirdSquareColor = a.getColor(R.styleable.AlipayAssetsView_third_color, Color.parseColor("#5295fd"));//第三种颜色
mFourthSquareColor = a.getColor(R.styleable.AlipayAssetsView_fourth_color, Color.parseColor("#2268b0"));//第四种颜色
mRingWidth = a.getDimensionPixelSize(R.styleable.AlipayAssetsView_ring_width, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX,
16, getResources().getDisplayMetrics()));
a.recycle();
//初始化动画并设置动画持续时间为1000毫秒==1秒
mSweepAnim = new RotateAnimation();
mSweepAnim.setDuration(1000);
initPaint();
}
/**
* 初始化画笔
*/
private void initPaint() {
//白色圆形画笔
mCirclePaint = new Paint();
mCirclePaint.setColor(getResources().getColor(R.color.white));
mCirclePaint.setAntiAlias(true);
mCirclePaint.setStyle(Paint.Style.FILL_AND_STROKE);
mCirclePaint.setStrokeWidth(0f);
//灰色圆环画笔
mGrayRingPaint = new Paint();
mGrayRingPaint.setColor(Color.parseColor("#f4f4f4"));
mGrayRingPaint.setStrokeJoin(Paint.Join.ROUND);
mGrayRingPaint.setStyle(Paint.Style.STROKE);
mGrayRingPaint.setAntiAlias(true);
mGrayRingPaint.setStrokeWidth(mRingWidth);
//五颜六色圆环画笔
mColorRingPaint = new Paint();
mColorRingPaint.setColor(mFirstSquareColor);
mColorRingPaint.setStrokeJoin(Paint.Join.ROUND);
mColorRingPaint.setStyle(Paint.Style.STROKE);
mColorRingPaint.setAntiAlias(true);
mColorRingPaint.setStrokeWidth(mRingWidth);
}
/**
* 自定义旋转动画
*/
public class RotateAnimation extends Animation {
/**
* Initializes expand collapse animation, has two types, collapse (1) and expand (0).
*/
public RotateAnimation() {
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
//interpolatedTime 范围：0到1
mSweepAngle = interpolatedTime * 360;//当前时间扫描的角度
postInvalidate();//重绘
}
}
2.3、测量大小并初始化灰色圆环和多颜色圆环矩形
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int wSize = 0;
//match_parent or set value
if (widthMode == MeasureSpec.EXACTLY) {
wSize = widthSize;
} else {
//wrap_content
if (widthMode == MeasureSpec.AT_MOST) {
wSize = getPaddingLeft() + getPaddingRight();
}
}
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int hSize = 0;
//match_parent or set value
if (heightMode == MeasureSpec.EXACTLY) {
hSize = heightSize;
} else {
//wrap_content
if (heightMode == MeasureSpec.AT_MOST) {
}
}
//测量结束后，获取控件宽度的中心
mCenterX = wSize / 2;
initRectF();//初始化灰色圆环和多颜色圆环矩形
setMeasuredDimension(wSize, hSize);
}
2.5、绘制灰色圆环和白色圆形
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制灰色圆环
drawGrayRing(canvas);
//绘制白色圆形
drawCircle(canvas);
}
/**
* 绘制灰色圆环
*
* @param canvas
*/
private void drawGrayRing(Canvas canvas) {
canvas.drawArc(mGrayRingRectF, -90, 360, false, mGrayRingPaint);
}
/**
* 绘制中心白色圆形
*
* @param canvas
*/
private void drawCircle(Canvas canvas) {
canvas.drawCircle(mCenterX, mCenterX, (getWidth() - 2 * mRingWidth) / 2f, mCirclePaint);
}
这时的效果图如下
未绘制多颜色圆环.png
2.6、绘制颜色圆环
/**
* 绘制五颜六色的圆环
*
* @param canvas
*/
private void drawColorRing(Canvas canvas) {
if (mTotalPri <= 0)
return;
//当前时间要绘制的角度小于等于第一种颜色的总度数
if (mSweepAngle <= mFirstSweep) {
//第一种颜色
mColorRingPaint.setColor(mFirstSquareColor);
canvas.drawArc(mColorRingRectF, -90, mSweepAngle, false, mColorRingPaint);
} else if (mSweepAngle > mFirstSweep && mSweepAngle <= mFirstSweep + mSecondSweep) {
//当前时间要绘制的角度大于第一种颜色的总度数 小于等于第二种颜色总度数
mColorRingPaint.setColor(mFirstSquareColor);
canvas.drawArc(mColorRingRectF, -90, mFirstSweep, false, mColorRingPaint);
mColorRingPaint.setColor(mSecondSquareColor);
canvas.drawArc(mColorRingRectF, -90 + mFirstSweep, mSweepAngle - mFirstSweep, false, mColorRingPaint);
} else if (mSweepAngle > mSecondSweep + mFirstSweep && mSweepAngle <= mSecondSweep + mFirstSweep + mThirdSweep) {
//当前时间要绘制的角度大于第二种颜色的总度数 小于等于第三种颜色总度数
mColorRingPaint.setColor(mFirstSquareColor);
canvas.drawArc(mColorRingRectF, -90, mFirstSweep, false, mColorRingPaint);
mColorRingPaint.setColor(mSecondSquareColor);
canvas.drawArc(mColorRingRectF, -90 + mFirstSweep, mSweepAngle - mFirstSweep, false, mColorRingPaint);
mColorRingPaint.setColor(mThirdSquareColor);
canvas.drawArc(mColorRingRectF, -90 + mFirstSweep + mSecondSweep, mSweepAngle - mFirstSweep - mSecondSweep, false, mColorRingPaint);
} else {
// 当前时间要绘制的角度大于第三种颜色的总度数 小于等于第四种颜色总度数
mColorRingPaint.setColor(mFirstSquareColor);
canvas.drawArc(mColorRingRectF, -90, mFirstSweep, false, mColorRingPaint);
mColorRingPaint.setColor(mSecondSquareColor);
canvas.drawArc(mColorRingRectF, -90 + mFirstSweep, mSweepAngle - mFirstSweep, false, mColorRingPaint);
mColorRingPaint.setColor(mThirdSquareColor);
canvas.drawArc(mColorRingRectF, -90 + mFirstSweep + mSecondSweep, mSweepAngle - mFirstSweep - mSecondSweep, false, mColorRingPaint);
mColorRingPaint.setColor(mFourthSquareColor);
canvas.drawArc(mColorRingRectF, -90 + mFirstSweep + mSecondSweep + mThirdSweep, mSweepAngle - mFirstSweep - mSecondSweep - mThirdSweep, false, mColorRingPaint);
}
}
在onDraw方法中绘制全部
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制灰色圆环
drawGrayRing(canvas);
//绘制白色圆形
drawCircle(canvas);
drawColorRing(canvas);
}
2.6、提供设置金额的方法
/**
* 设置价格
*
* @param mfirstPri 余额
* @param mSecondPri 余额宝
* @param mThirdPri 定期
* @param mFourthPri 基金
*/
public void setPri(float mfirstPri, float mSecondPri, float mThirdPri, float mFourthPri) {
mTotalPri = mfirstPri + mSecondPri + mThirdPri + mFourthPri;//总价
mFirstSweep = (mfirstPri / (mTotalPri + 0.0f)) * 360;//第一种总度数
mSecondSweep = (mSecondPri / (mTotalPri + 0.0f)) * 360;//第二种总度数
mThirdSweep = (mThirdPri / (mTotalPri + 0.0f)) * 360;//第三种总度数
mFourSweep = (mFourthPri / (mTotalPri + 0.0f)) * 360;//第四种总度数
startAnimation(mSweepAnim);
}
2.7、控件源码
attrs.xml
<declare-styleable name="AlipayAssetsView">
<attr name="first_color" format="color" />
<attr name="second_color" format="color" />
<attr name="third_color" format="color" />
<attr name="fourth_color" format="color" />
<attr name="ring_width" format="dimension" />
</declare-styleable>
AlipayAssetsView.java
public class AlipayAssetsView extends View {
private static final String TAG = "AlipayAssetsView";
private int mFirstSquareColor;//第一种颜色
private int mSecondSquareColor;//第二种颜色
private int mThirdSquareColor;//第三种颜色
private int mFourthSquareColor;//第四种颜色
private RotateAnimation mSweepAnim;//扫描动画
private RectF mGrayRingRectF;//灰色圆环矩形
private RectF mColorRingRectF;//五颜六色矩形
private Paint mColorRingPaint;//五颜六色画笔
private Paint mCirclePaint;//白色圆形画笔
private Paint mGrayRingPaint;//灰色圆环画笔
private int mRingWidth;//圆环宽度
private float mFirstSweep, mSecondSweep, mThirdSweep, mFourSweep;//每一种颜色对应的度数
private float mTotalPri;//总金额
private float mCenterX;//中心点x坐标
private float mSweepAngle = 360;//每次绘制的度数
public AlipayAssetsView(Context context) {
this(context, null);
}
public AlipayAssetsView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public AlipayAssetsView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.AlipayAssetsView, defStyleAttr, 0);
mFirstSquareColor = a.getColor(R.styleable.AlipayAssetsView_first_color, Color.parseColor("#faa62a"));//第一种方块颜色
mSecondSquareColor = a.getColor(R.styleable.AlipayAssetsView_second_color, Color.parseColor("#f26a55"));//第二种颜色
mThirdSquareColor = a.getColor(R.styleable.AlipayAssetsView_third_color, Color.parseColor("#5295fd"));//第三种颜色
mFourthSquareColor = a.getColor(R.styleable.AlipayAssetsView_fourth_color, Color.parseColor("#2268b0"));//第四种颜色
mRingWidth = a.getDimensionPixelSize(R.styleable.AlipayAssetsView_ring_width, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX,
16, getResources().getDisplayMetrics()));
a.recycle();
//初始化动画并设置动画持续时间为1000毫秒==1秒
mSweepAnim = new RotateAnimation();
mSweepAnim.setDuration(1000);
initPaint();
}
/**
* 初始化画笔
*/
private void initPaint() {
//白色圆形画笔
mCirclePaint = new Paint();
mCirclePaint.setColor(getResources().getColor(R.color.white));
mCirclePaint.setAntiAlias(true);
mCirclePaint.setStyle(Paint.Style.FILL_AND_STROKE);
mCirclePaint.setStrokeWidth(0f);
//灰色圆环画笔
mGrayRingPaint = new Paint();
mGrayRingPaint.setColor(Color.parseColor("#f4f4f4"));
mGrayRingPaint.setStrokeJoin(Paint.Join.ROUND);
mGrayRingPaint.setStyle(Paint.Style.STROKE);
mGrayRingPaint.setAntiAlias(true);
mGrayRingPaint.setStrokeWidth(mRingWidth);
//五颜六色圆环画笔
mColorRingPaint = new Paint();
mColorRingPaint.setColor(mFirstSquareColor);
mColorRingPaint.setStrokeJoin(Paint.Join.ROUND);
mColorRingPaint.setStyle(Paint.Style.STROKE);
mColorRingPaint.setAntiAlias(true);
mColorRingPaint.setStrokeWidth(mRingWidth);
}
/**
* 初始化圆形(centerX在onMeasure方法执行完后，才赋值，因此该方法只能测量完后再调用)
*/
private void initRectF() {
//灰色圆环矩形
mGrayRingRectF = new RectF(mRingWidth / 2, mRingWidth / 2, 2 * mCenterX - mRingWidth / 2, 2 * mCenterX - mRingWidth / 2);
//五颜六色圆环矩形
mColorRingRectF = new RectF(mRingWidth / 2, mRingWidth / 2, 2 * mCenterX - mRingWidth / 2, 2 * mCenterX - mRingWidth / 2);
}
/**
* 设置价格
*
* @param mfirstPri 余额
* @param mSecondPri 余额宝
* @param mThirdPri 定期
* @param mFourthPri 基金
*/
public void setPri(float mfirstPri, float mSecondPri, float mThirdPri, float mFourthPri) {
mTotalPri = mfirstPri + mSecondPri + mThirdPri + mFourthPri;//总价
mFirstSweep = (mfirstPri / (mTotalPri + 0.0f)) * 360;//第一种总度数
mSecondSweep = (mSecondPri / (mTotalPri + 0.0f)) * 360;//第二种总度数
mThirdSweep = (mThirdPri / (mTotalPri + 0.0f)) * 360;//第三种总度数
mFourSweep = (mFourthPri / (mTotalPri + 0.0f)) * 360;//第四种总度数
startAnimation(mSweepAnim);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int wSize = 0;
//match_parent or set value
if (widthMode == MeasureSpec.EXACTLY) {
wSize = widthSize;
} else {
//wrap_content
if (widthMode == MeasureSpec.AT_MOST) {
wSize = getPaddingLeft() + getPaddingRight();
}
}
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int hSize = 0;
//match_parent or set value
if (heightMode == MeasureSpec.EXACTLY) {
hSize = heightSize;
} else {
//wrap_content
if (heightMode == MeasureSpec.AT_MOST) {
}
}
//测量结束后，获取控件宽度的中心
mCenterX = wSize / 2;
initRectF();//初始化灰色圆环和多颜色圆环矩形
setMeasuredDimension(wSize, hSize);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制灰色圆环
drawGrayRing(canvas);
//绘制白色圆形
drawCircle(canvas);
drawColorRing(canvas);
}
/**
* 绘制灰色圆环
*
* @param canvas
*/
private void drawGrayRing(Canvas canvas) {
canvas.drawArc(mGrayRingRectF, -90, 360, false, mGrayRingPaint);
}
/**
* 绘制中心白色圆形
*
* @param canvas
*/
private void drawCircle(Canvas canvas) {
canvas.drawCircle(mCenterX, mCenterX, (getWidth() - 2 * mRingWidth) / 2f, mCirclePaint);
}
/**
* 绘制五颜六色的圆环
*
* @param canvas
*/
private void drawColorRing(Canvas canvas) {
if (mTotalPri <= 0)
return;
//当前时间要绘制的角度小于等于第一种颜色的总度数
if (mSweepAngle <= mFirstSweep) {
//第一种颜色
mColorRingPaint.setColor(mFirstSquareColor);
canvas.drawArc(mColorRingRectF, -90, mSweepAngle, false, mColorRingPaint);
} else if (mSweepAngle > mFirstSweep && mSweepAngle <= mFirstSweep + mSecondSweep) {
//当前时间要绘制的角度大于第一种颜色的总度数 小于等于第二种颜色总度数
mColorRingPaint.setColor(mFirstSquareColor);
canvas.drawArc(mColorRingRectF, -90, mFirstSweep, false, mColorRingPaint);
mColorRingPaint.setColor(mSecondSquareColor);
canvas.drawArc(mColorRingRectF, -90 + mFirstSweep, mSweepAngle - mFirstSweep, false, mColorRingPaint);
} else if (mSweepAngle > mSecondSweep + mFirstSweep && mSweepAngle <= mSecondSweep + mFirstSweep + mThirdSweep) {
//当前时间要绘制的角度大于第二种颜色的总度数 小于等于第三种颜色总度数
mColorRingPaint.setColor(mFirstSquareColor);
canvas.drawArc(mColorRingRectF, -90, mFirstSweep, false, mColorRingPaint);
mColorRingPaint.setColor(mSecondSquareColor);
canvas.drawArc(mColorRingRectF, -90 + mFirstSweep, mSweepAngle - mFirstSweep, false, mColorRingPaint);
mColorRingPaint.setColor(mThirdSquareColor);
canvas.drawArc(mColorRingRectF, -90 + mFirstSweep + mSecondSweep, mSweepAngle - mFirstSweep - mSecondSweep, false, mColorRingPaint);
} else {
// 当前时间要绘制的角度大于第三种颜色的总度数 小于等于第四种颜色总度数
mColorRingPaint.setColor(mFirstSquareColor);
canvas.drawArc(mColorRingRectF, -90, mFirstSweep, false, mColorRingPaint);
mColorRingPaint.setColor(mSecondSquareColor);
canvas.drawArc(mColorRingRectF, -90 + mFirstSweep, mSweepAngle - mFirstSweep, false, mColorRingPaint);
mColorRingPaint.setColor(mThirdSquareColor);
canvas.drawArc(mColorRingRectF, -90 + mFirstSweep + mSecondSweep, mSweepAngle - mFirstSweep - mSecondSweep, false, mColorRingPaint);
mColorRingPaint.setColor(mFourthSquareColor);
canvas.drawArc(mColorRingRectF, -90 + mFirstSweep + mSecondSweep + mThirdSweep, mSweepAngle - mFirstSweep - mSecondSweep - mThirdSweep, false, mColorRingPaint);
}
}
/**
* 自定义旋转动画
*/
public class RotateAnimation extends Animation {
/**
* Initializes expand collapse animation, has two types, collapse (1) and expand (0).
*/
public RotateAnimation() {
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
//interpolatedTime 范围：0到1
mSweepAngle = interpolatedTime * 360;//当前时间扫描的角度
postInvalidate();//重绘
}
}
}
3、使用篇
3.1布局文件
<com.aositeluoke.widgets.AlipayAssetsView
android:id="@+id/alipayAssetsView"
android:layout_width="@dimen/px400dp"
android:layout_height="@dimen/px400dp"
android:layout_centerInParent="true"
android:visibility="visible"
app:first_color="#fba62e"
app:fourth_color="#5495ff"
app:ring_width="@dimen/px120dp"
app:second_color="#f26a55"
app:third_color="#2467b1" />
3.2代码中设置金额
//余额5000 余额宝 17778.32 定期4000f 基金6060.89
alipayAssetsView.setPri(5000f, 17778.32f, 4000f, 6060.89f);
网友评论