Android自定義view制作抽獎(jiǎng)轉(zhuǎn)盤(pán)

更新時(shí)間：2020年07月29日 12:25:26 作者：ren18234073466

這篇文章主要為大家詳細(xì)介紹了Android自定義view制作抽獎(jiǎng)轉(zhuǎn)盤(pán)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android自定義view制作抽獎(jiǎng)轉(zhuǎn)盤(pán)的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

TurntableActivity

package com.bawei.myapplication.turntable;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.RotateAnimation;

import com.bawei.myapplication.R;
import com.bawei.myapplication.turntable.CustomTurntableView;

/**
 * 轉(zhuǎn)盤(pán)
 * @author hasee
 */
public class TurntableActivity extends AppCompatActivity {

 CustomTurntableView customTurntableView;
 boolean isTouchInSide = false;
 float mDownX, mDownY;


 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_turntable);

 initView();
 }

 private void initView() {
 customTurntableView = 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, 450, 450);
//  rotateAnimation.setDuration(5000);
//  rotateAnimation.setFillAfter(true);
//  customCircleView.startAnimation(rotateAnimation);
//  }
// });

 findViewById(R.id.custom_inside).setOnTouchListener(new View.OnTouchListener() {
  @Override
  public boolean onTouch(View v, MotionEvent event) {
  if (event.getAction() == MotionEvent.ACTION_DOWN &&
   event.getX() > 200 &&
   event.getX() < 300 &&
   event.getY() > 200 &&
   event.getY() < 300) {
   isTouchInSide = true;
   mDownX = event.getX();
   mDownY = event.getY();
   return true;
  }else if(event.getAction() == MotionEvent.ACTION_MOVE && (
   event.getX() < mDownX -10 ||
   event.getX() > mDownX + 10 ||
   event.getY() < mDownY -10 ||
   event.getY() > mDownY + 10) ){
   isTouchInSide = false;
  } else if (event.getAction() == MotionEvent.ACTION_UP &&
   event.getX() > mDownX -10 &&
   event.getX() < mDownX + 10 &&
   event.getY() > mDownY -10 &&
   event.getY() < mDownY + 10 &&
   isTouchInSide) {
   float degrees = (float) (720 + Math.random() * 1000);
   RotateAnimation rotateAnimation = new RotateAnimation(0, -degrees, 250, 250);
   rotateAnimation.setDuration(5000);
   rotateAnimation.setFillAfter(true);
   customTurntableView.startAnimation(rotateAnimation);
  }
  isTouchInSide = false;
  return false;
  }
 });
 }
}

對(duì)應(yīng)的布局

<?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:id="@+id/ll"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context=".MainActivity">

 <com.bawei.myapplication.turntable.CustomTurntableView
 android:id="@+id/custom"
 android:layout_width="wrap_content"
 android:layout_height="500dp"
 />

 <com.bawei.myapplication.turntable.CustomTurntableInsideView
 android:id="@+id/custom_inside"
 android:layout_width="wrap_content"
 android:layout_height="500dp"
 app:text="開(kāi)始"
 android:background="#3300ff00" />
</RelativeLayout>

自定義CustomTurntableView繼承view

package com.bawei.myapplication.turntable;

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.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * 這里是畫(huà)轉(zhuǎn)盤(pán)的
 * @author hasee
 */
public class CustomTurntableView extends View{
 Paint mPaint;
 int mCircleCount = 6;
 float mStartAngle = 0;

 RectF rectF;

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

 public CustomTurntableView(Context context, @Nullable AttributeSet attrs) {
 super(context, attrs);
 init();
 }

 private void init(){
 mPaint = new Paint();
 mPaint.setColor(Color.BLUE);
 mPaint.setStrokeWidth(10);
 mPaint.setTextSize(60);
 mPaint.setStyle(Paint.Style.FILL);

 rectF = new RectF();
 rectF.top = 100;
 rectF.left = 100;
 rectF.right = 400;
 rectF.bottom = 400;
 }
 String[] textColor = {"一 等 獎(jiǎng)","二 等 獎(jiǎng)","三 等 獎(jiǎng)","四 等 獎(jiǎng)","五 等 獎(jiǎng)","六 等 獎(jiǎng)"};
 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 for(int i = 0; i < mCircleCount; i++){
  //按角標(biāo)單雙號(hào)設(shè)置扇形顏色，
  if(i % 2 == 0 ){
  mPaint.setColor(Color.BLUE);
  }else{
  mPaint.setColor(Color.GREEN);
  }
  canvas.drawArc(rectF, mStartAngle, 60, true, mPaint);
  //設(shè)置轉(zhuǎn)盤(pán)上的文字
  mPaint.setColor(Color.BLACK);
  mPaint.setTextSize(20);
  Path path = new Path();
  path.addArc(rectF,mStartAngle+20,60);
  canvas.drawTextOnPath(textColor[i],path,-10,40,mPaint);
  mStartAngle += 60;
 }
 }
}

