Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android簡單實現無限滾動自動滾動的ViewPager

Android簡單實現無限滾動自動滾動的ViewPager

編輯：關於Android編程

經常我們會在應用中看到一個可以自動滾動，並且無限滾動的一個ViewPager，百度谷歌上面也有很多關於這方面的教程，但是感覺都略顯麻煩，而且封裝的都不是很徹底。所以試著封裝一個比較好用的ViewPager

效果如下：

簡單的說一下實現思路，要實現無限滾動的話就要在PagerAdapter上面做一些手腳，在PagerAdapter的getCount的函數的返回值設置成Integer.MXA_VALUE就可以實現向右無限滾動，但是要實現向左無限滾動呢？就是一開始的時候setCurrentItem的時候設置一個非常大的值（大到你向左滾動了一萬年還是有東西）

@Override 
    public int getCount() { 
      return Integer.MAX_VALUE; 
    } 
mPager.setCurrentItem(10000 * mDatas.size());//一開始設置成這樣的話就可以向左無限滾動了

然後另外一個就是底部的游標了：

底部的游標是用一個自定義視圖：無非就是畫一個背景，然後在畫一個高亮的游標

/** 
  * 指示游標 
  */ 
  private class TipView extends View { 
    private int mPadding; 
    private int mCount; 
    private int mCurPos; 
    private Paint mNorPaint;//未被選中的顏色 
    private Paint mSelPaint;//被選中的顏色 白色 
    private int mHeight; 
    public TipView(Context context, int count) { 
      super(context); 
      mNorPaint = new Paint(); 
      mNorPaint.setAntiAlias(true); 
      int selHeight = ShowUtils.dip2px(2); 
      int norHeight = ShowUtils.dip2px(1); 
      mHeight = ShowUtils.dip2px(2); 
      mNorPaint.setStrokeWidth(norHeight); 
      mNorPaint.setColor(Color.argb(80, 255, 255, 255)); 
      mSelPaint = new Paint(); 
      mSelPaint.setAntiAlias(true); 
      mSelPaint.setStrokeWidth(selHeight); 
      mSelPaint.setColor(Color.WHITE); 
      mCount = count; 
      mPadding = ShowUtils.dip2px(0); 
    } 
    @Override 
    protected void onDraw(Canvas canvas) { 
      super.onDraw(canvas); 
      int ow = (getWidth()-2 * mPadding)/ mCount; 
      int y = getHeight() / 2; 
      canvas.drawLine(mPadding, y, mCurPos * ow + mPadding, y, mNorPaint); 
      canvas.drawLine(mCurPos * ow + mPadding, y, (mCurPos + 1) * ow + mPadding, y, mSelPaint); 
      canvas.drawLine((mCurPos + 1) * ow + mPadding, y, getWidth() - mPadding, y, mNorPaint); 
    } 
    @Override 
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
      ViewGroup.LayoutParams vp = getLayoutParams(); 
      vp.width = ViewGroup.LayoutParams.MATCH_PARENT; 
      vp.height = mHeight; 
      super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
    } 
    public void setCurPostion(int pos) { 
      mCurPos = pos; 
      invalidate(); 
    } 
    public void setCount(int count) { 
      mCount = count; 
    } 
  }

R.layout.layout_recommend_item的布局：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:orientation="vertical" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent"> 
  <ImageView 
    android:id="@+id/iv_pic" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:contentDescription="@null" 
    android:scaleType="fitXY"/> 
  <LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="48dp" 
    android:orientation="vertical" 
    android:layout_alignParentBottom="true" 
    android:background="@drawable/recommend" 
    android:gravity="center"> 
    <TextView 
      android:id="@+id/tv_desc" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:textColor="@color/white" 
      android:textSize="@dimen/text_normal" 
      android:maxLines="1" 
      android:ellipsize="end" 
      android:shadowColor="#ff333333" 
      android:shadowDx="2" 
      android:shadowDy="2" 
      android:paddingRight="8dp" 
      android:paddingLeft="8dp" 
      android:shadowRadius="1" /> 
  </LinearLayout> 
</RelativeLayout>

