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


前言

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

开发环境:Android studio;Eclipse用户请直接进入项目首页,克隆源码。

Github项目主页:SmoothProgressBar

有没有炫酷的Fell啊

效果图


详细配置使用说明

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

效果图

Enjoy it ? Donate me ! 求鼓励,求支持!
0%