Android 自定义View (四) 视频音量调控
来源:互联网 发布:电信光猫网络不稳定 编辑:程序博客网 时间:2024/06/05 16:03
转载请标明出处: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);
- }
-
-
-
-
-
-
-
-
- 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);
- 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;
- int radius = centre - mCircleWidth / 2;
-
-
-
- drawOval(canvas, centre, radius);
-
-
-
-
- int relRadius = radius - mCircleWidth / 2;
-
-
-
- mRect.left = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth;
-
-
-
- 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);
- }
-
-
-
-
-
-
-
-
- private void drawOval(Canvas canvas, int centre, int radius)
- {
-
-
-
- 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、添加触摸监听:
-
-
-
- public void up()
- {
- mCurrentCount++;
- postInvalidate();
- }
-
-
-
-
- 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;
- }
触摸监听也得很简单哈,基本能实现,大家也可以加个最小距离加速度什么的,都行。
最后,效果图:
可惜楼主尼玛是找不到那个音量的图,不要叫我去抠图哈,就随便拿了几张图片来试试。
源码点击此处下载
嘿嘿,留个言,顶一个哈~
0 0