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都可以自定義,
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/344286.html
標籤:其他
