Skip to content
This repository was archived by the owner on May 25, 2021. It is now read-only.

Commit cd9ac6e

Browse files
author
Flyge
committed
🎨 Set the default style
1 parent 66271b8 commit cd9ac6e

11 files changed

Lines changed: 121 additions & 298 deletions

File tree

‎README.md‎

Lines changed: 26 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -34,197 +34,55 @@ dependencies {
3434

3535
最低支持 `Android2.2 API 7`
3636

37-
#### 准备图片
37+
#### 在布局中使用
3838

39-
switch_frame.png
40-
41-
![switch_frame.png](docs/switch_frame.png)
42-
43-
switch_state_normal.png
44-
45-
![switch_state_normal.png](docs/switch_state_normal.png)
46-
47-
switch_state_disable.png
48-
49-
![switch_state_disable.png](docs/switch_state_disable.png)
50-
51-
switch_state_mask.png
52-
53-
![switch_state_mask.png](docs/switch_state_mask.png)
54-
55-
switch_slider_normal.png
39+
```xml
40+
<?xml version="1.0" encoding="utf-8"?>
41+
<me.panpf.switchbutton.SwitchButton
42+
android:id="@+id/switch"
43+
android:layout_width="wrap_content"
44+
android:layout_height="wrap_content"
45+
android:text="接受推送"/>
46+
```
5647

57-
![switch_slider_normal.png](docs/switch_slider_normal.png)
48+
#### 在代码中使用
5849

59-
switch_slider_disable.png
50+
SwitchButton 继承自 CompoundButton ，因此你可以像使用 CheckBox 那样设置状态和监听
6051

61-
![switch_slider_disable.png](docs/switch_slider_disable.png)
52+
一些可用的方法：
6253

63-
selector_switch_state.xml
54+
* setDrawables(Drawable, Drawable, Drawable, Drawable)：设置图片
55+
* setDrawableResIds(int, int, int, int)：设置图片ID
56+
* setWithTextInterval(int)：设置标题和按钮的间距，默认为 16dp
57+
* setDuration(int)：设置动画持续时间，单位毫秒，默认为 200
58+
* setMinChangeDistanceScale(float)：设置滑动有效距离比例，默认为 0.2。例如按钮宽度为 100，比例为 0.2，那么只有当滑动距离大于等于 (100*0.2) 才会切换状态，否则就回滚
6459

65-
```xml
66-
<?xml version="1.0" encoding="utf-8"?>
67-
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
68-
<item android:state_enabled="false" android:drawable="@drawable/switch_state_disable"/>
69-
<item android:drawable="@drawable/switch_state_normal"/>
70-
</selector>
71-
```
60+
#### 自定义图片资源
7261

73-
selector_switch_slider.xml
62+
SwitchButton 由四张图片构成
7463

75-
```xml
76-
<?xml version="1.0" encoding="utf-8"?>
77-
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
78-
<item android:state_enabled="false" android:drawable="@drawable/switch_slider_disable"/>
79-
<item android:drawable="@drawable/switch_slider_normal"/>
80-
</selector>
81-
```
64+
* frameDrawable：框架图片，决定按钮的大小以及显示区域
65+
* stateDrawable：状态图片，显示开启或关闭状态
66+
* stateMaskDrawable：状态图片遮罩层，用于让状态图片按照遮罩层的形状显示
67+
* sliderDrawable：滑块图片
8268

83-
#### 在布局中使用 SwitchButton 并通过自定义属性设置图片
69+
第一种方式你可以通过 SwitchButton 的自定义属性设置资源图片，如下：
8470

8571
```xml
8672
<?xml version="1.0" encoding="utf-8"?>
8773
<me.panpf.switchbutton.SwitchButton
88-
xmlns:android="http://schemas.android.com/apk/res/android"
8974
xmlns:app="http://schemas.android.com/apk/res-auto"
9075
android:id="@+id/switch"
91-
android:layout_width="match_parent"
76+
android:layout_width="wrap_content"
9277
android:layout_height="wrap_content"
93-
android:minHeight="50dp"
94-
android:paddingLeft="30dp"
95-
android:paddingRight="30dp"
9678
android:text="接受推送"
97-
app:withTextInterval="16dp"
9879
app:frameDrawable="@drawable/switch_frame"
9980
app:stateDrawable="@drawable/selector_switch_state"
10081
app:stateMaskDrawable="@drawable/switch_state_mask"
10182
app:sliderDrawable="@drawable/selector_switch_slider"/>
10283
```
10384

104-
属性解释：
105-
* withTextInterval：标题文字和按钮之间的距离
106-
* frameDrawable：框架图片，定义按钮的大小以及显示区域
107-
* stateDrawable：状态图片，显示开启或关闭
108-
* stateMaskDrawable：状态图片遮罩层
109-
* sliderDrawable：滑块图片
110-
111-
其它方法：
112-
* setDrawables(Drawable frameBitmap, Drawable stateDrawable, Drawable stateMaskDrawable, Drawable sliderDrawable)：设置图片
113-
* setDrawableResIds(int frameDrawableResId, int stateDrawableResId, int stateMaskDrawableResId, int sliderDrawableResId)：设置图片ID
114-
* setWithTextInterval(int withTextInterval)：设置标题和按钮的间距，默认为16
115-
* setDuration(int duration)：设置动画持续时间，单位毫秒，默认为200
116-
* setMinChangeDistanceScale(float minChangeDistanceScale)：设置滑动有效距离比例，默认为0.2。例如按钮宽度为100，比例为0.2，那么只有当滑动距离大于等于(100*0.2)才会切换状态，否则就回滚
117-
118-
示例图片源码
119-
120-
```xml
121-
<?xml version="1.0" encoding="utf-8"?>
122-
<ScrollView
123-
xmlns:android="http://schemas.android.com/apk/res/android"
124-
xmlns:app="http://schemas.android.com/apk/res-auto"
125-
android:layout_width="match_parent"
126-
android:layout_height="match_parent"
127-
android:background="@android:color/white">
128-
<LinearLayout
129-
android:orientation="vertical"
130-
android:layout_width="match_parent"
131-
android:layout_height="wrap_content"
132-
android:paddingTop="16dp"
133-
android:paddingBottom="16dp">
134-
135-
<me.panpf.switchbutton.SwitchButton
136-
style="@style/item"
137-
android:id="@+id/switch_main_1"
138-
android:text="接受推送"
139-
android:checked="true"
140-
android:background="@drawable/selector_preference_complete"
141-
app:withTextInterval="16dp"
142-
app:frameDrawable="@drawable/switch_frame"
143-
app:stateDrawable="@drawable/selector_switch_state"
144-
app:stateMaskDrawable="@drawable/switch_state_mask"
145-
app:sliderDrawable="@drawable/selector_switch_slider"/>
146-
147-
<me.panpf.switchbutton.SwitchButton
148-
style="@style/item"
149-
android:id="@+id/switch_main_2"
150-
android:text="每日头条"
151-
android:background="@drawable/selector_preference_header"
152-
android:layout_marginTop="16dp"
153-
app:withTextInterval="16dp"
154-
app:frameDrawable="@drawable/switch_frame"
155-
app:stateDrawable="@drawable/selector_switch_state"
156-
app:stateMaskDrawable="@drawable/switch_state_mask"
157-
app:sliderDrawable="@drawable/selector_switch_slider"/>
158-
159-
<me.panpf.switchbutton.SwitchButton
160-
style="@style/item"
161-
android:id="@+id/switch_main_3"
162-
android:text="每日热卖"
163-
android:background="@drawable/selector_preference_center"
164-
app:withTextInterval="16dp"
165-
app:frameDrawable="@drawable/switch_frame"
166-
app:stateDrawable="@drawable/selector_switch_state"
167-
app:stateMaskDrawable="@drawable/switch_state_mask"
168-
app:sliderDrawable="@drawable/selector_switch_slider"/>
169-
170-
<me.panpf.switchbutton.SwitchButton
171-
style="@style/item"
172-
android:id="@+id/switch_main_4"
173-
android:text="优惠促销"
174-
android:background="@drawable/selector_preference_center"
175-
app:withTextInterval="16dp"
176-
app:frameDrawable="@drawable/switch_frame"
177-
app:stateDrawable="@drawable/selector_switch_state"
178-
app:stateMaskDrawable="@drawable/switch_state_mask"
179-
app:sliderDrawable="@drawable/selector_switch_slider"/>
180-
181-
<me.panpf.switchbutton.SwitchButton
182-
style="@style/item"
183-
android:id="@+id/switch_main_5"
184-
android:text="偶像动态"
185-
android:background="@drawable/selector_preference_center"
186-
app:withTextInterval="16dp"
187-
app:frameDrawable="@drawable/switch_frame"
188-
app:stateDrawable="@drawable/selector_switch_state"
189-
app:stateMaskDrawable="@drawable/switch_state_mask"
190-
app:sliderDrawable="@drawable/selector_switch_slider"/>
191-
192-
<me.panpf.switchbutton.SwitchButton
193-
style="@style/item"
194-
android:id="@+id/switch_main_6"
195-
android:text="娱乐播报"
196-
android:background="@drawable/selector_preference_footer"
197-
app:withTextInterval="16dp"
198-
app:frameDrawable="@drawable/switch_frame"
199-
app:stateDrawable="@drawable/selector_switch_state"
200-
app:stateMaskDrawable="@drawable/switch_state_mask"
201-
app:sliderDrawable="@drawable/selector_switch_slider"/>
202-
203-
<me.panpf.switchbutton.SwitchButton
204-
style="@style/item"
205-
android:id="@+id/switch_main_7"
206-
android:text="天气预报"
207-
android:background="@drawable/selector_preference_header"
208-
android:layout_marginTop="16dp"
209-
app:withTextInterval="16dp"
210-
app:frameDrawable="@drawable/switch_frame"
211-
app:stateDrawable="@drawable/selector_switch_state"
212-
app:stateMaskDrawable="@drawable/switch_state_mask"
213-
app:sliderDrawable="@drawable/selector_switch_slider"/>
214-
215-
<me.panpf.switchbutton.SwitchButton
216-
style="@style/item"
217-
android:id="@+id/switch_main_8"
218-
android:text="系统消息"
219-
android:background="@drawable/selector_preference_footer"
220-
app:withTextInterval="16dp"
221-
app:frameDrawable="@drawable/switch_frame"
222-
app:stateDrawable="@drawable/selector_switch_state"
223-
app:stateMaskDrawable="@drawable/switch_state_mask"
224-
app:sliderDrawable="@drawable/selector_switch_slider"/>
225-
</LinearLayout>
226-
</ScrollView>
227-
```
85+
第二种方式是通过上面提到的 setDrawables(Drawable, Drawable, Drawable, Drawable) 或 setDrawableResIds(int, int, int, int) 方法设置资源图片
22886

22987
### License
23088

‎sample/src/main/res/layout/activity_main.xml‎

Lines changed: 24 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,65 @@
11
<?xml version="1.0" encoding="utf-8"?>
2-
<ScrollView
3-
xmlns:android="http://schemas.android.com/apk/res/android"
4-
xmlns:app="http://schemas.android.com/apk/res-auto"
2+
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
53
android:layout_width="match_parent"
64
android:layout_height="match_parent"
75
android:background="@android:color/white">
6+
87
<LinearLayout
9-
android:orientation="vertical"
108
android:layout_width="match_parent"
119
android:layout_height="wrap_content"
12-
android:paddingTop="16dp"
13-
android:paddingBottom="16dp">
10+
android:orientation="vertical"
11+
android:paddingBottom="16dp"
12+
android:paddingTop="16dp">
1413

1514
<me.panpf.switchbutton.SwitchButton
16-
style="@style/item"
1715
android:id="@+id/switch_main_1"
18-
android:text="接受推送"
19-
android:checked="true"
16+
style="@style/item"
2017
android:background="@drawable/selector_preference_single"
21-
app:withTextInterval="16dp"
22-
app:frameDrawable="@drawable/switch_frame"
23-
app:stateDrawable="@drawable/selector_switch_state"
24-
app:stateMaskDrawable="@drawable/switch_state_mask"
25-
app:sliderDrawable="@drawable/selector_switch_slider"/>
18+
android:checked="true"
19+
android:text="接受推送" />
2620

27-
<!-- state drawable defined through xml-->
2821
<me.panpf.switchbutton.SwitchButton
29-
style="@style/item"
3022
android:id="@+id/switch_main_2"
31-
android:text="每日头条"
32-
android:background="@drawable/selector_preference_header"
23+
style="@style/item"
3324
android:layout_marginTop="16dp"
34-
app:withTextInterval="16dp"
35-
app:frameDrawable="@drawable/switch_frame"
36-
app:stateDrawable="@drawable/selector_switch_state"
37-
app:stateMaskDrawable="@drawable/switch_state_mask"
38-
app:sliderDrawable="@drawable/selector_switch_slider"/>
25+
android:background="@drawable/selector_preference_header"
26+
android:text="每日头条" />
3927

4028
<me.panpf.switchbutton.SwitchButton
41-
style="@style/item"
4229
android:id="@+id/switch_main_3"
43-
android:text="每日热卖"
30+
style="@style/item"
4431
android:background="@drawable/selector_preference_center"
45-
app:withTextInterval="16dp"
46-
app:frameDrawable="@drawable/switch_frame"
47-
app:stateDrawable="@drawable/selector_switch_state"
48-
app:stateMaskDrawable="@drawable/switch_state_mask"
49-
app:sliderDrawable="@drawable/selector_switch_slider"/>
32+
android:text="每日热卖" />
5033

5134
<me.panpf.switchbutton.SwitchButton
52-
style="@style/item"
5335
android:id="@+id/switch_main_4"
54-
android:text="优惠促销"
36+
style="@style/item"
5537
android:background="@drawable/selector_preference_center"
56-
app:withTextInterval="16dp"
57-
app:frameDrawable="@drawable/switch_frame"
58-
app:stateDrawable="@drawable/selector_switch_state"
59-
app:stateMaskDrawable="@drawable/switch_state_mask"
60-
app:sliderDrawable="@drawable/selector_switch_slider"/>
38+
android:text="优惠促销" />
6139

6240
<me.panpf.switchbutton.SwitchButton
63-
style="@style/item"
6441
android:id="@+id/switch_main_5"
65-
android:text="偶像动态"
42+
style="@style/item"
6643
android:background="@drawable/selector_preference_center"
67-
app:withTextInterval="16dp"
68-
app:frameDrawable="@drawable/switch_frame"
69-
app:stateDrawable="@drawable/selector_switch_state"
70-
app:stateMaskDrawable="@drawable/switch_state_mask"
71-
app:sliderDrawable="@drawable/selector_switch_slider"/>
44+
android:text="偶像动态" />
7245

7346
<me.panpf.switchbutton.SwitchButton
74-
style="@style/item"
7547
android:id="@+id/switch_main_6"
76-
android:text="娱乐播报"
48+
style="@style/item"
7749
android:background="@drawable/selector_preference_footer"
78-
app:withTextInterval="16dp"
79-
app:frameDrawable="@drawable/switch_frame"
80-
app:stateDrawable="@drawable/selector_switch_state"
81-
app:stateMaskDrawable="@drawable/switch_state_mask"
82-
app:sliderDrawable="@drawable/selector_switch_slider"/>
50+
android:text="娱乐播报" />
8351

8452
<me.panpf.switchbutton.SwitchButton
85-
style="@style/item"
8653
android:id="@+id/switch_main_7"
87-
android:text="天气预报"
88-
android:background="@drawable/selector_preference_header"
54+
style="@style/item"
8955
android:layout_marginTop="16dp"
90-
app:withTextInterval="16dp"
91-
app:frameDrawable="@drawable/switch_frame"
92-
app:stateDrawable="@drawable/selector_switch_state"
93-
app:stateMaskDrawable="@drawable/switch_state_mask"
94-
app:sliderDrawable="@drawable/selector_switch_slider"/>
56+
android:background="@drawable/selector_preference_header"
57+
android:text="天气预报" />
9558

9659
<me.panpf.switchbutton.SwitchButton
97-
style="@style/item"
9860
android:id="@+id/switch_main_8"
99-
android:text="系统消息"
61+
style="@style/item"
10062
android:background="@drawable/selector_preference_footer"
101-
app:withTextInterval="16dp"
102-
app:frameDrawable="@drawable/switch_frame"
103-
app:stateDrawable="@drawable/selector_switch_state"
104-
app:stateMaskDrawable="@drawable/switch_state_mask"
105-
app:sliderDrawable="@drawable/selector_switch_slider"/>
63+
android:text="系统消息" />
10664
</LinearLayout>
10765
</ScrollView>

0 commit comments

Comments
 (0)