这是仿写薄荷健康里面体重选择尺的控件，是为了参加HenCoder「仿写酷界面」活动,效果如下：
然后这是原效果：
通过观察原作的效果图和下载了薄荷健康APP观察原控件（不过最新版本已经改了一下UI，要改成最新版那种UI也可以通过在xml设置下颜色和光标的图案就可以实现了），我仿写的这个BooheeRuler主要实现了以下技术难点（对我来说）：
- 滑动界面
- 触摸滑动后的惯性滚动
- 让光标保持在中间，不随尺子滚动
- 计算光标选中的刻度
- 让触摸滑动、惯性滚动之后，回滚到最近的整点刻度，如最后滑动到66.5和66.6中间靠右，则回滚到66.6
compile 'com.yanzhikai:BooheeRuler:0.0.5'
BooheeRuler分成两个部分，一个是上面的显示多少kg的数字Layout，还有一个就是下面的尺子。首先在xml文件里调用（下面属性的作用可以看后面的表格）：
<!--数字和单位-->
<yanzhikai.ruler.KgNumberLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/br"
app:scaleTextSize="50sp"
app:kgTextSize="20sp"
android:layout_marginBottom="20dp"
android:id="@+id/knl"/>
<!--尺子-->
<yanzhikai.ruler.BooheeRuler
android:layout_width="match_parent"
android:layout_height="100dp"
android:id="@+id/br"
android:background="@color/colorDirtyWithe"
app:minScale="464"
app:maxScale="2000"
app:numberTextSize="22sp"
app:textMarginTop="80dp"
app:cursorHeight="45dp"
app:smallScaleLength="20dp"
app:smallScaleWidth="1.5dp"
app:bigScaleLength="40dp"
app:bigScaleWidth="2.5dp"
app:scaleInterval="11.5dp"
app:currentScale="666"
android:layout_centerInParent="true"
/>
然后在java代码里面使用：
public class MainActivity extends AppCompatActivity {
private BooheeRuler mBooheeRuler;
private KgNumberLayout mKgNumberLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mBooheeRuler = (BooheeRuler) findViewById(R.id.br);
mKgNumberLayout = (KgNumberLayout) findViewById(R.id.knl);
mKgNumberLayout.bindRuler(mBooheeRuler);
}
}
| 属性名称 | 意义 | 类型 | 默认值 |
|---|---|---|---|
| minScale | 尺子的最小刻度值 | integer | 464（在尺子上显示就是46.4） |
| maxScale | 尺子的最大刻度值 | integer | 2000（在尺子上显示就是200.0） |
| smallScaleLength | 尺子小刻度（0.1）的刻度线长度 | dimension | 30px |
| smallScaleWidth | 尺子小刻度（0.1）的刻度线宽度/粗细 | dimension | 3px |
| bigScaleLength | 尺子大刻度（1.0）的刻度线长度 | dimension | 60px |
| bigScaleWidth | 尺子大刻度（1.0）的刻度线宽度/粗细 | dimension | 5px |
| cursorHeight | 尺子中间的选定光标的刻度线长度 | dimension | 70px |
| cursorWidth | 尺子中间的选定光标的刻度线宽度/粗细 | dimension | 8px |
| textMarginTop | 尺子数字文字距离上边界距离 | dimension | 120px |
| numberTextSize | 尺子数字文字大小 | dimension | 28px |
| scaleInterval | 尺子每条刻度线之间的距离 | dimension | 18px |
| numberTextColor | 尺子数字文字颜色 | color | #2B2E2B |
| scaleColor | 尺子刻度线的颜色 | color | #e2e5e2 |
| currentScale | 尺子初始选定刻度 | float | (maxScale + minScale)/2 |
| cursorDrawable | 尺子中间选定光标的Drawable(会把drawable伸缩到设定的宽高上) | dimension | @drawable/cursor_shape |
| count | 一个大刻度格子里面的小刻度格子数 | integer | 10 |
| 属性名称 | 意义 | 类型 | 默认值 |
|---|---|---|---|
| scaleTextSize | 数字字体大小 | dimension | 80 |
| kgTextSize | 单位字体大小 | dimension | 40 |
| scaleTextColor | 数字字体颜色 | color | #4bbb74 |
| kgTextColor | 单位字体颜色 | color | #4bbb74 |
| kgUnitText | 单位文字内容 | string | kg |
除了使用KgNumberLayout作为显示BooheeRuler的当前刻度之外，还可以通过实现RulerCallback回调接口来获取当前选定刻度：
public interface RulerCallback {
//选取刻度变化的时候回调
void onScaleChanging(float scale);
}
实现了这个接口之后，再调用BooheeRuler.setCallback(RulerCallback rulerCallback)方法传入即可。
- 2017/10/23 version 0.0.5:
- 修改了画刻度的方法，改为只画当前屏幕显示的刻度
- 增加了count属性，用于设置一个大刻度格子里面的小刻度格子数，默认是10
id：炎之铠
炎之铠的邮箱：[email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent