用開源項目SwitchButton實現各種風格的switch

今天介紹的開源項目是否的優秀，又是國人的作品。之前我接觸過很多很多的自定義switch，有些動畫僵硬，有些不能自定義switch的寬度，有些只能定義寬度不能設置滑塊的寬高。但，這個項目提供了各種定制的選項，堪稱完美！

項目地址：https://github.com/kyleduo/SwitchButton

作者博客：http://www.kyleduo.com/

 

一、在xml中使用控件

下載並導入lib后，我們在xml中放上這個控件就好了

    <com.kyleduo.switchbutton.SwitchButton
        android:id="@+id/sb_default"
        style="@style/SwitchButtonStyle" 
        android:layout_width="200dp"
        android:layout_height="100dp"
        app:thumb_width="90dp"
        app:thumb_height="90dp"/>

別忘記加命名空間：xmlns:app="http://schemas.android.com/apk/res-auto"

 

值得稱贊的是，這個控件在eclipse預覽時提供了完美的實時預覽：

  

 

二、xml中的各種屬性

In xml layout file, you can configure the face of switch button using these attrs.

• onDrawable: drawable of background for status ON
• offDrawable: drawable of background for status OFF
• thumbDrawable: drawable of thumb
• thumb_margin: set inner margin between thumb and edges
• thumb_marginLeft/Top/Bottom/Right: set margin for specific edge
• thumb_width: set the width of thumb, probably used for gradient drawable
• thumb_height: set the height of thumb
• onColor: set the color of status ON, usd for flat version, the priority is below of onDrawable
• offColor: like the onColor
• thumbColor: like the onColor
• thumbPressedColor: like the thumbColor, but for pressed status
• animationVelocity: distance of animation per frame
• radius: used for color version, radius of corner of background and thumb.
• measureFactor: factor limit the minimum width equals almost (the height of thumb * measureFactor)

如果你想要定義style的話，可以在style文件中寫

    <style name="MaterialDesignStyle" parent="MD">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:padding">16dp</item>
    </style>

總之是各種方便。我們還可以參照demo，來自定義滑塊和背景，還可以定義switch的滑動條。具體請大家看demo吧。

 

三、Java中的操作

3.1 監聽器

　　　　 // 監聽器來監聽事件
        sbDefault.setOnCheckedChangeListener(new OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                Toast.makeText(StyleActivity.this, "Default style button, new state: " + (isChecked ? "on" : "off"), Toast.LENGTH_SHORT).show();
            }
        });

 

3.2 設置樣式

    　　　　　　　　　 Configuration conf = Configuration.getDefault(getResources().getDisplayMetrics().density);
                    conf.setThumbMargin(4); // 設定小滑塊的邊界
                    conf.setVelocity(8); // 設置點擊滑塊，滑動開啟/關閉的速率
                    conf.setThumbWidthAndHeight(40, 14); // 小滑塊的寬高
                    conf.setRadius(10); //設置邊緣弧度數
                    conf.setMeasureFactor(2f); // 限制最小的寬度
                    sbInCode.setConfiguration(conf); // 給switch應用上述設置

 

3.3 設置狀態

sb.setEnabled(isChecked);

有動畫的狀態切換，設置后switch改變狀態時會伴隨着滑塊動畫

mCheckedSb.slideToChecked(!mCheckedSb.isChecked()); // 滑動切換開關效果

 

3.4 翻轉當前狀態

用toggle()的話，在切換時會出現滑動的動畫

Sb.toggle(); // 將switch切換為當前狀態的相反狀態。也就是如果當前是開啟，那么變成關閉。如果是關閉，就變為開啟。 

用toggle(false)，在切換時就不顯示動畫

Sb.toggle(false);

 

 

源碼下載：http://download.csdn.net/detail/shark0017/8372607