您的位置:首页 > 其它

自定义View(三),仿支付宝芝麻信用自定义控件

2016-04-18 18:48 120 查看
仿支付宝的芝麻信用仪表盘



实现的效果



实现的功能:

指针和数字动态改变

背景动态变化

没了...

代码如下

MyCustomView.java

package com.example.testcustomview;

import android.animation.ValueAnimator;
import android.animation.ValueAnimator.AnimatorUpdateListener;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

public class MyCustomView extends View {

private Paint paint;
private ValueAnimator valueAnimator;
private int backgroundColor;
private int fontColor = Color.WHITE;
private int score;
private int value;

public MyCustomView(Context context, AttributeSet attrs) {
super(context, attrs);

}

public void setSocre(int score) {
init(score);
}

private void init(int score) {
// ValueAnimator用来计算过度值,过度值用来更改背景颜色以及指针的轨迹
valueAnimator = ValueAnimator.ofInt(0, score);
valueAnimator.setDuration(3000);
valueAnimator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int i = (int) animation.getAnimatedValue();
value = i;
if (i < 10) {
backgroundColor = Color.RED;
invalidate();
} else if (i >= 10 && i < 20) {
backgroundColor = Color.BLUE;
invalidate();
} else if (i >= 20 && i < 30) {
backgroundColor = Color.RED;
invalidate();
} else if (i >= 30 && i < 40) {
backgroundColor = Color.BLUE;
invalidate();
} else if (i >= 40 && i < 50) {
backgroundColor = Color.RED;
invalidate();
} else if (i >= 50 && i < 60) {
backgroundColor = Color.BLUE;
invalidate();
} else if (i >= 60 && i < 70) {
backgroundColor = Color.RED;
invalidate();
} else if (i >= 70 && i < 80) {
backgroundColor = Color.BLUE;
invalidate();
} else if (i >= 80 && i < 90) {
backgroundColor = Color.RED;
invalidate();
} else if (i >= 90 && i < 100) {
backgroundColor = Color.BLUE;
invalidate();
} else if (i == 100) {
backgroundColor = Color.RED;
invalidate();
}
}
});
valueAnimator.start();

}

public MyCustomView(Context context) {
this(context, null);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = canvas.getWidth();
int height = canvas.getHeight();

canvas.drawColor(backgroundColor);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.WHITE);

canvas.drawLine(0, height / 2, width, height / 2, paint);
canvas.drawLine(width / 2, 0, width / 2, height, paint);

// 将圆点移动到屏幕中央
canvas.translate(width / 2, height / 2);

// 开始画圆,最外层,第一个圆
canvas.drawArc(new RectF((0 - width / 4), (0 - width / 4), width / 4, width / 4), 180, 180, true, paint);
// 第二个圆
Paint p2 = new Paint(Paint.ANTI_ALIAS_FLAG);
p2.setColor(backgroundColor);
canvas.drawArc(new RectF((0 - width / 4 + 5), (0 - width / 4 + 5), width / 4 - 5, width / 4 - 5), 180, 180,
true, p2);
// 第三个圆
Paint p3 = new Paint(Paint.ANTI_ALIAS_FLAG);
p3.setColor(Color.argb(255, 255, 240, 255));
canvas.drawArc(new RectF((0 - width / 4 + 30), (0 - width / 4 + 30), width / 4 - 30, width / 4 - 30), 180, 180,
true, p3);
// 第四个圆
Paint p4 = new Paint(Paint.ANTI_ALIAS_FLAG);
p4.setColor(backgroundColor);
canvas.drawArc(new RectF((0 - width / 4 + 55), (0 - width / 4 + 55), width / 4 - 55, width / 4 - 55), 180, 180,
true, p4);

// 开始画刻度
Paint p5 = new Paint(Paint.ANTI_ALIAS_FLAG);
p5.setColor(Color.RED);
Paint p6 = new Paint(Paint.ANTI_ALIAS_FLAG);
p6.setColor(Color.BLUE);
p6.setTextSize(15);

int count = 11;// 总刻度数目
for (int i = 0; i < count; i++) {
if (i % 5 == 0) {
canvas.drawLine((0 - width / 4 + 5), 0, (0 - width / 4 + 30), 0, p5);
canvas.drawText(String.valueOf(i * 10), (0 - width / 4 + 30), 0, p6);
} else {
canvas.drawLine((0 - width / 4 + 15), 0, (0 - width / 4 + 30), 0, p5);
canvas.drawText(String.valueOf(i * 10), (0 - width / 4 + 30), 0, p6);
}
canvas.rotate(18);
}

canvas.rotate(-198);

// 画最外层的指针
Paint pp = new Paint(Paint.ANTI_ALIAS_FLAG);
pp.setColor(Color.WHITE);
pp.setStrokeWidth(5);
for (int i = 0; i < value; i++) {
canvas.drawPoint((0 - width / 4), 0, pp);
canvas.rotate(1.8f);
}
canvas.rotate(0 - (value * 1.8f));
// 画数字
Paint ppp = new Paint(Paint.ANTI_ALIAS_FLAG);
ppp.setTextSize(width / 10);

FontMetrics fontMetrics = ppp.getFontMetrics();
if (value < 10) {
canvas.drawText(value + "", fontMetrics.top / 4, 0, ppp);
} else {
canvas.drawText(value + "", fontMetrics.top / 2, 0, ppp);
}
}
}


MainActivity.java

package com.example.testcustomview;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends Activity {

private MyCustomView custom_view;
private Button bt;
private EditText et;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

et = (EditText) findViewById(R.id.et);
bt = (Button) findViewById(R.id.bt);
custom_view = (MyCustomView) findViewById(R.id.custom_view);
bt.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
custom_view.setSocre(Integer.valueOf(et.getText().toString()));
}
});
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: