之前用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選中。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
