站在别人的肩膀上慢慢前行
只是部分的转盘主要功能的实现，其他的东西可以慢慢填上，这里做一个简单的介绍
镇楼图
S71010-17315559.jpg
github链接 https://github.com/yukunkun/RotateView
来源
主要有四部分组成，
1.外部的圆形转盘。2.内部的文字显示。3.内部的图片显示。4.动画实现。
在获取到了数据之后，初始化一些数据的实现
private void init(Context context, AttributeSet attrs, int s) {
this.context = context;
screeHeight = getResources().getDisplayMetrics().heightPixels;
screenWidth = getResources().getDisplayMetrics().widthPixels;
scroller = ScrollerCompat.create(context);
}
private void initDate() {
//数据不能错误
if(strs.size()!=images.size()||strs.size()==0||images.size()==0){
return;
}
panNum=strs.size();
//获取到角度
InitAngle = 360 / panNum;
//获取到角度
verPanRadius = 360 / panNum;
//初始角度的一半
diffRadius = verPanRadius /2;
//两个扇形的颜色
dPaint.setColor(Color.rgb(255,133,132));
//两个扇形的颜色
sPaint.setColor(Color.rgb(254,104,105));
textPaint.setColor(Color.WHITE);
textPaint.setTextSize(Util.dip2px(context,16));
setClickable(true);
for(int i=0;i<panNum;i++){
Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), images.get(i));
bitmaps.add(bitmap);
}
}
下面是一些方法，具体的注释写了很多，可以直接看
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//内边距
final int paddingLeft = getPaddingLeft();
final int paddingRight = getPaddingRight();
final int paddingTop = getPaddingTop();
final int paddingBottom = getPaddingBottom();
//view的宽高
int width = getWidth() - paddingLeft - paddingRight;
int height = getHeight() - paddingTop - paddingBottom;
int MinValue = Math.min(width,height);
//获取到圆的半径
radius = MinValue/2;
//获取到view的矩形
RectF rectF = new RectF(getPaddingLeft(),getPaddingTop(),width,height);
//角度的起始是顺时针的，%4==0,如果为4,则就是90度，数学的第三象限开始，否则在第四象限
int angle = (panNum%4 ==0) ? InitAngle : InitAngle-diffRadius;
Log.d("angle", String.valueOf(angle));
//绘制圆弧，两个不同颜色的圆弧
for(int i= 0;i<panNum;i++){
if(i%2 == 0){
canvas.drawArc(rectF,angle,verPanRadius,true,dPaint);
}else {
canvas.drawArc(rectF,angle,verPanRadius,true,sPaint);
}
angle += verPanRadius;
}
//绘制图片
for(int i=0;i<panNum;i++){
drawIcon(width/2, height/2, radius, (panNum%4==0)?InitAngle + diffRadius : InitAngle, i, canvas);
InitAngle += verPanRadius;
}
//绘制文字
for(int i=0;i<panNum;i++){
drawText((panNum%4==0)?InitAngle+diffRadius + (diffRadius*3/4):InitAngle+diffRadius ,strs.get(i), 2*radius, textPaint, canvas,rectF);
InitAngle += verPanRadius;
}
}
以上是外部绘制，文字和图片的绘制
//文字绘制，path路径
private void drawText(float startAngle, String string, int mRadius, Paint mTextPaint, Canvas mCanvas, RectF mRange) {
Path path = new Path();
path.addArc(mRange, startAngle, verPanRadius);
float textWidth = mTextPaint.measureText(string);
//圆弧的水平偏移，保证在转盘内部
float hOffset = (panNum % 4 == 0)?((float) (mRadius * Math.PI / panNum/2 ))
:((float) (mRadius * Math.PI / panNum/2 - textWidth/2 ));
//圆弧的垂直偏移，保证在转盘内部
float vOffset = mRadius / 2 / 6;
mCanvas.drawTextOnPath(string, path, hOffset, vOffset, mTextPaint);
}
private void drawIcon(int xx,int yy,int mRadius,float startAngle, int i,Canvas mCanvas) {
int imgWidth = mRadius / 4;
float angle = (float) Math.toRadians(verPanRadius +startAngle);
//确定图片在圆弧中 中心点的位置
float x = (float) (xx + (mRadius /2 + mRadius/12)* Math.cos(angle));
float y = (float) (yy + (mRadius /2 +mRadius/12) * Math.sin(angle));
// 确定绘制图片的位置，前后偏移，得到图片的位置
RectF rect = new RectF(x - imgWidth *2 / 3, y - imgWidth*2 / 3, x + imgWidth
*2/ 3, y + imgWidth*2/3);
//mCanvas.drawRect(rect,textPaint);
Bitmap bitmap = bitmaps.get(i);
//绘制
mCanvas.drawBitmap(bitmap, null, rect, null);
}
具体的绘制和计算如上所示，可以实现转盘的View了。
主要是动画的处理，有点计算在里面
//旋转的动画
public void startAnimation(int pos){
//Rotate lap. 随机的圈数，>4圈，修改可以控制旋转的圈数和时长
int lap = (int) (Math.random()*2) + 4;
//Rotate angle.
int angle = 0;
if(pos < 0){
//随机角度
angle = (int) (Math.random() * 360);
}else{
//控制某个角度，由具体的位置，计算出具体的角度值
int initPos = queryPosition();
if(pos > initPos){
angle = (pos - initPos)*verPanRadius;
lap -= 1;
angle = 360 - angle;
}else if(pos < initPos){
angle = (initPos - pos)*verPanRadius;
}else{
//nothing to do.
}
}
//All of the rotate angle.
int increaseDegree = lap * 360 + angle;
long time = (lap + angle / 360) * ONE_WHEEL_TIME;
int DesRotate = increaseDegree + InitAngle;
//TODO 为了每次都能旋转到转盘的中间位置
int offRotate = DesRotate % 360 % verPanRadius;
DesRotate -= offRotate;
DesRotate += diffRadius;
//属性动画
ValueAnimator animtor = ValueAnimator.ofInt(InitAngle,DesRotate);
animtor.setInterpolator(new AccelerateDecelerateInterpolator());
animtor.setDuration(time);
animtor.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int updateValue = (int) animation.getAnimatedValue();
//每次绘制的初始值改变，最终会停止到之前设置的角度数值
InitAngle = (updateValue % 360 + 360) % 360;
//重绘制
ViewCompat.postInvalidateOnAnimation(RotateView.this);
}
});
//动画监听，获取到具体的停留位置，这里处理随机位置，其实提前是知道的
animtor.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
int pos = InitAngle / 60;
if(pos >= 0 && pos <= 3){
pos = 3 - pos;
}else{
pos = (6-pos) + 3;
}
mOnCallBackPosition.getStopPosition(pos);
//可以回调出去，得到值
// Toast.makeText(context, strs.get(pos), Toast.LENGTH_SHORT).show();
}
});
animtor.start();
}
//由具体的位置，获取到角度
private int queryPosition(){
InitAngle = (InitAngle % 360 + 360) % 360;
int pos = InitAngle / verPanRadius;
if(panNum == 4) pos ++;
return calcumAngle(pos);
}
private int calcumAngle(int pos){
if(pos >= 0 && pos <= panNum/2){
pos = panNum/2 - pos;
}else{
pos = (panNum-pos) + panNum/2;
}
return pos;
}
如上所示，动画实现，采用了属性动画，多次绘制的方法，创造出旋转的效果
具体的使用如下
public class MainActivity extends AppCompatActivity {
private RotateView mRotateView;
List<Integer> images=new ArrayList<>();
List<String> names=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRotateView = (RotateView) findViewById(R.id.rv_rotateview);
intDate();
mRotateView.setImageIcon(images);
mRotateView.setStrName(names);
findViewById(R.id.iv_start).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//-1为随机数或者指定位置，但必须小于总个数
mRotateView.startAnimation(-1);
}
});
//获取到位置
mRotateView.setOnCallBackPosition(new RotateView.onCallBackPosition() {
@Override
public void getStopPosition(int pos) {
Toast.makeText(MainActivity.this, "位置："+names.get(pos), Toast.LENGTH_SHORT).show();
}
});
}
private void intDate() {
images.add(R.mipmap.role);
images.add(R.mipmap.sports);
images.add(R.mipmap.words);
images.add(R.mipmap.action);
images.add(R.mipmap.combat);
images.add(R.mipmap.moba);
names= Arrays.asList(getResources().getStringArray(R.array.name));
}
}
