WaveLoadingView - 水波加载

WaveLoadingView - An Android library that provides a realistic wave-loading effect.


Sample

sample


Usage

For a working implementation of this project see the sample/ folder.

Step 1

Include the library as a local library project or add the dependency in your build.gradle.

1
2
3
4
5
dependencies {
compile 'me.itangqi.waveloadingview:library:0.2.0'
// I have uploaded v0.2.0 on 2016-02-17, if it doesn't take effect or your
// gradle cannot find it in maven central, you may try v0.1.5.
}

Or

Import the library, then add it to your /settings.gradle and /app/build.gradle. If you don’t know how to do this, you can read my blog for help.

Step 2

Include the WaveLoadingView widget in your layout. And you can customize it like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<me.itangqi.waveloadingview.WaveLoadingView
android:id="@+id/waveLoadingView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:wlv_borderColor="@color/colorAccent"
app:wlv_borderWidth="3dp"
app:wlv_progressValue="40"
app:wlv_shapeType="circle"
app:wlv_titleBottom="Bottom Title"
app:wlv_titleBottomColor="@color/colorPrimaryText"
app:wlv_titleBottomSize="20sp"
app:wlv_titleCenter="Center Title"
app:wlv_titleCenterColor="@color/colorPrimaryText"
app:wlv_titleCenterSize="24sp"
app:wlv_titleTop="Top Title"
app:wlv_titleTopColor="@color/colorPrimaryText"
app:wlv_titleTopSize="20sp"
app:wlv_waveAmplitude="70"
app:wlv_waveColor="@color/colorAccent"/>

Step 3

You can write some animation codes to the callbacks such as setOnCheckedChangeListener, onProgressChanged, etc in your Activity.

1
2
3
4
5
6
7
8
9
10
WaveLoadingView mWaveLoadingView = (WaveLoadingView) findViewById(R.id.waveLoadingView);
truemWaveLoadingView.setShapeType(WaveLoadingView.ShapeType.CIRCLE);
truemWaveLoadingView.setTopTitle("Top Title");
truemWaveLoadingView.setCenterTitleColor(Color.GRAY);
truemWaveLoadingView.setBottomTitleSize(18);
truemWaveLoadingView.setProgressValue(80);
truemWaveLoadingView.setBorderWidth(10);
truemWaveLoadingView.setAmplitudeRatio(60);
truemWaveLoadingView.setWaveColor(Color.GRAY);
truemWaveLoadingView.setBorderColor(Color.GRAY);

Customization

Do what you what :)

name format description
wlv_borderWidth dimension set border width, default is 0
wlv_borderColor color set border color
wlv_progressValue integer set progress value, default is 50
wlv_shapeType enum set shape type, default is circle
wlv_waveColor color set wave color
wlv_waveAmplitude float set wave amplitude
wlv_titleTopSize dimension set top title size, default is 18
wlv_titleCenterSize dimension set center title size, default is 22
wlv_titleBottomSize dimension set bottom size, default is 18
wlv_titleTopColor color set top title color
wlv_titleCenterColor color set center title color
wlv_titleBottomColor color set bottom title color
wlv_titleTop string set top title content, default is null
wlv_titleCenter string set center title content, default is null
wlv_titleBottom string set bottom title content, default is null

All attributes have their respective getters and setters to change them at runtime.

Change Log

0.2.0 (2016-02-17)

Implemented enhancements:

  • Prefix the attributes with “wlv”

Fixed bugs:

  • setProgressValue() increase doesn’t conform to logic #8

Update:

  • Update build.gradle
  • Update Sample

0.1.5 (2016-01-14)

Fixed bugs:

  • IllegalArgumentException: width and height must be > 0 while loading Bitmap from View #6

0.1.4 (2015-12-17)

Fixed bugs:

  • setProgressValue() doesn’t change the value of mProgressValue #4

0.1.3

Fixed bugs:

  • Attribute “borderWidth” has already been defined #2

Demo

Download

Community

Looking for contributors, feel free to fork !

Tell me if you’re using my library in your application, I’ll share it in this README.

Thanks

Inspired by

  • WaveView created by gelitenight
  • CircularFillableLoaders created by lopspower

License

Apache 2.0


期待与你成为朋友