自定义控件8---视频音量调控
来源:互联网 发布:景德镇餐具套装淘宝 编辑:程序博客网 时间:2024/05/13 10:38
先来看效果图:
先来分析下这个控件:
1 外围是个圆环,圆环中间有空隙,每个圆环的长度一样,圆环的边缘是圆的
2 圆环中间一张图片或者一个颜色的填充
思考问题:
1 既然是自定义控件,那么圆弧一定是画出来的,怎么画?
2 知道怎么画圆弧了,那么如何确定画多少个圆弧?
3 第一个方式,设置圆弧的个数和长度,以此来确定间隙长度;第二个方式,设置间隙的长度和圆弧的个数,以此来确定圆弧的长度。当然,圆弧和间隙的个数是一致的。
4 中间的图片或者颜色怎么处理?
5 如果图片过大,要进行压缩,如果图片过小,那么居中显示。如果是颜色,那么要测量中间的矩形大小,然后覆盖颜色。
6 圆弧的边缘,圆的,怎么处理?猜测,画笔应该会有一个属性来做控制。
好了,分析完毕,还是老步骤:
第一步,自定义属性
需要哪些属性呢:1 两种圆弧的颜色 2 圆弧的宽度 3圆弧或者间隙的个数 4间隙的长度 5背景图或者颜色
<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|color"/> <declare-styleable name="CustomVolumControlBar"> <attr name="firstColor" /> <attr name="secondColor" /> <attr name="circleWidth" /> <attr name="dotCount" /> <attr name="splitSize" /> <attr name="bg" /> </declare-styleable>
第二步,获取自定义属性
/** * 第一圈的颜色 */ private int mFirstColor; /** * 第二圈的颜色 */ private int mSecondColor; /** * 圈的宽度 */ private int mCircleWidth; /** * 画笔 */ private Paint mPaint; /** * 当前进度 */ private int mCurrentCount = 3; /** * 每个块块间的间隙 */ private int mSplitSize; /** * 个数 */ private int mCount; /** * 矩形,用于绘制确定中心图片或者颜色的边界 */ private Rect mRect; /** * 中间的图片 */ private Bitmap mImage; /** * 中间的颜色 */ private int mColor; 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: if (a.hasValue(R.styleable.CustomVolumControlBar_bg)) { mImage=null; //有图片则获取图片 mImage = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0)); if(mImage==null){ //无图片则获取颜色 mColor=a.getColor(attr, Color.RED); } } break; case R.styleable.CustomVolumControlBar_circleWidth: mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, 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(); }
第三步,重写onDraw()
@Override protected void onDraw(Canvas canvas) { //基础设置 mPaint.setAntiAlias(true); // 消除锯齿 mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度 mPaint.setStrokeCap(Paint.Cap.ROUND); // 定义线段断电形状为圆头 mPaint.setStyle(Paint.Style.STROKE); // 设置空心 int centre = getWidth() / 2; // 获取圆心的x坐标 int radius = centre - mCircleWidth/2 ;// 内圆半径 /** * 画块块去 */ drawOval(canvas, centre, radius); /** * 计算内切正方形的位置 */ int relRadius = radius - mCircleWidth / 2;// 获得内圆的半径 mRect.left = (int) (centre - relRadius / Math.sqrt(2)) + 1; mRect.top = (int) (centre - relRadius / Math.sqrt(2)) + 1; mRect.bottom = (int) (centre + relRadius / Math.sqrt(2)); mRect.right = (int) (centre + relRadius / Math.sqrt(2)); if(mImage==null){ //填充颜色 mPaint.setColor(mColor); mPaint.setStyle(Paint.Style.FILL); canvas.drawRect(mRect, mPaint); }else{ /** * 如果图片比较小,那么根据图片的尺寸放置到正中心 */ if (mImage.getWidth() / 2 < relRadius / Math.sqrt(2)) { mRect.left = (int) (centre - mImage.getWidth() / 2); mRect.top = (int) (centre - mImage.getWidth() / 2); mRect.right = (int) (centre + mImage.getWidth() / 2); mRect.bottom = (int) (centre + mImage.getWidth() / 2); } // 绘图 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); // 根据进度画圆弧,这个是第二层圆弧,是显示进度的,覆盖在第一层圆弧上面 } }
为了方便大家理解,看下图:
看了这张图,相信大家能够明白中间的矩形是怎么得来的了。
可能有人会问,mRect.left和mRect.top后面为什么要+1?
因为,这个矩形是包含左上角而不包含右下角的,加1是为了左上角不和圆弧有重合。
第四步,添加触摸监听
/** * 当前数量+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; }
源码下载
引用:
Android 自定义View (四) 视频音量调控 - Hongyang - 博客频道 - CSDN.NET
0 0
- 自定义控件8---视频音量调控
- Android 自定义View (四) 视频音量调控
- Android 自定义View (四) 视频音量调控
- Android 自定义View (四) 视频音量调控
- Android 自定义View (四) 视频音量调控
- Android 自定义View (四) 视频音量调控
- Android 自定义View (四) 视频音量调控
- Android 自定义View (四) 视频音量调控
- 自定义view(视频音量调控)
- Android 自定义View (四) 视频音量调控
- Android 自定义View (四) 视频音量调控
- Android 自定义View (四) 视频音量调控
- Android 自定义View (四) 视频音量调控
- Android 自定义View (四) 视频音量调控
- Android 自定义View (四) 视频音量调控
- Android 自定义View (四) 视频音量调控
- Android 自定义View 视频音量调控
- Android 自定义View (四) 视频音量调控
- C# 多文件重命名思路及实现 上:步骤
- linux固件以及与驱动的区别
- 移动的button和移动的label
- ubuntu14.04安装jdk
- Android不继承ViewPager实现自动滚动翻页功能
- 自定义控件8---视频音量调控
- jdbc 连接mysql乱码问题
- java设计模式-观察者模式
- 学习反射时的一些感受和心得
- jQuery源码分析之jQuery(selector,context)详解
- 《数据挖掘导论》学习
- 2.Benchmark SQL 数据库测试工具代码——关于表类
- java线程(生产者/消费者)
- SVN(for Mac)工具Versions过期解决办法