還有一個是實現自動滾動，自動滾動的話就是監聽OnPagerChangeListener裡面的函數，在ViewPager狀態改變的時候利用Handler發送一個切換界面的消息：

@Override 
    public void onPageScrollStateChanged(int i) { 
      curState = i; 
      if(i == ViewPager.SCROLL_STATE_DRAGGING){  //viewpager正在被拖動的時候 
        stopAnimation(); 
      }else { //沒有可執行消息時候添加消息 實現自動滾動 
        if(!(sHandler.hasMessages(START_SCROLL)&&sHandler.hasMessages(SCROLL_NEXT))){ 
          startAnimation(); 
        } 
      } 
    } 
    @Override 
    public void onPageSelected(final int i) {  //頁面跳轉後得到調用 
      sHandler.removeMessages(SCROLL_NEXT); 
      sHandler.removeMessages(START_SCROLL); 
      if(curState == ViewPager.SCROLL_STATE_DRAGGING){ 
        return; 
      } 
      Message msg = sHandler.obtainMessage(SCROLL_NEXT); 
      msg.arg1 = i + 1; 
      msg.obj = mPager; 
      sHandler.sendMessageDelayed(msg, SHOW_TIME); 
      mTipView.setCurPostion(i % mDatas.size()); 
    }

整體的代碼：

