1. 程式人生 > >Android :自定義view實現簡易的轉盤

Android :自定義view實現簡易的轉盤

直接先上效果圖
在這裡插入圖片描述
xml裡面的程式碼

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="255dp"
    android:layout_height="255dp"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.bwie.administrator.zhuanpan2.myview.MyView
        android:layout_marginLeft="3dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ImageView
        android:layout_width="210dp"
        android:layout_height="210dp"
        android:layout_centerInParent="true"
        android:src="@drawable/start" />
</RelativeLayout>

這是佈局,然後MainActivity裡面沒有寫程式碼
下面就是自定義View轉盤控制元件的程式碼

package com.bwie.administrator.zhuanpan2.myview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.RotateAnimation;
import java.util.Random;
public class MyView extends View implements View.OnClickListener {
    private String mStr = "開始";
    private String[] contents = new String[]{"美 女", "女 神", "熱 舞", "豐 滿", "性 感", "知 性"};
    public int[] colors = new int[]{Color.parseColor("#8EE5EE"), Color.parseColor("#FFD700"), Color.parseColor("#FFD39B"), Color.parseColor("#FF8247"), Color.parseColor("#FF34B3"), Color.parseColor("#F0E68C")};
    private int mWidth;
    private Paint mPaint;
    private Context mContext;
    private float startjs = 0f;
    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mContext = context;
        setOnClickListener(this);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.YELLOW);
        mPaint.setStyle(Paint.Style.STROKE);
        //設定邊緣鋸齒
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(3);
        canvas.drawCircle(mWidth / 2, mWidth / 2, mWidth / 2, mPaint);
        RectF rectF = new RectF(0, 0, mWidth, mWidth);
        mPaint.setStyle(Paint.Style.FILL);
        for (int i = 0; i < colors.length; i++) {
            //給扇形填充顏色
            mPaint.setColor(colors[i]);
            int startjd = i * 60;
            //引數的意思  畫扇形    開始的角度    結束的角度     是否有中心    畫筆
            canvas.drawArc(rectF, startjd, 60, true, mPaint);
        }
        //字型顏色
        mPaint.setColor(Color.BLACK);
        //字型大小
        mPaint.setTextSize(24);
        //進行迴圈
        for (int i = 0; i < contents.length; i++) {
            int startjd = i * 60;
            //設定文字的路徑
            Path path = new Path();
            path.addArc(rectF, startjd, 60);
            canvas.drawTextOnPath(contents[i], path, 50, 50, mPaint);
        }
        mPaint.setColor(Color.RED);
        canvas.drawCircle(mWidth / 2, mWidth / 2, 50, mPaint);
        mPaint.setColor(Color.BLUE);
        mPaint.setTextSize(24);
        //要得到我們寫的字的高和寬
        Rect rect = new Rect();
        mPaint.getTextBounds(mStr, 0, mStr.length(), rect);
        int width = rect.width();
        int height = rect.height();
        canvas.drawText(mStr, mWidth / 2 - width / 2, mWidth / 2 + height / 2, mPaint);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(300, 300);
        //得到測量過後的高和寬
        mWidth = getMeasuredWidth();
    }

    @Override
    public void onClick(View v) {
        //隨機數
        Random random = new Random();
        int js = random.nextInt(3240);
        int last = random.nextInt(360) + 360;
        //旋轉動畫
        RotateAnimation rotateAnimation = new RotateAnimation(startjs, js + last, mWidth / 2, mWidth / 2);
        //旋轉時間
        rotateAnimation.setDuration(3000);
        //保留最後執行完的位置
        rotateAnimation.setFillAfter(true);
        //啟動動畫
        startAnimation(rotateAnimation);
        startjs = (js + last) % 360;
    }
}

以上,就是簡易自定義轉盤的程式碼
中間的箭頭是用的圖片,這算是一個取巧的辦法;