BooheeRuler

　　这是仿写薄荷健康里面体重选择尺的控件，是为了参加HenCoder「仿写酷界面」活动,效果如下：

然后这是原效果：

介绍

　　通过观察原作的效果图和下载了薄荷健康APP观察原控件（不过最新版本已经改了一下UI，要改成最新版那种UI也可以通过在xml设置下颜色和光标的图案就可以实现了），我仿写的这个BooheeRuler主要实现了以下技术难点（对我来说）：

• 滑动界面
• 触摸滑动后的惯性滚动
• 让光标保持在中间，不随尺子滚动
• 计算光标选中的刻度
• 让触摸滑动、惯性滚动之后，回滚到最近的整点刻度，如最后滑动到66.5和66.6中间靠右，则回滚到66.6

使用

Gradle

    compile 'com.yanzhikai:BooheeRuler:0.0.3'

使用方法

　　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);

    }
}

属性

BooheeRuler的属性

属性名称	意义	类型	默认值
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

KgNumberLayout属性

属性名称	意义	类型	默认值
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)方法传入即可。

关于作者

id：炎之铠

炎之铠的邮箱：[email protected]

CSDN：http://blog.csdn.net/totond