原创作者地址:http://blog.csdn.net/tl792814781/article/details/52388577
前言:
最近做的一个项目,有个界面是 输入框输入数值的,后来产品觉得键盘输入麻烦,就换成了这样子,这是前几天Ui小伙子设计的界面:
分析:
其实简单的画一个测量尺子刻度控件并不会太难,其次就是被5和10整除的刻度线高度加高一些;
在被5和10整除5的位置绘制刻度的值;
绘制不同刻度段定义显示的颜色;
控件边框,这里我可能选择的方式不怎么好(网上找的一个圆角控件),本来想直接用cardview的。
控件中间的指针,这是单独写的一个View,和尺子的view组合成了ViewGroup;
View的滑动,用到的知识点Scroller,View的scrollBy();
手指离开后的惯性滑动:VelocityTracker,这个是获取滑动的速度,配合Scroller.fling()
实现效果:
ScaleView:
1、绘制刻度
刻度可以向上或者向下绘制属性“
isShowUp”控制,刻度的数据可以使整型和浮点型
isIntegar,默认是整型数据
- // 画刻度
- private void onDrawScale(Canvas canvas) {
- float xScale, yScale;
- mPaint.setColor(textColor);
- int max = 0;
- if (isIntegar) {
- max = (int) (maxScale - minScale);
- } else {
- max = new BigDecimal(10).multiply(new BigDecimal(maxScale - minScale)).setScale(0, BigDecimal.ROUND_HALF_UP).intValue();
- }
- for (int i = 0; i <= max; i++) {
- xScale = startX + scaleWidth * i;
- //计算绘制整点数值 10 20 …… 1.0 2.0 ……
- int valueTemp = isIntegar ? (int) (minScale + i) : (int) (minScale * 10) + i;
- if (i == 0 || valueTemp % 10 == 0) {
- yScale = scaleMaxHeight;
- float value = isIntegar ? minScale + i : minScale + (float) i/10;
- if(i==0){
- //当数据 i==0时,第一个数据不一定是整点的1.0(10) 可能是1.1(2,3,4)这样的,
- // 这里如果是1.1-1.5则显示,1.6-1.9不显示,会与2.0挨得太进
- valueTemp = valueTemp%10;
- if(valueTemp == 0)
- yScale = scaleMaxHeight;
- else if(valueTemp == 5){
- yScale = scaleMinHeight + 5;
- }else{
- yScale = scaleMinHeight;
- }
- if(valueTemp >= 0 && valueTemp < 6){
- //这里的文字y值要与其他的水平 因此传 scaleMaxHeight
- drawScaleValue(canvas, value, xScale, scaleMaxHeight);
- }
- }else{
- drawScaleValue(canvas, value, xScale, yScale);
- }
- } else if (valueTemp % 5 == 0) {
- yScale = scaleMinHeight + 5;
- } else {
- yScale = scaleMinHeight;
- }
- //上下刻度线
- if(isShowUp)
- canvas.drawLine(xScale, startY, xScale, yScale, mPaint);
- else
- canvas.drawLine(xScale, viewHigth, xScale, viewHigth - yScale, mPaint);
- }
- }
拖动滑动:
- <pre name="code" class="java"> case MotionEvent.ACTION_DOWN:
- mScrollLastX = x;
- return true;
- case MotionEvent.ACTION_MOVE:
- mCountScale = getScrollX();
- int dataX = mScrollLastX - x;
- scrollBy(dataX, 0);
- //smoothScrollBy(dataX,0);
- mScrollLastX = x;
- invalidate();
- return true;
- //使用mVelocityTracker来计算速度,
- //计算当前速度, 1代表px/毫秒, 1000代表px/秒,
- mVelocityTracker.computeCurrentVelocity(1000, mScaledMaximumFlingVelocity);
- int xVelocity = (int) mVelocityTracker.getXVelocity();
- mVelocityTracker.clear();
- if (Math.abs(xVelocity) > mScaledMinimumFlingVelocity) {
- mScroller.fling(getScrollX(), 0, -xVelocity, 0, minLeft, maxRight, 0, 0);//根据坐标轴正方向问题,这里需要加上-号
- }
整型和浮点型数据右边边距计算有所不同;
可滑动的右边边距最大刻度值减去最小刻度值乘以刻度间隔 + 第一个刻度开始的x坐标 - 控件的一半(这里因为最小的刻度 需要滑动到中间进行选择 )
左边边距类似计算;
2、子布局的位置摆放(指针在尺子的上面)
为了满足UI上的需要,最后拓展了一个上下选择的组合,详情见源码;
- if (isIntegar()) {
- maxRight = (int) ((maxScale - minScale) * scaleWidth + startX - viewWidth / 2);
- } else {
- int max = new BigDecimal(10).multiply(new BigDecimal(maxScale - minScale)).setScale(0, BigDecimal.ROUND_HALF_UP).intValue();
- maxRight = (max * scaleWidth + startX - viewWidth / 2);
- }
- minLeft = 0 - viewWidth / 2 + startX;
PointerView
中间的这个指针view简单介绍下,无非就是几根线和两个小圆点,isShowUp属性可以设置上下指向,默认向下的。
组合在一起的ViewGroup
这个是直接继承的viewGroup;
1、宽高的测量:
斜边的高度(其实就是直角边 /斜边 = sin30°)
- //高度需要加上指针的高度 (height + 一个最大刻度高度 + 斜边的高度)
- height = (int) (height + scaleMaxHeight + DrawUtils.getCoordinateY(30, scaleMaxHeight));
- /**
- * 如果是wrap_content设置为我们计算的值
- * 否则:直接设置为父容器计算的值
- */
- setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? sizeWidth
- : width, (heightMode == MeasureSpec.EXACTLY) ? sizeHeight
- : height);
- @Override
- protected void onLayout(boolean changed, int l, int t, int r, int b) {
- //这里的话第一个childview是尺子 因此只需要设置宽度全屏 高度自适应(尺子)
- int count = getChildCount();
- int marginTop = (int) (scaleMaxHeight + DrawUtils.getCoordinateY(30, scaleMaxHeight));
- for (int i = 0; i < count; i++) {
- View childView = getChildAt(i);
- if (i == 0) { //
- childView.layout(0, marginTop, childView.getMeasuredWidth(), childView.getMeasuredHeight() + marginTop);
- }else if(i == 1){//指针
- int childWidth = childView.getMeasuredWidth();
- int childHeight = childView.getMeasuredHeight();
- childView.layout(getWidth()/2 - childWidth/2,cardViewPandding,getWidth()/2 + childWidth/2,childHeight + cardViewPandding);
- }
- }
- }
xml中使用
单独使用的时候所有属性都可以使用:
- <!--尺子属性-->
- <declare-styleable name="ScaleScrollView">
- <attr name="ScaleValueColor" format="color" />
- <attr name="ScaleTextSize" format="dimension" />
- <attr name="ScaleWidth" format="dimension" />
- <attr name="ScaleMaxHeight" format="dimension" />
- <attr name="MaxScale" format="float" />
- <attr name="MinScale" format="float" />
- <attr name="ScaleShowUp" format="boolean" />
- <attr name="isIntegar" format="boolean" />
- </declare-styleable>
- <com.totcy.scalescrollview.HorizontalScaleScrollView
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- xmlns:scale="http://schemas.android.com/apk/res-auto"
- scale:ScaleTextSize= "14sp"
- scale:MinScale= "20"
- scale:MaxScale= "200"
- >
- </com.totcy.scalescrollview.HorizontalScaleScrollView>
- <com.totcy.scalescrollview.HorizontalScaleScrollView
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- xmlns:scale="http://schemas.android.com/apk/res-auto"
- scale:ScaleTextSize= "14sp"
- scale:MinScale= "1.1"
- scale:MaxScale= "33.3"
- scale:isIntegar= "false"
- />
代码中使用
- //整型数据测试
- hsScale.setScrollListener(this);
- //hsScale.setMinAndMaxScale(10,500);
- //浮点型测试
- hsScale2.setScrollListener(this);
- //hsScale2.setIsIntegarl(false);
- // hsScale2.setMinAndMaxScale(1.1f,33.3f);
- //上下组合测试
- mulScale.setScrollListener(this);
- mulScale.setTopMinAndMaxScale(30,299);
- mulScale.setBottomMinAndMaxScale(30,299);
- }
- @Override
- public void onScaleScroll(float scale) {
- tv_scale2.setText("进度:" + scale);
- }
总结
文中介绍的不是很全面,这个控件很多地方也写的不够好,对于自定义ViewGroup和View的滑动还在继续学习充能中,有需要的童鞋可以下载源码看看,里面有更好的实现方式也可以评论。THX ^-^!!!