android尺子的自定义view——RulerView
项目中用到自定义尺子的样式：
原代码在github上找的，地址：https://github.com/QQabby/HorizontalRuler
原效果为
因为跟自己要使用的view稍有不同 所以做了一些修改，修改的注释都放在代码中了，特此记录一下。
首先是一个自定义View：
public class RuleView extends View {
private Paint paint;
private Context context;
private int maxValue = ;
/**
* 起点x的坐标
*/
private float startX ;
private float startY ;
/**
* 刻度线的长度
*/
private float yLenght ;
/**
* 刻度的间隙
*/
// private float gap = 8f;
private float gap = ;
/**
* 文本的间隙
*/
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 = -;
/**
* 刻度进制
*/
// private float unit = 10f;
private int unit = ;//隔unit个刻度写一个数字
//每个大刻度代表值iValue
private int iValue = ;
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("");//不使用浮点数格式
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, );
// startY = ScreenUtil.dip2px(context, 20f);
startY = ScreenUtil.dip2px(context, );//Y轴由0开始，即最顶端，不用设置适配布局文件RuleView的android:layout_marginTop="-20dp"
yLenght = ScreenUtil.dip2px(context, );
// gap = ScreenUtil.dip2px(context, 8f);
gap = ScreenUtil.dip2px(context, );
// 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 = ; i <= maxValue; i++) {
if (i % == ) {
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 = ; 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, ), paint);//字体大小
}
}
/**
* 获取TextView中文本的宽度
*/
private float calculateTextWidth(String text) {
if (TextUtils.isEmpty(text)) {
return ;
}
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 = ;
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, );
} catch (NumberFormatException numExp) {
numExp.printStackTrace();
}
mScrollHandler.removeCallbacks(this);
} else {
mCurrentX = horizontalScrollView.getScrollX();
mScrollHandler.postDelayed(this, );
}
}
};
/**
* 设置默认刻度尺的刻度值,不会滚动到相应的位置
*
* @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，所以除去
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
horizontalScrollView.smoothScrollTo(scrollX, );
}
}, );
}
/**
* 设置刻度值
*/
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, );
}
}
另外用到一个自定义的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, );
}
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=""-->
<!--android:toDegrees=""-->
<!--android:pivotX="-40%"-->
<!--android:pivotY="80%">-->
<!-- 倒三角 -->
<rotate
android:fromDegrees=""
android:toDegrees=""
android:pivotX="135%"
android:pivotY="15%"
>
<shape android:shape="rectangle">
<solid android:color="@color/main_yellow"/>
</shape>
</rotate>
</item> </layer-list>
shape_triangle
下面是布局文件,注意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 * );
tvNum.setText(num+"");
}
});
android尺子的自定义view——RulerView的更多相关文章
- Android中使用自定义View实现下载进度的显示
一般有下载功能的应用都会有这样一个场景,需要一个图标来标识不同的状态.之前在公司的项目中写过一个,今天抽空来整理一下. 一般下载都会有这么几种状态:未开始.等待.正在下载.下载结束,当然有时候会有下载 ...
- Android 初阶自定义 View 字符头像
自己很少做自定义 View ,只有最开始的时候跟着郭神写了一个小 Demo ,后来随着见识的越来越多,特别是在开源社区看到很多优秀的漂亮的控件,都是羡慕的要死,但是拉下来的代码还是看不明白,而且当时因 ...
- Android 自定义View修炼-Android开发之自定义View开发及实例详解
在开发Android应用的过程中,难免需要自定义View,其实自定义View不难,只要了解原理,实现起来就没有那么难. 其主要原理就是继承View,重写构造方法.onDraw,(onMeasure)等 ...
- Android开发进阶——自定义View的使用及其原理探索
在Android开发中,系统提供给我们的UI控件是有限的,当我们需要使用一些特殊的控件的时候,只靠系统提供的控件,可能无法达到我们想要的效果,这时,就需要我们自定义一些控件,来完成我们想要的效果了.下 ...
- Android中实现自定义View组件并使其能跟随鼠标移动
场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建An ...
- android开发之自定义View 详解 资料整理 小冰原创整理，原创作品。
2019独角兽企业重金招聘Python工程师标准>>> /** * 作者:David Zheng on 2015/11/7 15:38 * * 网站:http://www.93sec ...
- android开发学习 ------- 自定义View 圆 ，其点击事件 及 确定当前view的层级关系
我需要实现下面的效果: 参考文章:https://blog.csdn.net/halaoda/article/details/78177069 涉及的View事件分发机制 https://www. ...
- android 缩放平移自定义View 显示图片
1.背景 现在app中,图片预览功能肯定是少不了的,用户基本已经形成条件反射,看到小图,点击看大图,看到大图两个手指开始进行放大,放大后,开始移动到指定部位~~~ 我相信看图的整个步骤,大家或者说用户 ...
- android 用 XML 自定义View边框个数，只有一边或两边
<?xml version="1.0" encoding="UTF-8"?> <layer-list xmlns:android=" ...
随机推荐
- centos 7 安装python3和pip
目前,我认为还是使用系统自带的稳定版最好,因为:该版本肯定是centos7开发组深思熟虑的,稳定性好,另外,由于系统自带,兼容性好,第三,和之配套的软件齐全,如果不用系统的,建议还是不要在源码编译安装 ...
- Android动画三部曲之中的一个 View Animation & LayoutAnimation
转载请注明出处:http://blog.csdn.net/crazy1235/article/details/50612827 本篇文章对android的Tween动画和帧动画以及布局动画进行总结. ...
- Flink源码分析
http://vinoyang.com/ http://wuchong.me Apache Flink源码解析之stream-source https://yq.aliyun.com/articles ...
- 使用Windows 10专业版 进行VS2017开发 遇到 HTTP Error 400. The request hostname is invalid
使用IIS Express 支持非localhost访问 只要使用域名或者本机IP地址都无法进行 iisexpress 调试 公网ip,还是127.0.0.1都出现上面那个错误 主要是新的系统环境 ...
- (原创)composite模式和bridge模式是天生的好朋友
composite模式的意图是:将对象组合成树形结构以表示“部分-整体”的层次结构.composite使得用户对单个对象和组合对象的使用具有一致性.它的类图如下: composite模式的实现分为透明 ...
- 在Java中使用SQLite的教程（转）
简介:这是在Java中使用SQLite的教程的详细页面,介绍了和java,有关的知识.技巧.经验,和一些java源码等. 简单的在Java中使用SQLite的教程 使用SQLiteJDBC封装 www ...
- 【转】提交http请求之python与curl
提交http请求之python与curl 由于Openstack是python实现wsgi的REST ful架构,在学习和调试的过程中,常常会遇到http请求的提交,于是顺手整理下python和cur ...
- SecurityError: Blocked a frame with origin from accessing a cross-origin frame
问题描述:浏览器报错I am loading an <iframe> in my HTML page and trying to access the elements within it ...
- 【转】Android的root原理
转自知乎:https://www.zhihu.com/question/21074979 @Kevin @张炬 作者:Kevin链接:https://www.zhihu.com/question/21 ...
- poj2528（线段树+区间离散）
题意:那个城市里要竞选市长,然后在一块墙上可以贴海报为自己拉票,每个人可以贴连续的一块区域,后来帖的可以覆盖前面的,问到最后一共可以看到多少张海报.思路:一看就知道是线段树,只是说要利用到离散化,也不 ...