import android.content.Context; 
import android.graphics.Canvas; 
import android.graphics.Color; 
import android.graphics.Paint; 
import android.os.Handler; 
import android.os.Message; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.util.DisplayMetrics; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ImageView; 
import android.widget.RelativeLayout; 
import android.widget.TextView; 
import com.nostra13.universalimageloader.core.DisplayImageOptions; 
import com.nostra13.universalimageloader.core.ImageLoader; 
import com.papau.show.R; 
import com.papau.show.entity.HeadViewEntity; 
import com.papau.show.utils.ShowUtils; 
import java.util.ArrayList; 
import java.util.List; 
public class RecommendView extends RelativeLayout implements IRecommend { 
  private static final int START_SCROLL = 1; 
  private static final int SCROLL_NEXT = 2; 
  private static final int SHOW_TIME = 5000; 
  private List<HeadViewEntity> mDatas = new ArrayList<>(); 
  private ViewPager mPager; 
  private Context mContext; 
  private int mWidth, mHeight; 
  private ImageLoader mLoader; 
  private DisplayImageOptions mOptions; 
  private int mTitleHeight; 
  private TipView mTipView; 
  private static Handler sHandler = new Handler() { 
    @Override 
    public void handleMessage(Message msg) { 
      int w = msg.what; 
      ViewPager pager = (ViewPager) msg.obj; 
      switch (w) { 
        case START_SCROLL: 
          pager.setCurrentItem(msg.arg1, true); 
          break; 
        case SCROLL_NEXT: 
          pager.setCurrentItem(msg.arg1, true); 
          break; 
      } 
    } 
  }; 
  public RecommendView(Context context) { 
    super(context); 
  } 
  public RecommendView(Context context, int w, int h) { 
    super(context); 
    mContext = context; 
    mWidth = w; 
    mHeight = h; 
    initView(); 
//    mPager.setAdapter(new RecommendAdapter()); 
    mPager.setOnPageChangeListener(new MOnPagerChangeListener()); 
    mLoader = ImageLoaderManager.getImageLoader(mContext); 
    mOptions = ImageLoaderManager.getCacheOnDiskOptions(mContext); 
    init(); 
//    DisplayMetrics dm = mContext.getResources().getDisplayMetrics(); 
    mTitleHeight = ShowUtils.dip2px(48);//設置游標高度 
  } 
  @Override 
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
    ViewGroup.LayoutParams vp = getLayoutParams(); 
    if (vp != null) {  //設置視圖的寬高 
      vp.width = mWidth; 
      vp.height = mHeight; 
    } 
    super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
  } 
  private void initView() { 
    mPager = new ViewPager(mContext); 
    RelativeLayout.LayoutParams rp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT); 
    addView(mPager, rp); 
  } 
  /** 
   * 初始化指示游標 
   */ 
  private void initTipView() { 
    if (mTipView == null) { 
      RelativeLayout.LayoutParams rp = new RelativeLayout.LayoutParams(10, 10); 
      rp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);//顯示在父控件的底部 
      rp.bottomMargin = mTitleHeight;//游標的高度 
      mTipView = new TipView(mContext, mDatas.size()); 
      addView(mTipView, rp); 
    } else { 
      mTipView.setCount(mDatas.size()); 
    } 
  } 
  @Override 
  public void upDate() { 
    getData(); 
  } 
  @Override 
  public void init() { 
    getData(); 
  } 
  @Override 
  public void startAnimation() { 
    if (mDatas.size() == 0) { 
      return; 
    } 
    Message msg = sHandler.obtainMessage(START_SCROLL); 
    msg.obj = mPager; 
    msg.arg1 = (mPager.getCurrentItem() + 1); 
    sHandler.sendMessageDelayed(msg, SHOW_TIME); 
  } 
  @Override 
  public void stopAnimation() { 
    sHandler.removeMessages(START_SCROLL); 
    sHandler.removeMessages(SCROLL_NEXT); 
  } 
  /** 
   * 獲取viewpager要顯示的數據 
   */ 
  private void getData() { 
    String[] imageData = new String[]{"http://f.hiphotos.baidu.com/image/h%3D360/sign=e105b9f1d61b0ef473e89e58edc651a1/b151f8198618367a9f738e022a738bd4b21ce573.jpg", 
        "http://c.hiphotos.baidu.com/image/h%3D360/sign=b8cea9e92b738bd4db21b437918b876c/f7246b600c3387448982f948540fd9f9d72aa0bb.jpg", 
        "http://a.hiphotos.baidu.com/image/h%3D360/sign=3da95d01e7dde711f8d245f097eecef4/71cf3bc79f3df8dc39cb6295cf11728b461028c4.jpg", 
        "http://d.hiphotos.baidu.com/image/h%3D360/sign=410c3c96a60f4bfb93d09852334f788f/10dfa9ec8a136327a1de913a938fa0ec08fac78c.jpg", 
        "http://e.hiphotos.baidu.com/image/h%3D360/sign=f6600b1613dfa9ece22e501152d1f754/342ac65c10385343ff41ee2b9113b07eca808829.jpg"}; 
    for (int i = 0; i < 5; i++) { 
      HeadViewEntity info = new HeadViewEntity(); 
      info.setImageUrl(imageData[i]); 
      info.setTitle("我不做大哥好多年"+i); 
      info.setUrl("www.baidu.com"); 
      mDatas.add(info); 
    } 
    sHandler.postDelayed(new Runnable() { 
      @Override 
      public void run() { 
        stopAnimation(); 
        initTipView(); 
        mPager.setAdapter(new RecommendAdapter()); 
        mPager.setCurrentItem(10000 * mDatas.size());//一開始設置成這樣的話就可以向左無限滾動了 
      } 
    },2000); 
  } 
  /** 
   * viewpager子項內容 
   */ 
  private class RecommendAdapter extends PagerAdapter { 
    /** 
     * 填充子項視圖的內容 
     * @param container 父控件 viewpager 
     * @param position 子項的位置 
     * @return 返回子項視圖 
     */ 
    @Override 
    public Object instantiateItem(ViewGroup container, int position) { 
      int curPos = position % mDatas.size(); 
      View view = View.inflate(mContext, R.layout.layout_recommend_item, null); 
      ViewGroup.LayoutParams vp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); 
      ImageView iv = (ImageView) view.findViewById(R.id.iv_pic); 
      TextView tv = (TextView) view.findViewById(R.id.tv_desc); 
      tv.setText(mDatas.get(curPos).getTitle()); 
      mLoader.displayImage(mDatas.get(curPos).getImageUrl(), iv, mOptions); 
      container.addView(view, vp); 
      view.setTag(curPos); 
      view.setOnClickListener(new OnClickListener() { 
        @Override 
        public void onClick(View v) { 
        } 
      }); 
      return view; 
    } 
    @Override 
    public void destroyItem(ViewGroup container, int position, Object object) { 
      container.removeView((View) object); 
    } 
    @Override 
    public int getCount() { 
      return Integer.MAX_VALUE; 
    } 
    @Override 
    public boolean isViewFromObject(View view, Object o) { 
      return view == o; 
    } 
  } 
  private class MOnPagerChangeListener implements ViewPager.OnPageChangeListener { 
    private int curState; 
    @Override 
    public void onPageScrolled(int i, float v, int i1) { 
    } 
    @Override 
    public void onPageScrollStateChanged(int i) { 
      curState = i; 
      if(i == ViewPager.SCROLL_STATE_DRAGGING){  //viewpager正在被拖動的時候 
        stopAnimation(); 
      }else { //沒有可執行消息時候添加消息 實現自動滾動 
        if(!(sHandler.hasMessages(START_SCROLL)&&sHandler.hasMessages(SCROLL_NEXT))){ 
          startAnimation(); 
        } 
      } 
    } 
    @Override 
    public void onPageSelected(final int i) {  //頁面跳轉後得到調用 
      sHandler.removeMessages(SCROLL_NEXT); 
      sHandler.removeMessages(START_SCROLL); 
      if(curState == ViewPager.SCROLL_STATE_DRAGGING){ 
        return; 
      } 
      Message msg = sHandler.obtainMessage(SCROLL_NEXT); 
      msg.arg1 = i + 1; 
      msg.obj = mPager; 
      sHandler.sendMessageDelayed(msg, SHOW_TIME); 
      mTipView.setCurPostion(i % mDatas.size()); 
    } 
  } 
  /** 
   * 指示游標 
   */ 
  private class TipView extends View { 
    private int mPadding; 
    private int mCount; 
    private int mCurPos; 
    private Paint mNorPaint;//未被選中的顏色 
    private Paint mSelPaint;//被選中的顏色 白色 
    private int mHeight; 
    public TipView(Context context, int count) { 
      super(context); 
      mNorPaint = new Paint(); 
      mNorPaint.setAntiAlias(true); 
      int selHeight = ShowUtils.dip2px(2); 
      int norHeight = ShowUtils.dip2px(1); 
      mHeight = ShowUtils.dip2px(2); 
      mNorPaint.setStrokeWidth(norHeight); 
      mNorPaint.setColor(Color.argb(80, 255, 255, 255)); 
      mSelPaint = new Paint(); 
      mSelPaint.setAntiAlias(true); 
      mSelPaint.setStrokeWidth(selHeight); 
      mSelPaint.setColor(Color.WHITE); 
      mCount = count; 
      mPadding = ShowUtils.dip2px(0); 
    } 
    @Override 
    protected void onDraw(Canvas canvas) { 
      super.onDraw(canvas); 
      int ow = (getWidth()-2 * mPadding)/ mCount; 
      int y = getHeight() / 2; 
      canvas.drawLine(mPadding, y, mCurPos * ow + mPadding, y, mNorPaint); 
      canvas.drawLine(mCurPos * ow + mPadding, y, (mCurPos + 1) * ow + mPadding, y, mSelPaint); 
      canvas.drawLine((mCurPos + 1) * ow + mPadding, y, getWidth() - mPadding, y, mNorPaint); 
    } 
    @Override 
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
      ViewGroup.LayoutParams vp = getLayoutParams(); 
      vp.width = ViewGroup.LayoutParams.MATCH_PARENT; 
      vp.height = mHeight; 
      super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
    } 
    public void setCurPostion(int pos) { 
      mCurPos = pos; 
      invalidate(); 
    } 
    public void setCount(int count) { 
      mCount = count; 
    } 
  } 
}

