RollViewPager如何實現(xiàn)圖片輪播效果-創(chuàng)新互聯(lián)

這篇文章將為大家詳細講解有關(guān)RollViewPager如何實現(xiàn)圖片輪播效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)服務(wù)項目包括尼河口網(wǎng)站建設(shè)、尼河口網(wǎng)站制作、尼河口網(wǎng)頁制作以及尼河口網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，尼河口網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到尼河口省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

RollViewPager是一個自動輪播的Viewpager，支持無限循環(huán)。觸摸時會暫停播放，直到結(jié)束觸摸一個延遲周期以后繼續(xù)播放。看起來就像這樣。指示器可以為點可以為數(shù)字還可以自定義，位置也可以變。

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

使用Android Studio開發(fā)在gradle添加依賴:

compile 'com.jude:rollviewpager:1.4.5'

在布局文件當(dāng)中使用:

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

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

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

RollPagerView自定義屬性：

app:rollviewpager_play_delay="3000" 播放間隔時間，單位ms。填0則不播放。默認(rèn)為0 app:rollviewpager_hint_gravity="center" 指示器位置,提供left,center,right。默認(rèn)center
app:rollviewpager_hint_color="#7c7c7c" 指示器背景顏色.默認(rèn)黑色
app:rollviewpager_hint_alpha="80" 指示器背景透明度。0全透明，255不透明。默認(rèn)0.
app:rollviewpager_hint_paddingLeft="16dp" 指示器左邊距
app:rollviewpager_hint_paddingRight="16dp" 指示器右邊距
app:rollviewpager_hint_paddingTop="16dp" 指示器上邊距
app:rollviewpager_hint_paddingBottom="16dp" 指示器下邊距

一般指定一下間隔時間。

RollViewPager提供了自定義指示器的類:HintView 用法：

參數(shù)說明:上下文，當(dāng)前輪播圖指示器圖片默認(rèn)指示器圖片
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);//隱藏指示器

設(shè)置點擊事件:

pagerView.setOnItemClickListener(new OnItemClickListener() {
      @Override
      public void onItemClick(int position) {
        Toast.makeText(MainActivity.this,""+position,Toast.LENGTH_SHORT).show();
      }
    });

提供以下三種種方便的PagerAdapter供使用。

本ViewPager也可以使用其他任意PagerAdapter。

StaticPagerAdapter:

存儲頁面的Adapter。view添加進去就存儲不會再次getView，減少頁面創(chuàng)建消耗，消耗內(nèi)存。一般自動播放的情況這種方案比較好。不然會大量構(gòu)造View。概念參照FragmentPagerAdapter?？梢杂糜谄渌鸙iewPager。

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;
    }
  }

DynamicPagerAdapter (跟以上Adapter用法一樣)
動態(tài)的Adapter。當(dāng)創(chuàng)建3號view時會銷毀1號view(遞推)，會時常調(diào)用getView。增加頁面創(chuàng)建消耗，減小內(nèi)存消耗。概念參照FragmentStatePagerAdapter?？梢杂糜谄渌鸙iewPager。

LoopPagerAdapter

無限循環(huán)的Adapter。無限循環(huán)上采用的是getCount返回int大數(shù)的方法(并沒有什么缺點,另外估計1s的間隔時間你在有生之年看不到他播放到底)。實測比第N頁跳轉(zhuǎn)到第1頁的效果好。

數(shù)據(jù)采用StaticPagerAdapter的方案。節(jié)省創(chuàng)建View開銷。本Adapter只能用于本RollViewPager;

無需其他設(shè)置，很簡單。

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()

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);

    //設(shè)置適配器
    pagerView.setAdapter(new MyPagerAdapter());

    pagerView.setOnItemClickListener(new OnItemClickListener() {
      @Override
      public void onItemClick(int position) {
        Toast.makeText(MainActivity.this,""+position,Toast.LENGTH_SHORT).show();
      }
    });
    //對指示器的自定義 參數(shù)說明:上下文，當(dāng)前輪播圖指示器圖片 默認(rèn)指示器圖片
//    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;
    }
  }
}

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 播放時間間隔默認(rèn)為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>

附上效果圖:

RollViewPager如何實現(xiàn)圖片輪播效果

關(guān)于“RollViewPager如何實現(xiàn)圖片輪播效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

文章題目：RollViewPager如何實現(xiàn)圖片輪播效果-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://muchs.cn/article36/cesisg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、App開發(fā)、網(wǎng)頁設(shè)計公司、電子商務(wù)、網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容