Android中自定義View實(shí)現(xiàn)圓環(huán)等待及相關(guān)的音量調(diào)節(jié)效果
更新時(shí)間：2016年04月26日 15:25:53 作者：鴻洋_
這篇文章主要介紹了Android中自定義View實(shí)現(xiàn)圓環(huán)等待及相關(guān)的音量調(diào)節(jié)效果,邏輯非常簡(jiǎn)單,或許繪圖方面更加繁瑣XD 需要的朋友可以參考下
圓環(huán)交替、等待效果
效果就這樣，分析了一下，大概有這幾個(gè)屬性，兩個(gè)顏色，一個(gè)速度，一個(gè)圓環(huán)的寬度。
自定View的幾個(gè)步驟：
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;
/**
* 當(dāng)前進(jìn)度
*/
private int mProgress;
/**
* 速度
*/
private int mSpeed;
/**
* 是否應(yīng)該開始下一個(gè)
*/
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);// 默認(rèn)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坐標(biāo)
int radius = centre - mCircleWidth / 2;// 半徑
mPaint.setStrokeWidth(mCircleWidth); // 設(shè)置圓環(huán)的寬度
mPaint.setAntiAlias(true); // 消除鋸齒
mPaint.setStyle(Paint.Style.STROKE); // 設(shè)置空心
RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定義的圓弧的形狀和大小的界限
if (!isNext)
{// 第一顏色的圈完整，第二顏色跑
mPaint.setColor(mFirstColor); // 設(shè)置圓環(huán)的顏色
canvas.drawCircle(centre, centre, radius, mPaint); // 畫出圓環(huán)
mPaint.setColor(mSecondColor); // 設(shè)置圓環(huán)的顏色
canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根據(jù)進(jìn)度畫圓弧
} else
{
mPaint.setColor(mSecondColor); // 設(shè)置圓環(huán)的顏色
canvas.drawCircle(centre, centre, radius, mPaint); // 畫出圓環(huán)
mPaint.setColor(mFirstColor); // 設(shè)置圓環(huán)的顏色
canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根據(jù)進(jìn)度畫圓弧
}
}
大功完成了，當(dāng)然了，唯一比較糾結(jié)的地方就是兩個(gè)顏色何時(shí)切換，如何切換，我采用上面的辦法，你也可以自己想想怎么實(shí)現(xiàn)。
視頻音量調(diào)控
這樣一個(gè)效果使用自定義View來實(shí)現(xiàn)的話和圓環(huán)的思路差不多，所以我們一起來看：
1、先分許需要的屬性，兩個(gè)小塊的顏色、一張中間的圖片、間隙大小、一個(gè)多少個(gè)塊塊。分析完畢，開始寫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;
/**
* 當(dāng)前進(jìn)度
*/
private int mCurrentCount = 3;
/**
* 中間的圖片
*/
private Bitmap mImage;
/**
* 每個(gè)塊塊間的間隙
*/
private int mSplitSize;
/**
* 個(gè)數(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);// 默認(rèn)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); // 設(shè)置圓環(huán)的寬度
mPaint.setStrokeCap(Paint.Cap.ROUND); // 定義線段斷電形狀為圓頭
mPaint.setAntiAlias(true); // 消除鋸齒
mPaint.setStyle(Paint.Style.STROKE); // 設(shè)置空心
int centre = getWidth() / 2; // 獲取圓心的x坐標(biāo)
int radius = centre - mCircleWidth / 2;// 半徑
/**
* 畫塊塊去
*/
drawOval(canvas, centre, radius);
/**
* 計(jì)算內(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ù)畫出每個(gè)小塊
*
* @param canvas
* @param centre
* @param radius
*/
private void drawOval(Canvas canvas, int centre, int radius)
{
/**
* 根據(jù)需要畫的個(gè)數(shù)以及間隙計(jì)算每個(gè)塊塊所占的比例*360
*/
float itemSize = (360 * 1.0f - mCount * mSplitSize) / mCount;
RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定義的圓弧的形狀和大小的界限
mPaint.setColor(mFirstColor); // 設(shè)置圓環(huán)的顏色
for (int i = 0; i < mCount; i++)
{
canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根據(jù)進(jìn)度畫圓弧
}
mPaint.setColor(mSecondColor); // 設(shè)置圓環(huán)的顏色
for (int i = 0; i < mCurrentCount; i++)
{
canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根據(jù)進(jìn)度畫圓弧
}
}
這里需要注意下：
畫塊：首先根據(jù)塊數(shù)量和間隙計(jì)算，每個(gè)塊所占的比例。
畫圖：當(dāng)圖比較大時(shí)，直接使用該環(huán)內(nèi)切正方形大小進(jìn)行約束，當(dāng)圖片比較小時(shí)，在正中心的位置繪制。有些數(shù)學(xué)運(yùn)算過程，樓主在草稿上畫了一會(huì)，不復(fù)雜，大家自己畫畫，我就不貼草稿了。
4、添加觸摸監(jiān)聽：
/**
* 當(dāng)前數(shù)量+1
*/
public void up()
{
mCurrentCount++;
postInvalidate();
}
/**
* 當(dāng)前數(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)聽也得很簡(jiǎn)單哈，基本能實(shí)現(xiàn)，大家也可以加個(gè)最小距離加速度什么的，都行。
最后，效果圖：
您可能感興趣的文章:
- Android實(shí)現(xiàn)長(zhǎng)按圓環(huán)動(dòng)畫View效果的思路代碼
- Android自定義View實(shí)現(xiàn)圓環(huán)進(jìn)度條
- Android自定義View實(shí)現(xiàn)圓環(huán)帶數(shù)字百分比進(jìn)度條
- Android自定義view實(shí)現(xiàn)圓環(huán)效果實(shí)例代碼
- android自定義View實(shí)現(xiàn)圓環(huán)顏色選擇器
- Android自定義view繪制圓環(huán)占比動(dòng)畫
- Android自定義View實(shí)現(xiàn)圓環(huán)交替效果
- Android自定義View之酷炫數(shù)字圓環(huán)
- Android開發(fā)筆記之:在ImageView上繪制圓環(huán)的實(shí)現(xiàn)方法
- Android自定義view實(shí)現(xiàn)半圓環(huán)效果
相關(guān)文章
Android編譯出現(xiàn)Warning:Mapping?new?ns?to?old?ns報(bào)錯(cuò)的解決方案
android在編譯的過程中難免會(huì)出現(xiàn)些錯(cuò)誤,下面這篇文章主要給大家介紹了關(guān)于Android編譯出現(xiàn)Warning:Mapping?new?ns?to?old?ns報(bào)錯(cuò)的解決方案,需要的朋友可以參考下2023-02-02
在開發(fā)過程中經(jīng)常需要使用文本，有時(shí)候需要對(duì)一段文字中的部分文字進(jìn)行特殊的處理，如改變其中部分文字的大小、顏色、加下劃線等。本文將為大家介紹如何實(shí)現(xiàn)這些效果，感興趣的可以學(xué)習(xí)一下2022-01-01
這篇文章主要為大家詳細(xì)介紹了Android自定義半圓形圓盤滾動(dòng)選擇器 ，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
解析Android中string-array數(shù)據(jù)源的簡(jiǎn)單使用
本篇文章是對(duì)Android中string-array數(shù)據(jù)源的使用進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
Android利用Andserver搭建服務(wù)器的詳細(xì)教程
這篇文章主要介紹了Android利用Andserver搭建服務(wù)器的教程，本文通過圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
android使用gesturedetector手勢(shì)識(shí)別示例分享
這篇文章主要介紹了android使用手勢(shì)識(shí)別的方法，介紹了單擊觸摸屏觸發(fā)的事件和雙擊事件的使用等方法，大家參考使用吧2014-01-01
Android數(shù)據(jù)庫greenDAO配置與使用介紹
這篇文章主要介紹了Android集成GreenDao數(shù)據(jù)庫,使用數(shù)據(jù)庫存儲(chǔ)時(shí)候，一般都會(huì)使用一些第三方ORM框架，比如GreenDao，本文分幾步給大家介紹Android集成GreenDao數(shù)據(jù)庫的方法，需要的朋友可以參考下2023-03-03
Android 監(jiān)聽軟鍵盤狀態(tài)的實(shí)例詳解
這篇文章主要介紹了Android 監(jiān)聽軟鍵盤狀態(tài)的實(shí)例詳解的相關(guān)資料,希望通過本文能掌握這樣的知識(shí)，需要的朋友可以參考下2017-09-09
Android 中倒計(jì)時(shí)驗(yàn)證兩種常用方式實(shí)例詳解
這篇文章主要介紹了Android 中倒計(jì)時(shí)驗(yàn)證兩種常用方式實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了Android MeasureSpec的理解和源碼的解析的相關(guān)資料,希望通過本文大家可以掌握理解這部分內(nèi)容，需要的朋友可以參考下2017-09-09