作者:半邪书生66_516 | 来源:互联网 | 2023-06-03 12:49
Android自定义控件——音量控制器一直有写博客分享技术的打算,但是由于时间关系一直没能开始。今天终于有点空闲时间,所以写了一篇关于自定义控件的应用来练练手。好了,废话不多说,直接进
Android自定义控件——音量控制器
一直有写博客分享技术的打算,但是由于时间关系一直没能开始。今天终于有点空闲时间,所以写了一篇关于自定义控件的应用来练练手。好了,废话不多说,直接进入主题。我看到小米手机上的音量控制是下面第一张图这个造型的,网上也有很多案例,我自己也尝试实现过。不过今天我们要实现的音量控制类型并不是这样,而是经典的小喇叭样式——第二幅图的样式。(做的很丑,将就看看O(∩_∩)O~)
音量增加时,圆弧的数量会增多;同样,音量减少的时候,圆弧的数量会减少。我们可以使用自定义控件来实现这个效果。实现原理很简单,好了,废话不多说,直接上代码。
首先这是一个自定义的控件 所以我们要自定义一个类继承View。
public class VolumeView extends View{
private int currentVolume=2;
private int maxVolume =4;
private Bitmap loudspeaker;
private Paint mPaint;
private float strokehljs-number">5
;
public VolumeView(Context context) {
this(context,
null);
}
public VolumeView(Context context, AttributeSet attrs) {
this(context, attrs,
0);
}
public VolumeView(Context context, AttributeSet attrs,
int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
initView方法是对图像和画笔的一些初始化。
private void initView() {
//绘制喇叭图案
loudspeaker = BitmapFactory.decodeResource(getResources(), R.drawable.loudspeakers)
mPaint = new Paint()
mPaint.setAntiAlias(true)
mPaint.setStrokeWidth(strokeWidth)
mPaint.setStrokeCap(Paint.Cap.ROUND)
mPaint.setStyle(Paint.Style.STROKE)
mPaint.setColor(Color.BLACK)
}
接下来,就是最主要的一步——onDraw方法来绘制图形了。
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(loudspeaker, getWidth()/2-loudspeaker.getWidth()/2, getHeight()/2-loudspeaker.getHeight()/2, mPaint);
float centre = getWidth()/2;
float radius =30f;
RectF rect ;
for(int i=0;i radius = radius+i*12;
rect=new RectF(centre-radius, centre-radius,centre+radius, centre+radius);
canvas.drawArc(rect, -45, 90, false, mPaint);
}
}
我们首先将小喇叭的图案绘制到组件的中间位置,因为要画弧线,所以先定义弧线的圆心和半径。然后根据当前的音量大小来循环设置弧线的大小。初始的音量默认为2,所以一开始会绘制2条弧线。
最后,我们可以添加触控事件,比如手指上滑代表增加音量,下滑代表降低音量。
/**
* 减少当先音量
*/
public void decreaseVolume()
{
currentVolume++;
currentVolume=currentVolume>maxVolume?maxVolume:currentVolume;
currentVolume=currentVolume>0?currentVolume:0;
postInvalidate();
}
/**
* 增加当先音量
*/
public void increaseVolume()
{
currentVolume--;
currentVolume=currentVolume>maxVolume?maxVolume:currentVolume;
currentVolume=currentVolume>0?currentVolume:0;
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)
{
increaseVolume();
} else
{
decreaseVolume();
}
break;
}
return true;
}
这里有一个细节要注意。就是要判断当前音量是不是在有效范围内。当前音量应该大于0小于最大音量。下面这两句就是用来控制当前音量的:
currentVolume=currentVolume>maxVolume?maxVolume:currentVolume;
currentVolume=currentVolume>0?currentVolume:0;
好了,最后一步就是在布局文件中使用了!
"http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_hljs-string">"match_parent"
android:layout_hljs-string">"match_parent"
tools:cOntext="com.example.volumview.MainActivity" >
<com.example.volumview.VolumeView
android:background="@drawable/load_bg"
android:layout_hljs-string">"250dp"
android:layout_hljs-string">"250dp"
android:layout_centerInParent="true"
/>
大功告成!由于时间仓促,所以代码还有许多可以修改与完善的地方。比如当前音量、最大音量还有一些其他属性都应该写成自定义属性。如果大家有兴趣,可以将源码下载下来自行修改!
好了,今天的就到这了!下次会给大家带来第一张图中小米手机音量控制器的实现!本人新手菜鸟一枚!各位喜欢的话,可以留个言 顶一下!
**
源码下载
**