RollViewPager圖片輪播效果開源框架的使用

RollViewPager是一個自動輪播的Viewpager，

支持無限循環。 觸摸時會暫停播放，直到結束觸摸一個延遲周期以後繼續播放。 看起來就像這樣。指示器可以為點可以為數字還可以自定義，位置也可以變。

附上RollViewPager Github地址:https://github.com/Jude95/RollViewPager

使用Android Studio開發在gradle添加依賴:

compile "com.jude:rollviewpager:1.4.5"

1

在布局文件當中使用:

<com.jude.rollviewpager.RollPagerView

android:layout"match_parent"

android:layout_height="180dp"

app:rollviewpager_play_delay="3000"/>

1

2

3

4

要使用到RollViewPager自定義屬性的時候，在布局文件當中我們必須添加：

xmlns:app="http://schemas.android.com/apk/res-auto

1

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

一般指定一下間隔時間。

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

設置點擊事件:

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

提供以下三種種方便的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

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

播放控制

rollViewPager.pause()

rollViewPager.resume()

rollViewPager.isPlaying()

1

2

3

MainActivity代碼:

public class MainActivity extends AppCompatActivity {

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;

}

}

}

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

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"match_parent"

android:layout_height="match_parent">

<!--rollviewpager_play_delay 播放時間間隔默認為0-->

<com.jude.rollviewpager.RollPagerView

android:layout"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

附上效果圖:

---------------------

作者：曹半斤

原文：https://blog.csdn.net/cgq1030699125/article/details/53760444

版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！