然後提供了一個接口調用：

/** 
 * RecommendView接口 
 */ 
public interface IRecommend { 
  void upDate(); 
  void init(); 
  void startAnimation(); 
  void stopAnimation(); 
}

圖片的加載用到了ImageLoad庫：

import android.content.Context; 
import android.graphics.Bitmap; 
import com.nostra13.universalimageloader.cache.disc.impl.UnlimitedDiskCache; 
import com.nostra13.universalimageloader.core.DisplayImageOptions; 
import com.nostra13.universalimageloader.core.ImageLoader; 
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration; 
import com.nostra13.universalimageloader.core.assist.ImageScaleType; 
import com.papau.show.constant.Constants; 
import java.io.File; 
public class ImageLoaderManager { 
  /** 
   * 不帶硬盤緩存的options 
   * 
   * @param context 
   * @return 
   */ 
  public static synchronized DisplayImageOptions getCacheOnMemoryOptions(Context context) { 
    DisplayImageOptions options = new DisplayImageOptions.Builder() 
        .cacheInMemory(true) 
        .cacheOnDisk(false) 
        .imageScaleType(ImageScaleType.EXACTLY_STRETCHED) 
        .bitmapConfig(Bitmap.Config.ARGB_8888) 
//        .showImageOnLoading( 
//            context.getResources().getDrawable( 
//                R.drawable.loading_wait)) 
//        .showImageOnFail( 
//            context.getResources().getDrawable( 
//                R.drawable.loading_wait)) 
        .build(); 
    return options; 
  } 
  public static synchronized DisplayImageOptions getCircleOptions(Context context) { 
    DisplayImageOptions options = new DisplayImageOptions.Builder() 
        .cacheInMemory(true) 
        .cacheOnDisk(false) 
        .imageScaleType(ImageScaleType.EXACTLY_STRETCHED) 
        .bitmapConfig(Bitmap.Config.ARGB_8888) 
//        .showImageOnLoading( 
//            context.getResources().getDrawable( 
//                R.drawable.ic_user_head_hint)) 
//        .showImageOnFail( 
//            context.getResources().getDrawable( 
//                R.drawable.ic_user_head_hint)) 
        .build(); 
    return options; 
  } 
  /** 
   * 獲取在硬盤中緩存options 
   * 
   * @param context 
   * @return options 
   */ 
  public static synchronized DisplayImageOptions getCacheOnDiskOptions( 
      Context context) { 
    DisplayImageOptions options = new DisplayImageOptions.Builder() 
        .cacheInMemory(true) 
        .cacheOnDisk(true) 
        .imageScaleType(ImageScaleType.EXACTLY) 
        .bitmapConfig(Bitmap.Config.ARGB_8888) 
//        .showImageOnLoading( 
//            context.getResources().getDrawable( 
//                R.drawable.loading_wait)) 
//        .showImageOnFail( 
//            context.getResources().getDrawable( 
//                R.drawable.loading_wait)) 
        .build(); 
    return options; 
  } 
  /** 
   * 獲取imageLoader 單例 
   * 
   * @param context 
   * @return 
   */ 
  public static synchronized ImageLoader getImageLoader(Context context) { 
    ImageLoader imageLoader = ImageLoader.getInstance(); 
    File cacheDir = new File(Constants.sPicCacheLocalPath); 
    ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder( 
        context).diskCache(new UnlimitedDiskCache(cacheDir)) 
        .threadPoolSize(3) 
        .diskCacheExtraOptions(480, 320, null) 
        .build(); 
    imageLoader.init(config); 
    return imageLoader; 
  } 
}

