溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何在Android中通過自定義view編寫一個(gè)抽獎(jiǎng)轉(zhuǎn)盤

發(fā)布時(shí)間:2021-02-22 17:36:36 來源:億速云 閱讀:172 作者:戴恩恩 欄目:移動(dòng)開發(fā)

這篇文章主要介紹了如何在Android中通過自定義view編寫一個(gè)抽獎(jiǎng)轉(zhuǎn)盤,此處給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考價(jià)值,需要的朋友可以參考下:

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)盤
 * @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="開始"
  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;

/**
 * 這里是畫轉(zhuǎ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)盤上的文字
   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)盤中間開始按鈕和指針
 * @author hasee
 */
public class CustomTurntableInsideView extends View {
 /**
  * 畫筆
  */
 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
  //第二步:詳見attrs.xml文件內(nèi)部
  //第三步:在所在的布局文件的根layout中添加xmlns:app="http://schemas.android.com/apk/res-auto"
  //第四步:在布局文件的控件中添加app:"你在attrs中設(shè)置的attr name"="你的值"
  //第五步:調(diào)用下面這句話,最后的為R.styleable.你在attrs中設(shè)置的declare-styleable name
  TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomTurntableView);
  //第六步:調(diào)用下面這句話,根據(jù)你在attrs中設(shè)置的format,選擇getXXX方法,
  //入?yún)?nbsp;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è)置畫筆顏色為黑色,
  mPaint.setColor(Color.BLACK);
  //畫出指針,用一個(gè)扇形,然后蓋住后面補(bǔ)分來簡(jiǎn)單表示
  canvas.drawArc(mRectF, 60, 60, true, mPaint);

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

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

  //畫三角,第一步,創(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();
//  畫
//  canvas.drawPath(path, mPaint);
 }
}

自定義屬性attrs.xml

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

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

到此這篇關(guān)于如何在Android中通過自定義view編寫一個(gè)抽獎(jiǎng)轉(zhuǎn)盤的文章就介紹到這了,更多相關(guān)的內(nèi)容請(qǐng)搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI