Android自定義view之太極圖的實現(xiàn)教程
更新時間：2021年01月05日 10:54:59 作者：計蒙不吃魚
這篇文章主要給大家介紹了關(guān)于Android自定義view之太極圖的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
太極圖
周四課余時間比較多，正好前幾天為了給小學(xué)弟解決問題，回顧了一些Android的知識，（上學(xué)還是不能把以前上班學(xué)到的東西丟掉）于是寫一篇關(guān)于自定義view的文章。
最后完成的樣子（可旋轉(zhuǎn)）
這篇文章主要內(nèi)容為使用Canvas畫簡單圖案，自定義屬性，以及屬性動畫ObjectAnimator中的旋轉(zhuǎn)動畫
提示：以下是本篇文章正文內(nèi)容
一、先畫一個太極
先介紹一下定義的東西：
private int useWidth; //最后測量得到的值 private int leftcolor; //左太極的顏色（黑） private int rightcolor;//右太極的顏色（白）
1.第一步,畫一個半邊黑半邊白的圓
mPaint.setColor(leftcolor);
canvas.drawArc(new RectF(0, 0, useWidth, useWidth), 270, -180, true, mPaint);
mPaint.setColor(rightcolor);
canvas.drawArc(new RectF(0, 0, useWidth, useWidth), 270, 180, true, mPaint);
效果：
2.第二步，畫黑白兩個小圓
mPaint.setColor(leftcolor);
canvas.drawArc(new RectF(useWidth / 4, 0, useWidth / 2 +useWidth / 4, useWidth / 2),
270, 360, true, mPaint);
mPaint.setColor(rightcolor);
canvas.drawArc(new RectF(useWidth / 4, useWidth / 2, useWidth / 2 + useWidth / 4,useWidth),
270, 360, true, mPaint);
效果：
3.第三步，畫黑白兩個更小的圓
mPaint.setColor(leftcolor);
canvas.drawCircle(useWidth/ 2, useWidth * 3 / 4, useWidth/16, mPaint);
mPaint.setColor(rightcolor);
canvas.drawCircle(useWidth / 2, useWidth / 4, useWidth/16, mPaint);
效果
二、讓太極旋轉(zhuǎn)
先簡單介紹一下定義的東西
private ObjectAnimator objectAnimator;//屬性動畫 private int animaltime;//動畫的旋轉(zhuǎn)時間（速度）
1.旋轉(zhuǎn)的開始方法
//旋轉(zhuǎn)動畫開始的方法
public void createAnimation() {
if (objectAnimator==null){
objectAnimator = ObjectAnimator.ofFloat(this, "rotation", 0f, 360f);//添加旋轉(zhuǎn)動畫，旋轉(zhuǎn)中心默認(rèn)為控件中點(diǎn)
objectAnimator.setDuration(animaltime);//設(shè)置動畫時間
objectAnimator.setInterpolator(new LinearInterpolator());//動畫時間線性漸變
objectAnimator.setRepeatCount(ObjectAnimator.INFINITE);
objectAnimator.setRepeatMode(ObjectAnimator.RESTART);
objectAnimator.start();//動畫開始
}else{
objectAnimator.resume();//動畫繼續(xù)開始
}
}
2.旋轉(zhuǎn)的暫停方法（可繼續(xù)旋轉(zhuǎn)）
public void stopAnimation(){
if (objectAnimator!=null){
objectAnimator.pause();//動畫暫停 .end()結(jié)束動畫
}
}
3.旋轉(zhuǎn)的停止方法（不可繼續(xù)旋轉(zhuǎn)）
public void cleanAnimation(){
if (objectAnimator!=null){
objectAnimator.end(); //結(jié)束動畫
}
}
三、自定義屬性（顏色，動畫速度）
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();
}
最后運(yùn)行一下看一下效果
四、源碼
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, attrs, defStyleAttr,0);
initCustomAttrs(context,attrs);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public TaiJiView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init() {
initPaint();
}
/**
獲取自定義屬性
*/
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();
}
/**
* 初始化畫筆
*/
private void initPaint() {
mPaint = new Paint(); //創(chuàng)建畫筆對象
mPaint.setColor(Color.BLACK); //設(shè)置畫筆顏色
mPaint.setStyle(Paint.Style.FILL); //設(shè)置畫筆模式為填充
mPaint.setStrokeWidth(10f); //設(shè)置畫筆寬度為10px
mPaint.setAntiAlias(true); //設(shè)置抗鋸齒
mPaint.setAlpha(255); //設(shè)置畫筆透明度
}
@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, 0, useWidth, useWidth), 270, -180, true, mPaint);
mPaint.setColor(rightcolor);
canvas.drawArc(new RectF(0, 0, useWidth, useWidth), 270, 180, true, mPaint);
mPaint.setColor(leftcolor);
canvas.drawArc(new RectF(useWidth / 4, 0, useWidth / 2 +useWidth / 4, useWidth / 2),
270, 360, true, mPaint);
mPaint.setColor(rightcolor);
canvas.drawArc(new RectF(useWidth / 4, useWidth / 2, useWidth / 2 + useWidth / 4,useWidth),
270, 360, true, mPaint);
mPaint.setColor(leftcolor);
canvas.drawCircle(useWidth/ 2, useWidth * 3 / 4, useWidth/16, mPaint);
mPaint.setColor(rightcolor);
canvas.drawCircle(useWidth / 2, useWidth / 4, useWidth/16, mPaint);
}
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
public void createAnimation() {
if (objectAnimator==null){
objectAnimator = ObjectAnimator.ofFloat(this, "rotation", 0f, 360f);//添加旋轉(zhuǎn)動畫，旋轉(zhuǎn)中心默認(rèn)為控件中點(diǎn)
objectAnimator.setDuration(animaltime);//設(shè)置動畫時間
objectAnimator.setInterpolator(new LinearInterpolator());//動畫時間線性漸變
objectAnimator.setRepeatCount(ObjectAnimator.INFINITE);
objectAnimator.setRepeatMode(ObjectAnimator.RESTART);
objectAnimator.start();//動畫開始
}else{
objectAnimator.resume();//動畫繼續(xù)開始
}
}
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
public void stopAnimation(){
if (objectAnimator!=null){
objectAnimator.pause();//動畫暫停 .end()結(jié)束動畫
}
}
public void cleanAnimation(){
if (objectAnimator!=null){
objectAnimator.end(); //結(jié)束動畫
}
}
}
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>
總結(jié)
希望能夠?qū)δ兴鶐椭?。如有疑問可留言。歡迎各位前輩點(diǎn)評
到此這篇關(guān)于Android自定義view之太極圖的文章就介紹到這了,更多相關(guān)Android自定義view之太極圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- canvas雪花效果核心代碼分享
- Canvas實現(xiàn)動態(tài)的雪花效果
- jquery實現(xiàn)漫天雪花飛舞的圣誕祝福雪花效果代碼分享
- android自定義view實現(xiàn)圓周運(yùn)動
- Android自定義view實現(xiàn)輸入框效果
- Android自定義View實現(xiàn)雪花特效
- Android自定義View實現(xiàn)分段選擇按鈕的實現(xiàn)代碼
- Android自定義View圓形圖片控件代碼詳解
- Android自定義View實現(xiàn)跟隨手指移動的小兔子
- Android自定義view實現(xiàn)倒計時控件
- Android如何用自定義View實現(xiàn)雪花效果
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Android自定義View實現(xiàn)驗證碼的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
Android實現(xiàn)App中導(dǎo)航Tab欄懸浮的功能
相信大家在玩手機(jī)的過程中應(yīng)該會注意到很多的app都有這種功能，比如說外賣達(dá)人常用的“餓了么”。所以這篇文章給大家分享了Android如何實現(xiàn)app中的導(dǎo)航Tab欄懸浮的功能，有需要的朋友們可以參考借鑒。2016-10-10
這篇文章主要介紹了Android 打開相冊選擇單張圖片實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-05-05
在android中實現(xiàn)類似uc和墨跡天氣的左右拖動效果
本文主要介紹下怎樣在android實現(xiàn)uc和墨跡天氣那樣的左右拖動效果，具體代碼如下，感興趣的朋友可以參考下哈2013-06-06
Android筆記之:App應(yīng)用之發(fā)布各廣告平臺版本的詳解
Android的廣告平臺是很多的，各市場對各平臺的接受程度是不一樣的，Android的開發(fā)者如果想集成廣告基本要考慮下面兩個問題2013-04-04
Android實現(xiàn)千變?nèi)f化的ViewPager切換動畫
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)千變?nèi)f化的ViewPager切換動畫，自定義PageTransformer實現(xiàn)個性的切換動畫，感興趣的小伙伴們可以參考一下2016-05-05
Android RecyclerView的卡頓問題的解決方法
本篇文章主要介紹了Android RecyclerView的卡頓問題的解決方法，具有一定的參考價值，有興趣的可以了解一下。2017-04-04
Android App調(diào)試內(nèi)存泄露之Cursor篇
最近在工作中處理了一些內(nèi)存泄露的問題，在這個過程中我尤其發(fā)現(xiàn)了一些基本的問題反而忽略導(dǎo)致內(nèi)存泄露2012-11-11
android LabelView實現(xiàn)標(biāo)簽云效果
這篇文章主要為大家詳細(xì)介紹了android LabelView實現(xiàn)標(biāo)簽云效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要介紹了Android開發(fā)-之五大布局詳解,現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11