Android 图片轮播框架:RollViewPager

  经常上网逛一逛还是能有不少的收获,以前自己用 ViewFlipper 控件来实现 android 的图片轮播效果,做得实在是不怎么样,很多小细节不知道怎么处理,现在好了,在 Github 上找到一个开源的图片轮播框架,只需要大概30行代码就可以很好地实现图片轮播功能,推荐给大家!

RollViewPager简介

  自动轮播的 Viewpager,支持无限循环。触摸时会暂停播放,直到结束触摸一个延迟周期以后继续播放。其中的指示器可以为点可以为数字还可以自定义,位置也可以变。

  Github 项目地址:https://github.com/Jude95/RollViewPager

  下文大部分均摘抄自该项目的说明文档,可以直接看本博客,也可以到 Github 上看说明文档,本文旨在宣传该开源框架。

如何使用

  以 Android Studio为例:

添加依赖

  在 gradle 中导入包:

1
compile 'com.jude:rollviewpager:1.4.5'
添加控件

  编写布局文件:

1
2
3
4
<com.jude.rollviewpager.RollPagerView
android:layout_width="match_parent"
android:layout_height="180dp"
app:rollviewpager_play_delay="3000"/>

  还可以为其添加如下属性:

  • app:rollviewpager_play_delay=”3000” 播放间隔时间,单位ms。填0则不播放。默认为0。

  • app:rollviewpager_hint_gravity=”center” 指示器位置,提供 left , center , right 。默认 center 。

  • app:rollviewpager_hint_color=”#7c7c7c” 指示器背景颜色。默认黑色。

  • app:rollviewpager_hint_alpha=”80” 指示器背景透明度。0全透明,255不透明。默认0。

  • app:rollviewpager_hint_paddingLeft=”16dp” 指示器左边距。

  • app:rollviewpager_hint_paddingRight=”16dp” 指示器右边距。

  • app:rollviewpager_hint_paddingTop=”16dp” 指示器上边距。

  • app:rollviewpager_hint_paddingBottom=”16dp” 指示器下边距。

  一般指定一下间隔时间就好了。

HintView指示器配置

  提供了 HintView 是对指示器进行自定义,下面的设置一种方式就好了。

1
2
3
4
mRollViewPager.setHintView(new IconHintView(this,R.drawable.point_focus,R.drawable.point_normal)); //指示器为图片
mRollViewPager.setHintView(new ColorPointHintView(this, Color.YELLOW,Color.WHITE)); //指示器为由颜色的点
mRollViewPager.setHintView(new TextHintView(this)); //指示器为文本
mRollViewPager.setHintView(null);//隐藏指示器
ItemClickListener监听点击事件
1
2
3
4
5
6
mRollViewPager.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(int position) {
Toast.makeText(MainActivity.this,"Item "+position+" clicked",Toast.LENGTH_SHORT).show();
}
});
Adapter

  提供以下三种种方便的 PagerAdapter 供使用。本 ViewPager 也可以使用其他任意 PagerAdapter。

(1)StaticPagerAdapter

  存储页面的 Adapter。View 添加进去就存储,不会再次 getView ,减少页面创建消耗,但是会消耗更多的内存。一般自动播放的情况这种方案比较好。不然会大量构造 View。

概念参照FragmentPagerAdapter。可以用于其他ViewPager。

(2)DynamicPagerAdapter

  动态的 Adapter,当创建 3 号 View 时会销毁 1 号 View(递推),会时常调用 getView 。增加页面创建消耗,减小内存消耗。 概念参照 FragmentStatePagerAdapter。可以用于其他 ViewPager。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//以上2个Adapter用法类似;
mRollViewPager.setAdapter(new TestNomalAdapter());
private class TestNomalAdapter extends StaticPagerAdapter{
private int[] imgs = {
R.drawable.img1,
R.drawable.img2,
R.drawable.img3,
R.drawable.img4,
};
@Override
public View getView(ViewGroup container, int position) {
ImageView view = new ImageView(container.getContext());
view.setImageResource(imgs[position]);
view.setScaleType(ImageView.ScaleType.CENTER_CROP);
view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
return view;
}
@Override
public int getCount() {
return imgs.length;
}
}

(3)LoopPagerAdapter

  无限循环的 Adapter,无限循环上采用的是 getCount 返回最大的int数的方法,和 StaticPagerAdapter页面存储一样。一次创建多次使用。数据采用 StaticPagerAdapter 的方案,节省创建 View 开销。 本 Adapter 只能用于本 RollViewPager。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
mRollViewPager.setAdapter(new TestLoopAdapter(mRollViewPager));
private class TestLoopAdapter extends LoopPagerAdapter{
private int[] imgs = {
R.drawable.img1,
R.drawable.img2,
R.drawable.img3,
R.drawable.img4,
};
public TestLoopAdapter(RollPagerView viewPager) {
super(viewPager);
}
@Override
public View getView(ViewGroup container, int position) {
ImageView view = new ImageView(container.getContext());
view.setImageResource(imgs[position]);
view.setScaleType(ImageView.ScaleType.CENTER_CROP);
view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
return view;
}
@Override
public int getRealCount() {
return imgs.length;
}
}
播放控制
  • rollViewPager.pause() 暂停
  • rollViewPager.resume() 恢复
  • rollViewPager.isPlaying() 是否正在播放

示例程序

  布局文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.jude.rollviewpager.RollPagerView
android:id="@+id/roll_view_pager"
android:layout_width="match_parent"
android:layout_height="180dp"
app:rollviewpager_play_delay="3000"/>
</LinearLayout>

  存放 4 张图片到工程 res 目录下的 drawable 文件夹下,命名为 img1,img2,img3,img4。Java文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/**使用RollPagerView实现图片轮播**/
mRollViewPager = (RollPagerView) view.findViewById(R.id.roll_view_pager);
//设置播放时间间隔
mRollViewPager.setPlayDelay(2000);
//设置透明度
mRollViewPager.setAnimationDurtion(500);
//设置适配器
mRollViewPager.setAdapter(new TestNormalAdapter());
//设置指示器(顺序依次)
mRollViewPager.setHintView(new ColorPointHintView(view.getContext(), Color.YELLOW, Color.WHITE));
}
private class TestNormalAdapter extends StaticPagerAdapter {
private int[] imgs = {
R.drawable.img1,
R.drawable.img2,
R.drawable.img3,
R.drawable.img4,
};
@Override
public View getView(ViewGroup container, int position) {
ImageView view = new ImageView(container.getContext());
view.setImageResource(imgs[position]);
view.setScaleType(ImageView.ScaleType.CENTER_CROP);
view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
view.setOnClickListener(new View.OnClickListener() // 点击事件
{
@Override
public void onClick(View v)
{
Toast.makeText(MainActivity.this, "你点击了第" + (position + 1) + "张图片", Toast.LENGTH_SHORT).show();
}
});
return view;
}
@Override
public int getCount() {
return imgs.length;
}
}
}

  写到这里,其实还是有话要说。现在连图片轮播都有开源框架了,自己要写的代码真的越来越少,要考虑的问题也越来越少。我们常常说不要重复造轮子,但是越来越觉得自己根本不会造轮子。注重基础,在自己实现过的基础上,再去对比开源框架,如果确实比自己做得好,那你应该认真思考自己写的程序的不足,然后可以采用开源框架进行开发。

坚持原创技术分享,您的支持将鼓励我继续创作!