自定義View轉盤
阿新 • • 發佈:2018-12-08
FanView
public class FanView extends View implements View.OnClickListener {
private Paint mFanPaint,mTextPaint;//扇形畫筆和文字畫筆 private ArrayList<Fan> mFanList = new ArrayList<>(); private RotateAnimation mRotateAnimation;//控制元件旋轉動畫 private boolean isStartAnim;//是否已經啟動了動畫 public FanView(Context context) { super(context); init(); } public FanView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public FanView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init(){ mFanPaint = new Paint(); mFanPaint.setStyle(Paint.Style.FILL);//設定畫筆為全填充 mTextPaint = new Paint(); mTextPaint.setTextSize(60);//設定文字大小 setOnClickListener(this);//新增點選事件 } /** * 新增扇形 */ public void addFan(Fan fan){ mFanList.add(fan);//新增扇形 invalidate();//重新整理控制元件,回撥onDraw方法 } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //*****定義矩形區域用於畫環形:圓,橢圓等 RectF rectF = new RectF(); rectF.left = 0; rectF.top=0; rectF.right=800; rectF.bottom = 800; //*****定義矩形區域用於畫環形:圓,橢圓等 for (int i = 0; i <mFanList.size() ; i++) { Fan fan = mFanList.get(i); //*********畫扇形 mFanPaint.setColor(fan.getColor()); canvas.drawArc(rectF,fan.getStartAngle(), 360/mFanList.size(),true,mFanPaint);//畫扇形 //********畫扇形 //********把文字畫到扇形上 Path path = new Path(); path.addArc(rectF,fan.getStartAngle(), 360/mFanList.size());//定義文字區域,需要傳入開始角度和結束角度 mTextPaint.setColor(Color.BLACK); //沿路徑path畫文字,第一個引數是文字,第二個引數是路徑, // 第三個引數是水平距離,也就是扇形的起點邊界 //第四個引數是縱向距離 canvas.drawTextOnPath(fan.getName(),path,200,60,mTextPaint); //********把文字畫到扇形上 } mFanPaint.setColor(Color.BLACK); canvas.drawCircle(400,400,150,mFanPaint);//畫中間圓 mTextPaint.setColor(Color.WHITE); canvas.drawText("Start",400-mTextPaint.measureText("Start")/2, 400+mTextPaint.getTextSize()/2,mTextPaint);//畫中間文字 } @Override public void onClick(View v) { if (isStartAnim){ this.clearAnimation(); mRotateAnimation = new RotateAnimation(0,(int)(360*Math.random()),400,400); mRotateAnimation.setDuration(100); mRotateAnimation.setRepeatCount(0);//重複次數 mRotateAnimation.setFillEnabled(true);//動畫執行保留目前的狀態 mRotateAnimation.setFillAfter(true);//動畫執行結束保留目前的狀態 startAnimation(mRotateAnimation); isStartAnim =false; }else{ mRotateAnimation = new RotateAnimation(0,360,400,400); mRotateAnimation.setDuration(1000); mRotateAnimation.setRepeatCount(-1);//重複次數 mRotateAnimation.setInterpolator(new LinearInterpolator());//差速器:勻速執行 startAnimation(mRotateAnimation); isStartAnim = true; } }
}
MainActivity
public class MainActivity extends AppCompatActivity {
FanView mFanView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_car); mFanView = findViewById(R.id.fan_view); int[] colorArray = new int[]{Color.BLUE,Color.RED,Color.GRAY, Color.YELLOW,Color.RED,Color.GREEN}; for (int i = 0; i <6 ; i++) { Fan fan = new Fan(); fan.setStartAngle(i*60); fan.setName("扇形"+i); fan.setColor(colorArray[i]); mFanView.addFan(fan); } }
}
bean類
package com.baidu.yuanpan.bean;
public class Fan {
int startAngle;
String name;
int color;
public Fan() { this.startAngle = startAngle; this.name = name; this.color = color; } public int getStartAngle() { return startAngle; } public void setStartAngle(int startAngle) { this.startAngle = startAngle; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getColor() { return color; } public void setColor(int color) { this.color = color; } @Override public String toString() { return "Fan{" + "startAngle=" + startAngle + ", name='" + name + '\'' + ", color=" + color + '}'; }
}
佈局載入
<android.support.constraint.ConstraintLayout 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.baidu.yuanpan.View.FanView
android:id="@+id/fanView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</android.support.constraint.ConstraintLayout>