Android中自定義View實現(xiàn)圓環(huán)等待及相關(guān)的音量調(diào)節(jié)效果
更新時間：2016年04月26日 15:25:53 作者：鴻洋_
這篇文章主要介紹了Android中自定義View實現(xiàn)圓環(huán)等待及相關(guān)的音量調(diào)節(jié)效果,邏輯非常簡單,或許繪圖方面更加繁瑣XD 需要的朋友可以參考下
圓環(huán)交替、等待效果
效果就這樣，分析了一下，大概有這幾個屬性，兩個顏色，一個速度，一個圓環(huán)的寬度。
自定View的幾個步驟：
1、自定義View的屬性
2、在View的構(gòu)造方法中獲得我們自定義的屬性
3、重寫onMesure
4、重寫onDraw
1、自定義屬性：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="firstColor" format="color" />
<attr name="secondColor" format="color" />
<attr name="circleWidth" format="dimension" />
<attr name="speed" format="integer" />
<declare-styleable name="CustomProgressBar">
<attr name="firstColor" />
<attr name="secondColor" />
<attr name="circleWidth" />
<attr name="speed" />
</declare-styleable>
</resources>
2、在View的構(gòu)造方法中獲得我們自定義的屬性
/**
* 第一圈的顏色
*/
private int mFirstColor;
/**
* 第二圈的顏色
*/
private int mSecondColor;
/**
* 圈的寬度
*/
private int mCircleWidth;
/**
* 畫筆
*/
private Paint mPaint;
/**
* 當前進度
*/
private int mProgress;
/**
* 速度
*/
private int mSpeed;
/**
* 是否應該開始下一個
*/
private boolean isNext = false;
public CustomProgressBar(Context context, AttributeSet attrs)
{
this(context, attrs, 0);
}
public CustomProgressBar(Context context)
{
this(context, null);
}
/**
* 必要的初始化，獲得一些自定義的值
*
* @param context
* @param attrs
* @param defStyle
*/
public CustomProgressBar(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomProgressBar, defStyle, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++)
{
int attr = a.getIndex(i);
switch (attr)
{
case R.styleable.CustomProgressBar_firstColor:
mFirstColor = a.getColor(attr, Color.GREEN);
break;
case R.styleable.CustomProgressBar_secondColor:
mSecondColor = a.getColor(attr, Color.RED);
break;
case R.styleable.CustomProgressBar_circleWidth:
mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomProgressBar_speed:
mSpeed = a.getInt(attr, 20);// 默認20
break;
}
}
a.recycle();
mPaint = new Paint();
// 繪圖線程
new Thread()
{
public void run()
{
while (true)
{
mProgress++;
if (mProgress == 360)
{
mProgress = 0;
if (!isNext)
isNext = true;
else
isNext = false;
}
postInvalidate();
try
{
Thread.sleep(mSpeed);
} catch (InterruptedException e)
{
e.printStackTrace();
}
}
};
}.start();
}
3、直接重寫onDraw，這不需要重寫onMeasure
@Override
protected void onDraw(Canvas canvas)
{
int centre = getWidth() / 2; // 獲取圓心的x坐標
int radius = centre - mCircleWidth / 2;// 半徑
mPaint.setStrokeWidth(mCircleWidth); // 設置圓環(huán)的寬度
mPaint.setAntiAlias(true); // 消除鋸齒
mPaint.setStyle(Paint.Style.STROKE); // 設置空心
RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定義的圓弧的形狀和大小的界限
if (!isNext)
{// 第一顏色的圈完整，第二顏色跑
mPaint.setColor(mFirstColor); // 設置圓環(huán)的顏色
canvas.drawCircle(centre, centre, radius, mPaint); // 畫出圓環(huán)
mPaint.setColor(mSecondColor); // 設置圓環(huán)的顏色
canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根據(jù)進度畫圓弧
} else
{
mPaint.setColor(mSecondColor); // 設置圓環(huán)的顏色
canvas.drawCircle(centre, centre, radius, mPaint); // 畫出圓環(huán)
mPaint.setColor(mFirstColor); // 設置圓環(huán)的顏色
canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根據(jù)進度畫圓弧
}
}
大功完成了，當然了，唯一比較糾結(jié)的地方就是兩個顏色何時切換，如何切換，我采用上面的辦法，你也可以自己想想怎么實現(xiàn)。
視頻音量調(diào)控
這樣一個效果使用自定義View來實現(xiàn)的話和圓環(huán)的思路差不多，所以我們一起來看：
1、先分許需要的屬性，兩個小塊的顏色、一張中間的圖片、間隙大小、一個多少個塊塊。分析完畢，開始寫attr.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="firstColor" format="color" />
<attr name="secondColor" format="color" />
<attr name="circleWidth" format="dimension" />
<attr name="dotCount" format="integer" />
<attr name="splitSize" format="integer" />
<attr name="bg" format="reference"></attr>
<declare-styleable name="CustomVolumControlBar">
<attr name="firstColor" />
<attr name="secondColor" />
<attr name="circleWidth" />
<attr name="dotCount" />
<attr name="splitSize" />
<attr name="bg" />
</declare-styleable>
</resources>
2、在構(gòu)造中獲取這些屬性：
/**
* 第一圈的顏色
*/
private int mFirstColor;
/**
* 第二圈的顏色
*/
private int mSecondColor;
/**
* 圈的寬度
*/
private int mCircleWidth;
/**
* 畫筆
*/
private Paint mPaint;
/**
* 當前進度
*/
private int mCurrentCount = 3;
/**
* 中間的圖片
*/
private Bitmap mImage;
/**
* 每個塊塊間的間隙
*/
private int mSplitSize;
/**
* 個數(shù)
*/
private int mCount;
private Rect mRect;
public CustomVolumControlBar(Context context, AttributeSet attrs)
{
this(context, attrs, 0);
}
public CustomVolumControlBar(Context context)
{
this(context, null);
}
/**
* 必要的初始化，獲得一些自定義的值
*
* @param context
* @param attrs
* @param defStyle
*/
public CustomVolumControlBar(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomVolumControlBar, defStyle, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++)
{
int attr = a.getIndex(i);
switch (attr)
{
case R.styleable.CustomVolumControlBar_firstColor:
mFirstColor = a.getColor(attr, Color.GREEN);
break;
case R.styleable.CustomVolumControlBar_secondColor:
mSecondColor = a.getColor(attr, Color.CYAN);
break;
case R.styleable.CustomVolumControlBar_bg:
mImage = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));
break;
case R.styleable.CustomVolumControlBar_circleWidth:
mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomVolumControlBar_dotCount:
mCount = a.getInt(attr, 20);// 默認20
break;
case R.styleable.CustomVolumControlBar_splitSize:
mSplitSize = a.getInt(attr, 20);
break;
}
}
a.recycle();
mPaint = new Paint();
mRect = new Rect();
}
3、重寫onDraw
@Override
protected void onDraw(Canvas canvas)
{
mPaint.setAntiAlias(true); // 消除鋸齒
mPaint.setStrokeWidth(mCircleWidth); // 設置圓環(huán)的寬度
mPaint.setStrokeCap(Paint.Cap.ROUND); // 定義線段斷電形狀為圓頭
mPaint.setAntiAlias(true); // 消除鋸齒
mPaint.setStyle(Paint.Style.STROKE); // 設置空心
int centre = getWidth() / 2; // 獲取圓心的x坐標
int radius = centre - mCircleWidth / 2;// 半徑
/**
* 畫塊塊去
*/
drawOval(canvas, centre, radius);
/**
* 計算內(nèi)切正方形的位置
*/
int relRadius = radius - mCircleWidth / 2;// 獲得內(nèi)圓的半徑
/**
* 內(nèi)切正方形的距離頂部 = mCircleWidth + relRadius - √2 / 2
*/
mRect.left = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth;
/**
* 內(nèi)切正方形的距離左邊 = mCircleWidth + relRadius - √2 / 2
*/
mRect.top = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth;
mRect.bottom = (int) (mRect.left + Math.sqrt(2) * relRadius);
mRect.right = (int) (mRect.left + Math.sqrt(2) * relRadius);
/**
* 如果圖片比較小，那么根據(jù)圖片的尺寸放置到正中心
*/
if (mImage.getWidth() < Math.sqrt(2) * relRadius)
{
mRect.left = (int) (mRect.left + Math.sqrt(2) * relRadius * 1.0f / 2 - mImage.getWidth() * 1.0f / 2);
mRect.top = (int) (mRect.top + Math.sqrt(2) * relRadius * 1.0f / 2 - mImage.getHeight() * 1.0f / 2);
mRect.right = (int) (mRect.left + mImage.getWidth());
mRect.bottom = (int) (mRect.top + mImage.getHeight());
}
// 繪圖
canvas.drawBitmap(mImage, null, mRect, mPaint);
}
/**
* 根據(jù)參數(shù)畫出每個小塊
*
* @param canvas
* @param centre
* @param radius
*/
private void drawOval(Canvas canvas, int centre, int radius)
{
/**
* 根據(jù)需要畫的個數(shù)以及間隙計算每個塊塊所占的比例*360
*/
float itemSize = (360 * 1.0f - mCount * mSplitSize) / mCount;
RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定義的圓弧的形狀和大小的界限
mPaint.setColor(mFirstColor); // 設置圓環(huán)的顏色
for (int i = 0; i < mCount; i++)
{
canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根據(jù)進度畫圓弧
}
mPaint.setColor(mSecondColor); // 設置圓環(huán)的顏色
for (int i = 0; i < mCurrentCount; i++)
{
canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根據(jù)進度畫圓弧
}
}
這里需要注意下：
畫塊：首先根據(jù)塊數(shù)量和間隙計算，每個塊所占的比例。
畫圖：當圖比較大時，直接使用該環(huán)內(nèi)切正方形大小進行約束，當圖片比較小時，在正中心的位置繪制。有些數(shù)學運算過程，樓主在草稿上畫了一會，不復雜，大家自己畫畫，我就不貼草稿了。
4、添加觸摸監(jiān)聽：
/**
* 當前數(shù)量+1
*/
public void up()
{
mCurrentCount++;
postInvalidate();
}
/**
* 當前數(shù)量-1
*/
public void down()
{
mCurrentCount--;
postInvalidate();
}
private int xDown, xUp;
@Override
public boolean onTouchEvent(MotionEvent event)
{
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
xDown = (int) event.getY();
break;
case MotionEvent.ACTION_UP:
xUp = (int) event.getY();
if (xUp > xDown)// 下滑
{
down();
} else
{
up();
}
break;
}
return true;
}
觸摸監(jiān)聽也得很簡單哈，基本能實現(xiàn)，大家也可以加個最小距離加速度什么的，都行。
最后，效果圖：
您可能感興趣的文章:
- Android實現(xiàn)長按圓環(huán)動畫View效果的思路代碼
- Android自定義View實現(xiàn)圓環(huán)進度條
- Android自定義View實現(xiàn)圓環(huán)帶數(shù)字百分比進度條
- Android自定義view實現(xiàn)圓環(huán)效果實例代碼
- android自定義View實現(xiàn)圓環(huán)顏色選擇器
- Android自定義view繪制圓環(huán)占比動畫
- Android自定義View實現(xiàn)圓環(huán)交替效果
- Android自定義View之酷炫數(shù)字圓環(huán)
- Android開發(fā)筆記之:在ImageView上繪制圓環(huán)的實現(xiàn)方法
- Android自定義view實現(xiàn)半圓環(huán)效果
相關(guān)文章
Android編譯出現(xiàn)Warning:Mapping?new?ns?to?old?ns報錯的解決方案
android在編譯的過程中難免會出現(xiàn)些錯誤,下面這篇文章主要給大家介紹了關(guān)于Android編譯出現(xiàn)Warning:Mapping?new?ns?to?old?ns報錯的解決方案,需要的朋友可以參考下2023-02-02
在開發(fā)過程中經(jīng)常需要使用文本，有時候需要對一段文字中的部分文字進行特殊的處理，如改變其中部分文字的大小、顏色、加下劃線等。本文將為大家介紹如何實現(xiàn)這些效果，感興趣的可以學習一下2022-01-01
這篇文章主要為大家詳細介紹了Android自定義半圓形圓盤滾動選擇器 ，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
解析Android中string-array數(shù)據(jù)源的簡單使用
本篇文章是對Android中string-array數(shù)據(jù)源的使用進行了詳細的分析介紹，需要的朋友參考下2013-06-06
這篇文章主要介紹了Android利用Andserver搭建服務器的教程，本文通過圖文實例代碼相結(jié)合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
android使用gesturedetector手勢識別示例分享
這篇文章主要介紹了android使用手勢識別的方法，介紹了單擊觸摸屏觸發(fā)的事件和雙擊事件的使用等方法，大家參考使用吧2014-01-01
Android數(shù)據(jù)庫greenDAO配置與使用介紹
這篇文章主要介紹了Android集成GreenDao數(shù)據(jù)庫,使用數(shù)據(jù)庫存儲時候，一般都會使用一些第三方ORM框架，比如GreenDao，本文分幾步給大家介紹Android集成GreenDao數(shù)據(jù)庫的方法，需要的朋友可以參考下2023-03-03
Android 監(jiān)聽軟鍵盤狀態(tài)的實例詳解
這篇文章主要介紹了Android 監(jiān)聽軟鍵盤狀態(tài)的實例詳解的相關(guān)資料,希望通過本文能掌握這樣的知識，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了Android 中倒計時驗證兩種常用方式實例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了Android MeasureSpec的理解和源碼的解析的相關(guān)資料,希望通過本文大家可以掌握理解這部分內(nèi)容，需要的朋友可以參考下2017-09-09