此篇主要功能为ViewPager自动轮播,带底部导航,手指左右无限滑动,主要实现原理是在数据源前后拼接最后一张资源和第一张资源,实现平稳过渡,直接上代码。
布局代码
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/adv_pager"
android:layout_width="match_parent"
android:layout_height="161dp" />
<RelativeLayout
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="30dp">
<LinearLayout
android:layout_centerHorizontal="true"
android:id="@+id/viewGroup"
android:layout_width="wrap_content"
android:layout_centerVertical="true"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:layout_height="wrap_content" />
</RelativeLayout>
</FrameLayout>
主要代码
public class ImageCycleView extends LinearLayout {
/**
* 上下文
*/
private Context mContext;
/**
* 图片轮播视图
*/
private ViewPager mAdvPager = null;
/**
* 滚动图片视图适配器
*/
private ImageCycleAdapter mAdvAdapter;
/**
* 图片轮播指示器控件
*/
private LinearLayout mGroup;
/**
* 图片轮播指示器-个图
*/
private ImageView mImageView = null;
/**
* 滚动图片指示器-视图列表
*/
private ImageView[] mImageViews = null;
/**
* 图片滚动当前图片下标
*/
private int mImageIndex = 1;
/**
* 手机密度
*/
private float mScale;
/**
* @param context
*/
public ImageCycleView(Context context) {
super(context);
}
public ImageCycleView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
mScale = context.getResources().getDisplayMetrics().density;
LayoutInflater.from(context).inflate(R.layout.ad_cycle_view, this);
mAdvPager = (ViewPager) findViewById(R.id.adv_pager);
mAdvPager.addOnPageChangeListener(new GuidePageChangeListener());
mAdvPager.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 = (LinearLayout) findViewById(R.id.viewGroup);
}
/**
* 装填图片数据
*/
public void setImageResources(ArrayList<String> imageUrlList, ImageCycleViewListener imageCycleViewListener) {
// 清除所有子视图
mGroup.removeAllViews();
// 图片广告数量
final int imageCount = imageUrlList.size();
mImageViews = new ImageView[imageCount];
for (int i = 0; i < imageCount; i++) {
mImageView = new ImageView(mContext);
int imageParams = (int) (mScale * 7 + 0.5f);// XP与DP转换,适应不同分辨率
int imagePadding = (int) (mScale * 5 + 0.5f);
LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
lp.width = imageParams;
lp.height = imageParams;
mImageViews[i] = mImageView;
if (i == 0) {
mImageViews[i].setBackgroundResource(R.drawable.arl_red_dot);
} else {
lp.leftMargin = imagePadding;
mImageViews[i].setBackgroundResource(R.drawable.arl_white_dot);
}
mGroup.addView(mImageViews[i], i, lp);
}
mAdvAdapter = new ImageCycleAdapter(mContext, imageUrlList, imageCycleViewListener);
mAdvPager.setAdapter(mAdvAdapter);
mAdvPager.setCurrentItem(1);
startImageTimerTask();
}
/**
* 开始轮播(手动控制自动轮播与否,便于资源控制)
*/
public void startImageCycle() {
startImageTimerTask();
}
/**
* 暂停轮播——用于节省资源
*/
public void pushImageCycle() {
stopImageTimerTask();
}
/**
* 开始图片滚动任务
*/
private void startImageTimerTask() {
stopImageTimerTask();
// 图片每3秒滚动一次
mHandler.postDelayed(mImageTimerTask, 3000);
}
/**
* 停止图片滚动任务
*/
private void stopImageTimerTask() {
mHandler.removeCallbacks(mImageTimerTask);
}
private Handler mHandler = new Handler();
/**
* 图片自动轮播Task
*/
private Runnable mImageTimerTask = new Runnable() {
@Override
public void run() {
if (mImageViews != null) {
//如果是最后一个(getCount-1) --- 定位第一个(position = 1)
if (mImageIndex == mAdvAdapter.getCount() - 1) {
mImageIndex = 1;
mImageIndex++;
mAdvPager.setCurrentItem(mImageIndex);
} else if (mImageIndex == mAdvAdapter.getCount() - 2) {
//如果是倒数第二个--定位到第一个(position=0)
mImageIndex = 0;
mImageIndex++;
mAdvPager.setCurrentItem(mImageIndex, false);
} else {
mImageIndex++;
mAdvPager.setCurrentItem(mImageIndex);
}
}
}
};
/**
* 轮播图片状态监听器
*
* @author minking
*/
private final class GuidePageChangeListener implements ViewPager.OnPageChangeListener {
int position = 0;
@Override
public void onPageScrollStateChanged(int state) {
//如果手指处于空闲状态 (切换)
if (state == ViewPager.SCROLL_STATE_IDLE) {
//如果是最后一个A(getCount-1) --- 定位第一个A(position = 1)
if (position == mAdvAdapter.getCount() - 1) {
position = 1;
mAdvPager.setCurrentItem(position, false);//切换界面的时候,不平滑滚动
} else if (position == 0) {
//如果是第一个位置D --- 定位到最后一个D(倒数第二个位置)
position = mAdvAdapter.getCount() - 2;
mAdvPager.setCurrentItem(position, false);
}
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
@Override
public void onPageSelected(int index) {
position = index;
mImageIndex = mAdvPager.getCurrentItem();
startImageTimerTask(); // 开始下次计时
if (index == (mAdvAdapter.getCount() - 1)) {
index = 0;
} else if (index == 0) {
index = mAdvAdapter.getCount() - 3;
} else {
index = index - 1;
}
mImageViews[index].setPaddingRelative(10, 10, 10, 10);
// 设置图片滚动指示器背景
mImageViews[index].setBackgroundResource(R.drawable.arl_red_dot);
for (int i = 0; i < mImageViews.length; i++) {
if (index != i) {
mImageViews[i].setBackgroundResource(R.drawable.arl_white_dot);
}
}
}
}
private class ImageCycleAdapter extends PagerAdapter {
/**
* 图片视图缓存列表
*/
private ArrayList<ImageView> mImageViewCacheList;
/**
* 图片资源列表
*/
private ArrayList<String> mAdList = new ArrayList<String>();
/**
* 广告图片点击监听器
*/
private ImageCycleViewListener mImageCycleViewListener;
private Context mContext;
public ImageCycleAdapter(Context context, ArrayList<String> adList, ImageCycleViewListener imageCycleViewListener) {
mContext = context;
mAdList = adList;
mImageCycleViewListener = imageCycleViewListener;
mImageViewCacheList = new ArrayList<ImageView>();
}
@Override
public int getCount() {
return mAdList.size() + 2;
}
@Override
public boolean isViewFromObject(View view, Object obj) {
return view == obj;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
if (position == 0) {
position = mAdList.size() - 1;
} else if (position == (getCount() - 1)) {
position = 0;
} else {
position = position - 1;
}
String 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);
} else {
imageView = mImageViewCacheList.remove(0);
}
// 设置图片点击监听
final int finalPosition = position;
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mImageCycleViewListener.onImageClick(finalPosition, v);
}
});
imageView.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
// 停止轮播
case MotionEvent.ACTION_DOWN:
stopImageTimerTask();
break;
// 开始轮播
case MotionEvent.ACTION_UP:
startImageTimerTask();
break;
default:
startImageTimerTask();
break;
}
return false;
}
});
imageView.setTag(imageUrl);
container.addView(imageView);
mImageCycleViewListener.displayImage(imageUrl, imageView);
Picasso.with(getContext()).load(imageUrl).into(imageView);
return imageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
ImageView view = (ImageView) object;
container.removeView(view);
mImageViewCacheList.add(view);
}
}
/**
* 轮播控件的监听事件
*/
public interface ImageCycleViewListener {
/**
* 加载图片资源
*/
public void displayImage(String imageURL, ImageView imageView);
/**
* 单击图片事件
*/
public void onImageClick(int position, View imageView);
}
}