使用方法

DisplayMetrics dm = getActivity().getResources().getDisplayMetrics(); 
    RecommendView rv = new RecommendView(getActivity(),dm.widthPixels ,(dm.widthPixels)/2); 
    headViewPager.addView(rv);

以上所述是小編給大家介紹的Android簡單實現無限滾動自動滾動的ViewPager，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對本站網站的支持！

  1. 上一頁:
  2. 下一頁:
關於Android編程
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
仿百度地圖街景實現 Android插件化開發之動態加載技術系列索引 android坐標 RxJava switchIfEmpty操作符實現Android檢查本地緩存邏輯判斷 詳解Android中一些SQLite的增刪改查操作 Android屬性動畫---Property Animation（三）
突破小米懸浮窗權限控制--不需要權限的懸浮窗

在上一篇文章講了Android的Toast拓展，在原生Toast基礎上對
ListView上拉加載和下拉刷新多種實現方式

該篇為ListView下拉刷新和上拉加載實現的各種方法大合集。可能在具體
Android開發：app工程集成銀聯支付功能（客戶端）

一.功能描述銀聯支付流程如下所示：拷貝upmp_android/sdkP
Android實現圖片文字輪播特效

本文實例講解了Android實現圖片文字輪播特效的詳細代碼，分享給大家供
閱讀排行版
Copyright © Android教程網 All Rights Reserved