文章詳情頁

android尺子的自定義view——RulerView詳解

瀏覽：98日期：2022-09-25 16:54:45

項目中用到自定義尺子的樣式：

原代碼在github上找的，地址：https://github.com/QQabby/HorizontalRuler

原效果為

android尺子的自定義view——RulerView詳解

因為跟自己要使用的view稍有不同所以做了一些修改，修改的注釋都放在代碼中了，特此記錄一下。

首先是一個自定義View：

public class RuleView extends View { private Paint paint; private Context context; private int maxValue = 500; /** * 起點x的坐標 */ private float startX ; private float startY ; /** * 刻度線的長度 */ private float yLenght ; /** * 刻度的間隙 */// private float gap = 8f; private float gap = 10; /** * 文本的間隙 */ private float textGap = 10f; /** * 短豎線的高度 */ private float smallHeight = 10f; /** * 長豎線的高度 */ private float largeHeight = 22f; /** * 文本顯示格式化 */ private DecimalFormat format; private DisplayMetrics metrics = null; /** * 文本的字體大小 */ private float mFontSize; private Handler mScrollHandler = null; private MyHorizontalScrollView horizontalScrollView; private int mCurrentX = -999999999; /** * 刻度進制 */// private float unit = 10f; private int unit = 10;//隔unit個刻度寫一個數字 //每個大刻度代表值iValue private int iValue = 10; boolean isDraw = true; public RuleView(Context context) { super(context); this.context = context; init(); } public void setHorizontalScrollView( MyHorizontalScrollView horizontalScrollView) { this.horizontalScrollView = horizontalScrollView; this.horizontalScrollView.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) {final int action = event.getAction();switch (action) {case MotionEvent.ACTION_DOWN: break;case MotionEvent.ACTION_MOVE: mScrollHandler.removeCallbacks(mScrollRunnable); break;case MotionEvent.ACTION_UP: mScrollHandler.post(mScrollRunnable); break;}return false; } }); } public RuleView(Context context, AttributeSet attrs) { super(context, attrs); this.context = context; init(); } public void init() {// format = new DecimalFormat('0.0'); format = new DecimalFormat('0');//不使用浮點數格式 metrics = new DisplayMetrics(); WindowManager wmg = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); wmg.getDefaultDisplay().getMetrics(metrics); paint = new Paint(Paint.ANTI_ALIAS_FLAG); paint.setStyle(Paint.Style.FILL); paint.setStrokeWidth(getResources().getDimension(R.dimen.ui_1_dip));// paint.setStrokeWidth(2); paint.setColor(Color.parseColor('#999999')); mFontSize = ScreenUtil.dip2px(context, 16);// startY = ScreenUtil.dip2px(context, 20f); startY = ScreenUtil.dip2px(context, 0);//Y軸由0開始，即最頂端，不用設置適配布局文件RuleView的android:layout_marginTop='-20dp' yLenght = ScreenUtil.dip2px(context, 10);// gap = ScreenUtil.dip2px(context, 8f); gap = ScreenUtil.dip2px(context, 10);// startX = ScreenUtil.getScreenWidth(context)/ 2.0f- getResources().getDimension(R.dimen.ui_10_dip) ; startX = ScreenUtil.getScreenWidth(context)/ 2.0f;//X軸不減去10dp，則三角形頂點可以剛好最準0位置 // + getResources().getDimension(R.dimen.text_h2)/2.0f // Util.dip2px(context, 13f) + mScrollHandler = new Handler(context.getMainLooper()); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { float width = maxValue * gap + ScreenUtil.getScreenWidth(context) - getResources().getDimension(R.dimen.ui_10_dip)*2.0f ; // int widthMode = MeasureSpec.getMode(heightMeasureSpec); // if(widthMode == MeasureSpec.AT_MOST){ // Log.d('TAG', 'mode::AT_MOST'); // }else if(widthMode == MeasureSpec.EXACTLY){ // Log.d('TAG', 'mode::EXACTLY'); // }else if(widthMode == MeasureSpec.UNSPECIFIED){ // Log.d('TAG', 'mode::UNSPECIFIED'); // } setMeasuredDimension((int) width, heightMeasureSpec); } @Override protected void onDraw(final Canvas canvas) { super.onDraw(canvas); // 畫刻度線 paint.setColor(getResources().getColor(R.color.gray_bg_high));// 刻度顏色 for (int i = 0; i <= maxValue; i++) { if (i % 5 == 0) {yLenght = ScreenUtil.dip2px(context, largeHeight); } else {yLenght = ScreenUtil.dip2px(context, smallHeight); } canvas.drawLine(i * gap + startX, startY, i * gap + startX, yLenght + startY, paint); } paint.setTextSize(mFontSize); // 每10個刻度寫一個數字 textGap = gap * unit; // 畫刻度文字30 paint.setColor(getResources().getColor(R.color.textGray));// 文字顏色 for (int i = 0; i <= maxValue / unit; i++) {// String text = format.format(i + 1) + '';//從0開始計數時不用加1 String text = format.format(i * iValue) + '';//乘以每刻度的值iValue // 獲取文本的寬度 float width = ScreenUtil.px2dip(context, calculateTextWidth(text)) / 2f; canvas.drawText( text, startX - width + i * textGap, (startY + ScreenUtil.dip2px(context, largeHeight)) + ScreenUtil.dip2px(context, 24), paint);//字體大小 } } /** * 獲取TextView中文本的寬度 */ private float calculateTextWidth(String text) { if (TextUtils.isEmpty(text)) { return 0; } TextPaint textPaint = new TextPaint(); textPaint.setTextSize(mFontSize * metrics.scaledDensity); final float textWidth = textPaint.measureText(text); return textWidth; } DecimalFormat df = new DecimalFormat('0.0'); /** * 當滑動尺子的時候 */ int scrollWidth = 0; public void setScrollerChanaged(int l, int t, int oldl, int oldt) { // 滑動的距離 scrollWidth = l; float number = scrollWidth / gap; float result = number / unit; listener.onSlide(result); } public onChangedListener listener; public interface onChangedListener { void onSlide(float number); } public void onChangedListener(onChangedListener listener) { this.listener = listener; } /** * 滾動監聽線程 */ private Runnable mScrollRunnable = new Runnable() { @Override public void run() { if (mCurrentX == horizontalScrollView.getScrollX()) {// 滾動停止了try { float x = horizontalScrollView.getScrollX(); float value = (x / (gap * unit));// 當前的值 String s = df.format(value); // 滑動到11.0 ok int scrollX = (int) (Double.parseDouble(s) * gap * unit); horizontalScrollView.smoothScrollTo(scrollX, 0);} catch (NumberFormatException numExp) { numExp.printStackTrace();}mScrollHandler.removeCallbacks(this); } else {mCurrentX = horizontalScrollView.getScrollX();mScrollHandler.postDelayed(this, 50); } } }; /** * 設置默認刻度尺的刻度值,不會滾動到相應的位置 * * @param scaleValue */ public void setDefaultScaleValue(float scaleValue) {// final int scrollX = (int) ((scaleValue - 1.0f) * gap * unit);//從0開始計數時不用減去1 final int scrollX = (int) (scaleValue * gap * unit / 10);//每個值在設置刻度時會乘以10，所以除去 new Handler().postDelayed(new Runnable() { @Override public void run() {horizontalScrollView.smoothScrollTo(scrollX, 0); } }, 100); } /** * 設置刻度值 */ public void setScaleValue(int iValue) { this.iValue = iValue; } /** * 設置刻度最小值 */ public void setMinScaleValue(Float minScaleValue) { // this.minScaleValue = minScaleValue; } /** * 獲取刻度最大值 */ public Float getMaxScaleValue() { // return maxScaleValue; return 33.0f; } /** * 設置刻度最大值 */ public void setMaxScaleValue(Float maxScaleValue) { // this.maxScaleValue = maxScaleValue; } /** * 設置當前刻度尺的刻度值,并滾動到相應的位置 * * @param scaleValue */ public void setScaleScroll(float scaleValue) { int scrollX = (int) ((scaleValue - 1.0f) * gap * unit); horizontalScrollView.smoothScrollTo(scrollX, 0); }}

另外用到一個自定義的scrollView：

public class MyHorizontalScrollView extends HorizontalScrollView { private OnScrollListener onScrollListener = null; public MyHorizontalScrollView(Context context) { this(context, null); } public MyHorizontalScrollView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public MyHorizontalScrollView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); if(onScrollListener != null){ onScrollListener.onScrollChanged(l, t, oldl, oldt); } } public interface OnScrollListener { public void onScrollChanged(int l, int t, int oldl, int oldt); } public void setOnScrollListener(OnScrollListener onScrollListener) { this.onScrollListener = onScrollListener; }}

