Android自定義控件實現(xiàn)優(yōu)雅的廣告輪播圖
更新時間：2021年05月28日 17:08:13 作者：landptf
這篇文章主要為大家詳細(xì)介紹了Android自定義控件實現(xiàn)優(yōu)雅的廣告輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言
今天給大家?guī)硪粋€新的控件–輪播圖，網(wǎng)上已經(jīng)有很多這類的博客來講解如何實現(xiàn)的，那么我的這個有哪些特點呢？或是說有哪些不同呢？
滿足了輪播圖的基本要求，循環(huán)滑動，在最后一張切到第一張時可以平穩(wěn)的過渡
簡潔簡潔簡潔
擴展性強
如何使用
下面我們先展示兩種效果圖
1 默認(rèn)效果
代碼實現(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);
}
其實關(guān)鍵代碼就一行，這里面用到了BannerBean的實體類，有三個參數(shù)，分別是圖片的描述文字，圖片地址，點擊后對應(yīng)的鏈接
以上全部都是默認(rèn)值，下面來看一下都哪些可以自定義
2 自定義效果
圖1和圖2主要有以下幾點不同
1 指示器和文字的位置結(jié)構(gòu)，這里面我只實現(xiàn)了兩種，大家也可以下載源碼后擴展
2 圓點指示器選中后的顏色
3 自動播放的時間間隔
4 支持圖片未加載出來之前顯示默認(rèn)圖片
自定義效果的代碼實現(xiàn)
下面通過xml和java代碼來分別演示一下圖2的實現(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();
}
以上兩種代碼實現(xiàn)的效果完全等價，在java代碼中都是通過鏈?zhǔn)秸{(diào)用，使代碼看起來更加的簡潔。
有木有很方便，大大的減少了代碼量，而且是可以直接拿來用的。好了下面我們來看一下實現(xiàn)的代碼。
實現(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 {
/**
* 圓點指示器的位置，文字在左，圓點在右
*/
public static final int INDEX_POSITION_RIGHT = 0x100;
/**
* 圓點指示器的位置，文字在上，圓點在下
*/
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;
//圓點指示器控件
private List<View> vList;
//控制圓點View的形狀，未選中的顏色
private GradientDrawable gradientDrawable;
//控制圓點View的形狀，選中的顏色
private GradientDrawable gradientDrawableSelected;
//選中圓點的顏色值，默認(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;
//圓點指示器的位置，提供兩種布局
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è)置圓點指示器的位置
* #BannerM.INDEX_POSITION_RIGHT or #BannerM.INDEX_POSITION_BOTTOM
*
* @param indexPosition
* @return BannerM
*/
public BannerM setIndexPosition(int indexPosition) {
this.indexPosition = indexPosition;
return this;
}
/**
* 選中圓點的顏色值，默認(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è)置圖片的點擊事件
* @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();
}
/**
* 初始化圓點指示器，根據(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);
}
/**
* 獲取點擊圖片的位置
* @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);
}
}
這篇文章就介紹到這里了，點擊這里查看源碼
下面是測試用的圖片：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用androidx BiometricPrompt實現(xiàn)指紋驗證功能
這篇文章主要介紹了使用androidx BiometricPrompt實現(xiàn)指紋驗證功能，對android指紋驗證相關(guān)知識感興趣的朋友跟隨小編一起看看吧2021-07-07
Android Studio 4.0新特性及升級異常問題的解決方案
這篇文章主要介紹了Android Studio 4.0新特性及升級異常的相關(guān)問題，本文給大家分享解決方案，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
android把Bitmap圖片保存到指定文件夾中，具體實現(xiàn)方法如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06
Flutter StaggeredGridView實現(xiàn)瀑布流效果
這篇文章主要為大家詳細(xì)介紹了Flutter StaggeredGridView實現(xiàn)瀑布流效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Android自定義ScrollView實現(xiàn)放大回彈效果實例代碼
本篇文章主要介紹了Android自定義ScrollView實現(xiàn)放大回彈效果實例代碼，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
Flutter狀態(tài)管理Provider的使用示例詳解
這篇文章主要為大家介紹了Flutter狀態(tài)管理Provider的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
Android 使用AlarmManager和NotificationManager來實現(xiàn)鬧鐘和通知欄
這篇文章主要介紹了Android 使用AlarmManager和NotificationManager來實現(xiàn)鬧鐘和通知欄,需要的朋友可以參考下2017-02-02
本文詳細(xì)介紹了Android開發(fā)中常用尺寸單位的含義，重點講解了sp與dp這兩個尺寸單位的本質(zhì)以及它們與px的換算公式，文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
Android音頻處理之通過AudioRecord去保存PCM文件進行錄制，播放，停止，刪除功能
這篇文章主要介紹了Android音頻處理之通過AudioRecord去保存PCM文件進行錄制，播放，停止，刪除功能的相關(guān)資料,需要的朋友可以參考下2016-11-11
Android 仿京東商城底部布局的選擇效果(Selector 選擇器的實現(xiàn))
這篇文章主要介紹了Android 仿京東商城底部布局的選擇效果(Selector 選擇器的實現(xiàn)),需要的朋友可以參考下2017-04-04