Android中github开源进度条类框架SmoothProgressBar的使用

Posted on | In
Symbols count in article: 35k | Reading time ≈ 31 mins.

前言

SmoothProgressBar是Github上的一个开源框架， 牛人所著， 只作翻译；

开发环境：Android studio；Eclipse用户请直接进入项目首页，克隆源码。

Github项目主页：SmoothProgressBar

有没有炫酷的Fell啊

SmoothProgressBar-show

详细配置使用说明

Maven 库添加

作者已经将该库放在Maven Centra中了， 所以Android Studio 用户可直接进行如下配置：在“项目(project)”的build.gradle中添加如下代码：

1
2
3
4
5
repositories {
    maven {
        url "https://oss.sonatype.org/content/repositories/snapshots/"
    }
}

在app文件夹的build.gradle文件中添加如下代码：

1
2
3
dependencies {
    compile 'com.github.castorflex.smoothprogressbar:library:1.0.1-SNAPSHOT@aar'
}

加入一些作者提供的Style吧

在res/values/styles.xml文件中添加样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="spbStyle">@style/SmoothProgressBar</item>
</style>

<style name="GPlusProgressBar" parent="SmoothProgressBar">
    <item name="spb_stroke_separator_length">12dp</item>
    <item name="spb_sections_count">4</item>
    <item name="spb_speed">0.7</item>
    <item name="spb_interpolator">spb_interpolator_linear</item>
    <item name="spb_colors">@array/gplus_colors</item
</style>

<style name="GNowProgressBar" parent="SmoothProgressBar">
    <item name="spb_stroke_separator_length">8dp</item>
    <item name="spb_sections_count">2</item>
    <item name="spb_speed">1.7</item>
    <item name="spb_progressiveStart_speed">2</item>
	<item name="spb_progressiveStop_speed">3.4</item>
	<item name="spb_interpolator">spb_interpolator_acceleratedecelerate</item>
	<item name="spb_mirror_mode">true</item>
	<item name="spb_reversed">true</item>
	<item name="spb_colors">@array/gplus_colors</item>
	<item name="spb_progressiveStart_activated">true</item>
	<item name="spb_generate_background_with_colors">false</item>
</style>

<style name="GradientProgressBar" parent="SmoothProgressBar">
	<item name="spb_stroke_separator_length">0dp</item>
	<item name="spb_sections_count">3</item>
	<item name="spb_speed">2.0</item>
	<item name="android:interpolator">@android:anim/decelerate_interpolator</item>
	<item name="spb_colors">@array/gplus_colors</item>
	<item name="spb_gradients">true</item>
</style>

<style name="PocketProgressBar" parent="SmoothProgressBar">
	<item name="spb_stroke_separator_length">4dp</item>
	<item name="spb_sections_count">4</item>
	<item name="spb_speed">1</item>
	<item name="android:interpolator">@anim/pocket_interpolator</item>
	<item name="spb_colors">@array/pocket_bar_colors</item>
	<item name="spb_progressiveStart_activated">true</item>
	<item name="spb_generate_background_with_colors">false</item>
</style>

添加缺少的颜色资源

在res/values/color.xml添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<integer-array name="colors">
	<item>@color/holo_blue_dark</item>
	<item>@color/holo_yellow_dark</item>
	<item>@color/holo_green_dark</item>
	<item>@color/holo_purple_dark</item>
	<item>@color/holo_red_dark</item>
</integer-array>

<integer-array name="gplus_colors">
	<item>@color/gplus_color_1</item>
	<item>@color/gplus_color_2</item>
	<item>@color/gplus_color_3</item>
	<item>@color/gplus_color_4</item>
</integer-array>

<integer-array name="pocket_bar_colors">
	<item>@color/pocket_color_1</item>
	<item>@color/pocket_color_1</item>
	<item>@color/pocket_color_1</item>
	<item>@color/pocket_color_1</item>
	<item>@color/pocket_color_2</item>
	<item>@color/pocket_color_2</item>
	<item>@color/pocket_color_2</item>
	<item>@color/pocket_color_2</item>
	<item>@color/pocket_color_3</item>
	<item>@color/pocket_color_3</item>
	<item>@color/pocket_color_3</item>
	<item>@color/pocket_color_3</item>
	<item>@color/pocket_color_4</item>
	<item>@color/pocket_color_4</item>
	<item>@color/pocket_color_4</item>
	<item>@color/pocket_color_4</item>
</integer-array>

<integer-array name="pocket_background_colors">
	<item>@color/pocket_color_1</item>
	<item>@color/pocket_color_2</item>
	<item>@color/pocket_color_3</item>
	<item>@color/pocket_color_4</item>
</integer-array>

<color name="pocket_color_1">#85edb9</color>
<color name="pocket_color_2">#34bdb7</color>
<color name="pocket_color_3">#ee4458</color>
<color name="pocket_color_4">#fcb74d</color>

<color name="gplus_color_1">#3e802f</color>
<color name="gplus_color_2">#f4b400</color>
<color name="gplus_color_3">#427fed</color>
<color name="gplus_color_4">#b23424</color>

<color name="holo_blue_dark">#0099cc</color>
<color name="holo_yellow_dark">#ff8800</color>
<color name="holo_green_dark">#669900</color>
<color name="holo_purple_dark">#9933cc</color>
<color name="holo_red_dark">#cc0000</color>

添加缺少的strings

在res/values/strings.xml添加如下代码：

1
2
3
4
5
6
<string-array name="interpolators">
	<item>Accelerate</item>
	<item>Linear</item>
	<item>AccelerateDecelerate</item>
	<item>Decelerate</item>
</string-array>

还有一个动画资源：anim

在res/anim文件夹下新建一个名为：pocket_interpolator.xml动画资源文件，并添加如下代码：

1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
	<accelerateInterpolator
		android:factor="1.8"
		xmlns:android="http://schemas.android.com/apk/res/android" />

这样所需要使用的资源都添加完毕了

SmoothProgressBar调用

提供两种方式： <1> 在布局文件中添加直接使用； <2> 代码调用

<1> 在布局文件中添加直接使用:

在xml文件中直接添加布局代码使用， 添加代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<fr.castorflex.android.smoothprogressbar.SmoothProgressBar				  
	xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    app:spb_sections_count="4"
    app:spb_color="#FF0000"
    app:spb_speed="2.0"
    app:spb_stroke_width="4dp"
    app:spb_stroke_separator_length="4dp"
    app:spb_reversed="false"
    app:spb_mirror_mode="false"
    app:spb_progressiveStart_activated="true"
    app:spb_progressiveStart_speed="1.5"
    app:spb_progressiveStop_speed="3.4" />

<2> 使用java代码控制实现，灵活（推荐）

先在布局文件中定义个id:

1
2
3
4
5
6
<fr.castorflex.android.smoothprogressbar.SmoothProgressBar
	android:id="@+id/smooth_progress_bar"
    android:layout_width="match_parent"
    android:layout_height="8dp"
    style="@style/GNowProgressBar"
    android:indeterminate="true" />

在相应的Activity中实现绑定：

1
2
3
4
5
6
7
8
9
10
// 变量声明
private SmoothProgressBar progressBar;

// 在void onCreate(Bundle savedInstanceState)绑定id
progressBar = (SmoothProgressBar)findViewById(R.id.smooth_progress_bar);

// 由于已经定义加载布局时，进度条就会自动运行（同方法一）
// 使用progressiveStop()在合适的地方停止进度条运行
// 如网络通信结束，登陆成功，webview页面加载完毕等时刻停止
progressBar.progressiveStop();

SmoothProgressBar-show

0%