主頁 > 移動端開發 > Android----banner使用詳解

Android----banner使用詳解

2021-11-02 10:24:36 移動端開發

Android----banner使用詳解

在這里插入圖片描述

昨天10.31 ,斗破蒼穹的三年之約終于出來了,自己也等了很久很久,敬師長,敬家人,敬朋友,敬每一個前行路上正在奮戰的自己,星光不問趕路人,時間不負有心人,

效果圖:

在這里插入圖片描述

  1. 添加依賴

      implementation 'com.youth.banner:banner:2.1.0'
    
  2. 添加權限到你的 AndroidManifest.xml

    <!-- if you want to load images from the internet -->
    <uses-permission android:name="android.permission.INTERNET" /> 
    
  3. 布局檔案

    <com.youth.banner.Banner
            android:id="@+id/banner"
            android:layout_width="0dp"
            android:layout_height="250dp"
            android:layout_margin="10dp"
            app:banner_radius="20dp"    // 圓角
            android:clickable="true"   //  是否可點擊
            app:banner_indicator_selected_color="#95F2EC"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.157"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
  4. 邏輯代碼

    package com.hnucm.xiaotang;
    
    import android.os.Bundle;
    
    import androidx.fragment.app.Fragment;
    
    import android.util.Log;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    
    
    import com.bumptech.glide.Glide;
    import com.bumptech.glide.load.resource.bitmap.RoundedCorners;
    import com.bumptech.glide.request.RequestOptions;
    import com.youth.banner.Banner;
    import com.youth.banner.adapter.BannerImageAdapter;
    import com.youth.banner.holder.BannerImageHolder;
    import com.youth.banner.indicator.CircleIndicator;
    import com.youth.banner.listener.OnBannerListener;
    
    import org.json.JSONArray;
    import org.json.JSONException;
    import org.xutils.common.Callback;
    import org.xutils.http.RequestParams;
    import org.xutils.x;
    
    import java.util.ArrayList;
    import java.util.List;
    
    
    public class ShouYeFragment extends Fragment implements OnBannerListener {
    
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View inflate = inflater.inflate(R.layout.fragment_shou_ye, container, false);
            Banner banner =inflate.findViewById(R.id.banner);
            List<String> imgList = new ArrayList<>();
    
            x.Ext.init(getActivity().getApplication());
            x.Ext.setDebug(BuildConfig.DEBUG);  // 是否輸出debug日志, 開啟debug會影響性能.
            x.view().inject(getActivity());  //沒有用到view注解可以先不用
    
            imgList.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20211026/image.6719h9mvs700.png");
            imgList.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20211031/800-(11).2txrpbqztva0.jpg");
            imgList.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20211031/800-(5).5s6zwxy19v40.jpg");
            imgList.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20211031/800-(10).24p8puxcmqbk.jpg");
            imgList.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20211031/800-(14).pizaxijh534.jpg");
    
            RequestParams params = new RequestParams("https://www.fastmock.site/mock/08392ee207964eb010bf22b157103494/androidJavaEE/banner");
            x.http().get(params, new Callback.CommonCallback<String>() {
                @Override
                public void onSuccess(String result) {
                    try {
                        JSONArray jsonArray = new JSONArray(result);
                        for (int i=0;i<jsonArray.length();i++){
                            imgList.add((String)jsonArray.get(i));
                        }
                        banner.setDatas(imgList);    //  動態更新banner資料
                    } catch (JSONException e) {
                        e.printStackTrace();
                    }
    
                }
                @Override
                public void onError(Throwable ex, boolean isOnCallback) {
                }
                @Override
                public void onCancelled(CancelledException cex) {
                }
                @Override
                public void onFinished() {
                }
            });
    
    
            banner.setAdapter(new BannerImageAdapter<String>(imgList) {
    
                @Override
                public void onBindView(BannerImageHolder holder, String data, int position, int size) {
                    System.out.println("hello TEST");
                    Glide.with(holder.itemView)
                            .load(data)
                            .apply(RequestOptions.bitmapTransform(new RoundedCorners(30)))
                            .into(holder.imageView);
                }
    
            }).setIndicator(new 				                      CircleIndicator(getContext())).setLoopTime(1000).setOnBannerListener(this);
            //  設定圓形指示點,設定回圈時間,設定監聽器
            return inflate;
        }
    
        @Override
        public void OnBannerClick(Object data, int position) {   //  監聽每一個圖片的點擊事件
            Log.i("tag", "你點了第"+position+"張輪播圖");
        }
    }
    
  5. 常見的一些屬性設定

    方法

    更多方法以實際使用為準,下面不一定全部列出了

    方法名回傳型別描述
    getAdapter()extends BannerAdapter獲取你設定的BannerAdapter
    getViewPager2()ViewPager2獲取ViewPager2
    getIndicator()Indicator獲取你設定的指示器(沒有設定直接獲取會拋例外哦)
    getIndicatorConfig()IndicatorConfig獲取你設定的指示器配置資訊(沒有設定直接獲取會拋例外哦)
    getRealCount()int回傳banner真實總數
    setUserInputEnabled(boolean)this禁止手動滑動Banner;true 允許,false 禁止
    setDatas(List)this重新設定banner資料
    isAutoLoop(boolean)this是否允許自動輪播
    setLoopTime(long)this設定輪播間隔時間(默認3000毫秒)
    setScrollTime(long)this設定輪播滑動的時間(默認800毫秒)
    start()this開始輪播(主要配合生命周期使用),或者你手動暫停再次啟動
    stop()this停止輪播(主要配合生命周期使用),或者你需要手動暫停
    setAdapter(T extends BannerAdapter)this設定banner的配接器
    setAdapter(T extends BannerAdapter,boolean)this設定banner的配接器,是否支持無限回圈
    setOrientation(@Orientation)this設定banner輪播方向(垂直or水平)
    setOnBannerListener(this)this設定點擊事件,下標是從0開始
    addOnPageChangeListener(this)this添加viewpager2的滑動監聽
    setPageTransformer(PageTransformer)this設定viewpager的切換效果
    addPageTransformer(PageTransformer)this添加viewpager的切換效果(可以設定多個)
    setIndicator(Indicator)this設定banner輪播指示器(提供有base和介面,可以自定義)
    setIndicator(Indicator,boolean)this設定指示器(傳false代表不將指示器添加到banner上,配合布局檔案,可以自我發揮)
    setIndicatorSelectedColor(@ColorInt)this設定指示器選中顏色
    setIndicatorSelectedColorRes(@ColorRes)this設定指示器選中顏色
    setIndicatorNormalColor(@ColorInt)this設定指示器默認顏色
    setIndicatorNormalColorRes(@ColorRes)this設定指示器默認顏色
    setIndicatorGravity(@IndicatorConfig.Direction)this設定指示器位置(左,中,右)
    setIndicatorSpace(int)this設定指示器之間的間距
    setIndicatorMargins(IndicatorConfig.Margins)this設定指示器的Margins
    setIndicatorWidth(int,int)this設定指示器選中和未選中的寬度,直接影響繪制指示器的大小
    setIndicatorNormalWidth(int)this設定指示器未選中的寬度
    setIndicatorSelectedWidth(int)this設定指示器選中的寬度
    setIndicatorRadius(int)this設定指示器圓角,不要圓角可以設定為0
    setIndicatorHeight(int)this設定指示器高度
    setBannerRound(float)this設定banner圓角(還有一種setBannerRound2方法,需要5.0以上)
    setBannerGalleryEffect(int,int,float)this畫廊效果
    setBannerGalleryMZ(int,float)this魅族效果
    setStartPosition(int)this設定開始的位置 (需要在setAdapter或者setDatas之前呼叫才有效哦)
    setIndicatorPageChange()this設定指示器改變監聽 (一般是為了配合資料操作使用,看情況自己發揮)
    setCurrentItem()this設定當前位置,和原生使用效果一樣
    addBannerLifecycleObserver()this給banner添加生命周期觀察者,內部自動管理banner的生命周期

    Attributes屬性

    在banner布局檔案中呼叫,如果你自定義了indicator請做好兼容處理, 下面的屬性并不是每個指示器都用得到,所以使用時要注意!

    Attributesformatdescribe
    banner_loop_timeinteger輪播間隔時間,默認3000
    banner_auto_loopboolean是否自動輪播,默認true
    banner_infinite_loopboolean是否支持無限回圈(即首尾直接過渡),默認true
    banner_orientationenum輪播方向:horizontal(默認) or vertical
    banner_radiusdimensionbanner圓角半徑,默認0(不繪制圓角)
    banner_indicator_normal_widthdimension指示器默認的寬度,默認5dp (對RoundLinesIndicator無效)
    banner_indicator_selected_widthdimension指示器選中的寬度,默認7dp
    banner_indicator_normal_colorcolor指示器默認顏色,默認0x88ffffff
    banner_indicator_selected_colorcolor指示器選中顏色,默認0x88000000
    banner_indicator_spacedimension指示器之間的間距,默認5dp (對RoundLinesIndicator無效)
    banner_indicator_gravitydimension指示器位置,默認center
    banner_indicator_margindimension指示器的margin,默認5dp,不能和下面的同時使用
    banner_indicator_marginLeftdimension指示器左邊的margin
    banner_indicator_marginTopdimension指示器上邊的margin
    banner_indicator_marginRightdimension指示器右邊的margin
    banner_indicator_marginBottomdimension指示器下邊的margin
    banner_indicator_heightdimension指示器高度(對CircleIndicator無效)
    banner_indicator_radiusdimension指示器圓角(對CircleIndicator無效)
    banner_round_top_leftboolean設定要繪制的banner圓角方向(如果都不設定默認全部)
    banner_round_top_rightboolean設定要繪制的banner圓角方向(如果都不設定默認全部)
    banner_round_bottom_leftboolean設定要繪制的banner圓角方向(如果都不設定默認全部)
    banner_round_bottom_rightboolean設定要繪制的banner圓角方向(如果都不設定默認全部)
  6. github官網: GitHub - youth5201314/banner: 🔥🔥🔥Banner 2.0 來了!Android廣告圖片輪播控制元件,內部基于ViewPager2實作,Indicator和UI都可以自定義,

轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/344286.html

標籤:其他

上一篇:下拉溢位效果 overscroll-behavior:

下一篇:iOS15 UI適配之導航條主題: 背景顏色、標題顏色

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 【從零開始擼一個App】Dagger2

    Dagger2是一個IOC框架,一般用于Android平臺,第一次接觸的朋友,一定會被搞得暈頭轉向。它延續了Java平臺Spring框架代碼碎片化,注解滿天飛的傳統。嘗試將各處代碼片段串聯起來,理清思緒,真不是件容易的事。更不用說還有各版本細微的差別。 與Spring不同的是,Spring是通過反射 ......

    uj5u.com 2020-09-10 06:57:59 more
  • Flutter Weekly Issue 66

    新聞 Flutter 季度調研結果分享 教程 Flutter+FaaS一體化任務編排的思考與設計 詳解Dart中如何通過注解生成代碼 GitHub 用對了嗎?Flutter 團隊分享如何管理大型開源專案 插件 flutter-bubble-tab-indicator A Flutter librar ......

    uj5u.com 2020-09-10 06:58:52 more
  • Proguard 常用規則

    介紹 Proguard 入口,如何查看輸出,如何使用 keep 設定入口以及使用實體,如何配置壓縮,混淆,校驗等規則。

    ......

    uj5u.com 2020-09-10 06:59:00 more
  • Android 開發技術周報 Issue#292

    新聞 Android即將獲得類AirDrop功能:可向附近設備快速分享檔案 谷歌為安卓檔案管理應用引入可安全隱藏資料的Safe Folder功能 Android TV新主界面將顯示電影、電視節目和應用推薦內容 泄露的Android檔案暗示了傳說中的谷歌Pixel 5a與折疊屏新機 谷歌發布Andro ......

    uj5u.com 2020-09-10 07:00:37 more
  • AutoFitTextureView Error inflating class

    報錯: Binary XML file line #0: Binary XML file line #0: Error inflating class xxx.AutoFitTextureView 解決: <com.example.testy2.AutoFitTextureView android: ......

    uj5u.com 2020-09-10 07:00:41 more
  • 根據Uri,Cursor沒有獲取到對應的屬性

    Android: 背景:呼叫攝像頭,拍攝視頻,指定保存的地址,但是回傳的Cursor檔案,只有名稱和大小的屬性,沒有其他諸如時長,連ID屬性都沒有 使用 cursor.getInt(cursor.getColumnIndexOrThrow(MediaStore.Video.Media.DURATIO ......

    uj5u.com 2020-09-10 07:00:44 more
  • Android連載29-持久化技術

    一、持久化技術 我們平時所使用的APP產生的資料,在記憶體中都是瞬時的,會隨著斷電、關機等丟失資料,因此android系統采用了持久化技術,用于存盤這些“瞬時”資料 持久化技術包括:檔案存盤、SharedPreference存盤以及資料庫存盤,還有更復雜的SD卡記憶體儲。 二、檔案存盤 最基本存盤方式, ......

    uj5u.com 2020-09-10 07:00:47 more
  • Android Camera2Video整合到自己專案里

    背景: Android專案里呼叫攝像頭拍攝視頻,原本使用的 MediaStore.ACTION_VIDEO_CAPTURE, 后來因專案需要,改成了camera2 1.Camera2Video 官方demo有點問題,下載后,不能直接整合到專案 問題1.多次拍攝視頻崩潰 問題2.雙擊record按鈕, ......

    uj5u.com 2020-09-10 07:00:50 more
  • Android 開發技術周報 Issue#293

    新聞 谷歌為Android TV開發者提供多種新功能 Android 11將自動填表功能整合到鍵盤輸入建議中 谷歌宣布Android Auto即將支持更多的導航和數字停車應用 谷歌Pixel 5只有XL版本 搭載驍龍765G且將比Pixel 4更便宜 [圖]Wear OS將迎來重磅更新:應用啟動時間 ......

    uj5u.com 2020-09-10 07:01:38 more
  • 海豚星空掃碼投屏 Android 接收端 SDK 集成 六步驟

    掃碼投屏,開放網路,獨占設備,不需要額外下載軟體,微信掃碼,發現設備。支持標準DLNA協議,支持倍速播放。視頻,音頻,圖片投屏。好點意思。還支持自定義基于 DLNA 擴展的操作動作。好像要收費,沒體驗。 這里簡單記錄一下集成程序。 一 跟目錄的build.gradle添加私有mevan倉庫 mave ......

    uj5u.com 2020-09-10 07:01:43 more
最新发布
  • 歡迎頁輪播影片

    如圖,引導開始,球從上落下,同時淡入文字,然后文字開始輪播,最后一頁時停止,點擊進入首頁。 在來看看效果圖。 重力球先不講,主要歡迎輪播簡單實作 首先新建一個類 TextTranslationXGuideView,用于影片展示 文本是類似的,最后會有個圖片箭頭影片,布局很簡單,就是一個 TextVi ......

    uj5u.com 2023-04-20 08:40:31 more
  • 【FAQ】關于華為推送服務因營銷訊息頻次管控導致服務通訊類訊息

    一. 問題描述 使用華為推送服務下發IM訊息時,下發訊息請求成功且code碼為80000000,但是手機總是收不到訊息; 在華為推送自助分析(Beta)平臺查看發現,訊息發送觸發了頻控。 二. 問題原因及背景 2023年1月05日起,華為推送服務對咨詢營銷類訊息做了單個設備每日推送數量上限管理,具體 ......

    uj5u.com 2023-04-20 08:40:11 more
  • 歡迎頁輪播影片

    如圖,引導開始,球從上落下,同時淡入文字,然后文字開始輪播,最后一頁時停止,點擊進入首頁。 在來看看效果圖。 重力球先不講,主要歡迎輪播簡單實作 首先新建一個類 TextTranslationXGuideView,用于影片展示 文本是類似的,最后會有個圖片箭頭影片,布局很簡單,就是一個 TextVi ......

    uj5u.com 2023-04-20 08:39:36 more
  • 【FAQ】關于華為推送服務因營銷訊息頻次管控導致服務通訊類訊息

    一. 問題描述 使用華為推送服務下發IM訊息時,下發訊息請求成功且code碼為80000000,但是手機總是收不到訊息; 在華為推送自助分析(Beta)平臺查看發現,訊息發送觸發了頻控。 二. 問題原因及背景 2023年1月05日起,華為推送服務對咨詢營銷類訊息做了單個設備每日推送數量上限管理,具體 ......

    uj5u.com 2023-04-20 08:39:13 more
  • iOS從UI記憶體地址到讀取成員變數(oc/swift)

    開發除錯時,我們發現bug時常首先是從UI顯示發現例外,下一步才會去定位UI相關連的資料的。XCode有給我們提供一系列debug工具,但是很多人可能還沒有形成一套穩定的除錯流程,因此本文嘗試解決這個問題,順便提出一個暴論:UI顯示例外問題只需要兩個步驟就能完成定位作業的80%: 定位例外 UI 組 ......

    uj5u.com 2023-04-19 09:16:23 more
  • FIDE重磅更新!性能飛躍!體驗有禮!

    FIDE 開發者工具重構升級啦!實作500%性能提升,誠邀體驗! 一直以來不少開發者朋友在社區反饋,在使用 FIDE 工具的程序中,時常會遇到諸如加載不及時、代碼預覽/渲染性能不如意的情況,十分影響開發體驗。 作為技術團隊,我們深知一件趁手的開發工具對開發者的重要性,因此,在2023年開年,FinC ......

    uj5u.com 2023-04-19 09:16:15 more
  • 游戲內嵌社區服務開放,助力開發者提升玩家互動與留存

    華為 HMS Core 游戲內嵌社區服務提供快速訪問華為游戲中心論壇能力,支持玩家直接在游戲內瀏覽帖子和交流互動,助力開發者擴展內容生產和觸達的場景。 一、為什么要游戲內嵌社區? 二、游戲內嵌社區的典型使用場景 1、游戲內打開論壇 您可以在游戲內繪制論壇入口,為玩家提供沉浸式發帖、瀏覽、點贊、回帖、 ......

    uj5u.com 2023-04-19 09:15:46 more
  • iOS從UI記憶體地址到讀取成員變數(oc/swift)

    開發除錯時,我們發現bug時常首先是從UI顯示發現例外,下一步才會去定位UI相關連的資料的。XCode有給我們提供一系列debug工具,但是很多人可能還沒有形成一套穩定的除錯流程,因此本文嘗試解決這個問題,順便提出一個暴論:UI顯示例外問題只需要兩個步驟就能完成定位作業的80%: 定位例外 UI 組 ......

    uj5u.com 2023-04-19 09:14:53 more
  • FIDE重磅更新!性能飛躍!體驗有禮!

    FIDE 開發者工具重構升級啦!實作500%性能提升,誠邀體驗! 一直以來不少開發者朋友在社區反饋,在使用 FIDE 工具的程序中,時常會遇到諸如加載不及時、代碼預覽/渲染性能不如意的情況,十分影響開發體驗。 作為技術團隊,我們深知一件趁手的開發工具對開發者的重要性,因此,在2023年開年,FinC ......

    uj5u.com 2023-04-19 09:14:08 more
  • 游戲內嵌社區服務開放,助力開發者提升玩家互動與留存

    華為 HMS Core 游戲內嵌社區服務提供快速訪問華為游戲中心論壇能力,支持玩家直接在游戲內瀏覽帖子和交流互動,助力開發者擴展內容生產和觸達的場景。 一、為什么要游戲內嵌社區? 二、游戲內嵌社區的典型使用場景 1、游戲內打開論壇 您可以在游戲內繪制論壇入口,為玩家提供沉浸式發帖、瀏覽、點贊、回帖、 ......

    uj5u.com 2023-04-19 09:08:34 more