横向TimePicker-带三角指示器
插件比较复杂,先描述下功能。1.可横向滚动
2.数值可自定义。
3.要求有三角指示器,指向当前焦点
4.点击后焦点改变,并且三角指示器可滑动变化
5.焦点滚动至最左或最右时不消失(这里使用新的view获取焦点view的值悬浮显示,滚动条中的view已经还是滚动消失了)
上效果图,上面使用ImageView作为子View,下面使用TextView作为子View。
http://pic002.cnblogs.com/images/2012/437620/2012092011203864.gif
布局说明:
1.底部滚动条TimeBar继承自HorizontalScrollView,在onDraw()中添加三角指示器(三角滑块)绘制代码,使指示器随焦点滑动。
@Override public void onDraw(Canvas canvas) { super.onDraw(canvas); //Log.d("Validated!", "Should not always validate"); if (mSelectedView != null){ int step = getWidth()/30; canvas.drawColor(Color.BLACK); paint = new Paint(); paint.setAntiAlias(true); paint.setColor(Color.LTGRAY); paint.setStyle(Paint.Style.FILL); if (curTriangle == null){ curTriangle = new Triangle( mSelectedView.getLeft() + mSelectedView.getWidth()/2 - 10, mSelectedView.getTop() - 4, mSelectedView.getLeft() + mSelectedView.getWidth()/2 + 10, mSelectedView.getTop() + 13.3f ); } if (tarTriangle == null){ tarTriangle = new Triangle( mSelectedView.getLeft() + mSelectedView.getWidth()/2 - 10, mSelectedView.getTop() - 4, mSelectedView.getLeft() + mSelectedView.getWidth()/2 + 10, mSelectedView.getTop() + 13.3f ); } if (Math.abs(curTriangle.left - tarTriangle.left) < step) { curTriangle.left = tarTriangle.left; curTriangle.right = tarTriangle.right; curTriangle.reDraw(); } if (curTriangle.left > tarTriangle.left){ curTriangle.left -= step; curTriangle.right -= step; curTriangle.reDraw(); invalidate(); } else if (curTriangle.left < tarTriangle.left) { curTriangle.left += step; curTriangle.right += step; curTriangle.reDraw(); invalidate(); } canvas.drawPath(curTriangle.getPath(), paint); } } }
页:
[1]