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)跳轉(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)過程的動畫
}else {
dotImages[dotCurrentIndex].setEnabled(false);
dotImages[position].setEnabled(true);
dotCurrentIndex = position;
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
}
注意代碼中加粗的代碼。初始的小圓點選中和ViewPager的position選中。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Android實現(xiàn)ViewPager無限循環(huán)效果（二）
- Android ViewPager無限循環(huán)滑動并可自動滾動完整實例
- Android ViewPager實現(xiàn)無限循環(huán)的實例
- Android ViewPager實現(xiàn)無限循環(huán)輪播廣告位Banner效果
- Android ViewPager實現(xiàn)智能無限循環(huán)滾動回繞效果
- Android實現(xiàn)基于ViewPager的無限循環(huán)自動播放帶指示器的輪播圖CarouselFigureView控件
- Android ViewPager無限循環(huán)實現(xiàn)底部小圓點動態(tài)滑動
- Android ViewPager實現(xiàn)無限循環(huán)效果
- Android viewpager中動態(tài)添加view并實現(xiàn)偽無限循環(huán)的方法
- Android實現(xiàn)ViewPager無限循環(huán)效果（一）
相關文章
android下拉刷新ListView的介紹和實現(xiàn)代碼
在當下，列表組件不帶下拉刷新的都不好意思叫列表。第一次完成列表的下拉刷新功能的時候，直接在Activity中實現(xiàn)，雖然功能上是實現(xiàn)了，總體上感覺很亂。所以第二次用到的時候，就想著封裝成一個組件，實現(xiàn)和Activity的解耦。2013-04-04
這篇文章主要為大家詳細介紹了Android實現(xiàn)APP歡迎頁面簡單制作思路，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
Android自定義View實現(xiàn)價格區(qū)間選擇控件
這篇文章主要為大家詳細介紹了Android如何利用自定義View實現(xiàn)價格區(qū)間選擇控件，文中的示例代碼講解詳細，感興趣的小伙伴可以嘗試一下2022-11-11
Android系統(tǒng)狀態(tài)欄定制圖標顯示邏輯控制
這篇文章主要為大家介紹了Android系統(tǒng)狀態(tài)欄定制圖標顯示邏輯控制，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
Android 優(yōu)雅的實現(xiàn)通用格式化編輯
這篇文章主要介紹了Android 優(yōu)雅的實現(xiàn)通用格式化編輯，幫助大家更好的理解和學習使用Android，感興趣的朋友可以了解下2021-03-03
在新版微信中,可以把瀏覽的文章縮小為浮窗.點擊浮窗繼續(xù)閱讀.這篇文章主要介紹了Android仿新版微信浮窗效果,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Android App后臺服務報告工作狀態(tài)實例,使用LocalBroadcastManager發(fā)送和接收狀態(tài),需要的朋友可以參考下2014-06-06
詳解Android(共享元素)轉(zhuǎn)場動畫開發(fā)實踐
本篇文章主要介紹了詳解Android(共享元素)轉(zhuǎn)場動畫開發(fā)實踐，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-08-08
這篇文章主要為大家詳細介紹了Android實現(xiàn)圖片加載進度提示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細介紹了Android自定義PopupWindow小案例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11