Android banner的使用詳解與示例

Android—-banner使用詳解

在這裡插入圖片描述

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

效果圖:

在這裡插入圖片描述

添加依賴

  implementation 'com.youth.banner:banner:2.1.0'

添加權限到你的 AndroidManifest.xml

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

佈局文件

<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" />

邏輯代碼

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+"張輪播圖");
    }
}

常見的一些屬性設置

方法

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

方法名 返回類型 描述
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請做好兼容處理。 下面的屬性並不是每個指示器都用得到,所以使用時要註意!

Attributes format describe
banner_loop_time integer 輪播間隔時間,默認3000
banner_auto_loop boolean 是否自動輪播,默認true
banner_infinite_loop boolean 是否支持無限循環(即首尾直接過渡),默認true
banner_orientation enum 輪播方向:horizontal(默認) or vertical
banner_radius dimension banner圓角半徑,默認0(不繪制圓角)
banner_indicator_normal_width dimension 指示器默認的寬度,默認5dp (對RoundLinesIndicator無效)
banner_indicator_selected_width dimension 指示器選中的寬度,默認7dp
banner_indicator_normal_color color 指示器默認顏色,默認0x88ffffff
banner_indicator_selected_color color 指示器選中顏色,默認0x88000000
banner_indicator_space dimension 指示器之間的間距,默認5dp (對RoundLinesIndicator無效)
banner_indicator_gravity dimension 指示器位置,默認center
banner_indicator_margin dimension 指示器的margin,默認5dp,不能和下面的同時使用
banner_indicator_marginLeft dimension 指示器左邊的margin
banner_indicator_marginTop dimension 指示器上邊的margin
banner_indicator_marginRight dimension 指示器右邊的margin
banner_indicator_marginBottom dimension 指示器下邊的margin
banner_indicator_height dimension 指示器高度(對CircleIndicator無效)
banner_indicator_radius dimension 指示器圓角(對CircleIndicator無效)
banner_round_top_left boolean 設置要繪制的banner圓角方向(如果都不設置默認全部)
banner_round_top_right boolean 設置要繪制的banner圓角方向(如果都不設置默認全部)
banner_round_bottom_left boolean 設置要繪制的banner圓角方向(如果都不設置默認全部)
banner_round_bottom_right boolean 設置要繪制的banner圓角方向(如果都不設置默認全部)

github官網: GitHub – youth5201314/banner: 🔥🔥🔥Banner 2.0 來瞭!Android廣告圖片輪播控件,內部基於ViewPager2實現,Indicator和UI都可以自定義。

到此這篇關於Android banner的使用詳解與示例的文章就介紹到這瞭,更多相關Android banner內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: