bga-banner-引導頁滑動第三方控件

該控件摘自:https://github.com/bingoogolapple/BGABanner-Androidjava

做用:引導界面滑動導航 + 大於等於1頁時無限輪播 + 各類切換動畫輪播效果android

功能介紹

  •  引導界面導航效果
  •  支持根據服務端返回的數據動態設置廣告條的總頁數
  •  支持大於等於1頁時的無限循環自動輪播、手指按下暫停輪播、擡起手指開始輪播
  •  支持自定義指示器位置和廣告文案位置
  •  支持圖片指示器和數字指示器
  •  支持 ViewPager 各類切換動畫
  •  支持選中特定頁面
  •  支持監聽 item 點擊事件
  •  加載網絡數據時支持佔位圖設置,避免出現整個廣告條空白的狀況
  •  多個 ViewPager 跟隨滾動

效果圖與示例 apk

banner

使用

1.添加 Gradle 依賴

Maven Central bga-banner 後面的「latestVersion」指的是左邊這個 maven-central 徽章後面的「數字」,請自行替換。git

dependencies {
    compile 'com.android.support:support-v4:latestVersion' compile 'cn.bingoogolapple:bga-banner:latestVersion@aar' }

2.在佈局文件中添加 BGABanner

<cn.bingoogolapple.bgabanner.BGABanner
    android:id="@+id/banner_guide_content" style="@style/MatchMatch" app:banner_pageChangeDuration="1000" app:banner_pointAutoPlayAble="false" app:banner_pointContainerBackground="@android:color/transparent" app:banner_pointDrawable="@drawable/bga_banner_selector_point_hollow" app:banner_pointTopBottomMargin="15dp" app:banner_transitionEffect="alpha" />

3.在 Activity 或者 Fragment 中配置 BGABanner 的數據源

有多種配置數據源的方式,這裏僅列出三種方式。github

配置數據源的方式1:經過傳入數據模型並結合 Adapter 的方式配置數據源。這種方式主要用於加載網絡圖片,以及實現少於3頁時的無限輪播網絡

mContentBanner.setAdapter(new BGABanner.Adapter<ImageView, String>() { @Override public void fillBannerItem(BGABanner banner, ImageView itemView, String model, int position) { Glide.with(MainActivity.this) .load(model) .placeholder(R.drawable.holder) .error(R.drawable.holder) .centerCrop() .dontAnimate() .into(itemView); } }); mContentBanner.setData(Arrays.asList("網絡圖片路徑1", "網絡圖片路徑2", "網絡圖片路徑3"), Arrays.asList("提示文字1", "提示文字2", "提示文字3"));

配置數據源的方式2:經過直接傳入視圖集合的方式配置數據源,主要用於自定義引導頁每一個頁面佈局的狀況app

List<View> views = new ArrayList<>(); views.add(BGABannerUtil.getItemImageView(this, R.drawable.ic_guide_1)); views.add(BGABannerUtil.getItemImageView(this, R.drawable.ic_guide_2)); views.add(BGABannerUtil.getItemImageView(this, R.drawable.ic_guide_3)); mContentBanner.setData(views);

配置數據源的方式3:經過傳入圖片資源 id 的方式配置數據源,主要用於引導頁每一頁都是隻顯示圖片的狀況maven

mContentBanner.setData(R.drawable.uoko_guide_foreground_1, R.drawable.uoko_guide_foreground_2, R.drawable.uoko_guide_foreground_3);

.監聽廣告 item 的單擊事件,在 BGABanner 裏已經幫開發者處理了防止重複點擊事件

mContentBanner.setDelegate(new BGABanner.Delegate<ImageView, String>() { @Override public void onBannerItemClick(BGABanner banner, ImageView itemView, String model, int position) { Toast.makeText(banner.getContext(), "點擊了" + position, Toast.LENGTH_SHORT).show(); } });

5.設置「進入按鈕」和「跳過按鈕」控件資源 id 及其點擊事件,若是進入按鈕和跳過按鈕有一個不存在的話就傳 0,在 BGABanner 裏已經幫開發者處理了防止重複點擊事件,在 BGABanner 裏已經幫開發者處理了「跳過按鈕」和「進入按鈕」的顯示與隱藏

mContentBanner.setEnterSkipViewIdAndDelegate(R.id.btn_guide_enter, R.id.tv_guide_skip, new BGABanner.GuideDelegate() { @Override public void onClickEnterOrSkip() { startActivity(new Intent(GuideActivity.this, MainActivity.class)); finish(); } });

自定義屬性說明

<declare-styleable name="BGABanner"> <!-- 指示點容器背景 --> <attr name="banner_pointContainerBackground" format="reference|color" /> <!-- 指示點背景 --> <attr name="banner_pointDrawable" format="reference" /> <!-- 指示點容器左右內間距 --> <attr name="banner_pointContainerLeftRightPadding" format="dimension" /> <!-- 指示點上下外間距 --> <attr name="banner_pointTopBottomMargin" format="dimension" /> <!-- 指示點左右外間距 --> <attr name="banner_pointLeftRightMargin" format="dimension" /> <!-- 指示器的位置 --> <attr name="banner_indicatorGravity"> <flag name="top" value="0x30" /> <flag name="bottom" value="0x50" /> <flag name="left" value="0x03" /> <flag name="right" value="0x05" /> <flag name="center_horizontal" value="0x01" /> </attr> <!-- 是否開啓自動輪播 --> <attr name="banner_pointAutoPlayAble" format="boolean" /> <!-- 自動輪播的時間間隔 --> <attr name="banner_pointAutoPlayInterval" format="integer" /> <!-- 頁碼切換過程的時間長度 --> <attr name="banner_pageChangeDuration" format="integer" /> <!-- 頁面切換的動畫效果 --> <attr name="banner_transitionEffect" format="enum"> <enum name="defaultEffect" value="0" /> <enum name="alpha" value="1" /> <enum name="rotate" value="2" /> <enum name="cube" value="3" /> <enum name="flip" value="4" /> <enum name="accordion" value="5" /> <enum name="zoomFade" value="6" /> <enum name="fade" value="7" /> <enum name="zoomCenter" value="8" /> <enum name="zoomStack" value="9" /> <enum name="stack" value="10" /> <enum name="depth" value="11" /> <enum name="zoom" value="12" /> </attr> <!-- 提示文案的文字顏色 --> <attr name="banner_tipTextColor" format="reference|color" /> <!-- 提示文案的文字大小 --> <attr name="banner_tipTextSize" format="dimension" /> <!-- 加載網絡數據時覆蓋在 BGABanner 最上層的佔位圖 --> <attr name="banner_placeholderDrawable" format="reference" /> <!-- 是不是數字指示器 --> <attr name="banner_isNumberIndicator" format="boolean" /> <!-- 數字指示器文字顏色 --> <attr name="banner_numberIndicatorTextColor" format="reference|color" /> <!-- 數字指示器文字大小 --> <attr name="banner_numberIndicatorTextSize" format="dimension" /> <!-- 數字指示器背景 --> <attr name="banner_numberIndicatorBackground" format="reference" /> <!-- 當只有一頁數據時是否顯示指示器,默認值爲 false --> <attr name="banner_isNeedShowIndicatorOnOnlyOnePage" format="boolean" /> <!-- 自動輪播區域距離 BGABanner 底部的距離,用於使指示器區域與自動輪播區域不重疊 --> <attr name="banner_contentBottomMargin" format="dimension"/> </declare-styleable>
相關文章
相關標籤/搜索