自定義CustomTurntableInsideView繼承view

package com.bawei.myapplication.turntable;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

import com.bawei.myapplication.R;

/**
 * 轉(zhuǎn)盤(pán)中間開(kāi)始按鈕和指針
 * @author hasee
 */
public class CustomTurntableInsideView extends View {
 /**
 * 畫(huà)筆
 */
 Paint mPaint;
 RectF mRectF;
 String mStr;

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

 public CustomTurntableInsideView(Context context, @Nullable AttributeSet attrs) {
 super(context, attrs);

 //自定義屬性，如何添加自定義屬性如下（考點(diǎn)）
 //第一步：在values文件夾下創(chuàng)建attrs.xml
 //第二步：詳見(jiàn)attrs.xml文件內(nèi)部
 //第三步：在所在的布局文件的根layout中添加xmlns:app="http://schemas.android.com/apk/res-auto"
 //第四步：在布局文件的控件中添加app:"你在attrs中設(shè)置的attr name"="你的值"
 //第五步：調(diào)用下面這句話(huà)，最后的為R.styleable.你在attrs中設(shè)置的declare-styleable name
 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomTurntableView);
 //第六步：調(diào)用下面這句話(huà)，根據(jù)你在attrs中設(shè)置的format，選擇getXXX方法，
 //入?yún)?R.styleable. 加上 你在attrs中設(shè)置的declare-styleable name 加上 _ 加上 你在attrs中設(shè)置的attr name
 mStr = typedArray.getString(R.styleable.CustomTurntableView_text);
 init();
 }

 private void init() {
 //以下注釋請(qǐng)看CustomBingView里面
 mPaint = new Paint();
 mPaint.setColor(Color.RED);
 mPaint.setStrokeWidth(10);
 mPaint.setTextSize(20);
 mPaint.setStyle(Paint.Style.FILL);

 mRectF = new RectF();
 mRectF.top = 50;
 mRectF.bottom = 300;
 mRectF.right = 300;
 mRectF.left = 200;
 }

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

// setMeasuredDimension(300, 300);
 }

 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);

 //設(shè)置畫(huà)筆顏色為黑色，
 mPaint.setColor(Color.BLACK);
 //畫(huà)出指針，用一個(gè)扇形，然后蓋住后面補(bǔ)分來(lái)簡(jiǎn)單表示
 canvas.drawArc(mRectF, 60, 60, true, mPaint);

 mPaint.setColor(Color.RED);
 //畫(huà)一個(gè)紅色的圓形，就是中間的大按鈕
 canvas.drawCircle(250, 250, 50, mPaint);

 mPaint.setColor(Color.BLACK);
 //添加按鈕上的文字
 canvas.drawText(mStr, 230, 260, mPaint);

 //畫(huà)三角，第一步，創(chuàng)建路徑
// Path path = new Path();
 //第二步，moveTo第一個(gè)頂點(diǎn)
// path.moveTo(300, 300);
 //后續(xù)相繼lineTo其他頂點(diǎn)
// path.lineTo(300, 400);
// path.lineTo(400, 400);
 //閉合
// path.close();
// 畫(huà)
// canvas.drawPath(path, mPaint);
 }
}

自定義屬性attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <!-- name為想要調(diào)用這個(gè)屬性的類(lèi)名即可 -->

 <declare-styleable name="CustomTurntableView">
 <!-- name為屬性的名字，可以隨意起，只要符合規(guī)則看得懂 -->
 <!-- format為屬性?xún)?nèi)容的類(lèi)型 -->
 <attr name="text" format="string"></attr>
 </declare-styleable>
</resources>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家，關(guān)注腳本之家公眾號(hào)的更多精彩內(nèi)容。

您可能感興趣的文章: