前言
去年7月時，在Github發(fā)布了一個開源的Banner庫，雖然Star不多，但還是有少部分人使用。
Banner效果：
Github鏈接地址：https://github.com/Allure0/LMBanners
昨天，有使用此庫的同學(xué)提出需求，想在引導(dǎo)頁的時候用這個庫并且最后一頁有進(jìn)入按鈕如何實(shí)現(xiàn)，為滿足他的需求，也方便更多開發(fā)者是快速實(shí)現(xiàn)。進(jìn)行了簡單的擴(kuò)展支持Guide模式的使用。
Guide效果圖：
OK，效果如圖所以，咱們此庫滿足了既可在Banner上使用也可以快速在第一次安裝應(yīng)用的時候引導(dǎo)頁使用。
Banner與Guide有什么區(qū)別？
引導(dǎo)頁的最后一頁有按鈕，Banners沒有
引導(dǎo)頁的底部原點(diǎn)距離較大，Banners可以幾乎固定
Banner基礎(chǔ)上擴(kuò)展實(shí)現(xiàn)第一步：添加按鈕
<?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>
相比于原來咱們新增了按鈕，這時候咱們按照這個布局運(yùn)行在每一個界面都包含了Button,而引導(dǎo)頁模式只有在最后一頁需要展示按鈕。
Banner基礎(chǔ)上擴(kuò)展實(shí)現(xiàn)第二步：按鈕的控制與模式支持
模式的支持
attrs.xml下新增自定義屬性
<!--是否為引導(dǎo)頁--> <attr name="isGuide" format="boolean"></attr> <attr name="indicatorBottomPadding" format="integer"></attr>
按鈕的控制
在ViewPager中咱們控制按鈕可以在ViewPager.OnPageChangeListener的接口方法中onPageScrolled進(jìn)行控制
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引導(dǎo)頁模式，直接設(shè)置按鈕不顯示，并且跳出程序。
如果是Guide引導(dǎo)頁模式，咱們針對倒數(shù)第二頁與最后的控制的滑動距離來判斷了按鈕的顯示。
核心點(diǎn)：
positionOffset：表示滑動的距離
向左滑動1—->>0.5>>0
向右滑動0—->>0.5>>1
根據(jù)滑動的距離進(jìn)行按鈕的一個漸變顯示。
Banner基礎(chǔ)上擴(kuò)展實(shí)現(xiàn)第三步：按鈕的點(diǎn)擊回調(diào)
點(diǎn)擊按鈕需要執(zhí)行開發(fā)者的自身邏輯跳轉(zhuǎn)，咱們用接口回調(diào)完成
public interface onStartListener { void startOpen(); }Banner基礎(chǔ)上擴(kuò)展實(shí)現(xiàn)第四步：Guide模式使用方式
對比banner只需要增加以下代碼，如果需要其他屬性可以自己設(shè)置（如，不自動滾動，不設(shè)置循環(huán)播放等等）
//設(shè)置為全屏 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() { //回調(diào)跳轉(zhuǎn)的邏輯 Toast.makeText(MainActivity.this,"我要進(jìn)入主界面",1).show(); } });到此，咱們的banner圖升級為Guide模式的圖庫就完成。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
