上一篇番外篇讲了一个炒鸡炒鸡简单的自定义ProgressBar,这一篇基于上一篇的基础扩展为SeekBar,没看过上一篇的,请先看一遍:传送门
先上效果图(2G内存的机子运行模拟器,所以有点卡):
这个效果之前不知道在哪里看到过,我也忘了。
下面进入正题:
测量大小和绘制部分沿用上一篇ProgressBar的,不清楚的请走上面的传送门。
对比上一篇的扩展:
(1)SeekBar能通过触摸改变刻度
(2)SeekBar上方添加一个显示当前刻度的浮动View(后面用FloatView表示)
(1)通过触摸改变刻度:
这个很容易实现,只要处理触摸事件,然后根据触摸坐标修改刻度并请求重绘就行了。
需要注意的一点就是要处理好临界状态,不然可能出现刻度为负值或者最大只能为99的情况。
因为这个很简单,就不再说了,代码会在等一下跟FloatView的实现一起贴出来,因为FloatView也需要触摸事件。
(2)浮动View的实现:
之前在网上看到这个效果时就在思考怎么实现。
刚开始时我想的是通过监听触摸事件,可以计算出FloatView的位置,然后在onDraw把它给画出来。
但是还没开始写我就发现问题了,就是这样的话FloatView就作为SeekBar的一部分,并且它的位置位于SeekBar的范围之外,这样的话FloatView是显示不出来的。
既然有问题,那么就思考解决的办法,我想到三个方法:
(1)动态改变SeekBar的高度,让FloatView可以显示出来。但会引发另一个问题,相邻的View会被挤压,所以该方法不可行。
(2)我记得ViewGroup有个属性可以让子view超过自身的显示范围,我可以在代码中类似这样设置:
((ViewGroup) getParent()).setClipChildren(true);
(3)不在onDraw里画,用WindowManager来添加FloatView:
Bingo,就是这个了。用这个方法FloatView不属于SeekBar,甚至不属于这个页面,可以说是属于这个屏幕的,所以不会对页面内的任何View造成影响。更妙的是我们可以显示任何的View,不像在onDraw方法里能画的东西有限(其实在onDraw方法里也是可以画其它的View的,不过处理起来比较麻烦)。
其实我们常用的PopupWindow和现在很多应用都有的桌面悬浮窗都是这种方法。
好了,下面开始讲这种方法的实现,不清楚如何用WindowManager添加FloatView的参考我另一篇博文:传送门
(1)创建一个FloatView:
// 创建FloatView floatView = new TextView(getContext()); floatView.setGravity(Gravity.CENTER); floatView.setBackgroundResource(R.drawable.shape_circle_blue); floatView.setTextColor(0XFFFFFFFF); floatViewWidth = (int) dp2px(40); floatViewHeight = floatViewWidth;
(2)初始化FloatView的LayoutParams:
// FloatView添加到Window的参数初始化 floatLP = new LayoutParams(); floatLP.width = floatViewWidth; floatLP.height = floatViewHeight; floatLP.gravity = Gravity.LEFT | Gravity.TOP; floatLP.format = PixelFormat.RGBA_8888; floatLP.windowAnimations = R.style.pppanim;
<style name="pppanim"> <item name="android:windowEnterAnimation">@anim/ppp</item> <item name="android:windowExitAnimation">@anim/pppout</item> </style>
具体的动画可以自己随便定义,Enter代表添加时的动画,Exit代表移除。
(3)开始显示FloatView:
FloatView的显示跟触摸事件挂钩。我们应该在Down事件时往Window中添加FloatView,Move事件时更新FloatView的位置和显示的刻度,在Up事件时从Window中移除FloatView。
注意:往Window中添加两次相同的View和试图移除未添加进Window的View都会产生异常。
@Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: // 获得状态栏高度 statusHeight = getStatusHeight(mContext); // 修改刻度 fontRectF.right = event.getX(); changeProgress(); // 修改FloatView显示文字 floatView.setText(mProgress + ""); // 修改FloatView的X和Y坐标 // X坐标=当前触摸的X-FloatView的宽度/2+该ProgressBar的左边坐标 floatLP.x = (int) event.getRawX() - floatViewWidth / 2; // Y坐标=相对屏幕触摸X坐标-前面根据屏幕密度计算出来的垂直间隔-状态栏高度-FloatView的高度 floatLP.y = (int) event.getRawY() - mFloatVerticalSpacing - statusHeight - floatViewHeight; // 将FloatView添加进Window wm.addView(floatView, floatLP); break; case MotionEvent.ACTION_MOVE: float newX = event.getX(); // 临界处理 if (newX < 0) { newX = 0; } else if (newX > mWidth) { newX = mWidth; } // 修改刻度 fontRectF.right = newX; changeProgress(); // 修改FloatView显示文字 floatView.setText(mProgress + ""); // 修改FloatView的X坐标 // 临界处理,只有在触摸在Bar范围内才去更新 if (event.getRawX() >= getLeft() && event.getRawX() <= getRight()) { floatLP.x = (int) event.getRawX() - floatViewWidth / 2; // 更新FloatView在window中的位置 wm.updateViewLayout(floatView, floatLP); } break; case MotionEvent.ACTION_CANCEL: case MotionEvent.ACTION_UP: // 从window中移除FloatView // 在2.3版本模拟器中报IllegalArgumentException,尚未查明原因 wm.removeView(floatView); break; } // 我们想处理触摸事件,所以这里要返回true,对触摸事件不清楚的,找我另一篇博文 return true; }
具体看注释吧,我写得很详细。这里比较复杂的是计算FloatView的位置和临界处理。
这里要注意getX()和getRawX()的区别:
getX()是相对于这个SeekBar的坐标,getRawX()是相对于屏幕的坐标。
所以当我们计算刻度时,应该用getX()。而计算FloatView的位置时,我们的FloatView是添加进屏幕的而不是添加到SeekBar的,应该使用getRawX(),基本上用WindowManager添加View时,大多数情况下都应该用getRawX()。
发现也没什么好解释的,不懂的话下载Demo自己再研究研究,有点基础的建议直接自己试下实现,原理也很简单。
当然这个控件还有很多地方可以优化,比如:很多属性可以写成通过外部动态设置的,像画笔颜色,FloatView的外观,FloatView的动画,FloatView的垂直间隔。还有2.3模拟器在移除FloatView时不知道为什么报错了,又找不到真机测试,有知道原因的跪求评论指点。
原文地址:http://blog.csdn.net/aqswde35025/article/details/43018639