RollViewPager图片轮播效果开源框架的使用
2017-07-26 18:53
555 查看
RollViewPager是一个自动轮播的Viewpager,
支持无限循环。 触摸时会暂停播放,直到结束触摸一个延迟周期以后继续播放。 看起来就像这样。指示器可以为点可以为数字还可以自定义,位置也可以变。
附上RollViewPager Github地址:https://github.com/Jude95/RollViewPager
使用Android Studio开发在gradle添加依赖:
![](http://static.blog.csdn.net/images/save_snippets.png)
1
[/code]
在布局文件当中使用:
2
3
4
![](http://static.blog.csdn.net/images/save_snippets.png)
1
2
3
4
[/code]
要使用到RollViewPager自定义属性的时候,在布局文件当中我们必须添加:
![](http://static.blog.csdn.net/images/save_snippets.png)
1
[/code]
RollPagerView自定义属性:
2
3
4
5
6
7
![](http://static.blog.csdn.net/images/save_snippets.png)
1
2
3
4
5
6
7
[/code]
一般指定一下间隔时间。
RollViewPager提供了自定义指示器的类:HintView 用法:
2
3
4
5
![](http://static.blog.csdn.net/images/save_snippets.png)
1
2
3
4
5
[/code]
设置点击事件:
2
3
4
5
6
![](http://static.b<br/>4000<br/>log.csdn.net/images/save_snippets.png)
1
2
3
4
5
6
[/code]
提供以下三种种方便的PagerAdapter供使用。
本ViewPager也可以使用其他任意PagerAdapter。
StaticPagerAdapter:
存储页面的Adapter。view添加进去就存储不会再次getView,减少页面创建消耗,消耗内存。一般自动播放的情况这种方案比较好。不然会大量构造View。 概念参照FragmentPagerAdapter。可以用于其他ViewPager。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
![](http://static.blog.csdn.net/images/save_snippets.png)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[/code]
DynamicPagerAdapter (跟以上Adapter用法一样)
动态的Adapter。当创建3号view时会销毁1号view(递推),会时常调用getView。增加页面创建消耗,减小内存消耗。 概念参照FragmentStatePagerAdapter。可以用于其他ViewPager。
LoopPagerAdapter
无限循环的Adapter。无限循环上采用的是getCount返回int大数的方法(并没有什么缺点,另外估计1s的间隔时间你在有生之年看不到他播放到底)。实测比第N页跳转到第1页的效果好。
数据采用StaticPagerAdapter的方案。节省创建View开销。 本Adapter只能用于本RollViewPager;
无需其他设置,很简单。
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
![](http://static.blog.csdn.net/images/save_snippets.png)
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
[/code]
播放控制
2
3
![](http://static.blog.csdn.net/images/save_snippets.png)
1
2
3
[/code]
MainActivity代码:
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
![](http://static.blog.csdn.net/images/save_snippets.png)
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
[/code]
xml代码:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
![](http://static.blog.csdn.net/images/save_snippets.png)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[/code]
附上效果图:
支持无限循环。 触摸时会暂停播放,直到结束触摸一个延迟周期以后继续播放。 看起来就像这样。指示器可以为点可以为数字还可以自定义,位置也可以变。
附上RollViewPager Github地址:https://github.com/Jude95/RollViewPager
使用Android Studio开发在gradle添加依赖:
compile 'com.jude:rollviewpager:1.4.5'1
![](http://static.blog.csdn.net/images/save_snippets.png)
1
[/code]
在布局文件当中使用:
<com.jude.rollviewpager.RollPagerView android:layout_width="match_parent" android:layout_height="180dp" app:rollviewpager_play_delay="3000"/>1
2
3
4
![](http://static.blog.csdn.net/images/save_snippets.png)
1
2
3
4
[/code]
要使用到RollViewPager自定义属性的时候,在布局文件当中我们必须添加:
xmlns:app="http://schemas.android.com/apk/res-auto1
![](http://static.blog.csdn.net/images/save_snippets.png)
1
[/code]
RollPagerView自定义属性:
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" 指示器下边距1
2
3
4
5
6
7
![](http://static.blog.csdn.net/images/save_snippets.png)
1
2
3
4
5
6
7
[/code]
一般指定一下间隔时间。
RollViewPager提供了自定义指示器的类:HintView 用法:
参数说明:上下文,当前轮播图指示器图片 默认指示器图片 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);//隐藏指示器1
2
3
4
5
![](http://static.blog.csdn.net/images/save_snippets.png)
1
2
3
4
5
[/code]
设置点击事件:
pagerView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(int position) { Toast.makeText(MainActivity.this,""+position,Toast.LENGTH_SHORT).show(); } });1
2
3
4
5
6
![](http://static.b<br/>4000<br/>log.csdn.net/images/save_snippets.png)
1
2
3
4
5
6
[/code]
提供以下三种种方便的PagerAdapter供使用。
本ViewPager也可以使用其他任意PagerAdapter。
StaticPagerAdapter:
存储页面的Adapter。view添加进去就存储不会再次getView,减少页面创建消耗,消耗内存。一般自动播放的情况这种方案比较好。不然会大量构造View。 概念参照FragmentPagerAdapter。可以用于其他ViewPager。
class MyPagerAdapter extends StaticPagerAdapter { private int[] image = {R.mipmap.one, R.mipmap.two, R.mipmap.three, R.mipmap.four}; // SetScaleType(ImageView.ScaleType.CENTER_CROP); // 按比例扩大图片的size居中显示,使得图片长(宽)等于或大于View的长(宽) @Override public View getView(ViewGroup container, int position) { ImageView imageView = new ImageView(container.getContext()); imageView.setImageResource(image[position]); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)); return imageView; } @Override public int getCount() { return image.length; } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
![](http://static.blog.csdn.net/images/save_snippets.png)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[/code]
DynamicPagerAdapter (跟以上Adapter用法一样)
动态的Adapter。当创建3号view时会销毁1号view(递推),会时常调用getView。增加页面创建消耗,减小内存消耗。 概念参照FragmentStatePagerAdapter。可以用于其他ViewPager。
LoopPagerAdapter
无限循环的Adapter。无限循环上采用的是getCount返回int大数的方法(并没有什么缺点,另外估计1s的间隔时间你在有生之年看不到他播放到底)。实测比第N页跳转到第1页的效果好。
数据采用StaticPagerAdapter的方案。节省创建View开销。 本Adapter只能用于本RollViewPager;
无需其他设置,很简单。
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; } }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
![](http://static.blog.csdn.net/images/save_snippets.png)
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
[/code]
播放控制
rollViewPager.pause() rollViewPager.resume() rollViewPager.isPlaying()1
2
3
![](http://static.blog.csdn.net/images/save_snippets.png)
1
2
3
[/code]
MainActivity代码:
public class MainActivity extends AppCompatActivity {1
private RollPagerView pagerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pagerView = (RollPagerView) findViewById(R.id.rollPagerView);
//设置适配器
pagerView.setAdapter(new MyPagerAdapter());
pagerView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(int position) { Toast.makeText(MainActivity.this,""+position,Toast.LENGTH_SHORT).show(); } });
//对指示器的自定义 参数说明:上下文,当前轮播图指示器图片 默认指示器图片
// pagerView.setHintView(new IconHintView(this,R.mipmap.ic_launcher,R.mipmap.fouse));
}
class MyPagerAdapter extends StaticPagerAdapter { private int[] image = {R.mipmap.one, R.mipmap.two, R.mipmap.three, R.mipmap.four}; // SetScaleType(ImageView.ScaleType.CENTER_CROP); // 按比例扩大图片的size居中显示,使得图片长(宽)等于或大于View的长(宽) @Override public View getView(ViewGroup container, int position) { ImageView imageView = new ImageView(container.getContext()); imageView.setImageResource(image[position]); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)); return imageView; } @Override public int getCount() { return image.length; } }
}
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
![](http://static.blog.csdn.net/images/save_snippets.png)
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
[/code]
xml代码:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <!--rollviewpager_play_delay 播放时间间隔默认为0--> <com.jude.rollviewpager.RollPagerView android:layout_width="match_parent" android:layout_height="150dp" android:id="@+id/rollPagerView" app:rollviewpager_play_delay="3000" > </com.jude.rollviewpager.RollPagerView> </RelativeLayout>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
![](http://static.blog.csdn.net/images/save_snippets.png)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[/code]
附上效果图:
相关文章推荐
- RollViewPager图片轮播效果开源框架的使用
- android图片轮播效果,开源框架RollViewPager的简单使用
- RollViewPager图片轮播效果开源框架的使用
- RollViewPager图片轮播效果开源框架使用方法详解
- android图片轮播效果,RollViewPager的简单使用(跑马灯)
- android图片轮播效果,RollViewPager的简单使用
- Android 图片轮播效果,RollViewPager的简单使用
- android图片轮播效果,RollViewPager的简单使用 原创 2016年05月06日 09:48:54 标签: android / RollViewPager 图
- android图片轮播效果,RollViewPager的简单使用
- android图片轮播效果,RollViewPager的简单使用
- android图片轮播效果,RollViewPager的简单使用(跑马灯)
- rollviewpager 轮播图开源框架简单使用方法
- android图片轮播效果,RollViewPager的简单使用
- android图片轮播效果,RollViewPager的简单使用
- 安卓_图片轮播效果,RollViewPager的简单使用
- android图片轮播效果,RollViewPager的简单使用
- android图片轮播效果,RollViewPager的简单使用
- RollViewPager实现android图片轮播效果
- android ScrollView顶部使用Viewpager的轮播图,下拉图片能放大效果
- android TV开发:使用ViewPager实现图片自动轮播效果