直尺上的黃色三角標其實是嵌在布局上的，在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='135%' android:pivotY='15%' > <shape android:shape='rectangle'><solid android:color='@color/main_yellow'/> </shape> </rotate> </item></layer-list>

下面是布局文件,注意RuleView是嵌在ScrollView中的：

最后在界面中的使用：

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+''); } });

以上這篇android尺子的自定義view——RulerView詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。

Android

上一條：android 使用Xml文件定義Shape方式下一條：Android Gradle依賴管理、去除重復依賴、忽略的方式

相關文章：

1. CSS清除浮動方法匯總2. XML 非法字符（轉義字符）3. HTML5實戰與剖析之觸摸事件(touchstart、touchmove和touchend)4. React優雅的封裝SvgIcon組件示例5. CSS百分比padding制作圖片自適應布局6. HTTP協議常用的請求頭和響應頭響應詳解說明（學習）7. TypeScript實現十大排序算法之歸并排序示例詳解8. 不要在HTML中濫用div9. 深入了解React中的合成事件10. XML入門的常見問題(三)

排行榜

					
					解決redis與Python交互取出來的是bytes類型的問題
JavaScript函數重載操作實例淺析
用ultraEdit打造自己的java IDE
Android實現動態改變shape.xml中圖形的顏色
python GUI庫圖形界面開發之PyQt5滑塊條控件QSlider詳細使用方法與實例
Java用BigDecimal解決double類型相減時可能存在的誤差
簡單的Python人臉識別系統
Android Studio 中獲取屏幕寬度實例
Spring Boot 整合 JWT的方法
解決idea中Terminal終端無法執行GIT命令+Terminal 中文亂碼問題
vue:el-input輸入時限制輸入的類型操作
				