BannerView
相信每个Android开发的小伙伴都做过轮播图，ViewPager加ImageView再加上一排指示器点，非常的简单，没有什么可说的。本菜简书关注的大神看到一篇文章
如德芙般丝滑的ViewPager轮播
反省自己，每次做轮播图，虽然都是同样的套路，同样的配方，但是每次都要浪费许多时间，不够完美，也不够优雅。封装一个BannerView是最好的选择。
BannerView
实现方式
跟随的圆点指示器和ViewPager的滑动时间是封装的重点，其他不在赘述，最后有源码。
跟随的圆点指示器
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) move_point.getLayoutParams();
position = position % images.length;
params.leftMargin = (int) (dip2px(pointWidth + point Distance) * position + dip2px(pointWidth + pointDistance) * positionOffset);
move_point.setLayoutParams(params);
}
@Override
public void onPageSelected(int i) {
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
position：和存放图片的数组长度求余，取值范围（0~数组长度-1）
positionOffset：float类型，取值范围（0一1），表示当前页面滑动到下一个页面的偏移量，本菜以为滑动到上一个页面时positionOffset应该是（0一-1）的取值，测试之后发现并不是，取值范围是（0一1），滑动到上一个或者下一个页面position会跟着改变，所以不需要负数。
pointWidth + pointDistance：pointWidth，指示器小圆点的宽度，pointDistance两个小圆点之间的距离，两数之和表示两个相邻小圆点圆心到圆心的距离，也就是跟随指示器小圆点每切换一次页面需要滑动的距离。
通过动态的设置跟随小圆点距离左边的距离，就实现了跟随小圆点
修改ViewPager的页面切换时间
private void setViewPagerDuration() {
try {
Field field = ViewPager.class.getDeclaredField("mScroller");
field.setAccessible(true);
field.set(viewPager, new Scroller(context, new AccelerateInterpolator()) {
@Override
public void startScroll(int startX, int startY, int dx, int dy, int duration) {
super.startScroll(startX, startY, dx, dy, scrollTime);
}
});
} catch (NoSuchFieldException | IllegalAccessException e) {
e.printStackTrace();
}
}
通过反射改变ViewPager的切换动画时间，让滑动丝滑
超简单使用方式
imageList = new int[]{R.drawable.banner1, R.drawable.banner2, R.drawable.banner3, R.drawable.banner4, R.drawable.banner5, R.drawable.banner6};
rl_banner = (RelativeLayout) view.findViewById(R.id.rl_banner);
bannerView = new BannerView(getActivity(), imageList);
rl_banner.addView(bannerView.getBannerView());
bannerView.start();
bannerView.setOnPageClickListener(new BannerView.OnPageClickListener() {
@Override
public void onPageClick(int position) {
Toast.makeText(getActivity(), position + "", Toast.LENGTH_SHORT).show();
}
});
onDestroy中调用
bannerView.stop();
以后写轮播图只要这样就可以了，想想就激动。
源码
public class BannerView implements View.OnClickListener {
private int[] images;
private Context context;
private View bannerView;
private LinearLayout ll_point;
private ViewPager viewPager;
private View move_point;
private int switchTime = 6000;
private int scrollTime = 600;
private int pointWidth = 5;
private int pointDistance = 4;
private OnPageClickListener onPageClickListener;
private Handler handler = new Handler(new Handler.Callback() {
@Override
public boolean handleMessage(Message msg) {
if (msg.what == 101) {
viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
start();
}
return false;
}
});
public BannerView(Context context, int[] images) {
this.context = context;
this.images = images;
initView();
}
@SuppressLint("InflateParams")
private void initView() {
bannerView = LayoutInflater.from(context).inflate(R.layout.bannerview, null);
ll_point = (LinearLayout) bannerView.findViewById(R.id.ll_point);
viewPager = (ViewPager) bannerView.findViewById(R.id.viewpager);
move_point = bannerView.findViewById(R.id.move_point);
viewPager.setAdapter(new BannerAdapter());
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) move_point.getLayoutParams();
position = position % images.length;
params.leftMargin = (int) (UIUtil.dip2px(pointWidth + pointDistance) * position + UIUtil.dip2px(pointWidth + pointDistance) * positionOffset);
move_point.setLayoutParams(params);
}
@Override
public void onPageSelected(int i) {
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
initPoint();
setViewPagerDuration();
}
private void initPoint() {
LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(UIUtil.dip2px(pointWidth), UIUtil.dip2px(pointWidth));
LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(UIUtil.dip2px(pointWidth), UIUtil.dip2px(pointWidth));
params1.leftMargin = 0;
params2.leftMargin = UIUtil.dip2px(pointDistance);
for (int i = 0; i < images.length; i++) {
ImageView point = new ImageView(context);
if (i == 0) {
point.setBackgroundResource(R.drawable.gray_point);
point.setLayoutParams(params1);
} else {
point.setBackgroundResource(R.drawable.gray_point);
point.setLayoutParams(params2);
}
ll_point.addView(point);
}
}
public void start() {
handler.sendEmptyMessageDelayed(101, switchTime);
}
public void stop() {
handler.removeCallbacksAndMessages(null);
}
public View getBannerView() {
return bannerView;
}
private int getCurrentItem() {
return viewPager.getCurrentItem() % images.length;
}
@Override
public void onClick(View view) {
onPageClickListener.onPageClick(getCurrentItem());
}
public interface OnPageClickListener {
void onPageClick(int position);
}
public void setOnPageClickListener(OnPageClickListener onPageClickListener) {
this.onPageClickListener = onPageClickListener;
}
private void setViewPagerDuration() {
try {
Field field = ViewPager.class.getDeclaredField("mScroller");
field.setAccessible(true);
field.set(viewPager, new Scroller(context, new AccelerateInterpolator()) {
@Override
public void startScroll(int startX, int startY, int dx, int dy, int duration) {
super.startScroll(startX, startY, dx, dy, scrollTime);
}
});
} catch (NoSuchFieldException | IllegalAccessException e) {
e.printStackTrace();
}
}
private class BannerAdapter extends PagerAdapter {
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
position = position % images.length;
ImageView imageView = new ImageView(context);
imageView.setImageResource(images[position]);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setOnClickListener(BannerView.this);
container.addView(imageView);
return imageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
最后
再次感谢大神的文章
如德芙般丝滑的ViewPager轮播
受益匪浅
如有错误，请各位大神指出。
网友评论