Android 炫酷多重水波紋 MultiWaveHeader

自去年第一次發佈開源庫 SmartRefreshLayout 以來，深入的感覺到了開源的樂趣。 因此打算之後開發過程當中把一些本身實現的實用開源庫也開源出來，供你們使用、討論、升級。 MultiWaveHeader 即是第二個發佈的開源庫！先來看看下面的展現效果吧。

Demo

登陸場景

下載 APK-Demo

項目地址： github.com/MultiWaveHe…

特性

MultiWaveHeader 是一個能夠高度定製每一條水波、且隨意增長水波數量的 Android 水波開源庫。 從而經過使用者本身的創意定製，能夠使用在不一樣的頁面場景。 目前 github 能搜索到的比較流行的水波開源庫，如：tangqi92/WaveLoadingView、john990/WaveView、gelitenight/WaveView 等目前看起來對水波自己的可定製程度不高，都是固定兩條水波。

控制檯

方向

頂部	底部

數量

一對	單一

使用

1.在 build.gradle 中添加依賴

compile 'com.scwang.wave:MultiWaveHeader:1.0.0-alpha-1'
複製代碼

2.在XML佈局文件中添加 MultiWaveHeader

<com.scwang.wave.MultiWaveHeader android:id="@+id/waveHeader" android:layout_width="match_parent" android:layout_height="200dp">
複製代碼

屬性

能夠配置一些基本的屬性.

java

MultiWaveHeader waveHeader = findViewById(R.id.waveHeader);

    waveHeader.setStartColor(R.color.colorPrimary);
    waveHeader.setCloseColor(R.color.colorPrimaryDark);
    waveHeader.setColorAlpha(.5f);

    waveHeader.setWaveHeight(50);
    waveHeader.setGradientAngle(360);
    waveHeader.setProgress(.8f);
    waveHeader.setVelocity(1f);
    waveHeader.setScaleY(-1f);

    waveHeader.setWaves("PairWave");

    waveHeader.start();
    waveHeader.stop();
    waveHeader.isRunning();
複製代碼

xml

<com.scwang.wave.MultiWaveHeader android:id="@+id/waveHeader" android:layout_width="match_parent" android:layout_height="200dp" android:scaleY="-1" app:mwhVelocity="1" app:mwhProgress="1" app:mwhRunning="true" app:mwhGradientAngle="45" app:mwhWaveHeight="50dp" app:mwhColorAlpha="0.45" app:mwhStartColor="@color/colorPrimaryDark" app:mwhCloseColor="@color/colorPrimaryLight" app:mwhWaves="MultiWave">
複製代碼

精準定製

MultiWaveHeader 能夠精準定製每一條水波的參數：偏移量、拉伸量、運動速度和方向。

java

MultiWaveHeader waveHeader = findViewById(R.id.waveHeader);


    String[] waves = new String[]{
        "70,25,1.4,1.4,-26",//wave-1:offsetX(dp),offsetY(dp),scaleX,scaleY,velocity(dp/s)
        "100,5,1.4,1.2,15",
        "420,0,1.15,1,-10",//wave-3:水平偏移(dp),豎直偏移(dp),水平拉伸,豎直拉伸,速度(dp/s)
        "520,10,1.7,1.5,20",
        "220,0,1,1,-15",
    };
    waveHeader.setWaves(TextUtils.join(" ", Arrays.asList(waves)));// custom
    waveHeader.setWaves("PairWave");// default two waves
    waveHeader.setWaves("MultiWave");// default five waves

複製代碼

xml

<com.scwang.wave.MultiWaveHeader android:id="@+id/waveHeader" android:layout_width="match_parent" android:layout_height="200dp" app:mwhWaves="PairWave" app:mwhWaves="MultiWave" app:mwhWaves=" 70,25,1.4,1.4,-26 100,5,1.4,1.2,15 420,0,1.15,1,-10 520,10,1.7,1.5,20 220,0,1,1,-15">
複製代碼