轉載請標明出處:http://blog.csdn.NET/lmj623565791/article/details/24529807
今天沒事逛eoe,看見有人求助要做一個下面的效果,我看下面一哥們說要用12張圖片,這尼瑪逆天的麻煩,仔細看了一下感覺自定義控件木有問題,就花點時間寫了一個。
好了,進入正題,繼續我們的自定義View四部曲。
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、在構造中獲取這些屬性:
- /**
- * 第一圈的顏色
- */
- private int mFirstColor;
- /**
- * 第二圈的顏色
- */
- private int mSecondColor;
- /**
- * 圈的寬度
- */
- private int mCircleWidth;
- /**
- * 畫筆
- */
- private Paint mPaint;
- /**
- * 當前進度
- */
- private int mCurrentCount = 3;
- /**
- * 中間的圖片
- */
- private Bitmap mImage;
- /**
- * 每個塊塊間的間隙
- */
- private int mSplitSize;
- /**
- * 個數
- */
- 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); // 設置圓環的寬度
- 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);
- /**
- * 計算內切正方形的位置
- */
- int relRadius = radius - mCircleWidth / 2;// 獲得內圓的半徑
- /**
- * 內切正方形的距離頂部 = mCircleWidth + relRadius - √2 / 2
- */
- mRect.left = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth;
- /**
- * 內切正方形的距離左邊 = 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);
- /**
- * 如果圖片比較小,那麼根據圖片的尺寸放置到正中心
- */
- 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);
- }
- /**
- * 根據參數畫出每個小塊
- *
- * @param canvas
- * @param centre
- * @param radius
- */
- private void drawOval(Canvas canvas, int centre, int radius)
- {
- /**
- * 根據需要畫的個數以及間隙計算每個塊塊所佔的比例*360
- */
- float itemSize = (360 * 1.0f - mCount * mSplitSize) / mCount;
- RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用於定義的圓弧的形狀和大小的界限
- mPaint.setColor(mFirstColor); // 設置圓環的顏色
- for (int i = 0; i < mCount; i++)
- {
- canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根據進度畫圓弧
- }
- mPaint.setColor(mSecondColor); // 設置圓環的顏色
- for (int i = 0; i < mCurrentCount; i++)
- {
- canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根據進度畫圓弧
- }
- }
這裏需要注意下:
畫塊:首先根據塊數量和間隙計算,每個塊所佔的比例。
畫圖:當圖比較大時,直接使用該環內切正方形大小進行約束,當圖片比較小時,在正中心的位置繪製。有些數學運算過程,樓主在草稿上畫了一會,不復雜,大家自己畫畫,我就不貼草稿了。
4、添加觸摸監聽:
- /**
- * 當前數量+1
- */
- public void up()
- {
- mCurrentCount++;
- postInvalidate();
- }
- /**
- * 當前數量-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;
- }
最後,效果圖:
可惜樓主尼瑪是找不到那個音量的圖,不要叫我去摳圖哈,就隨便拿了幾張圖片來試試。
嘿嘿,留個言,頂一個哈~