站在別人的肩膀上慢慢前行
只是部分的轉(zhuǎn)盤主要功能的實(shí)現(xiàn)辣恋，其他的東西可以慢慢填上奖亚，這里做一個(gè)簡(jiǎn)單的介紹
鎮(zhèn)樓圖
S71010-17315559.jpg
github鏈接 https://github.com/yukunkun/RotateView
來(lái)源
主要有四部分組成，
1.外部的圓形轉(zhuǎn)盤艾船。2.內(nèi)部的文字顯示。3.內(nèi)部的圖片顯示高每。4.動(dòng)畫實(shí)現(xiàn)屿岂。
在獲取到了數(shù)據(jù)之后，初始化一些數(shù)據(jù)的實(shí)現(xiàn)
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() {
//數(shù)據(jù)不能錯(cuò)誤
if(strs.size()!=images.size()||strs.size()==0||images.size()==0){
return;
}
panNum=strs.size();
//獲取到角度
InitAngle = 360 / panNum;
//獲取到角度
verPanRadius = 360 / panNum;
//初始角度的一半
diffRadius = verPanRadius /2;
//兩個(gè)扇形的顏色
dPaint.setColor(Color.rgb(255,133,132));
//兩個(gè)扇形的顏色
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);
//內(nèi)邊距
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);
//角度的起始是順時(shí)針的，%4==0,如果為4,則就是90度带欢，數(shù)學(xué)的第三象限開(kāi)始霉撵，否則在第四象限
int angle = (panNum%4 ==0) ? InitAngle : InitAngle-diffRadius;
Log.d("angle", String.valueOf(angle));
//繪制圓弧，兩個(gè)不同顏色的圓弧
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);
//圓弧的水平偏移撕氧，保證在轉(zhuǎn)盤內(nèi)部
float hOffset = (panNum % 4 == 0)?((float) (mRadius * Math.PI / panNum/2 ))
:((float) (mRadius * Math.PI / panNum/2 - textWidth/2 ));
//圓弧的垂直偏移瘤缩，保證在轉(zhuǎn)盤內(nèi)部
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);
//確定圖片在圓弧中 中心點(diǎn)的位置
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);
}
具體的繪制和計(jì)算如上所示剥啤，可以實(shí)現(xiàn)轉(zhuǎn)盤的View了。
主要是動(dòng)畫的處理不脯，有點(diǎn)計(jì)算在里面
//旋轉(zhuǎn)的動(dòng)畫
public void startAnimation(int pos){
//Rotate lap. 隨機(jī)的圈數(shù)府怯，>4圈，修改可以控制旋轉(zhuǎn)的圈數(shù)和時(shí)長(zhǎng)
int lap = (int) (Math.random()*2) + 4;
//Rotate angle.
int angle = 0;
if(pos < 0){
//隨機(jī)角度
angle = (int) (Math.random() * 360);
}else{
//控制某個(gè)角度防楷，由具體的位置牺丙，計(jì)算出具體的角度值
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 為了每次都能旋轉(zhuǎn)到轉(zhuǎn)盤的中間位置
int offRotate = DesRotate % 360 % verPanRadius;
DesRotate -= offRotate;
DesRotate += diffRadius;
//屬性動(dòng)畫
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();
//每次繪制的初始值改變，最終會(huì)停止到之前設(shè)置的角度數(shù)值
InitAngle = (updateValue % 360 + 360) % 360;
//重繪制
ViewCompat.postInvalidateOnAnimation(RotateView.this);
}
});
//動(dòng)畫監(jiān)聽(tīng)，獲取到具體的停留位置冲簿，這里處理隨機(jī)位置粟判，其實(shí)提前是知道的
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);
//可以回調(diào)出去，得到值
// 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;
}
如上所示档礁，動(dòng)畫實(shí)現(xiàn)，采用了屬性動(dòng)畫吝沫，多次繪制的方法呻澜，創(chuàng)造出旋轉(zhuǎn)的效果
具體的使用如下
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為隨機(jī)數(shù)或者指定位置，但必須小于總個(gè)數(shù)
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));
}
}
