Android自定義控件實(shí)現(xiàn)優(yōu)雅的廣告輪播圖
前言
今天給大家?guī)硪粋€(gè)新的控件–輪播圖,網(wǎng)上已經(jīng)有很多這類的博客來講解如何實(shí)現(xiàn)的,那么我的這個(gè)有哪些特點(diǎn)呢?或是說有哪些不同呢?
滿足了輪播圖的基本要求,循環(huán)滑動(dòng),在最后一張切到第一張時(shí)可以平穩(wěn)的過渡
簡潔簡潔簡潔
擴(kuò)展性強(qiáng)
如何使用
下面我們先展示兩種效果圖
1 默認(rèn)效果
代碼實(shí)現(xiàn)
//布局代碼 <com.landptf.view.BannerM android:id="@+id/bm_banner" android:layout_width="match_parent" android:layout_height="200dp" /> //java代碼 BannerM banner = (BannerM) findViewById(R.id.bm_banner); if (banner != null) { banner.setBannerBeanList(bannerList).show(); } //初始化數(shù)據(jù) private void initData() { bannerList = new ArrayList<>(4); BannerBean banner1 = new BannerBean("測試圖片1", url1, ""); BannerBean banner2 = new BannerBean("測試圖片2", url2, ""); BannerBean banner3 = new BannerBean("測試圖片3", url3, ""); BannerBean banner4 = new BannerBean("測試圖片4", url4, ""); bannerList.add(banner1); bannerList.add(banner2); bannerList.add(banner3); bannerList.add(banner4); }
其實(shí)關(guān)鍵代碼就一行,這里面用到了BannerBean的實(shí)體類,有三個(gè)參數(shù),分別是圖片的描述文字,圖片地址,點(diǎn)擊后對應(yīng)的鏈接
以上全部都是默認(rèn)值,下面來看一下都哪些可以自定義
2 自定義效果
圖1和圖2主要有以下幾點(diǎn)不同
1 指示器和文字的位置結(jié)構(gòu),這里面我只實(shí)現(xiàn)了兩種,大家也可以下載源碼后擴(kuò)展
2 圓點(diǎn)指示器選中后的顏色
3 自動(dòng)播放的時(shí)間間隔
4 支持圖片未加載出來之前顯示默認(rèn)圖片
自定義效果的代碼實(shí)現(xiàn)
下面通過xml和java代碼來分別演示一下圖2的實(shí)現(xiàn)
1 xml
<com.landptf.view.BannerM android:id="@+id/bm_banner" android:layout_width="match_parent" android:layout_height="200dp" landptf:defaultImageDrawable="@drawable/default_image" landptf:intervalTime="3" landptf:indexPosition="bottom" landptf:indexColor="@color/colorPrimary" /> BannerM banner = (BannerM) findViewById(R.id.bm_banner); if (banner != null) { banner.setBannerBeanList(bannerList) .setOnItemClickListener(new BannerM.OnItemClickListener() { @Override public void onItemClick(int position) { Log.e("landptf", "position = " + position); } }) .show(); }
2 java
<com.landptf.view.BannerM android:id="@+id/bm_banner" android:layout_width="match_parent" android:layout_height="200dp" /> BannerM banner = (BannerM) findViewById(R.id.bm_banner); if (banner != null) { banner.setBannerBeanList(bannerList) .setDefaultImageResId(R.drawable.default_image) .setIndexPosition(BannerM.INDEX_POSITION_BOTTOM) .setIndexColor(getResources().getColor(R.color.colorPrimary)) .setIntervalTime(3) .setOnItemClickListener(new BannerM.OnItemClickListener() { @Override public void onItemClick(int position) { Log.e("landptf", "position = " + position); } }) .show(); }
以上兩種代碼實(shí)現(xiàn)的效果完全等價(jià),在java代碼中都是通過鏈?zhǔn)秸{(diào)用,使代碼看起來更加的簡潔。
有木有很方便,大大的減少了代碼量,而且是可以直接拿來用的。好了下面我們來看一下實(shí)現(xiàn)的代碼。
實(shí)現(xiàn)
圖片下載集成了Picasso,有對Picasso不熟悉的童鞋可以看一下我之前的博客圖片加載利器之Picasso(二)基本用法
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/vp_banner" android:layout_width="match_parent" android:layout_height="match_parent" /> <ViewStub android:id="@+id/vs_index_right" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout="@layout/viewstub_banner_m_index_right" /> <ViewStub android:id="@+id/vs_index_bottom" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout="@layout/viewstub_banner_m_index_bottom" /> </RelativeLayout>
ViewStub的引用代碼這里就不給出,大家可以訪問我的git查看,文末會(huì)給出地址
package com.landptf.view; import android.annotation.SuppressLint; import android.content.Context; import android.content.res.ColorStateList; import android.content.res.TypedArray; import android.graphics.drawable.Drawable; import android.graphics.drawable.GradientDrawable; import android.os.Handler; import android.os.Message; import android.os.Parcelable; import android.support.annotation.Nullable; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.view.ViewParent; import android.view.ViewStub; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.RelativeLayout; import android.widget.TextView; import com.landptf.R; import com.landptf.bean.BannerBean; import com.landptf.util.ConvertM; import com.squareup.picasso.MemoryPolicy; import com.squareup.picasso.Picasso; import java.util.ArrayList; import java.util.List; import java.util.concurrent.Executors; import java.util.concurrent.ScheduledExecutorService; import java.util.concurrent.TimeUnit; /** * Created by landptf on 2017/03/06. * 輪播圖控件 */ public class BannerM extends RelativeLayout { /** * 圓點(diǎn)指示器的位置,文字在左,圓點(diǎn)在右 */ public static final int INDEX_POSITION_RIGHT = 0x100; /** * 圓點(diǎn)指示器的位置,文字在上,圓點(diǎn)在下 */ public static final int INDEX_POSITION_BOTTOM = 0x101; private static final int HANDLE_UPDATE_INDEX = 0; private Context mContext; private ViewPager vpBanner; private ViewPagerAdapter adapter; private OnItemClickListener mOnItemClickListener; //裝載ImageView控件的list private List<ImageView> ivList; //圓點(diǎn)指示器控件 private List<View> vList; //控制圓點(diǎn)View的形狀,未選中的顏色 private GradientDrawable gradientDrawable; //控制圓點(diǎn)View的形狀,選中的顏色 private GradientDrawable gradientDrawableSelected; //選中圓點(diǎn)的顏色值,默認(rèn)為#FF3333 private int indexColorResId; //圖片對應(yīng)的文字描述 private TextView tvText; //自動(dòng)滑動(dòng)的定時(shí)器 private ScheduledExecutorService scheduledExecutorService; //當(dāng)前加載到第幾頁 private int currentIndex = 0; //默認(rèn)背景圖 private int defaultImageResId; private Drawable defaultImageDrawable = null; //自動(dòng)輪播的時(shí)間間隔(s) private int intervalTime = 5; //輪播圖需要的數(shù)據(jù)列表 private List<BannerBean> bannerBeanList; //圓點(diǎn)指示器的位置,提供兩種布局 private int indexPosition = INDEX_POSITION_RIGHT; public BannerM(Context context) { this(context, null); } public BannerM(Context context, AttributeSet attrs) { this(context, attrs, 0); } public BannerM(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context, attrs, defStyleAttr); } private void init(Context context, AttributeSet attrs, int defStyle) { mContext = context; LayoutInflater.from(context).inflate(R.layout.view_banner_m, this, true); vpBanner = (ViewPager) findViewById(R.id.vp_banner); TypedArray a = getContext().obtainStyledAttributes( attrs, R.styleable.bannerM, defStyle, 0); if (a != null) { defaultImageDrawable = a.getDrawable(R.styleable.bannerM_defaultImageDrawable); intervalTime = a.getInteger(R.styleable.bannerM_intervalTime, 5); indexPosition = a.getInteger(R.styleable.bannerM_indexPosition, INDEX_POSITION_RIGHT); ColorStateList indexColorList = a.getColorStateList(R.styleable.bannerM_indexColor); if (indexColorList != null) { indexColorResId = indexColorList.getColorForState(getDrawableState(), 0); } a.recycle(); } } /** * 設(shè)置圖片加載之前默認(rèn)顯示的圖片 * * @param defaultImageResId * @return BannerM */ public BannerM setDefaultImageResId(int defaultImageResId) { this.defaultImageResId = defaultImageResId; return this; } /** * 設(shè)置圖片加載之前默認(rèn)顯示的圖片 * * @param defaultImageDrawable * @return BannerM */ public BannerM setDefaultImageDrawable(Drawable defaultImageDrawable) { this.defaultImageDrawable = defaultImageDrawable; return this; } /** * 設(shè)置輪播的時(shí)間間隔,單位為s,默認(rèn)為5s * * @param intervalTime * @return BannerM */ public BannerM setIntervalTime(int intervalTime) { this.intervalTime = intervalTime; return this; } /** * 設(shè)置圓點(diǎn)指示器的位置 * #BannerM.INDEX_POSITION_RIGHT or #BannerM.INDEX_POSITION_BOTTOM * * @param indexPosition * @return BannerM */ public BannerM setIndexPosition(int indexPosition) { this.indexPosition = indexPosition; return this; } /** * 選中圓點(diǎn)的顏色值,默認(rèn)為#FF3333 * * @param indexColor * @return BannerM */ public BannerM setIndexColor(int indexColor) { this.indexColorResId = indexColor; return this; } /** * 設(shè)置輪播圖需要的數(shù)據(jù)列表 * * @param bannerBeanList * @return BannerM */ public BannerM setBannerBeanList(List<BannerBean> bannerBeanList) { this.bannerBeanList = bannerBeanList; return this; } /** * 設(shè)置圖片的點(diǎn)擊事件 * @param listener */ public BannerM setOnItemClickListener(@Nullable OnItemClickListener listener) { mOnItemClickListener = listener; return this; } public void show() { if (bannerBeanList == null || bannerBeanList.size() == 0) { throw new IllegalArgumentException("bannerBeanList == null"); } initImageViewList(); initIndexList(); vpBanner.addOnPageChangeListener(new OnPageChangeListener()); adapter = new ViewPagerAdapter(); vpBanner.setAdapter(adapter); //定時(shí)器開始工作 startPlay(); } /** * 初始化圓點(diǎn)指示器,根據(jù)indexPosition來加載不同的布局 */ private void initIndexList() { int count = bannerBeanList.size(); vList = new ArrayList<>(count); LinearLayout llIndex; if (indexPosition == INDEX_POSITION_RIGHT) { ViewStub vsIndexRight = (ViewStub) findViewById(R.id.vs_index_right); vsIndexRight.inflate(); llIndex = (LinearLayout) findViewById(R.id.ll_index_right); tvText = (TextView) findViewById(R.id.tv_text); } else { ViewStub vsIndexBottom = (ViewStub) findViewById(R.id.vs_index_bottom); vsIndexBottom.inflate(); llIndex = (LinearLayout) findViewById(R.id.ll_index_bottom); tvText = (TextView) findViewById(R.id.tv_text); } //默認(rèn)第一張圖片的文字描述 tvText.setText(bannerBeanList.get(0).getText()); //使用GradientDrawable構(gòu)造圓形控件 gradientDrawable = new GradientDrawable(); gradientDrawable.setShape(GradientDrawable.OVAL); gradientDrawable.setColor(mContext.getResources().getColor(R.color.text)); gradientDrawableSelected = new GradientDrawable(); gradientDrawableSelected.setShape(GradientDrawable.OVAL); if (indexColorResId != 0) { gradientDrawableSelected.setColor(indexColorResId); } else { gradientDrawableSelected.setColor(mContext.getResources().getColor(R.color.mainColor)); } for (int i = 0; i < count; i++) { View view = new View(mContext); LinearLayout.LayoutParams lpView = new LinearLayout.LayoutParams(ConvertM.dp2px(mContext, 8), ConvertM.dp2px(mContext, 8)); lpView.rightMargin = ConvertM.dp2px(mContext, 4); view.setLayoutParams(lpView); if (0 == i) { view.setBackgroundDrawable(gradientDrawableSelected); } else { view.setBackgroundDrawable(gradientDrawable); } view.bringToFront(); vList.add(view); llIndex.addView(view); } } /** * 初始化ImageView,使用Picasso下載圖片,只在SdCard中緩存 */ private void initImageViewList() { int count = bannerBeanList.size(); ivList = new ArrayList<>(count); for (int i = 0; i < count; i++) { final ImageView imageView = new ImageView(mContext); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); ivList.add(imageView); imageView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { mOnItemClickListener.onItemClick(getPosition(imageView)); } }); if (defaultImageResId != 0) { Picasso.with(mContext) .load(bannerBeanList.get(i).getUrl()) .placeholder(defaultImageResId) .memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE) .into(imageView); } else if (defaultImageDrawable != null) { Picasso.with(mContext) .load(bannerBeanList.get(i).getUrl()) .placeholder(defaultImageDrawable) .memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE) .into(imageView); } else { Picasso.with(mContext) .load(bannerBeanList.get(i).getUrl()) .memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE) .into(imageView); } } } private void startPlay() { scheduledExecutorService = Executors.newSingleThreadScheduledExecutor(); scheduledExecutorService.scheduleAtFixedRate(new Runnable() { @Override public void run() { currentIndex++; handler.obtainMessage(HANDLE_UPDATE_INDEX).sendToTarget(); } }, intervalTime, intervalTime, TimeUnit.SECONDS); } /** * 獲取點(diǎn)擊圖片的位置 * @param item * @return int */ private int getPosition(ImageView item) { for (int i = 0; i < ivList.size(); i++) { if (item == ivList.get(i)) { return i; } } return -1; } @SuppressLint("HandlerLeak") private Handler handler = new Handler() { @Override public void handleMessage(Message msg) { switch (msg.what) { case HANDLE_UPDATE_INDEX: vpBanner.setCurrentItem(currentIndex); break; default: break; } } }; private class OnPageChangeListener implements ViewPager.OnPageChangeListener { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { currentIndex = position; for (int i = 0; i < bannerBeanList.size(); i++) { if (position % ivList.size() == i) { vList.get(i).setBackgroundDrawable(gradientDrawableSelected); } else { vList.get(i).setBackgroundDrawable(gradientDrawable); } tvText.setText(bannerBeanList.get(position % ivList.size()).getText()); } } @Override public void onPageScrollStateChanged(int state) { } } private class ViewPagerAdapter extends PagerAdapter { @Override public void destroyItem(View container, int position, Object object) { } @Override public Object instantiateItem(View container, int position) { position %= ivList.size(); if (position<0){ position = ivList.size()+position; } ImageView imageView = ivList.get(position); ViewParent vp =imageView.getParent(); if (vp!=null){ ViewGroup parent = (ViewGroup)vp; parent.removeView(imageView); } ((ViewPager) container).addView(imageView); return imageView; } @Override public int getCount() { return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public void restoreState(Parcelable arg0, ClassLoader arg1) { } @Override public Parcelable saveState() { return null; } @Override public void startUpdate(View arg0) { } @Override public void finishUpdate(View arg0) { } } public interface OnItemClickListener { void onItemClick(int position); } }
這篇文章就介紹到這里了,點(diǎn)擊這里查看源碼
下面是測試用的圖片:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android實(shí)現(xiàn)輪播圖片展示效果
- Android實(shí)現(xiàn)炫酷輪播圖效果
- Android使用viewpager實(shí)現(xiàn)自動(dòng)無限輪播圖
- Android實(shí)現(xiàn)ViewPage輪播圖效果
- Android ViewPager實(shí)現(xiàn)輪播圖效果
- Android開發(fā)實(shí)現(xiàn)的自動(dòng)換圖片、輪播圖效果示例
- Android如何使用RecyclerView打造首頁輪播圖
- android實(shí)現(xiàn)banner輪播圖無限輪播效果
- 簡單實(shí)現(xiàn)android輪播圖
- Android自定義輪播圖效果
相關(guān)文章
使用androidx BiometricPrompt實(shí)現(xiàn)指紋驗(yàn)證功能
這篇文章主要介紹了使用androidx BiometricPrompt實(shí)現(xiàn)指紋驗(yàn)證功能,對android指紋驗(yàn)證相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2021-07-07Android Studio 4.0新特性及升級異常問題的解決方案
這篇文章主要介紹了Android Studio 4.0新特性及升級異常的相關(guān)問題,本文給大家分享解決方案,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06Flutter StaggeredGridView實(shí)現(xiàn)瀑布流效果
這篇文章主要為大家詳細(xì)介紹了Flutter StaggeredGridView實(shí)現(xiàn)瀑布流效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03Android自定義ScrollView實(shí)現(xiàn)放大回彈效果實(shí)例代碼
本篇文章主要介紹了Android自定義ScrollView實(shí)現(xiàn)放大回彈效果實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-03-03Flutter狀態(tài)管理Provider的使用示例詳解
這篇文章主要為大家介紹了Flutter狀態(tài)管理Provider的使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Android 使用AlarmManager和NotificationManager來實(shí)現(xiàn)鬧鐘和通知欄
這篇文章主要介紹了Android 使用AlarmManager和NotificationManager來實(shí)現(xiàn)鬧鐘和通知欄,需要的朋友可以參考下2017-02-02Android音頻處理之通過AudioRecord去保存PCM文件進(jìn)行錄制,播放,停止,刪除功能
這篇文章主要介紹了Android音頻處理之通過AudioRecord去保存PCM文件進(jìn)行錄制,播放,停止,刪除功能的相關(guān)資料,需要的朋友可以參考下2016-11-11Android 仿京東商城底部布局的選擇效果(Selector 選擇器的實(shí)現(xiàn))
這篇文章主要介紹了Android 仿京東商城底部布局的選擇效果(Selector 選擇器的實(shí)現(xiàn)),需要的朋友可以參考下2017-04-04