Android ViewPager導(dǎo)航小圓點(diǎn)實(shí)現(xiàn)無(wú)限循環(huán)效果
之前用View Pager做了一個(gè)圖片切換的推薦欄(就類似與淘寶、頭條客戶端頂端的推薦信息欄),利用View Pager很快就能實(shí)現(xiàn),但是一次無(wú)意間使用淘寶APP的時(shí)候,突然發(fā)現(xiàn)它的效果和我做的還不一樣,淘寶APP的推薦欄可以左右無(wú)限循環(huán)切換,而ViewPager自身其實(shí)并沒(méi)有支持這個(gè)功能。
其實(shí)實(shí)現(xiàn)這個(gè)無(wú)限循環(huán)不難,只需要在數(shù)據(jù)源的首尾各添加一張多余的圖片,在onPagerChangeListener()中監(jiān)聽(tīng)position<1和position>(總數(shù)據(jù)條目-1)就可以了。另外一點(diǎn)需要注意的是,這里的數(shù)據(jù)源+2,而導(dǎo)航小圓點(diǎn)卻比數(shù)據(jù)源少2,這樣在無(wú)限循環(huán)的時(shí)候,小圓點(diǎn)的切換就不好辦了。本人最開(kāi)始也是寫(xiě)邏輯在onPageSelected()里面判斷條件,總感覺(jué)挺麻煩的,有沒(méi)有更好的實(shí)現(xiàn)方式呢。答案是肯定的。只需將小圓點(diǎn)也首尾各家一個(gè),并設(shè)置為invisible不就好了?
我的代碼實(shí)現(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>
界面實(shí)現(xiàn):
public class HomePageFragment extends BaseFragment { private View view; private ViewPager mViewPager;//頂部信息推薦欄 private MyViewPagerAdapter mViewPagerAdapter; private LinearLayout ll_dots_homepage_top;//頂部信息推薦欄導(dǎo)航點(diǎn) private int GUIDE_NUMBER = 4; //頂部信息推薦欄的數(shù)量 private ImageView[] dotImages; //頂部信息推薦欄引導(dǎo)小圓點(diǎn) private int dotCurrentIndex; //頂部信息推薦欄小圓點(diǎn)偏移量 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; } /** * 初始化一些基礎(chǔ)數(shù)據(jù) */ private void initData() { if (mListDataViewPage != null) { mListDataViewPage.clear(); mListDataViewPage = null; } else { mListDataViewPage = new ArrayList<>(); // 為了實(shí)現(xiàn)無(wú)限循環(huán),首位兩張圖片都是重復(fù)的 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); } } } /** * 初始化底部推信息推薦欄引導(dǎo)小圓點(diǎn)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); } **//將第一個(gè)小圓點(diǎn)設(shè)置為高亮,這里的第一個(gè)偏移量是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); //默認(rèn)選中第二張圖片** } 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ì)循環(huán)跳轉(zhuǎn) if ( position < 1) { //首位之前,跳轉(zhuǎn)到末尾(N) position = 4; mViewPager.setCurrentItem(position,false); } else if ( position > 4) { //末位之后,跳轉(zhuǎn)到首位(1) position = 1; mViewPager.setCurrentItem(position,false); //false:不顯示跳轉(zhuǎn)過(guò)程的動(dòng)畫(huà) }else { dotImages[dotCurrentIndex].setEnabled(false); dotImages[position].setEnabled(true); dotCurrentIndex = position; } } } @Override public void onPageScrollStateChanged(int state) { } } }
注意代碼中加粗的代碼。初始的小圓點(diǎn)選中和ViewPager的position選中。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android實(shí)現(xiàn)ViewPager無(wú)限循環(huán)效果(二)
- Android ViewPager無(wú)限循環(huán)滑動(dòng)并可自動(dòng)滾動(dòng)完整實(shí)例
- Android ViewPager實(shí)現(xiàn)無(wú)限循環(huán)的實(shí)例
- Android ViewPager實(shí)現(xiàn)無(wú)限循環(huán)輪播廣告位Banner效果
- Android ViewPager實(shí)現(xiàn)智能無(wú)限循環(huán)滾動(dòng)回繞效果
- Android實(shí)現(xiàn)基于ViewPager的無(wú)限循環(huán)自動(dòng)播放帶指示器的輪播圖CarouselFigureView控件
- Android ViewPager無(wú)限循環(huán)實(shí)現(xiàn)底部小圓點(diǎn)動(dòng)態(tài)滑動(dòng)
- Android ViewPager實(shí)現(xiàn)無(wú)限循環(huán)效果
- Android viewpager中動(dòng)態(tài)添加view并實(shí)現(xiàn)偽無(wú)限循環(huán)的方法
- Android實(shí)現(xiàn)ViewPager無(wú)限循環(huán)效果(一)
相關(guān)文章
android下拉刷新ListView的介紹和實(shí)現(xiàn)代碼
在當(dāng)下,列表組件不帶下拉刷新的都不好意思叫列表。第一次完成列表的下拉刷新功能的時(shí)候,直接在Activity中實(shí)現(xiàn),雖然功能上是實(shí)現(xiàn)了,總體上感覺(jué)很亂。所以第二次用到的時(shí)候,就想著封裝成一個(gè)組件,實(shí)現(xiàn)和Activity的解耦。2013-04-04Android實(shí)現(xiàn)APP歡迎頁(yè)面簡(jiǎn)單制作思路
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)APP歡迎頁(yè)面簡(jiǎn)單制作思路,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08Android自定義View實(shí)現(xiàn)價(jià)格區(qū)間選擇控件
這篇文章主要為大家詳細(xì)介紹了Android如何利用自定義View實(shí)現(xiàn)價(jià)格區(qū)間選擇控件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以嘗試一下2022-11-11Android系統(tǒng)狀態(tài)欄定制圖標(biāo)顯示邏輯控制
這篇文章主要為大家介紹了Android系統(tǒng)狀態(tài)欄定制圖標(biāo)顯示邏輯控制,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10Android 優(yōu)雅的實(shí)現(xiàn)通用格式化編輯
這篇文章主要介紹了Android 優(yōu)雅的實(shí)現(xiàn)通用格式化編輯,幫助大家更好的理解和學(xué)習(xí)使用Android,感興趣的朋友可以了解下2021-03-03Android App后臺(tái)服務(wù)報(bào)告工作狀態(tài)實(shí)例
這篇文章主要介紹了Android App后臺(tái)服務(wù)報(bào)告工作狀態(tài)實(shí)例,使用LocalBroadcastManager發(fā)送和接收狀態(tài),需要的朋友可以參考下2014-06-06詳解Android(共享元素)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)開(kāi)發(fā)實(shí)踐
本篇文章主要介紹了詳解Android(共享元素)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)開(kāi)發(fā)實(shí)踐,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-08-08Android實(shí)現(xiàn)圖片加載進(jìn)度提示
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)圖片加載進(jìn)度提示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06