Android :自定義view實現簡易的轉盤
阿新 • • 發佈:2018-12-04
直接先上效果圖
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; } }
以上,就是簡易自定義轉盤的程式碼
中間的箭頭是用的圖片,這算是一個取巧的辦法;