Android自定義控件實(shí)現(xiàn)優(yōu)雅的廣告輪播圖
更新時間：2021年05月28日 17:08:13 作者：landptf
這篇文章主要為大家詳細(xì)介紹了Android自定義控件實(shí)現(xiàn)優(yōu)雅的廣告輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言
今天給大家?guī)硪粋€新的控件–輪播圖，網(wǎng)上已經(jīng)有很多這類的博客來講解如何實(shí)現(xiàn)的，那么我的這個有哪些特點(diǎn)呢？或是說有哪些不同呢？
滿足了輪播圖的基本要求，循環(huán)滑動，在最后一張切到第一張時可以平穩(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í)體類，有三個參數(shù)，分別是圖片的描述文字，圖片地址，點(diǎn)擊后對應(yīng)的鏈接
以上全部都是默認(rèn)值，下面來看一下都哪些可以自定義
2 自定義效果
圖1和圖2主要有以下幾點(diǎn)不同
1 指示器和文字的位置結(jié)構(gòu)，這里面我只實(shí)現(xiàn)了兩種，大家也可以下載源碼后擴(kuò)展
2 圓點(diǎn)指示器選中后的顏色
3 自動播放的時間間隔
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)的效果完全等價，在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查看，文末會給出地址
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;
//自動滑動的定時器
private ScheduledExecutorService scheduledExecutorService;
//當(dāng)前加載到第幾頁
private int currentIndex = 0;
//默認(rèn)背景圖
private int defaultImageResId;
private Drawable defaultImageDrawable = null;
//自動輪播的時間間隔(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è)置輪播的時間間隔，單位為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);
//定時器開始工作
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)自動無限輪播圖
- Android實(shí)現(xiàn)ViewPage輪播圖效果
- Android ViewPager實(shí)現(xiàn)輪播圖效果
- Android開發(fā)實(shí)現(xiàn)的自動換圖片、輪播圖效果示例
- Android如何使用RecyclerView打造首頁輪播圖
- android實(shí)現(xiàn)banner輪播圖無限輪播效果
- 簡單實(shí)現(xiàn)android輪播圖
- Android自定義輪播圖效果
相關(guān)文章
Android的SurfaceView和TextureView介紹及使用示例
SurfaceView 是一種用于直接將圖形繪制到屏幕的Android組件,下面給大家分享SurfaceView使用示例,它展示了如何在 Android 應(yīng)用中創(chuàng)建并使用,感興趣的朋友一起看看吧2024-12-12
在Android應(yīng)用程序中,我們經(jīng)常需要在私有空間中創(chuàng)建文件來存儲應(yīng)用數(shù)據(jù),例如用戶配置文件、日志文件等,本文將介紹如何在Android應(yīng)用中使用Java代碼創(chuàng)建文件并將其保存在私有空間中,感興趣的朋友跟隨小編一起看看吧2024-06-06
在編輯框輸入內(nèi)容時會彈出軟鍵盤,而手機(jī)屏幕區(qū)域有限往往會遮住輸入界面,怎么實(shí)現(xiàn)這種效果呢？下面小編給大家分享了Android屏蔽軟鍵盤自動彈出的解決方案，需要的朋友參考下吧2017-01-01
Android編程中Tween動畫和Frame動畫實(shí)例分析
這篇文章主要介紹了Android編程中Tween動畫和Frame動畫,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android中Tween動畫和Frame動畫的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12
Android編程實(shí)現(xiàn)左右滑動切換背景的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)左右滑動切換背景的方法,涉及Android圖形資源動態(tài)調(diào)用與動作監(jiān)聽相關(guān)技巧,需要的朋友可以參考下2016-01-01
Flow轉(zhuǎn)LiveData數(shù)據(jù)丟失原理詳解
這篇文章主要為大家介紹了Flow轉(zhuǎn)LiveData數(shù)據(jù)丟失原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Kotlin擴(kuò)展函數(shù)及實(shí)現(xiàn)機(jī)制的深入探索
擴(kuò)展函數(shù)與擴(kuò)展屬性的神奇之處在于，可以在不修改原來類的條件下，使用函數(shù)和屬性，表現(xiàn)得就像是屬于這個類的一樣。下面這篇文章主要給大家介紹了關(guān)于Kotlin擴(kuò)展函數(shù)及實(shí)現(xiàn)機(jī)制的相關(guān)資料，需要的朋友可以參考下2018-06-06
Android仿微信@好友功能 輸入@跳轉(zhuǎn)、刪除整塊
這篇文章主要介紹了Android仿微信@好友功能 輸入@跳轉(zhuǎn)、刪除整塊,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細(xì)介紹了Android仿iPhone日期時間選擇器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
Android實(shí)現(xiàn)帶頭像的用戶注冊頁面
這篇文章主要介紹了Android實(shí)現(xiàn)帶頭像的用戶注冊頁面的相關(guān)資料,介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下2016-06-06