BannerView
相信每個(gè)Android開發(fā)的小伙伴都做過輪播圖，ViewPager加ImageView再加上一排指示器點(diǎn)，非常的簡單，沒有什么可說的。本菜簡書關(guān)注的大神看到一篇文章
如德芙般絲滑的ViewPager輪播
反省自己，每次做輪播圖，雖然都是同樣的套路，同樣的配方，但是每次都要浪費(fèi)許多時(shí)間，不夠完美，也不夠優(yōu)雅。封裝一個(gè)BannerView是最好的選擇。
BannerView
實(shí)現(xiàn)方式
跟隨的圓點(diǎn)指示器和ViewPager的滑動(dòng)時(shí)間是封裝的重點(diǎn)，其他不在贅述，最后有源碼。
跟隨的圓點(diǎn)指示器
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：和存放圖片的數(shù)組長度求余，取值范圍（0~數(shù)組長度-1）
positionOffset：float類型，取值范圍（0一1），表示當(dāng)前頁面滑動(dòng)到下一個(gè)頁面的偏移量，本菜以為滑動(dòng)到上一個(gè)頁面時(shí)positionOffset應(yīng)該是（0一-1）的取值，測(cè)試之后發(fā)現(xiàn)并不是，取值范圍是（0一1），滑動(dòng)到上一個(gè)或者下一個(gè)頁面position會(huì)跟著改變，所以不需要負(fù)數(shù)。
pointWidth + pointDistance：pointWidth，指示器小圓點(diǎn)的寬度，pointDistance兩個(gè)小圓點(diǎn)之間的距離，兩數(shù)之和表示兩個(gè)相鄰小圓點(diǎn)圓心到圓心的距離，也就是跟隨指示器小圓點(diǎn)每切換一次頁面需要滑動(dòng)的距離。
通過動(dòng)態(tài)的設(shè)置跟隨小圓點(diǎn)距離左邊的距離，就實(shí)現(xiàn)了跟隨小圓點(diǎn)
修改ViewPager的頁面切換時(shí)間
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的切換動(dòng)畫時(shí)間，讓滑動(dòng)絲滑
超簡單使用方式
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中調(diào)用
bannerView.stop();
以后寫輪播圖只要這樣就可以了，想想就激動(dòng)。
源碼
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輪播
受益匪淺
如有錯(cuò)誤，請(qǐng)各位大神指出。
