android尺子的自定義view——RulerView詳解
更新時(shí)間：2020年03月23日 14:58:44 作者：Sharley
這篇文章主要介紹了android尺子的自定義view——RulerView詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
項(xiàng)目中用到自定義尺子的樣式：
原代碼在github上找的，地址：https://github.com/QQabby/HorizontalRuler
原效果為
因?yàn)楦约阂褂玫膙iew稍有不同 所以做了一些修改，修改的注釋都放在代碼中了，特此記錄一下。
首先是一個(gè)自定義View：
public class RuleView extends View {
private Paint paint;
private Context context;
private int maxValue = 500;
/**
* 起點(diǎn)x的坐標(biāo)
*/
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;
/**
* 刻度進(jìn)制
*/
// private float unit = 10f;
private int unit = 10;//隔unit個(gè)刻度寫一個(gè)數(shù)字
//每個(gè)大刻度代表值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");//不使用浮點(diǎn)數(shù)格式
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開始，即最頂端，不用設(shè)置適配布局文件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，則三角形頂點(diǎn)可以剛好最準(zhǔn)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個(gè)刻度寫一個(gè)數(shù)字
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開始計(jì)數(shù)時(shí)不用加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");
/**
* 當(dāng)滑動(dòng)尺子的時(shí)候
*/
int scrollWidth = 0;
public void setScrollerChanaged(int l, int t, int oldl, int oldt) {
// 滑動(dòng)的距離
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;
}
/**
* 滾動(dòng)監(jiān)聽線程
*/
private Runnable mScrollRunnable = new Runnable() {
@Override
public void run() {
if (mCurrentX == horizontalScrollView.getScrollX()) {// 滾動(dòng)停止了
try {
float x = horizontalScrollView.getScrollX();
float value = (x / (gap * unit));// 當(dāng)前的值
String s = df.format(value);
// 滑動(dòng)到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);
}
}
};
/**
* 設(shè)置默認(rèn)刻度尺的刻度值,不會(huì)滾動(dòng)到相應(yīng)的位置
*
* @param scaleValue
*/
public void setDefaultScaleValue(float scaleValue) {
// final int scrollX = (int) ((scaleValue - 1.0f) * gap * unit);//從0開始計(jì)數(shù)時(shí)不用減去1
final int scrollX = (int) (scaleValue * gap * unit / 10);//每個(gè)值在設(shè)置刻度時(shí)會(huì)乘以10，所以除去
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
horizontalScrollView.smoothScrollTo(scrollX, 0);
}
}, 100);
}
/**
* 設(shè)置刻度值
*/
public void setScaleValue(int iValue) {
this.iValue = iValue;
}
/**
* 設(shè)置刻度最小值
*/
public void setMinScaleValue(Float minScaleValue) {
// this.minScaleValue = minScaleValue;
}
/**
* 獲取刻度最大值
*/
public Float getMaxScaleValue() {
// return maxScaleValue;
return 33.0f;
}
/**
* 設(shè)置刻度最大值
*/
public void setMaxScaleValue(Float maxScaleValue) {
// this.maxScaleValue = maxScaleValue;
}
/**
* 設(shè)置當(dāng)前刻度尺的刻度值,并滾動(dòng)到相應(yīng)的位置
*
* @param scaleValue
*/
public void setScaleScroll(float scaleValue) {
int scrollX = (int) ((scaleValue - 1.0f) * gap * unit);
horizontalScrollView.smoothScrollTo(scrollX, 0);
}
}
另外用到一個(gè)自定義的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;
}
}
直尺上的黃色三角標(biāo)其實(shí)是嵌在布局上的，在drawble文件中實(shí)現(xiàn)
<?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);// 去掉超出滑動(dòng)后出現(xiàn)的陰影效果
// 設(shè)置水平滑動(dòng)
ruleView.setHorizontalScrollView(horizontalScrollView);
ruleView.setDefaultScaleValue(num);
// 當(dāng)滑動(dòng)尺子的時(shí)候
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詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Android 多媒體播放API簡單實(shí)例的相關(guān)資料,這里附有代碼實(shí)例及實(shí)現(xiàn)效果圖，需要的朋友可以參考下2016-12-12
詳解Androidstudio3.0 關(guān)于Gradle報(bào)錯(cuò)的問題(小結(jié))
本篇文章主要介紹了詳解Androidstudio3.0 關(guān)于Gradle報(bào)錯(cuò)的問題(小結(jié))，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了Android完全退出應(yīng)用程序的方法,實(shí)例分析了Android退出應(yīng)用程序的相關(guān)方法與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
Android實(shí)現(xiàn)懸浮對(duì)話框代碼
這篇文章主要介紹了Android實(shí)現(xiàn)懸浮對(duì)話框代碼的相關(guān)資料,需要的朋友可以參考下2016-03-03
Android?Flutter實(shí)現(xiàn)搜索的三種方式詳解
這篇文章主要為大家詳細(xì)介紹了Android?Flutter實(shí)現(xiàn)搜索的三種方式，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的可以了解一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了Android自定義videoview仿抖音界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
Android實(shí)現(xiàn)隨機(jī)圓形云標(biāo)簽效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)隨機(jī)圓形云標(biāo)簽效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
Android Studio如何獲取SQLite數(shù)據(jù)并顯示到ListView上
這篇文章主要介紹了Android Studio獲取SQLite數(shù)據(jù)并顯示到ListView上，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
Android sqlite cursor的遍歷實(shí)例詳解
在本篇內(nèi)容里小編給大家整理的是一篇關(guān)于Android sqlite cursor的遍歷的相關(guān)實(shí)例及知識(shí)點(diǎn)，需要的朋友們可以學(xué)習(xí)下。2021-06-06
Android 中通過ViewDragHelper實(shí)現(xiàn)ListView的Item的側(cè)拉劃出效果
這篇文章主要介紹了 Android 中通過ViewDragHelper實(shí)現(xiàn)ListView的Item的側(cè)拉劃出效果,需要的朋友可以參考下2017-08-08