ViewPager打造輪播圖(Banner)\引導頁(Guide)
前言
今年7月時,在Github釋出了一個開源的Banner庫,雖然Star不多,但還是有少部分人使用。
Banner效果:
昨天,有使用此庫的同學提出需求,想在引導頁的時候用這個庫並且最後一頁有進入按鈕如何實現,為滿足他的需求,也方便更多開發者是快速實現。進行了簡單的擴充套件支援Guide模式的使用。
Guide效果圖:
OK,效果如圖所以,咱們此庫滿足了既可在Banner上使用也可以快速在第一次安裝應用的時候引導頁使用。
Banner與Guide有什麼區別?
引導頁的最後一頁有按鈕,Banners沒有
引導頁的底部原點距離較大,Banners可以幾乎固定
Banner基礎上擴充套件實現第一步:新增按鈕
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.allure.lbanners.viewpager.HorizonVerticalViewPager
android:id="@+id/gallery"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:unselectedAlpha="1"></com.allure.lbanners.viewpager.HorizonVerticalViewPager>
<LinearLayout
android:id="@+id/indicatorLayout"
android:layout_width ="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:orientation="horizontal"
android:padding="20dp"></LinearLayout>
<Button
android:id="@+id/btn_start"
android:layout_width="104dp"
android:layout_height="29dp"
android:layout_above="@id/indicatorLayout"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp"
android:background="@drawable/banners_btn_shape"
android:gravity="center"
android:text="立即開啟"
android:textColor="#f24814"
android:textSize="12sp" />
</RelativeLayout>
相比於原來咱們新增了按鈕,這時候咱們按照這個佈局執行在每一個介面都包含了Button,而引導頁模式只有在最後一頁需要展示按鈕。
Banner基礎上擴充套件實現第二步:按鈕的控制與模式支援
- 模式的支援
attrs.xml下新增自定義屬性
<!--是否為引導頁-->
<attr name="isGuide" format="boolean"></attr>
<attr name="indicatorBottomPadding" format="integer"></attr>
- 按鈕的控制
在ViewPager中咱們控制按鈕可以在ViewPager.OnPageChangeListener的介面方法中onPageScrolled進行控制
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
Log.d("LMBanners", "onPageScrolled was invoke()");
int realPosition = position %= showCount;
if(!isGuide){
btnStart.setVisibility(View.GONE);
return;
}
if (realPosition == getItemCount() - 2) {
if (positionOffset > 0.5f) {
if (btnStart != null) {
ViewHelper.setAlpha(btnStart, positionOffset);
btnStart.setVisibility(View.VISIBLE);
}
} else {
btnStart.setVisibility(View.GONE);
}
} else if (realPosition == getItemCount() - 1) {
if (positionOffset < 0.5f) {
btnStart.setVisibility(View.VISIBLE);
ViewHelper.setAlpha(btnStart, 1.0f - positionOffset);
} else {
btnStart.setVisibility(View.GONE);
}
} else {
btnStart.setVisibility(View.GONE);
}
}
以上程式碼中isGuide咱們判斷是哪一種模式,如果不是Guide引導頁模式,直接設定按鈕不顯示,並且跳出程式。
如果是Guide引導頁模式,咱們針對倒數第二頁與最後的控制的滑動距離來判斷了按鈕的顯示。
核心點:
positionOffset:表示滑動的距離
向左滑動1—->>0.5>>0
向右滑動0—->>0.5>>1
根據滑動的距離進行按鈕的一個漸變顯示。
Banner基礎上擴充套件實現第三步:按鈕的點選回撥
點選按鈕需要執行開發者的自身邏輯跳轉,咱們用介面回撥完成
public interface onStartListener {
void startOpen();
}
Banner基礎上擴充套件實現第四步:Guide模式使用方式
對比banner只需要增加以下程式碼,如果需要其他屬性可以自己設定(如,不自動滾動,不設定迴圈播放等等)
//設定為全屏
mLBanners.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
//true為Guide模式,false為banner模式
mLBanners.isGuide(true);
mLBanners.setOnStartListener(new LMBanners.onStartListener() {
@Override
public void startOpen() {
//回撥跳轉的邏輯
Toast.makeText(MainActivity.this,"我要進入主介面",1).show();
}
});
到此,咱們的banner圖升級為Guide模式的相簿就完成。
如果有需要的同學可以自取使用,有BUG或者使用問題疑問請QQ或者Issues反饋