项目中用到自定义尺子的样式：
原代码在github上找的，地址：https://github.com/QQabby/HorizontalRuler
原效果为
因为跟自己要使用的view稍有不同 所以做了一些修改，修改的注释都放在代码中了，特此记录一下。
首先是一个自定义View：
1 public class RuleView extends View {
2
3 private Paint paint;
4
5 private Context context;
6
7 private int maxValue = 500;
8 /**
9 * 起点x的坐标
10 */
11 private float startX ;
12
13 private float startY ;
14 /**
15 * 刻度线的长度
16 */
17 private float yLenght ;
18 /**
19 * 刻度的间隙
20 */
21 // private float gap = 8f;
22 private float gap = 10;
23 /**
24 * 文本的间隙
25 */
26 private float textGap = 10f;
27 /**
28 * 短竖线的高度
29 */
30 private float smallHeight = 10f;
31 /**
32 * 长竖线的高度
33 */
34 private float largeHeight = 22f;
35
36 /**
37 * 文本显示格式化
38 */
39 private DecimalFormat format;
40
41 private DisplayMetrics metrics = null;
42 /**
43 * 文本的字体大小
44 */
45 private float mFontSize;
46
47 private Handler mScrollHandler = null;
48
49 private MyHorizontalScrollView horizontalScrollView;
50
51 private int mCurrentX = -999999999;
52 /**
53 * 刻度进制
54 */
55 // private float unit = 10f;
56 private int unit = 10;//隔unit个刻度写一个数字
57 //每个大刻度代表值iValue
58 private int iValue = 10;
59
60 boolean isDraw = true;
61
62 public RuleView(Context context) {
63 super(context);
64 this.context = context;
65 init();
66 }
67
68 public void setHorizontalScrollView(
69 MyHorizontalScrollView horizontalScrollView) {
70 this.horizontalScrollView = horizontalScrollView;
71
72 this.horizontalScrollView.setOnTouchListener(new OnTouchListener() {
73
74 @Override
75 public boolean onTouch(View v, MotionEvent event) {
76
77 final int action = event.getAction();
78 switch (action) {
79 case MotionEvent.ACTION_DOWN:
80
81 break;
82 case MotionEvent.ACTION_MOVE:
83
84 mScrollHandler.removeCallbacks(mScrollRunnable);
85 break;
86 case MotionEvent.ACTION_UP:
87
88 mScrollHandler.post(mScrollRunnable);
89 break;
90 }
91 return false;
92 }
93 });
94 }
95
96 public RuleView(Context context, AttributeSet attrs) {
97 super(context, attrs);
98 this.context = context;
99
100 init();
101 }
102
103 public void init() {
104
105 // format = new DecimalFormat("0.0");
106 format = new DecimalFormat("0");//不使用浮点数格式
107
108 metrics = new DisplayMetrics();
109 WindowManager wmg = (WindowManager) context
110 .getSystemService(Context.WINDOW_SERVICE);
111 wmg.getDefaultDisplay().getMetrics(metrics);
112
113 paint = new Paint(Paint.ANTI_ALIAS_FLAG);
114 paint.setStyle(Paint.Style.FILL);
115 paint.setStrokeWidth(getResources().getDimension(R.dimen.ui_1_dip));
116 // paint.setStrokeWidth(2);
117 paint.setColor(Color.parseColor("#999999"));
118
119 mFontSize = ScreenUtil.dip2px(context, 16);
120 // startY = ScreenUtil.dip2px(context, 20f);
121 startY = ScreenUtil.dip2px(context, 0);//Y轴由0开始，即最顶端，不用设置适配布局文件RuleView的android:layout_marginTop="-20dp"
122 yLenght = ScreenUtil.dip2px(context, 10);
123 // gap = ScreenUtil.dip2px(context, 8f);
124 gap = ScreenUtil.dip2px(context, 10);
125 // startX = ScreenUtil.getScreenWidth(context)/ 2.0f- getResources().getDimension(R.dimen.ui_10_dip) ;
126 startX = ScreenUtil.getScreenWidth(context)/ 2.0f;//X轴不减去10dp，则三角形顶点可以刚好最准0位置
127
128 // + getResources().getDimension(R.dimen.text_h2)/2.0f
129 // Util.dip2px(context, 13f) +
130
131 mScrollHandler = new Handler(context.getMainLooper());
132
133 }
134
135 @Override
136 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
137
138 float width = maxValue * gap + ScreenUtil.getScreenWidth(context) - getResources().getDimension(R.dimen.ui_10_dip)*2.0f ;
139
140 // int widthMode = MeasureSpec.getMode(heightMeasureSpec);
141 // if(widthMode == MeasureSpec.AT_MOST){
142 // Log.d("TAG", "mode::AT_MOST");
143 // }else if(widthMode == MeasureSpec.EXACTLY){
144 // Log.d("TAG", "mode::EXACTLY");
145 // }else if(widthMode == MeasureSpec.UNSPECIFIED){
146 // Log.d("TAG", "mode::UNSPECIFIED");
147 // }
148
149 setMeasuredDimension((int) width, heightMeasureSpec);
150 }
151
152 @Override
153 protected void onDraw(final Canvas canvas) {
154 super.onDraw(canvas);
155
156 // 画刻度线
157 paint.setColor(getResources().getColor(R.color.gray_bg_high));// 刻度颜色
158 for (int i = 0; i <= maxValue; i++) {
159
160 if (i % 5 == 0) {
161 yLenght = ScreenUtil.dip2px(context, largeHeight);
162 } else {
163 yLenght = ScreenUtil.dip2px(context, smallHeight);
164 }
165 canvas.drawLine(i * gap + startX, startY, i * gap + startX, yLenght
166 + startY, paint);
167 }
168
169 paint.setTextSize(mFontSize);
170
171 // 每10个刻度写一个数字
172 textGap = gap * unit;
173
174 // 画刻度文字30
175 paint.setColor(getResources().getColor(R.color.textGray));// 文字颜色
176 for (int i = 0; i <= maxValue / unit; i++) {
177
178 // String text = format.format(i + 1) + "";//从0开始计数时不用加1
179 String text = format.format(i * iValue) + "";//乘以每刻度的值iValue
180 // 获取文本的宽度
181 float width = ScreenUtil.px2dip(context, calculateTextWidth(text)) / 2f;
182
183 canvas.drawText(
184 text,
185 startX - width + i * textGap,
186 (startY + ScreenUtil.dip2px(context, largeHeight))
187 + ScreenUtil.dip2px(context, 24), paint);//字体大小
188 }
189 }
190
191 /**
192 * 获取TextView中文本的宽度
193 */
194 private float calculateTextWidth(String text) {
195 if (TextUtils.isEmpty(text)) {
196 return 0;
197 }
198 TextPaint textPaint = new TextPaint();
199 textPaint.setTextSize(mFontSize * metrics.scaledDensity);
200 final float textWidth = textPaint.measureText(text);
201
202 return textWidth;
203 }
204
205 DecimalFormat df = new DecimalFormat("0.0");
206
207 /**
208 * 当滑动尺子的时候
209 */
210 int scrollWidth = 0;
211
212 public void setScrollerChanaged(int l, int t, int oldl, int oldt) {
213 // 滑动的距离
214 scrollWidth = l;
215
216 float number = scrollWidth / gap;
217 float result = number / unit;
218
219 listener.onSlide(result);
220 }
221
222 public onChangedListener listener;
223
224 public interface onChangedListener {
225
226 void onSlide(float number);
227 }
228
229 public void onChangedListener(onChangedListener listener) {
230 this.listener = listener;
231 }
232
233 /**
234 * 滚动监听线程
235 */
236 private Runnable mScrollRunnable = new Runnable() {
237
238 @Override
239 public void run() {
240 if (mCurrentX == horizontalScrollView.getScrollX()) {// 滚动停止了
241
242 try {
243
244 float x = horizontalScrollView.getScrollX();
245 float value = (x / (gap * unit));// 当前的值
246 String s = df.format(value);
247
248 // 滑动到11.0 ok
249 int scrollX = (int) (Double.parseDouble(s) * gap * unit);
250
251 horizontalScrollView.smoothScrollTo(scrollX, 0);
252
253 } catch (NumberFormatException numExp) {
254 numExp.printStackTrace();
255 }
256 mScrollHandler.removeCallbacks(this);
257 } else {
258 mCurrentX = horizontalScrollView.getScrollX();
259 mScrollHandler.postDelayed(this, 50);
260 }
261 }
262 };
263
264 /**
265 * 设置默认刻度尺的刻度值,不会滚动到相应的位置
266 *
267 * @param scaleValue
268 */
269 public void setDefaultScaleValue(float scaleValue) {
270
271 // final int scrollX = (int) ((scaleValue - 1.0f) * gap * unit);//从0开始计数时不用减去1
272 final int scrollX = (int) (scaleValue * gap * unit / 10);//每个值在设置刻度时会乘以10，所以除去
273
274 new Handler().postDelayed(new Runnable() {
275
276 @Override
277 public void run() {
278
279 horizontalScrollView.smoothScrollTo(scrollX, 0);
280 }
281 }, 100);
282 }
283
284 /**
285 * 设置刻度值
286 */
287 public void setScaleValue(int iValue) {
288 this.iValue = iValue;
289 }
290
291 /**
292 * 设置刻度最小值
293 */
294 public void setMinScaleValue(Float minScaleValue) {
295 // this.minScaleValue = minScaleValue;
296 }
297
298 /**
299 * 获取刻度最大值
300 */
301 public Float getMaxScaleValue() {
302 // return maxScaleValue;
303 return 33.0f;
304 }
305
306 /**
307 * 设置刻度最大值
308 */
309 public void setMaxScaleValue(Float maxScaleValue) {
310 // this.maxScaleValue = maxScaleValue;
311 }
312
313 /**
314 * 设置当前刻度尺的刻度值,并滚动到相应的位置
315 *
316 * @param scaleValue
317 */
318 public void setScaleScroll(float scaleValue) {
319
320 int scrollX = (int) ((scaleValue - 1.0f) * gap * unit);
321
322 horizontalScrollView.smoothScrollTo(scrollX, 0);
323 }
324 }
另外用到一个自定义的scrollView：
1 public class MyHorizontalScrollView extends HorizontalScrollView {
2
3 private OnScrollListener onScrollListener = null;
4
5 public MyHorizontalScrollView(Context context) {
6 this(context, null);
7 }
8 public MyHorizontalScrollView(Context context, AttributeSet attrs) {
9 this(context, attrs, 0);
10 }
11 public MyHorizontalScrollView(Context context, AttributeSet attrs,
12 int defStyleAttr) {
13 super(context, attrs, defStyleAttr);
14 }
15
16 @Override
17 protected void onScrollChanged(int l, int t, int oldl, int oldt) {
18 super.onScrollChanged(l, t, oldl, oldt);
19 if(onScrollListener != null){
20 onScrollListener.onScrollChanged(l, t, oldl, oldt);
21 }
22 }
23
24 public interface OnScrollListener {
25 public void onScrollChanged(int l, int t, int oldl, int oldt);
26 }
27
28 public void setOnScrollListener(OnScrollListener onScrollListener) {
29 this.onScrollListener = onScrollListener;
30 }
31 }
直尺上的黄色三角标其实是嵌在布局上的，在drawble文件中实现
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/shape_id">
<!--<!– 正三角 –>-->
<!--<rotate-->
<!--android:fromDegrees="45"-->
<!--android:toDegrees="45"-->
<!--android:pivotX="-40%"-->
<!--android:pivotY="80%">-->
<!-- 倒三角 -->
<rotate
android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="135%"
android:pivotY="15%"
>
<shape android:shape="rectangle">
<solid android:color="@color/main_yellow"/>
</shape>
</rotate>
</item>
</layer-list>
下面是布局文件,注意RuleView是嵌在ScrollView中的：
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="300px"
android:layout_marginTop="30px"
android:background="#fff">
<MyHorizontalScrollView
android:id="@+id/hor_scrollview"
android:layout_width="match_parent"
android:layout_height="300px"
android:scrollbars="none" >
<RuleView
android:id="@+id/rule_view"
android:background="@color/main_white"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"/>
</MyHorizontalScrollView>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/gray_bg"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
<View
android:layout_width="30px"
android:layout_height="30px"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:background="@drawable/shape_triangle" />
</RelativeLayout>
最后在界面中的使用：
ruleView = (RuleView) findViewById(R.id.rule_view);
horizontalScrollView = (MyHorizontalScrollView) findViewById(R.id.hor_scrollview);
horizontalScrollView.setOverScrollMode(View.OVER_SCROLL_NEVER);// 去掉超出滑动后出现的阴影效果
// 设置水平滑动
ruleView.setHorizontalScrollView(horizontalScrollView);
ruleView.setDefaultScaleValue(num);
// 当滑动尺子的时候
horizontalScrollView.setOnScrollListener(new MyHorizontalScrollView.OnScrollListener() {
@Override
public void onScrollChanged(int l, int t, int oldl, int oldt) {
ruleView.setScrollerChanaged(l, t, oldl, oldt);
}
});
ruleView.onChangedListener(new RuleView.onChangedListener() {
@Override
public void onSlide(float number) {
int num = (int) (number * 10);
tvNum.setText(num+"");
}
});
来源：https://www.cnblogs.com/Sharley/p/9229907.html