CoolViewPager:即刻重新整理,自定義邊緣效果顏色,雙向自動迴圈,內建垂直切換效果,想要的都在這裡

幻海流心發表於2018-06-05

CoolViewPager:即刻重新整理,自定義邊緣效果顏色,雙向自動迴圈,內建垂直切換效果,想要的都在這裡

這兩天在GitHub上傳了一個自定義ViewPager:CoolViewPager,具有以下功能特徵:

  1. 支援水平及垂直方向迴圈滾動
  2. 支援自動滾動
  3. 支援自動滾動方向、滾動時間、間隔時間的設定
  4. 支援呼叫notifyDataSetChanged實時重新整理介面
  5. 支援邊緣效果顏色的設定
  6. 為垂直滾動提供了適宜的介面切換效果

錄屏GIF

為什麼寫這個庫

我們平時使用support包中的ViewPager,當adapter中資料變更後,呼叫notifyDataSetChanged並不能重新整理介面,需要重新呼叫ViewPager.setAdapter方法;網上所有的自定義ViewPager,幾乎都沒有提供垂直方向的切換效果;很多時候,我們需要變更ViewPager滑動到邊緣的漸變色以配合App特定場景.CoolViewPager可以很方便的解決上述問題.

使用步驟

在你的build.gradle中新增依賴

dependencies {
    implementation 'com.huanhailiuxin.view:coolviewpager:1.0.0'
}
複製程式碼

在你的佈局檔案中引入CoolViewPager

<com.huanhailiuxin.coolviewpager.CoolViewPager
    android:id="@+id/vp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />
複製程式碼

在Java程式碼中獲取CoolViewPager,設定各種屬性,為其設定Adapter

public class ActivityEdgeEffectColor extends BaseActivity {
    private CoolViewPager vp;
    
    ****
    CoolViewPager vp = findViewById(R.id.vp);
    vp.setScrollMode(CoolViewPager.ScrollMode.HORIZONTAL);
    vp.setAdapter(adapter);
    ****
}
複製程式碼

屬性:

<?xml version="1.0" encoding="utf-8"?>

<resources>
    <declare-styleable name="CoolViewPager">
        <attr name="cvp_scrollmode" format="enum">
            <enum name="horizontal" value="0" />
            <enum name="vertical" value="1" />
        </attr>
        <attr name="cvp_autoscroll" format="boolean" />
        <attr name="cvp_intervalinmillis" format="integer"/>
        <attr name="cvp_autoscrolldirection" format="enum">
            <enum name="forward" value="0" />
            <enum name="backward" value="1" />
        </attr>
        <attr name="cvp_infiniteloop" format="boolean" />
        <attr name="cvp_scrollduration" format="integer"/>
        <attr name="cvp_drawedgeeffect" format="boolean"/>
        <attr name="cvp_edgeeffectcolor" format="color"/>
    </declare-styleable>
</resources>
複製程式碼

我們可以通過xml或Java程式碼的方式設定CoolViewPager例項的屬性.

attribute name description
cvp_scrollmode 滾動方向
cvp_autoscroll 是否開啟自動滾動
cvp_intervalinmillis 自動滾動時間間隔
cvp_autoscrolldirection 自動滾動方向
cvp_infiniteloop 是否迴圈滾動
cvp_scrollduration 自動滾動耗時
cvp_drawedgeeffect 是否繪製邊緣效果
cvp_edgeeffectcolor 繪製的邊緣效果顏色

通過XML佈局檔案

<com.huanhailiuxin.coolviewpager.CoolViewPager
    android:id="@+id/vp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:cvp_scrollmode="vertical"
    app:cvp_autoscroll="true"
    app:cvp_intervalinmillis="1000"
    app:cvp_autoscrolldirection="backward"
    app:cvp_infiniteloop="true"
    app:cvp_scrollduration="600"
    app:cvp_drawedgeeffect="true"
    app:cvp_edgeeffectcolor="@color/colorPrimary"
    />
複製程式碼

通過Java程式碼

public class ActivityEdgeEffectColor extends BaseActivity {
    private CoolViewPager vp;
    
    private void initViewPager(){
        vp = findViewById(R.id.vp);
        vp.setScrollMode(CoolViewPager.ScrollMode.VERTICAL);
        vp.setAutoScroll(true,1000);
        vp.setAutoScrollDirection(CoolViewPager.AutoScrollDirection.BACKWARD);
        vp.setInfiniteLoop(true);
        vp.setScrollDuration(true,600);
        vp.setDrawEdgeEffect(true);
        vp.setEdgeEffectColor(getResources().getColor(R.color.colorPrimary));
    }
}

複製程式碼

相關文章