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!
推薦閱讀:
- android控件Banner實現簡單輪播圖效果
- Android實現簡單的banner輪播圖
- Android用viewPager2實現UI界面翻頁滾動的效果
- android輪播圖組件的制作方法
- Android如何使用ViewPager2實現頁面滑動切換效果