fei菲菲 发表于 2012-10-24 22:52:21

横向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]
查看完整版本: 横向TimePicker-带三角指示器