首页 > 系统 > Android > 正文

Android ViewPager导航小圆点实现无限循环效果

2019-12-12 02:13:29
字体:
来源:转载
供稿:网友

之前用View Pager做了一个图片切换的推荐栏(就类似与淘宝、头条客户端顶端的推荐信息栏),利用View Pager很快就能实现,但是一次无意间使用淘宝APP的时候,突然发现它的效果和我做的还不一样,淘宝APP的推荐栏可以左右无限循环切换,而ViewPager自身其实并没有支持这个功能。

其实实现这个无限循环不难,只需要在数据源的首尾各添加一张多余的图片,在onPagerChangeListener()中监听position<1和position>(总数据条目-1)就可以了。另外一点需要注意的是,这里的数据源+2,而导航小圆点却比数据源少2,这样在无限循环的时候,小圆点的切换就不好办了。本人最开始也是写逻辑在onPageSelected()里面判断条件,总感觉挺麻烦的,有没有更好的实现方式呢。答案是肯定的。只需将小圆点也首尾各家一个,并设置为invisible不就好了?

我的代码实现如下:

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>

界面实现:

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; //顶部信息推荐栏的数量  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;  }  /**   * 初始化一些基础数据   */  private void initData() {    if (mListDataViewPage != null) {      mListDataViewPage.clear();      mListDataViewPage = null;    } else {      mListDataViewPage = new ArrayList<>();      // 为了实现无限循环,首位两张图片都是重复的      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,才会循环跳转        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选中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表