1、自定义刻度尺控件
在我们想要获取用户的身高体重等信息时,直接让他们输入显然不够友好偶然看到一款 App 用了类似刻度尺的界面让用户选择,觉得很赞。所有决定实现下。
实现的最终效果如下图所示:
2、实现讲解
首先先无耻的将 github 地址抛出:
https://github.com/panacena/RuleView
自定义了一个 RulerView。代码就不一一写出,在源码中有详细的解释。
- private int mMinVelocity;
- private Scroller mScroller; //Scroller是一个专门用于处理滚动效果的工具类 用mScroller记录/计算View滚动的位置,再重写View的computeScroll(),完成实际的滚动 private VelocityTracker mVelocityTracker; //主要用跟踪触摸屏事件(flinging事件和其他gestures手势事件)的速率。 private int mWidth; private int mHeight; private float mSelectorValue = 50.0f; // 未选择时 默认的值 滑动后表示当前中间指针正在指着 的值 private float mMaxValue = 200; // 最大数值 private float mMinValue = 100.0f; //最小的数值 private float mPerValue = 1; //最小单位 如 1:表示 每2条刻度差为1. 0.1:表示 每2条刻度差为0.1 // 在demo中 身高mPerValue为1 体重mPerValue 为0.1 private float mLineSpaceWidth = 5; // 尺子刻度2条线之间的距离 private float mLineWidth = 4; // 尺子刻度的宽度 private float mLineMaxHeight = 420; // 尺子刻度分为3中不同的高度。 mLineMaxHeight表示最长的那根(也就是 10的倍数时的高度) private float mLineMidHeight = 30; // mLineMidHeight 表示中间的高度(也就是 5 15 25 等时的高度) private float mLineMinHeight = 17; // mLineMinHeight 表示最短的那个高度(也就是 1 2 3 4 等时的高度) private float mTextMarginTop = 10; //o private float mTextSize =30; //尺子刻度下方数字 textsize private boolean mAlphaEnable = false; // 尺子 最左边 最后边是否需要透明 (透明效果更好点) private float mTextHeight; //尺子刻度下方数字 的高度 private Paint mTextPaint; // 尺子刻度下方数字( 也就是每隔10个出现的数值) paint private Paint mLinePaint; // 尺子刻度 paint private int mTotalLine; //共有多少条 刻度 private int mMaxOffset; //所有刻度 共有多长 private float mOffset; // 默认状态下,mSelectorValue所在的位置 位于尺子总刻度的位置 private int mLastX, mMove; private OnValueChangeListener mListener; // 滑动后数值回调
在 activity 中只需调用一个方法和一个数值的回调
- ruler_weight.setOnValueChangeListener(new RulerView.OnValueChangeListener() {@Override public void onValueChange(float value) {
- tv_register_info_weight_value.setText(value + "");
- }
- });
- /** * * @param selectorValue 未选择时 默认的值 滑动后表示当前中间指针正在指着的值 * @param minValue 最大数值 * @param maxValue 最小的数值 * @param per 最小单位 如 1:表示 每2条刻度差为1. 0.1:表示 每2条刻度差为0.1 在demo中 身高mPerValue为1 体重mPerValue 为0.1 */
- ruler_weight.setValue(165, 80, 250, 1);
github 地址:https://github.com/panacena/RuleView
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: