Android 自定义View 抽奖大转盘(1)

Android 62 2017-11-08 17:58

站在别人的肩膀上慢慢前行

只是部分的转盘主要功能的实现,其他的东西可以慢慢填上,这里做一个简单的介绍

镇楼图

Android 自定义View 抽奖大转盘(1)-JEESNS
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));
    }
}

就可以实现旋转的大转盘。还有一部分外围的框,之后在添上,主要的大转盘抽奖功能是实现了。

文章评论