1. 程式人生 > >自定義View---抽獎轉盤

自定義View---抽獎轉盤

1.自定義一個類繼承View

public class MyView extends View {
    //畫筆
    Paint mPaint;
    //扇形的瓣數
    int mCircleCount = 6;
    //開始的角度
    float mStart = 0;
    //文字角度
    int textAngle = 5;

    RectF rectF;

//顏色的陣列
private int[] colors=new int[]{Color.parseColor("#8EE5EE"), Color.parseColor("#FFD700"), Color.parseColor("#FFD39B"), Color.parseColor("#FF8247"), Color.parseColor("#FF34B3"), Color.parseColor("#F0E68C")};
//獎品名稱
private String[] str=new String[]{"一等獎","二等獎","三等獎","四等獎","特等獎","謝謝參與獎"};

public MyView(Context context) {
    super(context);
    init();
}

public MyView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}
private void init(){
    mPaint = new Paint();
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setStrokeWidth(10);
    mPaint.setColor(Color.BLUE);
    
    rectF = new RectF();
    rectF.top = 100;
    rectF.bottom = 500;
    rectF.left = 100;
    rectF.right = 500;

}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

}

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    for (int i = 0; i < mCircleCount; i++) {
        //設定扇形顏色
        mPaint.setColor(colors[i]);
        //設定扇形
        canvas.drawArc(rectF,mStart,60,true,mPaint);
        //設定字型顏色
        mPaint.setColor(Color.BLACK);
        //設定字型大小
        mPaint.setTextSize(24);
        Path path = new Path();
        path.addArc(rectF,textAngle,60);
        canvas.drawTextOnPath(str[i],path,60,60,mPaint);
        mStart += 60;
        textAngle+=60;
    }
}
}

2.繪製裡面的小圓

public class CircleInsid extends View {

Paint mPaint;
public CircleInsid(Context context) {
    super(context);
    init();
}

public CircleInsid(Context context,AttributeSet attrs) {
    super(context, attrs);
    init();
}

private void init() {
    mPaint = new Paint();
    mPaint.setColor(Color.RED);
    mPaint.setStrokeWidth(10);
    mPaint.setTextSize(30);
    mPaint.setStyle(Paint.Style.FILL);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    RectF rectF = new RectF();
    rectF.top = 30;
    rectF.bottom = 300;
    rectF.right = 400;
    rectF.left = 220;

    mPaint.setColor(Color.BLACK);
    canvas.drawArc(rectF, 60, 60, true, mPaint);
    mPaint.setColor(Color.RED);
    canvas.drawCircle(300, 300, 100, mPaint);
    mPaint.setColor(Color.BLACK);
    canvas.drawText("開始", 280, 300, mPaint);
}
}

3.xml佈局顯示

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

<com.example.sector.View.MyView
    android:id="@+id/custom"
    android:layout_width="match_parent"
    android:layout_height="500dp"

    />
<com.example.sector.View.CircleInsid
    android:id="@+id/custom_inside"
    android:layout_width="match_parent"
    android:layout_height="500dp"

   />

</android.support.constraint.ConstraintLayout>

4.MainActivity頁面

public class MainActivity extends AppCompatActivity {

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

private void initView(){
    myView = findViewById(R.id.custom);
    //點選小圓進行隨機抽獎
    findViewById(R.id.custom_inside).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            float degrees =  (float)(720 + Math.random() * 1000);

            RotateAnimation rotateAnimation = new RotateAnimation(0, -degrees, 300, 300);
            rotateAnimation.setDuration(5000);
            rotateAnimation.setFillAfter(true);
            myView.startAnimation(rotateAnimation);
        }
    });
    
}
}