XBanner
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyN2YzNzcTZyUmN1YTN2IzN3YDZyAzMlJjMzQmMkJTN2gjNzYTM2AzNxQDZyUjNzcTZ2UjNzYTO2MGNmJTN2cjN0YTM2IjNmJjZ2kjNlJzM3QjNjZTN2kjN4YzM3UmM3YDZ2kjNmJjZyE2MzcDM3QzN0cDO28CXxAzY3QDOzYGM3kDOhNDMycDZ5IDN1QGOkVzMkNTM2YWN2UWM5kTZjFDM3IGOjFGMxQDM0MzYiV2NhNTOwEGN48CXt92YuQnblRnbvNmclNXdiVHa0l2Zu8WbhN2Lc9CX6MHc0RHaiojIsJye.jpg)
主要功能:
支援一屏顯示多個
支援根據服務端傳回的資料動态設定廣告條的總頁數
支援大于等于1頁時的無限循環自動輪播、手指按下暫停輪播、擡起手指開始輪播
支援自定義狀态訓示點位置 左 、中 、右
支援自定義狀态訓示點
支援監聽頁面點選事件
支援設定圖檔輪播間隔
支援訓示器背景的修改及隐藏/顯示
支援顯示提示性文字功能
支援圖檔切換動畫,目前支援10種切換動畫,亦可設定自定義動畫效果
支援設定圖檔切換速度
支援設定數字訓示器
支援設定圖檔架構整體占位圖
支援Glide/Fresco等主流圖檔加載架構加載圖檔
支援自定義布局
支援AndroidX
效果圖
模式
效果圖
訓示器模式
數字模式
數字加标題模式
訓示器加标題模式
标題模式
一屏多頁模式
一屏多頁模式支援多種效果自定義
Demo Apk
基本使用
1.添加 Gradle (以前是有的是Jecenter方式引入,由于國内被牆了,切換成JitPack方式引入,使用方式不變)
Jitpack
Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
Step 2. Add the dependency
dependencies {
//普通版本依賴
implementation 'com.github.xiaohaibin:XBanner:1.8.2'
//androidX 版本使用下面的依賴
implementation 'com.github.xiaohaibin:XBanner:androidx_v1.1.6'
}
2.在清單檔案中添加網絡權限
3.在布局檔案中添加 XBanner
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/xbanner"
android:layout_width="match_parent"
android:layout_height="高度自定義"
app:AutoPlayTime="3000"
app:pointsContainerBackground="#44aaaaaa"
app:pointNormal="@drawable/shape_noraml"
app:pointSelect="@drawable/shape_selected"
app:pointsPosition="RIGHT"
app:tipTextSize="12sp"
app:isShowNumberIndicator="true"
app:isShowIndicatorOnlyOne="true"
app:pageChangeDuration="800"/>
4.在 Activity 或者 Fragment 中配置
初始化:直接傳入視圖集合進行初始化
//擷取控件
XBanner mXBanner = (XBanner) findViewById(R.id.xbanner);
//添加輪播圖檔資料(圖檔資料不局限于網絡圖檔、本地資源檔案、View 都可以),重新整理資料也是調用該方法
mXBanner.setBannerData("輪播資料集合");//setData()方法已過時,推薦使用setBannerData()方法,具體參照demo使用
5.圖檔加載
可根據自己項目需要使用相應的圖檔加載工具進行加載圖檔,此處使用 Glide ,進行加載
//加載廣告圖檔
mXBanner.loadImage(new XBanner.XBannerAdapter() {
@Override
public void loadBanner(XBanner banner, Object model, View view, int position) {
//1、此處使用的Glide加載圖檔,可自行替換自己項目中的圖檔加載架構
//2、傳回的圖檔路徑為Object類型,你隻需要強轉成你傳輸的類型就行,切記不要胡亂強轉!
Glide.with(MainActivity.this).load(((AdvertiseEntity.OthersBean)
model).getThumbnail()).placeholder(R.drawable.default_image).error(R.drawable.default_image).into((ImageView) view);
}
});
6.監聽廣告 item 的單擊事件
mXBanner.setOnItemClickListener(new XBanner.OnItemClickListener() {
@Override
public void onItemClick(XBanner banner, Object model,View view, int position) {
Toast.makeText(MainActivity.this, "點選了第"+position+"圖檔", Toast.LENGTH_SHORT).show();
}
});
7.使用 Fresco 加載圖檔時,需要自定義布局檔案
1.自定義布局檔案 R.layout.image_fresco
android:id="@+id/my_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
2.使用 setBannerData() 方法進行設定
//setData()方法已過時,推薦使用setBannerData()方法,具體參照demo使用
mXBanner.setBannerData(R.layout.image_fresco,“加載資料集合”);
3.setBannerData 使用
setBannerData方法中的資料集合中的輪播實體類需要實作 BaseBannerInfo 接口,示例如下:
public class CustomViewsInfo implements BaseBannerInfo {
private String info;
public CustomViewsInfo(String info) {
this.info = info;
}
//輪播圖檔位址,本地圖檔就傳本地資源的id,傳回Int類型
@Override
public String getXBannerUrl() {
return info;
}
//訓示器文案
@Override
public String getXBannerTitle() {
return "我是文案";
}
}
8.自定義布局
1.自定義自己需要展示的Banner顯示布局,如:R.layout.customelayout
android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="1"
android:textSize="40dp"
android:gravity="center"
android:textColor="@android:color/white"
android:background="@color/colorYellow"/>
2.使用 setBannerData() 方法進行設定
mXBanner.setBannerData("自定義布局檔案",“加載資料集合”);
3.設定資料,通過 loadImage() 方法回傳的 View 根據自定義布局設定的Id找到相應的控件進行資料設定,具體請看 CustomViewsActivity
mBanner.loadImage(new XBanner.XBannerAdapter() {
@Override
public void loadBanner(XBanner banner, Object model, View view, int position) {
TextView tvContent = (TextView) view.findViewById(R.id.tv);
tvContent.setText(String.valueOf(position + 1));
view.setBackgroundColor(Color.parseColor((String) model));
}
});
自定義屬性說明
屬性名
屬性說明
屬性值
isAutoPlay
是否支援自動輪播
boolean類型,預設為true
isTipsMarquee
是否支援提示性文字跑馬燈效果
boolean類型,預設為false
AutoPlayTime
圖檔輪播時間間隔
int值,預設為5s
pointNormal
訓示器未選中時狀态點
drawable,不設定的話為預設狀态點
pointSelect
訓示器選中時狀态點
drawable,不設定的話為預設狀态點
pointsVisibility
是否顯示訓示器
boolean類型,預設為true
pointsPosition
訓示器顯示位置
LEFT、CENTER、RIGHT類型,預設為CENTER
pointsContainerBackground
訓示器背景
可自定義設定訓示器背景
pointContainerPosition
訓示器容器顯示位置
TOP、BOTTOM類型,預設為BOTTOM
pointContainerLeftRightPadding
訓示點容器左右内間距
dimension,預設為10dp
pointTopBottomPadding
訓示點上下内間距
dimension,預設為6dp
pointLeftRightPadding
訓示點左右内間距
dimension,預設為3dp
tipTextColor
提示文案的文字顔色
reference
tipTextSize
提示文案的文字大小
dimension,預設為10dp
isShowNumberIndicator
是否顯示數字訓示器
boolean,預設為false不顯示
numberIndicatorBacgroud
數字訓示器背景
reference
isShowIndicatorOnlyOne
當隻有一張圖檔的時候是否顯示訓示點
boolean,預設為false,不顯示
isShowTips
是否展示文字
boolean,預設為false,不顯示
pageChangeDuration
圖檔切換速度
int值,預設為1000ms
isHandLoop
是否支援手動無限循環切換圖檔
boolean類型,預設為false
placeholderDrawable
設定整體輪播架構占位圖
reference
isClipChildrenMode
是否開啟一屏顯示多個模式
boolean類型,預設為false 預設不開啟
clipChildrenLefttMargin
一屏顯示多個左間距
dimension ,預設為30dp
clipChildrenRightMargin
一屏顯示多個右間距
dimension ,預設為30dp
clipChildrenTopBottomMargin
一屏顯示多個上下間距
dimension ,預設為30dp
viewpagerMargin
viewpager頁面間距
dimension ,預設為10dp
isClipChildrenModeLessThree
少于三張是否支援一屏多顯模式
boolean類型,預設為false 預設不開啟
bannerBottomMargin
banner輪播區域底部margin,可設定訓示器距離輪播圖的間距
dimension ,預設為0dp
scaleType
設定占位圖縮放類型
scaleType類型
showIndicatorInCenter
設一屏多顯模式下 訓示器是否顯示在中間圖檔位置,預設顯示中間
boolean類型
isClickSide
一屏多顯模式下 是否支援點選側邊切換圖檔,預設開啟
boolean類型
混淆配置
##XBanner 圖檔輪播混淆配置
-keep class com.stx.xhb.xbanner.**{*;}
Q&A
1.一屏顯示多個模式預設使用ScalePageTransformer切換動畫,也可以自定義;自定義動畫添加方法setCustomPageTransformer(自定義動畫效果);
2.一屏顯示多個模式預設是會縮放左右兩個頁面,若想左右頁面與中間頁面保持一緻,把切換動畫設定成自己自定義的就可以;
3.圖檔不顯示問題
1)确認是否實作了 loadImage() 方法,需要使用自己的圖檔加載架構加載圖檔!!!
2)請把加載圖檔位址複制到浏覽器看看是否打開圖檔,确認圖檔位址是否正确!!!
關于我
Thanks
感謝tanweijiu修複版本 1.1.2 中bug
感謝Leoand8修複版本 1.6.1 中bug
也歡迎各位感興趣的開發者共同維護該項目。
Contract
你的 Statr 是我最大的動力,謝謝~~~
License
Copyright (C) 2016 [email protected]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.