Android自定義view之太極圖的實現教程
阿新 • • 發佈:2021-01-06
太極圖
週四課餘時間比較多,正好前幾天為了給小學弟解決問題,回顧了一些Android的知識,(上學還是不能把以前上班學到的東西丟掉)於是寫一篇關於自定義view的文章。
最後完成的樣子(可旋轉)
這篇文章主要內容為使用Canvas畫簡單圖案,自定義屬性,以及屬性動畫ObjectAnimator中的旋轉動畫
提示:以下是本篇文章正文內容
一、先畫一個太極
先介紹一下定義的東西:
private int useWidth; //最後測量得到的值 private int leftcolor; //左太極的顏色(黑) private int rightcolor;//右太極的顏色(白)
1.第一步,畫一個半邊黑半邊白的圓
mPaint.setColor(leftcolor); canvas.drawArc(new RectF(0,useWidth,useWidth),270,-180,true,mPaint); mPaint.setColor(rightcolor); canvas.drawArc(new RectF(0,180,mPaint);
效果:
2.第二步,畫黑白兩個小圓
mPaint.setColor(leftcolor); canvas.drawArc(new RectF(useWidth / 4,useWidth / 2 +useWidth / 4,useWidth / 2),360,mPaint); mPaint.setColor(rightcolor); canvas.drawArc(new RectF(useWidth / 4,useWidth / 2,useWidth / 2 + useWidth / 4,mPaint);
效果:
3.第三步,畫黑白兩個更小的圓
mPaint.setColor(leftcolor); canvas.drawCircle(useWidth/ 2,useWidth * 3 / 4,useWidth/16,mPaint); mPaint.setColor(rightcolor); canvas.drawCircle(useWidth / 2,useWidth / 4,mPaint);
效果
二、讓太極旋轉
先簡單介紹一下定義的東西
private ObjectAnimator objectAnimator;//屬性動畫 private int animaltime;//動畫的旋轉時間(速度)
1.旋轉的開始方法
//旋轉動畫開始的方法 public void createAnimation() { if (objectAnimator==null){ objectAnimator = ObjectAnimator.ofFloat(this,"rotation",0f,360f);//新增旋轉動畫,旋轉中心預設為控制元件中點 objectAnimator.setDuration(animaltime);//設定動畫時間 objectAnimator.setInterpolator(new LinearInterpolator());//動畫時間線性漸變 objectAnimator.setRepeatCount(ObjectAnimator.INFINITE); objectAnimator.setRepeatMode(ObjectAnimator.RESTART); objectAnimator.start();//動畫開始 }else{ objectAnimator.resume();//動畫繼續開始 } }
2.旋轉的暫停方法(可繼續旋轉)
public void stopAnimation(){ if (objectAnimator!=null){ objectAnimator.pause();//動畫暫停 .end()結束動畫 } }
3.旋轉的停止方法(不可繼續旋轉)
public void cleanAnimation(){ if (objectAnimator!=null){ objectAnimator.end(); //結束動畫 } }
三、自定義屬性(顏色,動畫速度)
1.新建attrs檔案
2.定義屬性
<declare-styleable name="TaiJiView"> <attr name="leftcolor" format="reference|color"/> <attr name="rightcolor" format="reference|color"/> <attr name="animaltime" format="integer"/> </declare-styleable>
3.佈局中使用
app:leftcolor="@color/colorAccent" app:rightcolor="@color/colorPrimaryDark" app:animaltime="3000"
4.java檔案中獲取在佈局中定義的值
/** 獲取自定義屬性 */ private void initCustomAttrs(Context context,AttributeSet attrs) { //獲取自定義屬性。 TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.TaiJiView); //獲取太極顏色 leftcolor = ta.getColor(R.styleable.TaiJiView_leftcolor,Color.BLACK); rightcolor=ta.getColor(R.styleable.TaiJiView_rightcolor,Color.WHITE); //時間 animaltime=ta.getInt(R.styleable.TaiJiView_animaltime,1000); //回收 ta.recycle(); }
最後執行一下看一下效果
四、原始碼
1.TaiJiView.java
public class TaiJiView extends View{ private Paint mPaint; private int mWidth; private int mHeight; private int useWidth; private int leftcolor; private int rightcolor; private ObjectAnimator objectAnimator; private int animaltime; @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) public TaiJiView(Context context) { this(context,null); } @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) public TaiJiView(Context context,@Nullable AttributeSet attrs) { this(context,attrs,0); } @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) public TaiJiView(Context context,@Nullable AttributeSet attrs,int defStyleAttr) { this(context,defStyleAttr,0); initCustomAttrs(context,attrs); } @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) public TaiJiView(Context context,int defStyleAttr,int defStyleRes) { super(context,defStyleRes); init(); } private void init() { initPaint(); } /** 獲取自定義屬性 */ private void initCustomAttrs(Context context,Color.WHITE); animaltime=ta.getInt(R.styleable.TaiJiView_animaltime,1000); //回收 ta.recycle(); } /** * 初始化畫筆 */ private void initPaint() { mPaint = new Paint(); //建立畫筆物件 mPaint.setColor(Color.BLACK); //設定畫筆顏色 mPaint.setStyle(Paint.Style.FILL); //設定畫筆模式為填充 mPaint.setStrokeWidth(10f); //設定畫筆寬度為10px mPaint.setAntiAlias(true); //設定抗鋸齒 mPaint.setAlpha(255); //設定畫筆透明度 } @Override protected void onSizeChanged(int w,int h,int oldw,int oldh) { super.onSizeChanged(w,h,oldw,oldh); mWidth = w; mHeight = h; useWidth=mWidth; if (mWidth>mHeight){ useWidth=mHeight; } } @RequiresApi(api = Build.VERSION_CODES.KITKAT) @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mPaint.setColor(leftcolor); canvas.drawArc(new RectF(0,mPaint); mPaint.setColor(leftcolor); canvas.drawArc(new RectF(useWidth / 4,mPaint); mPaint.setColor(leftcolor); canvas.drawCircle(useWidth/ 2,mPaint); } @RequiresApi(api = Build.VERSION_CODES.KITKAT) public void createAnimation() { if (objectAnimator==null){ objectAnimator = ObjectAnimator.ofFloat(this,360f);//新增旋轉動畫,旋轉中心預設為控制元件中點 objectAnimator.setDuration(animaltime);//設定動畫時間 objectAnimator.setInterpolator(new LinearInterpolator());//動畫時間線性漸變 objectAnimator.setRepeatCount(ObjectAnimator.INFINITE); objectAnimator.setRepeatMode(ObjectAnimator.RESTART); objectAnimator.start();//動畫開始 }else{ objectAnimator.resume();//動畫繼續開始 } } @RequiresApi(api = Build.VERSION_CODES.KITKAT) public void stopAnimation(){ if (objectAnimator!=null){ objectAnimator.pause();//動畫暫停 .end()結束動畫 } } public void cleanAnimation(){ if (objectAnimator!=null){ objectAnimator.end(); //結束動畫 } } }
2.attrs檔案
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="TaiJiView"> <attr name="leftcolor" format="reference|color"/> <attr name="rightcolor" format="reference|color"/> <attr name="animaltime" format="integer"/> </declare-styleable> </resources>
總結
希望能夠對您有所幫助。如有疑問可留言。歡迎各位前輩點評
到此這篇關於Android自定義view之太極圖的文章就介紹到這了,更多相關Android自定義view之太極圖內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!