1. 程式人生 > >Android自定義view--簡單轉盤

Android自定義view--簡單轉盤

大概效果如下:
在這裡插入圖片描述
在activity_main.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="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.day1.weight.MyLuckView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/a" />
</RelativeLayout>

建立MyLuckView類,繼承View,實現OnClickListener介面:

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.support.annotation.NonNull;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.RotateAnimation;

import java.util.Random;

public class MyLuckView extends View implements View.OnClickListener {
    private String[] contents = new String[]{"李  同  學", "郝  同  學", "呂  同  學", "張  同  學"};
    public int[] colors = new int[]{Color.parseColor("#8EE5EE"), Color.parseColor("#FFD700"), Color.parseColor("#FFD39B"), Color.parseColor("#FF8247")};
    private Context mContext;
    private Paint mPaint;
    private int mWidth;
    private String mStr = "start";
    private int startdj;

    public MyLuckView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        mPaint = new Paint();
        setOnClickListener(this);
    }

    //到從到外層寫到裡層 不然會發生覆蓋效果
    @SuppressLint("DrawAllocation")
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //外面大圓  畫型 可不寫
        getBigCircle(canvas);

        //因為要畫扇形 裡面有個RectF
        //因為那個園其實是佔全屏的,所以我這個RectF的空間也是全屏
        RectF rectF = getPaintArc(canvas);
        //轉盤中的字型
        getPaintText(canvas, rectF);

        getCenter(canvas);
    }

    private void getCenter(Canvas canvas) {
        mPaint.setColor(Color.GREEN);
        canvas.drawCircle(mWidth / 2, mWidth / 2, 40, mPaint);
        //這是中心的圓中的文字  如果是插圖的話 文字可不寫
//        mPaint.setColor(Color.BLACK);
//        mPaint.setTextSize(24);
//        //咱們在最中心的位置畫一個start (150,150) 我們要得到我們寫的字的高和寬
//        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);
    }

    private void getPaintText(Canvas canvas, RectF rectF) {
        mPaint.setColor(Color.BLACK);
        mPaint.setTextSize(35);
        for (int i = 0; i < contents.length; i++) {
            Path path = new Path();
            path.addArc(rectF, i * 90, 90);
            canvas.drawTextOnPath(contents[i], path, 70, 70, mPaint);
        }
    }

    @NonNull
    private RectF getPaintArc(Canvas canvas) {
        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]);
            canvas.drawArc(rectF, i * 90, 90, true, mPaint);
        }
        return rectF;
    }

    private void getBigCircle(Canvas canvas) {
        mPaint.setColor(Color.YELLOW);
        //空心圓
        mPaint.setStyle(Paint.Style.STROKE);
        //設定邊緣鋸齒
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(3);
        Log.e("width", mWidth + "");
        canvas.drawCircle(mWidth / 2, mWidth / 2, mWidth / 2, mPaint);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(400, 400);
        mWidth = getMeasuredWidth();
    }
  @Override
    public void onClick(View v) {
        int nextInt = new Random().nextInt(1000);
       int last= new Random().nextInt(500)+300;
        RotateAnimation rotateAnimation = new RotateAnimation(startdj, nextInt+last, mWidth / 2, mWidth / 2);
        rotateAnimation.setDuration(3000);
        //保留最後執行完的位置
        rotateAnimation.setFillAfter(true);
        startAnimation(rotateAnimation);
        //動畫結束後儲存結束的位置,在下次的時候不回來原來的位置
        startdj = ( nextInt+last )% 360;
   }
}

效果中有點小瑕疵
以上程式碼完成 學藝淺薄 如造成困擾很抱歉