首页 » FastDev4Android » 正文

非常漂亮的进度指示器AVLoadingIndicatorView的使用讲解

(一).前言:
今天我们的项目继续更新,今天主要要加入一个非常漂亮的进度指示器AVLoadingIndicatorView(开源地址)效果很不错,用起来非常简单和平时ProgressBar一样简单。效果如下:
FastDev4Android框架项目地址:https://github.com/jiangqqlmj/FastDev4Android
(二).简要介绍:
AVLoadingIndicatorView是一个Android平台进度动画的集合框架,我们可以非常简单的配置和使用动画。
(三).使用方式:
3.1.AndroidStudio框架引入配置:build.grade配置

1
2
3
4
dependencies {
       compile 'com.wang.avi:library:1.0.0'
       compile 'com.nineoldandroids:library:2.4.0'
    }

3.2.布局引入加载控件

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
< ?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    </linearlayout><linearlayout android:layout_width="fill_parent"
        android:layout_height="49dp"
        android:background="#e7abff"
        android:gravity="center"
        >
        <textview android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textColor="@color/white"
            android:text="进度动画实例"/>
    </linearlayout>
    <scrollview android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <linearlayout android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical">
            <!--BallPulse-->
            </linearlayout><linearlayout android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <textview android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textColor="@color/black"
                    android:text="BallPulse:"/>
                <com .wang.avi.AVLoadingIndicatorView
                    android:id="@+id/avloadingIndicatorView_BallPulse"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:visibility="visible"
                    app:indicator="BallPulse"
                    app:indicator_color="@color/red"
                    />
            </linearlayout>
            <!--BallGridPulse-->
            <linearlayout android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <textview android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textColor="@color/black"
                    android:text="BallGridPulse:"/>
                <com .wang.avi.AVLoadingIndicatorView
                    android:id="@+id/avloadingIndicatorView_BallGridPulse"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:visibility="visible"
                    app:indicator="BallGridPulse"
                    app:indicator_color="@color/red"
                    />
            </linearlayout>

            <!--BallClipRotate-->
            <linearlayout android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <textview android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textColor="@color/black"
                    android:text="BallGridPulse:"/>
                <com .wang.avi.AVLoadingIndicatorView
                    android:id="@+id/avloadingIndicatorView_BallClipRotate"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:visibility="visible"
                    app:indicator="BallClipRotate"
                    app:indicator_color="@color/red"
                    />
            </linearlayout>
            <!--BallClipRotatePulse-->
            <linearlayout android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <textview android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textColor="@color/black"
                    android:text="BallClipRotatePulse:"/>
                <com .wang.avi.AVLoadingIndicatorView
                    android:id="@+id/avloadingIndicatorView_BallClipRotatePulse"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:visibility="visible"
                    app:indicator="BallClipRotatePulse"
                    app:indicator_color="@color/red"
                    />
            </linearlayout>

            <button android:id="@+id/progress_start"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="打开动画"/>
            <button android:id="@+id/progress_stop"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="关闭动画"/>
       
    </scrollview>

3.3.手动控制布局显示和隐藏,具体Activity代码如下:

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
package com.chinaztt.fda.test;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import com.chinaztt.fda.ui.R;
import com.chinaztt.fda.ui.base.BaseActivity;
import com.wang.avi.AVLoadingIndicatorView;
import org.androidannotations.annotations.EActivity;

/**
 * 当前类注释:
 * 项目名:FastDev4Android
 * 包名:com.chinaztt.fda.test
 * 作者:江清清 on 15/11/3 08:37
 * 邮箱:jiangqqlmj@163.com
 * QQ: 781931404
 * 公司:江苏中天科技软件技术有限公司
 */

@EActivity
public class AVLoadingIndicatorActivity extends BaseActivity{
    private Button progress_start,progress_stop;
    private AVLoadingIndicatorView avloadingIndicatorView_BallPulse;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.av_loading_indicator_layout);
        avloadingIndicatorView_BallPulse=(AVLoadingIndicatorView)this.findViewById(R.id.avloadingIndicatorView_BallPulse);
        progress_start=(Button)this.findViewById(R.id.progress_start);
        progress_stop=(Button)this.findViewById(R.id.progress_stop);

        //打开动画
        progress_start.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                avloadingIndicatorView_BallPulse.setVisibility(View.VISIBLE);
            }
        });
        //关闭动画
        progress_stop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                avloadingIndicatorView_BallPulse.setVisibility(View.GONE);
            }
        });


    }
}

3.4.实现效果如下:

(四).官方可选动画:

上面为该库提供的所有动画的实例,下面对于每一个动画的配置信息做如下说明(以行为单位):
第一行:BallPulse,BallGridPulse,BallClipRotate,BallClipRotatePulse
第二行:SquareSpin,BallClipRotateMultiple,BallPulseRise,BallRotate
第三行:CubeTransition,BallZigZag,BallZigZagDeflect,BallTrianglePath
第四行:BallScale,LineScale,LineScaleParty,BallScaleMultiple
第五行:BallPulseSync,BallBeat,LineScalePulseOut,LineScalePulseOutRapid
第六行:BallScaleRipple,BallScaleRippleMultiple,BallSpinFadeLoader,LineSpinFadeLoader
第七行:TriangleSkewSpin,Pacman,BallGridBeat,SemiCircleSpin
到此位置关于AVLoadingIndicatorView框架做出漂亮的ProgressBar,同时我们的项目已经配置该动画集框架.欢迎大家去Github站点进行clone或者下载浏览:https://github.com/jiangqqlmj/FastDev4Android 同时欢迎大家star和fork整个开源快速开发框架项目~

尊重原创,转载请注明:From Sky丶清(http://www.lcode.org) 侵权必究!
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

关注我的微博,可以获得更多精彩内容