欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android ViewPager導航小圓點實現(xiàn)無限循環(huán)效果

 更新時間：2017年08月21日 09:18:39   作者：flowerff  
這篇文章主要為大家詳細介紹了Android ViewPager導航小圓點實現(xiàn)無限循環(huán)效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

之前用View Pager做了一個圖片切換的推薦欄（就類似與淘寶、頭條客戶端頂端的推薦信息欄），利用View Pager很快就能實現(xiàn)，但是一次無意間使用淘寶APP的時候，突然發(fā)現(xiàn)它的效果和我做的還不一樣，淘寶APP的推薦欄可以左右無限循環(huán)切換，而ViewPager自身其實并沒有支持這個功能。

其實實現(xiàn)這個無限循環(huán)不難，只需要在數(shù)據(jù)源的首尾各添加一張多余的圖片，在onPagerChangeListener()中監(jiān)聽position<1和position>(總數(shù)據(jù)條目-1)就可以了。另外一點需要注意的是，這里的數(shù)據(jù)源+2，而導航小圓點卻比數(shù)據(jù)源少2，這樣在無限循環(huán)的時候，小圓點的切換就不好辦了。本人最開始也是寫邏輯在onPageSelected()里面判斷條件，總感覺挺麻煩的，有沒有更好的實現(xiàn)方式呢。答案是肯定的。只需將小圓點也首尾各家一個，并設置為invisible不就好了？

我的代碼實現(xiàn)如下：

xml布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

  <android.support.v4.view.ViewPager
    android:id="@+id/vp_homepage"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    ></android.support.v4.view.ViewPager>

  <LinearLayout
    android:id="@+id/ll_dots_homepage_top"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="8dp"
    android:gravity="center"
    android:orientation="horizontal">


    <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:clickable="true"
      android:padding="5dp"
      android:visibility="invisible"
      android:src="@drawable/dots"/>

    <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:clickable="true"
      android:padding="5dp"
      android:src="@drawable/dots"/>

    <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:clickable="true"
      android:padding="5dp"
      android:src="@drawable/dots"/>

    <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:clickable="true"
      android:padding="5dp"
      android:src="@drawable/dots"/>

    <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:clickable="true"
      android:padding="5dp"
      android:src="@drawable/dots"/>

    <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:clickable="true"
      android:padding="5dp"
      android:visibility="invisible"
      android:src="@drawable/dots"/>
  </LinearLayout>

</RelativeLayout>

界面實現(xiàn)：

public class HomePageFragment extends BaseFragment {

  private View view;
  private ViewPager mViewPager;//頂部信息推薦欄
  private MyViewPagerAdapter mViewPagerAdapter;
  private LinearLayout ll_dots_homepage_top;//頂部信息推薦欄導航點
  private int GUIDE_NUMBER = 4; //頂部信息推薦欄的數(shù)量
  private ImageView[] dotImages; //頂部信息推薦欄引導小圓點
  private int dotCurrentIndex; //頂部信息推薦欄小圓點偏移量
  private MyOnPageChangeListener mOnPageChangeListener;

  private List<View> mListDataViewPage;
  private Context context;

  @Override
  public void onAttach(Context context) {
    super.onAttach(context);
    this.context = context;
  }

  @Nullable
  @Override
  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable
      Bundle savedInstanceState) {
    view = inflater.inflate(R.layout.frament_homepage, container, false);

    initData();
    initView();

    return view;
  }

  /**
   * 初始化一些基礎數(shù)據(jù)
   */
  private void initData() {
    if (mListDataViewPage != null) {
      mListDataViewPage.clear();
      mListDataViewPage = null;
    } else {
      mListDataViewPage = new ArrayList<>();
      // 為了實現(xiàn)無限循環(huán)，首位兩張圖片都是重復的
      int[] resource = new int[]{
          R.drawable.test_viewpager_homepage_4, R.drawable.test_viewpager_homepage_1, R.drawable.test_viewpager_homepage_2, R
          .drawable.test_viewpager_homepage_3, R.drawable.test_viewpager_homepage_4,R.drawable.test_viewpager_homepage_1,};

      for (int i = 0; i < 6; i++) {
        WeakReference<Bitmap> bitmao = new WeakReference<Bitmap>(BitmapFactory
            .decodeResource(getResources(), resource[i]));
        ImageView imageView = new ImageView(context);
        imageView.setImageBitmap(bitmao.get());
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        mListDataViewPage.add(imageView);
      }

    }

  }

  /**
   * 初始化底部推信息推薦欄引導小圓點View
   */
  private void initDots() {
    dotImages = new ImageView[mListDataViewPage.size()];
    for (int i = 0; i < mListDataViewPage.size(); i++) {
      dotImages[i] = (ImageView) ll_dots_homepage_top.getChildAt(i);
      dotImages[i].setEnabled(false);
    }
    **//將第一個小圓點設置為高亮，這里的第一個偏移量是1，不是0
    dotImages[1].setEnabled(true);
    dotCurrentIndex = 1;**
  }

  /**
   * initView
   */
  private void initView() {
    findLayout();
    findView();
  }

  /**
   * findLayout
   */
  private void findLayout() {
    ll_dots_homepage_top = (LinearLayout) view.findViewById(R.id.ll_dots_homepage_top);
    initDots();

  }

  /**
   * 初始化控件
   */
  private void findView() {
    mViewPager = (ViewPager) view.findViewById(R.id.vp_homepage)；

    mViewPagerAdapter = new MyViewPagerAdapter(mListDataViewPage);
    mOnPageChangeListener = new MyOnPageChangeListener();
    mViewPager.setAdapter(mViewPagerAdapter);
    mViewPager.setOnPageChangeListener(mOnPageChangeListener);
    **mViewPager.setCurrentItem(1,false); //默認選中第二張圖片**
  }

  private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
      if (position < 0 || position > mListDataViewPage.size() || position == dotCurrentIndex) {
        return;
      }

      if ( mListDataViewPage.size() > 1) { //多于1，才會循環(huán)跳轉
        if ( position < 1) { //首位之前，跳轉到末尾（N）
          position = 4;
          mViewPager.setCurrentItem(position,false);
        } else if ( position > 4) { //末位之后，跳轉到首位（1）
          position = 1;
          mViewPager.setCurrentItem(position,false); //false:不顯示跳轉過程的動畫

        }else {
          dotImages[dotCurrentIndex].setEnabled(false);
          dotImages[position].setEnabled(true);
          dotCurrentIndex = position;
        }
      }


    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
  }
}

注意代碼中加粗的代碼。初始的小圓點選中和ViewPager的position選中。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論