看效果图：
GitHub 下载地址：https://github.com/wuqingsen/ImageCarousel
先看工具类 ImageCycleViewAppAdsFindSellerNew 中的代码，这里面写入了主要逻辑：
/**
* author: wu
* date: on 2018/12/18.
* describe:广告图片自动轮播控件
*/
public class ImageCycleViewAppAdsFindSellerNew extends LinearLayout {
/**
* 上下文
*/
private Context mContext;
/**
* 图片轮播视图
*/
private CycleViewPager mBannerPager = null;
/**
* 滚动图片视图适配器
*/
private ImageCycleAdapter mAdvAdapter;
/**
* 图片轮播指示器控件
*/
private ViewGroup mGroup;
/**
* 图片轮播指示器-个图
*/
private ImageView mImageView = null;
/**
* 滚动图片指示器-视图列表
*/
private ImageView[] mImageViews = null;
/**
* 图片滚动当前图片下标
*/
private int mImageIndex = 1;
/**
* 手机密度
*/
private float mScale;
/**
* 轮播图时间
*/
private int delayMillis = 3000;
/**
* @param context
*/
public ImageCycleViewAppAdsFindSellerNew(Context context) {
super(context);
}
/**
* @param context
* @param attrs
*/
public ImageCycleViewAppAdsFindSellerNew(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
mScale = context.getResources().getDisplayMetrics().density;
LayoutInflater.from(context)
.inflate(R.layout.view_banner_ads_content_findseller, this);
mBannerPager = findViewById(R.id.pager_banner);
mBannerPager.setOnPageChangeListener(new GuidePageChangeListener());
mBannerPager.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_UP:
// 开始图片滚动
startImageTimerTask();
break;
default:
// 停止图片滚动
stopImageTimerTask();
break;
}
return false;
}
});
// 滚动图片右下指示器视图
mGroup = (ViewGroup) findViewById(R.id.viewGroup);
}
/**
* 装填图片数据
*/
public void setImageResources(List<String> ad_list,
ImageCycleViewListener imageCycleViewListener) {
// 清除所有子视图
mGroup.removeAllViews();
// 图片广告数量
final int imageCount = ad_list.size();
mImageViews = new ImageView[imageCount];
for (int i = 0; i < imageCount; i++) {
mImageView = new ImageView(mContext);
int imageParams = (int) (mScale * 20 + 0.5f);// XP与DP转换，适应不同分辨率
int imagePadding = (int) (mScale * 5 + 0.5f);
LayoutParams layout = new LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
layout.setMargins(5, 0, 0, 0);
mImageView.setLayoutParams(layout);
// mImageView.setPadding(imagePadding, imagePadding, imagePadding,
// imagePadding);
mImageViews[i] = mImageView;
if (i == 0) {
mImageViews[i].setBackgroundResource(R.drawable.dot_start_ellipse_findseller);
} else {
mImageViews[i].setBackgroundResource(R.drawable.dot_start_findseller);
}
mGroup.addView(mImageViews[i]);
}
mAdvAdapter = new ImageCycleAdapter(mContext, ad_list,
imageCycleViewListener);
mBannerPager.setAdapter(mAdvAdapter);
startImageTimerTask();
}
/**
* 开始轮播(手动控制自动轮播与否，便于资源控制)
*/
public void startImageCycle() {
startImageTimerTask();
}
/**
* 暂停轮播——用于节省资源
*/
public void pushImageCycle() {
stopImageTimerTask();
}
/**
* 开始图片滚动任务
*/
private void startImageTimerTask() {
stopImageTimerTask();
// 图片每3秒滚动一次
mHandler.postDelayed(mImageTimerTask, delayMillis);
}
/**
* 停止图片滚动任务
*/
private void stopImageTimerTask() {
mHandler.removeCallbacks(mImageTimerTask);
}
private Handler mHandler = new Handler();
/**
* 图片自动轮播Task
*/
private Runnable mImageTimerTask = new Runnable() {
@Override
public void run() {
if (mImageViews != null) {
// 下标等于图片列表长度说明已滚动到最后一张图片,重置下标
if ((++mImageIndex) == mImageViews.length + 1) {
mImageIndex = 1;
}
mBannerPager.setCurrentItem(mImageIndex);
}
}
};
/**
* 轮播图片状态监听器
*/
private final class GuidePageChangeListener implements OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int state) {
if (state == ViewPager.SCROLL_STATE_IDLE)
startImageTimerTask(); // 开始下次计时
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int index) {
if (index == 0 || index == mImageViews.length + 1) {
return;
}
// 设置图片滚动指示器背景
mImageIndex = index;
index -= 1;
mImageViews[index].setBackgroundResource(R.drawable.dot_start_ellipse_findseller);
for (int i = 0; i < mImageViews.length; i++) {
if (index != i) {
mImageViews[i].setBackgroundResource(R.drawable.dot_start_findseller);
}
}
}
}
private class ImageCycleAdapter extends PagerAdapter {
/**
* 图片视图缓存列表
*/
private List<ImageView> mImageViewCacheList;
/**
* 图片资源列表
*/
private List<String> mAdList = new ArrayList<>();
/**
* 广告图片点击监听器
*/
private ImageCycleViewListener mImageCycleViewListener;
private Context mContext;
public ImageCycleAdapter(Context context, List<String> adList,
ImageCycleViewListener imageCycleViewListener) {
mContext = context;
mAdList = adList;
mImageCycleViewListener = imageCycleViewListener;
mImageViewCacheList = new ArrayList<>();
}
@Override
public int getCount() {
return mAdList.size();
}
@Override
public boolean isViewFromObject(View view, Object obj) {
return view == obj;
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
String imageUrl = "";
if (mAdList.size() != 0) {
if (mAdList.get(position) != null && !mAdList.get(position).equals("")) {
imageUrl = mAdList.get(position);
}
}
ImageView imageView = null;
if (mImageViewCacheList.isEmpty()) {
imageView = new ImageView(mContext);
imageView.setLayoutParams(new LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
//imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
} else {
imageView = mImageViewCacheList.remove(0);
}
// 设置图片点击监听
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mImageCycleViewListener.onImageClick(position, v);
}
});
imageView.setTag(imageUrl);
container.addView(imageView);
mImageCycleViewListener.displayImage(imageUrl, imageView);
return imageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
ImageView view = (ImageView) object;
try {
container.removeView(view);
} catch (Exception ex) {
ex.printStackTrace();
}
mImageViewCacheList.add(view);
}
}
/**
* 轮播控件的监听事件
*/
public interface ImageCycleViewListener {
/**
* 加载图片资源
*/
void displayImage(String imageURL, ImageView imageView);
/**
* 单击图片事件
*/
void onImageClick(int postion, View imageView);
}
}
上面代码虽然很多，但是逻辑什么的都非常简单，结合注释，看懂还是很简单的。
下面是工具类中出现的 dot_start_ellipse_findseller 和 dot_start_findseller 文件：
dot_start_ellipse_findseller ：
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:useLevel="false">
<solid android:color="#80FFFFFF" />
<size
android:width="14dp"
android:height="7dp" />
<corners
android:bottomLeftRadius="3.5dp"
android:bottomRightRadius="3.5dp"
android:topLeftRadius="3.5dp"
android:topRightRadius="3.5dp" />
</shape>dot_start_findseller ：
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false">
<solid android:color="#80FFFFFF" />
<size
android:width="7dp"
android:height="7dp" />
</shape>下面是 view_banner_ads_content_findseller 布局：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ad_rl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.example.qd.imagecarousel.bannder.CycleViewPager
android:id="@+id/pager_banner"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="@+id/viewGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/pager_banner"
android:layout_marginBottom="11dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" />
</RelativeLayout>上面的这个工具类的内容也就这么多了~~。
下面看另一个工具类 CycleViewPager ：
/**
* author: wu
* date: on 2018/12/18.
* describe:广告图片自动轮播控件ViewPager
*/
public class CycleViewPager extends ViewPager {
private InnerPagerAdapter mAdapter;
public CycleViewPager(Context context) {
super(context);
setOnPageChangeListener(null);
}
public CycleViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
setOnPageChangeListener(null);
}
@Override
public void setAdapter(PagerAdapter arg0) {
mAdapter = new InnerPagerAdapter(arg0);
super.setAdapter(mAdapter);
setCurrentItem(1);
}
@Override
public void setOnPageChangeListener(OnPageChangeListener listener) {
super.setOnPageChangeListener(new InnerOnPageChangeListener(listener));
}
private class InnerOnPageChangeListener implements OnPageChangeListener {
private OnPageChangeListener listener;
private int position;
public InnerOnPageChangeListener(OnPageChangeListener listener) {
this.listener = listener;
}
@Override
public void onPageScrollStateChanged(int arg0) {
if (null != listener) {
listener.onPageScrollStateChanged(arg0);
}
if (arg0 == ViewPager.SCROLL_STATE_IDLE) {
if (position == mAdapter.getCount() - 1) {
setCurrentItem(1, false);
} else if (position == 0) {
setCurrentItem(mAdapter.getCount() - 2, false);
}
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
if (null != listener) {
listener.onPageScrolled(arg0, arg1, arg2);
}
}
@Override
public void onPageSelected(int arg0) {
position = arg0;
if (null != listener) {
listener.onPageSelected(arg0);
}
}
}
private class InnerPagerAdapter extends PagerAdapter {
private PagerAdapter adapter;
public InnerPagerAdapter(PagerAdapter adapter) {
this.adapter = adapter;
adapter.registerDataSetObserver(new DataSetObserver() {
@Override
public void onChanged() {
notifyDataSetChanged();
}
@Override
public void onInvalidated() {
notifyDataSetChanged();
}
});
}
@Override
public int getCount() {
return adapter.getCount() + 2;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return adapter.isViewFromObject(arg0, arg1);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
if (position == 0) {
position = adapter.getCount() - 1;
} else if (position == adapter.getCount() + 1) {
position = 0;
} else {
position -= 1;
}
return adapter.instantiateItem(container, position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
adapter.destroyItem(container, position, object);
}
}
}
工具类写完了，下面来看一下如何使用，activity_main 中的代码：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.example.qd.imagecarousel.bannder.ImageCycleViewAppAdsFindSellerNew
android:id="@+id/imageSeller"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"/>
</LinearLayout>
Activity 中的代码：
public class MainActivity extends AppCompatActivity {
private ImageCycleViewAppAdsFindSellerNew imageSeller;//广告轮播
private List<String> urlList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageSeller = findViewById(R.id.imageSeller);
urlList = new ArrayList<>();
urlList.add("http://static.gamemm.com/images/toplist/game_dota11_id.png");
urlList.add("http://static.gamemm.com/images/toplist/game_dota2_id.png");
urlList.add("http://static.gamemm.com/images/toplist/game_battlefield_id.png");
urlList.add("http://static.gamemm.com/images/toplist/game_personality_id.png");
setImage();
}
private void setImage() {
imageSeller.setImageResources(urlList, new ImageCycleViewAppAdsFindSellerNew.ImageCycleViewListener() {
@Override
public void displayImage(String imageURL, final ImageView imageView) {
try {
//加载错误图片
Picasso.with(MainActivity.this).load(imageURL)
.error(R.drawable.ic_launcher_background).into(imageView);
} catch (Exception e) {
}
}
@Override
public void onImageClick(int position, View imageView) {
//点击事件
Toast.makeText(MainActivity.this, "点击" + position, Toast.LENGTH_SHORT).show();
}
});
}
}
这样就实现了广告轮播。