Android使用ViewPager實(shí)現(xiàn)無(wú)限滑動(dòng)效果
前言
其實(shí)仔細(xì)想一下原理還是挺簡(jiǎn)單的。無(wú)非是當(dāng)我們滑動(dòng)到最后一頁(yè),再向后滑動(dòng)時(shí)定位到第一頁(yè);當(dāng)我們滑動(dòng)到第一頁(yè),再向前滑動(dòng)時(shí)定位到最后一頁(yè)。
但是,相信很多朋友都遇到過(guò)這個(gè)問(wèn)題:視圖的過(guò)度效果不自然。
小編也是通過(guò)百度和谷歌查找了很多解決方案,實(shí)驗(yàn)了很多方法,總結(jié)了一個(gè)相對(duì)不錯(cuò)的方法,接下來(lái)給各位分享下滑動(dòng)效果、實(shí)現(xiàn)細(xì)節(jié)以及一些踩過(guò)的坑。
1.無(wú)限滑動(dòng)效果(左右無(wú)限滑動(dòng))
事先準(zhǔn)備好2張滑動(dòng)圖片(有想試驗(yàn)的小伙伴,自備圖片啊,小編就不提供了...)
運(yùn)行效果圖(左右無(wú)限循環(huán)):
為了顯示更加直觀,小編僅用了2張圖片。
2.代碼實(shí)現(xiàn)
(1) Activity的Xml布局文件(非常簡(jiǎn)單的布局)
<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/view_pager" android:layout_width="match_parent" android:layout_height="200dp"/> </RelativeLayout>
(2)Activity
public class MainActivity extends AppCompatActivity { private ViewPager mViewPager; private ViewPagerAdapter mAdapter; private int[] images; // 圖片資源數(shù)組 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); // 初始化視圖 initData(); // 初始化數(shù)據(jù) } /** * 初始化視圖 */ private void initView() { mViewPager = (ViewPager) findViewById(R.id.view_pager); } /** * 初始化數(shù)據(jù) */ private void initData() { images = new int[]{R.mipmap.image1, R.mipmap.image2}; mAdapter = new ViewPagerAdapter(this, images); mViewPager.setAdapter(mAdapter); // 將ViewPager定位到中間頁(yè)(Short.MAX_VALUE/2附近的圖片資源數(shù)組第1個(gè)元素對(duì)應(yīng)的頁(yè)面) // 目的:1.圖片個(gè)數(shù) >1 才輪播 2.定位到中間頁(yè),向左向右都可滑 if(images.length > 1) { mViewPager.setCurrentItem(((Short.MAX_VALUE / 2) / images.length) * images.length, false); } } }
(3)ViewPagerAdapter
/** * @ClassName: ViewPagerAdapter * @Description: ViewPager適配器 * @Author Wangnan * @Date 2016/9/1 */ public class ViewPagerAdapter extends PagerAdapter{ private Context mContext; private int[] mImages; // 圖片資源ID數(shù)組 private List<ImageView> mImageViews; // ImageView集合 public ViewPagerAdapter(Context context, int[] images){ mContext = context; mImages = images; mImageViews = new ArrayList<>(); initImageViews(mImages); } /** * 初始化ImageViews集合 * @param imageIds */ private void initImageViews(int[] imageIds) { // 根據(jù)圖片資源數(shù)組填充ImageViews集合 for(int i = 0 ; i < imageIds.length ; i++){ ImageView mImageView = new ImageView(mContext); mImageView.setImageResource(imageIds[i]); mImageView.setScaleType(ImageView.ScaleType.CENTER_CROP); mImageViews.add(mImageView); } // ImageViews集合中的圖片個(gè)數(shù)在[2,3]時(shí)會(huì)存在問(wèn)題,遞歸再次填充一遍 if(mImageViews.size() > 1 && mImageViews.size() < 4){ initImageViews(imageIds); } } @Override public int getCount() { return mImageViews.size() <=1 ? mImageViews.size() : Short.MAX_VALUE; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView mImageView = mImageViews.get(position % mImageViews.size()); container.addView(mImageView); return mImageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View)object); } }
具體需要解釋的地方,代碼中都做了相應(yīng)的注釋,就不再多做解釋了,但后面小編還會(huì)解釋遇到的兩個(gè)坑點(diǎn)。
3.細(xì)節(jié)踩坑
相信在看小編的實(shí)現(xiàn)方式之前,有人在網(wǎng)上也找到了很多相似的實(shí)現(xiàn)。小編接下來(lái)要講的就是 —— 對(duì)“這些相似的實(shí)現(xiàn)”踩一下坑。
1. 出現(xiàn)異常:java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
原因:圖片資源少于4個(gè),對(duì)應(yīng)生成的ImageView也少于4個(gè)。
眾所周知,ViewPager
一般會(huì)維護(hù)2~3個(gè)頁(yè),如果只有3個(gè)ImageView
,很可能出現(xiàn)這種情況,在生成完3個(gè)Page
頁(yè)后并準(zhǔn)備生成第4個(gè)頁(yè)面時(shí),本應(yīng)該移除的最前面的頁(yè)面還未被移除,系統(tǒng)就會(huì)報(bào)異常并且給你這樣一個(gè)提示:You must call removeView() on the child's parent first(意思是讓你先將最前面頁(yè)的子View
從最前面頁(yè)移除掉,再將該子View
添加到第4頁(yè)中)。
解決辦法:在只有1張圖片時(shí),不能滑動(dòng),暫不處理;如果有2~3張圖片時(shí),遞歸增加至大于等于4個(gè)ImageView
為止(下方為小編解決該問(wèn)題的代碼)。
/** * 初始化ImageViews集合 * @param imageIds */ private void initImageViews(int[] imageIds) { ...... // ImageViews集合中的圖片個(gè)數(shù)在[2,3]時(shí)會(huì)存在問(wèn)題,遞歸再次填充一遍 if(mImageViews.size() > 1 && mImageViews.size() < 4){ initImageViews(imageIds); } }
2. 滑動(dòng)效果出現(xiàn)混亂(后面會(huì)附上混亂的效果圖)
原因:ViewPager
源碼本身存在問(wèn)題 - 數(shù)據(jù)范圍越界問(wèn)題。
小編的獲取ViewPager
頁(yè)面數(shù)量的方法是這樣寫(xiě)的:
@Override public int getCount() { return mImageViews.size() <=1 ? mImageViews.size() : Short.MAX_VALUE; }
小于1時(shí),頁(yè)面沒(méi)有滑動(dòng),不需要擴(kuò)充頁(yè)面數(shù)量;
大于1時(shí),取Short
取值范圍的最大值32767(我們會(huì)有3W多頁(yè)面,但不會(huì)同時(shí)存在,因?yàn)閂iewPager最多維持3個(gè)頁(yè)面)
小編這里用的是Short,但一開(kāi)始從網(wǎng)上找的相似實(shí)現(xiàn)全是使用的Integer
(Integer.MAX_VALUE = 2147483647, 也就是我們的ViewPager將會(huì)有大概21億個(gè)頁(yè)面),如果使用Integer
,比較細(xì)心的朋友會(huì)發(fā)現(xiàn)滑動(dòng)經(jīng)常出現(xiàn)混亂。
頁(yè)面反向回彈Bug
我們松手時(shí),頁(yè)面出現(xiàn)反向回彈(1~2頁(yè)),這和我們期望的滑動(dòng)效果不一致。
這是其中一種Bug,還有一些不太好說(shuō)明的滑動(dòng)Bug,小編就用“滑動(dòng)混亂”這個(gè)名詞進(jìn)行解釋了...
解決辦法:縮小頁(yè)面數(shù)量(小編使用的Short
代替Integer
減少了頁(yè)面)。
具體的無(wú)Bug的臨界值,有興趣的小伙伴可以去實(shí)驗(yàn),小編的測(cè)試結(jié)果如下:
800萬(wàn)以內(nèi):基本無(wú)滑動(dòng)Bug;
1000萬(wàn)左右:開(kāi)始出現(xiàn)當(dāng)前頁(yè)面定位不準(zhǔn)確的Bug,但還未出現(xiàn)反向回彈Bug。
總結(jié)
以上就是關(guān)于Android使用ViewPager實(shí)現(xiàn)無(wú)限滑動(dòng)效果的全部?jī)?nèi)容,希望這篇文章對(duì)大家開(kāi)發(fā)的時(shí)候能有所幫助,如果有疑問(wèn)可以留言交流。
- Android利用ViewPager實(shí)現(xiàn)滑動(dòng)廣告板實(shí)例源碼
- Android App中使用ViewPager+Fragment實(shí)現(xiàn)滑動(dòng)切換效果
- Android App中ViewPager所帶來(lái)的滑動(dòng)沖突問(wèn)題解決方法
- Android中ViewPager帶來(lái)的滑動(dòng)卡頓問(wèn)題解決要點(diǎn)解析
- android配合viewpager實(shí)現(xiàn)可滑動(dòng)的標(biāo)簽欄示例分享
- Android ViewPager無(wú)限循環(huán)實(shí)現(xiàn)底部小圓點(diǎn)動(dòng)態(tài)滑動(dòng)
- Android開(kāi)發(fā)之使用ViewPager實(shí)現(xiàn)圖片左右滑動(dòng)切換效果
- Android編程實(shí)現(xiàn)ViewPager多頁(yè)面滑動(dòng)切換及動(dòng)畫(huà)效果的方法
- Android編程開(kāi)發(fā)ScrollView中ViewPager無(wú)法正?;瑒?dòng)問(wèn)題解決方法
- android自定義ViewPager水平滑動(dòng)彈性效果
相關(guān)文章
Android便攜式熱點(diǎn)的開(kāi)啟狀態(tài)檢測(cè)和SSID的獲取方法
WIFI熱點(diǎn)的開(kāi)啟狀態(tài)和開(kāi)啟后的SSID如何獲取呢?接下來(lái)通過(guò)本文給大家分享Android便攜式熱點(diǎn)的開(kāi)啟狀態(tài)檢測(cè)和SSID的獲取方法,需要的朋友參考下吧2017-01-01Android權(quán)限HaloPermission詳細(xì)使用
這篇文章主要介紹了Android權(quán)限HaloPermission詳細(xì)使用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04Android中ShapeableImageView使用實(shí)例詳解(告別shape、三方庫(kù))
之前Google推送了文章,Android?Material組件1.2.0里面就有ShapeableImageView,不用像以前再寫(xiě)shape,下面這篇文章主要給大家介紹了關(guān)于Android中ShapeableImageView使用的相關(guān)資料,需要的朋友可以參考下2022-09-09Android 文件存儲(chǔ)及常見(jiàn)問(wèn)題解決
這篇文章主要介紹了Android 文件存儲(chǔ)及常見(jiàn)問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下2017-02-02Android開(kāi)發(fā)中MotionEvent坐標(biāo)獲取方法分析
這篇文章主要介紹了Android開(kāi)發(fā)中MotionEvent坐標(biāo)獲取方法,結(jié)合實(shí)例形式分析了MotionEvent獲取坐標(biāo)的相關(guān)函數(shù)使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-02-02flutter實(shí)現(xiàn)appbar下選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了flutter實(shí)現(xiàn)appbar下選項(xiàng)卡切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07Kotlin如何優(yōu)雅地判斷EditText數(shù)據(jù)是否為空詳解
這篇文章主要給大家介紹了關(guān)于Kotlin如何優(yōu)雅地判斷EditText數(shù)據(jù)是否為空的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用kotlin具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08