【问题标题】:Infinite Scrolling Image ViewPager无限滚动图像 ViewPager
【发布时间】:2012-12-02 10:54:15
【问题描述】:

根据 Google 的记录,Gallery 类在 API 级别 16 中已被弃用。 不再支持此小部件。其他水平滚动小部件包括支持库中的 Horizo​​ntalScrollView 和 ViewPager。所以我使用 ViewPager 作为 Gallery 类的替代品。

我的目标是最终实现一个带有文本描述的无限滚动图像 ViewPager。我使用下面的代码来实现带有描述每个图像的文本的图像 ViewPager,但是如何将无限滚动应用到 ViewPager?

我之前没有使用过 ViewPager,所以请尽可能提供详细的代码。

activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 
       android:orientation="vertical">
  <android.support.v4.view.ViewPager 
       android:id="@+id/myimagepager" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" /> 
</LinearLayout>

custom_pager.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   android:orientation="vertical"  
   android:gravity="center_horizontal">
   <ImageView 
       android:id="@+id/myimage" 
       android:layout_width="match_parent" 
       android:layout_height="0dp" 
       android:layout_margin="5dp" 
       android:layout_weight="2" /> 
    <TextView 
       android:id="@+id/image_text" 
       android:layout_width="fill_parent" 
       android:layout_height="0dp"   
       android:layout_weight="1"/>

</LinearLayout>

ImagePager:

public class ImagePager extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImagePagerAdapter adapter = new ImagePagerAdapter(this, imageArra, stringArray );
        ViewPager myPager = (ViewPager) findViewById(R.id.myimagepager);
        myPager.setAdapter(adapter);
        myPager.setCurrentItem(0);
    }

    private int imageArra[] = { R.drawable.a, R.drawable.b,R.drawable.c, 
                                 R.drawable.d,R.drawable.e,R.drawable.f,
                                 R.drawable.g, R.drawable.h, R.drawable.i};

    private String[] stringArray = new String[] { "Image a", "Image b","Image c"
                                                   "Image d","Image e","Image f", 
                                                   "Image g","Image h","Image i"};


}

ImagePagerAdapter:

public class ImagePagerAdapter extends PagerAdapter {

    Activity activity;
    int imageArray[];
    String[] stringArray;

    public ImagePagerAdapter(Activity act, int[] imgArra, String[] stringArra) {
        imageArray = imgArra;
        activity = act;
        stringArray = stringArra;
    }

    public int getCount() {
        return imageArray.length;
    }

    public Object instantiateItem(View collection, int position) {
        LayoutInflater inflater = (LayoutInflater)collection.getContext
                          ().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View layout = inflater.inflate(R.layout.custom_pager, null);   

        ImageView im=(ImageView) layout.findViewById(R.id.myimage);             
        im.setImageResource(imageArray[position]);

        TextView txt=(TextView) layout.findViewById(R.id.image_text);
        txt.setText(stringArray[position]);

        ((ViewPager) collection).addView(layout, 0);
          return layout;   
    }

    @Override
    public void destroyItem(View arg0, int arg1, Object arg2) {
        ((ViewPager) arg0).removeView((View) arg2);
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == ((View) arg1);
    }

    @Override
    public Parcelable saveState() {
        return null; 
    }


}

【问题讨论】:

  • "gallery class deprecated .. google 和搜索了很多之后,我以 ViewPager" 结尾。从在 Google 中输入“gallery abdroid”(是的,我确实拼错了)到在Gallery 的文档中结束,我只花了几秒钟的时间。前 3 句状态.. "此类在 API 级别 16 中已弃用。 不再支持此小部件。其他水平滚动小部件包括支持库中的 HorizontalScrollViewViewPager 。” 所以对未来的提示。在其他任何事情之前,请阅读文档。 ;)
  • @Andrew Thompson 我亲爱的帖子已更新,我已经从 google 看到了该文档,这只是为了说明我转向 viewpager 的原因,谢谢。

标签: java android android-viewpager infinite-scroll


【解决方案1】:

我有 same problem,但我找到了解决它的方法 - 代码可以在 github 上找到。

如果您将InfiniteViewPagerInfinitePagerAdapter 类复制到您的项目中,您可以通过一些小改动实现无限(包装)滚动。

在您的 Activity 中,使用 InfinitePagerAdapter 包装 PagerAdapter:

PagerAdapter adapter = new InfinitePagerAdapter(new ImagePagerAdapter(this, imageArra, stringArray));

将活动 XML 中的 ViewPager 更改为 InfiniteViewPager

<com.antonyt.infiniteviewpager.InfiniteViewPager 
       android:id="@+id/myimagepager" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" />

您可以将类重命名为您想要的任何名称。此代码仅在您至少有三页时才有效(示例代码中有九页,因此它可以正常工作)。

【讨论】:

  • 它的工作 nicley 但我有问题,现在我的项目中有 4 个类:1-ImagePager、2-ImagePagerAdapter、3-InfinitePagerAdapter、4-InfiniteViewPager.java。我们可以将它们合并到一个类还是两个类中,这个无限图像寻呼机将成为大项目的一部分,或者我们必须保留它,因为它由 4 个类组成,这会影响性能吗,谢谢
  • 我认为您不会发现使用 4 类与 2 类的性能有任何明显差异。最好将它们分开,因为这样您就可以将无限滚动行为添加到您稍后编写的任何 PagerAdapter/ViewPager - 将它们全部合并在一起意味着它不能在另一个上下文中轻松重用。
  • 好的,我明白了,另一件事:1-为什么我们在这个项目中没有一个适配器,因为你提到了:((用 InfinitePagerAdapter 包装你的 PagerAdapter)),为什么我们没有写一个适配器并将其命名为:InfinitePagerAdapter,或者必须通过包装过程获得特定的行为,2-您在代码中提到:从一开始就允许 100 个反向循环,应该足以产生无穷大的错觉。这意味着我每次打开我的应用程序时都有新的 100 个周期,请您澄清这两点,谢谢
  • 您的 ImagePagerAdapter 有一个特定的工作 - 它为每个页面提供布局,而不必担心其他任何事情。 InfinitePagerAdapter 同样只担心无限滚动,而不担心正在服务的特定页面 - 它不加载自己的任何视图。像这样将它们分开只是一种设计选择——它允许 InfinitePagerAdapter 与您编写的任何 PagerAdapter 一起工作。 100个周期的东西是为了View的生命周期,一般和Activity的生命周期是一样的。重新创建 Activity 会导致它重置。
  • 在imageview的点击上是否返回正确正确的选择位置?
【解决方案2】:

我认为我的解决方案更简单。

注意我的图像数组结构:

Item 0          => last image

Item count()-1  => first image

诀窍在于onPageScrollStateChanged

当用户滚动到最后一项时 -> 寻呼机在没有动画的情况下跳转到第一张图片(位置 = 1)

当用户滚动到第一个项目时 -> 寻呼机在没有动画的情况下跳转到最后一个图像(位置 = 计数 - 2)

public class InfiniteScrollingActivity extends ActionBarActivity {

    private ViewPager     pager;
    private MyAdapter     adapter;
    int[] promoImageIds = new int[]{R.drawable.cover6, R.drawable.cover1, R.drawable.cover2, R.drawable.cover3, R.drawable.cover4, R.drawable.cover5, R.drawable.cover6, R.drawable.cover1 };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_test);

        adapter = new MyAdapter(getSupportFragmentManager(), promoImageIds);
        pager = (ViewPager)findViewById(R.id.pager);
        pager.setAdapter(adapter);
        pager.setCurrentItem( 1 );
        pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageSelected(int index) {
                Log.v( "onPageSelected", String.valueOf( index ) );
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // Log.v("onPageScrolled", "");
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                Log.v("onPageScrollStateChanged", String.valueOf(state));

                if (state ==ViewPager.SCROLL_STATE_IDLE) {
                    int index = pager.getCurrentItem();
                    if ( index == 0 )
                        pager.setCurrentItem( adapter.getCount() - 2, false );
                    else if ( index == adapter.getCount() - 1 )
                        pager.setCurrentItem( 1 , false);
                }
            }
        });
    }


    public static class MyAdapter extends FragmentPagerAdapter {

        int[] promoImageIds;

        public MyAdapter(FragmentManager fm, int[] promoImageIds){
            super(fm);
            this.promoImageIds = promoImageIds;
        }

        @Override
        public int getCount(){
            return promoImageIds.length;
        }

        @Override
        public Fragment getItem(int position) {

            return PromoFragment.newInstance( promoImageIds[position] );
        }
    }

    public static class PromoFragment extends Fragment
    {
        int imageID;


        static PromoFragment newInstance( int imageID)
        {
            PromoFragment f = new PromoFragment();

            // Supply num input as an argument.
            Bundle args = new Bundle();
            args.putInt( "imageID", imageID );
            f.setArguments(args);

            return f;
        }

        @Override
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            imageID = getArguments() != null ? getArguments().getInt( "imageID" ) : null;
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState)
        {
            ImageView v = (ImageView) inflater.inflate(R.layout.fragment_image, container, false);
            v.setImageResource( imageID );
            return v;
        }
    }
}

【讨论】:

  • 棘手的部分是彻底阅读您的 promoImageIds 数组,并注意您重复了数组中的最后一个和第一个元素。易于实施,工作起来就像一个魅力!
  • 这种方法对我来说效果最好,它不会受到 Int32.MaxValue Count 方法的性能问题的影响。
  • 像魅力一样工作,但下面的指标在列表中无法正常工作我有 3 个数据大小它的滚动无限但指标显示 2 你能解决这个问题
【解决方案3】:

我已经找到了一个简单的技巧,希望对你有帮助

import java.util.ArrayList;
import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;

public class ImagePager extends Activity {
    String[] stringArray;
    int[] imageArra;
    ViewPager myPager;
    Boolean isScrooled = false;
    // use this array yo understand swipe left or right ?
    ArrayList<Float> pos = new ArrayList<Float>();

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

            // put  empty view at the beginnig and to end

        imageArra = new int[] { 0, R.drawable.ic_launcher,
                R.drawable.ic_launcher, R.drawable.ic_launcher,
                R.drawable.ic_launcher, R.drawable.ic_launcher,
                R.drawable.ic_launcher, R.drawable.ic_launcher,
                R.drawable.ic_launcher, R.drawable.ic_launcher, 0 };

           // put  empty string at the beginnig and to end

        stringArray = new String[] { "", "Image a", "Image b", "Image c",
                "Image d", "Image e", "Image f", "Image g", "Image h",
                "Image i", "" };

        ImagePagerAdapter adapter = new ImagePagerAdapter(this, imageArra,
                stringArray);
        myPager = (ViewPager) findViewById(R.id.myimagepager);
        myPager.setAdapter(adapter);
        myPager.setCurrentItem(1);

        myPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                Log.v("onPageSelected", String.valueOf(arg0));
                pos.clear();
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                try {
                            // while scrolling i add ever pos to array
                    pos.add(arg1);
                                    // if pos.get(0) > pos.get(pos.size() - 1) 
                    // <----- swipe <-----  
                                    // we should check isScroll because setCurrent item is not a croll ? 

                    if (pos.size() > 0)
                        if (arg0 == imageArra.length - 1
                                & pos.get(0) > pos.get(pos.size() - 1)
                                & isScrooled == true) {
                            try {
                                isScrooled = false;
                                myPager.setCurrentItem(1, false);
                            } catch (Exception e) {
                                Log.v("hata",
                                        "<----- swipe <-----  " + e.toString());
                            }

                        }
                        // ----> swipe ---->
                        else if (arg0 == 0
                                & pos.get(0) < pos.get(pos.size() - 1)
                                & isScrooled == true) {
                            try {
                                isScrooled = false;
                                myPager.setCurrentItem(imageArra.length - 1,
                                        false);
                            } catch (Exception e) {
                                Log.v("hata",
                                        "----> swipe ---->  " + e.toString());
                            }

                        } else if (arg0 == 0 & pos.size() == 1
                                & isScrooled == true) {
                            try {
                                isScrooled = false;
                                myPager.setCurrentItem(imageArra.length - 1,
                                        false);
                            } catch (Exception e) {
                                Log.v("hata",
                                        "----> swipe ---->  " + e.toString());
                            }

                        }

                } catch (Exception e) {
                    Log.v("hata", e.toString());
                }

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                Log.v("onPageScrollStateChanged", String.valueOf(arg0));
                            // set is scrolling
                isScrooled = true;
            }
        });

    }

}

[编辑 1]

import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;

public class ImagePager extends Activity {
    String[] stringArray;
    int[] imageArra;
    ViewPager myPager;
    int scrollState;
    Boolean isFirstVisitEnd= true,isFirstVisitBegin = true;
    ArrayList<Integer> pos = new ArrayList<Integer>();


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageArra = new int[] { 0,R.drawable.ic_launcher,
                R.drawable.ic_launcher, R.drawable.ic_launcher,
                R.drawable.ic_launcher, R.drawable.ic_launcher,
                R.drawable.ic_launcher, R.drawable.ic_launcher,
                R.drawable.ic_launcher, R.drawable.ic_launcher, 0 };

        stringArray = new String[] {"","Image a", "Image b", "Image c",
                "Image d", "Image e", "Image f", "Image g", "Image h",
                "Image i", "" };

        ImagePagerAdapter adapter = new ImagePagerAdapter(this, imageArra,
                stringArray);
        myPager = (ViewPager) findViewById(R.id.myimagepager);
        myPager.setAdapter(adapter);
        myPager.setCurrentItem(1);

        myPager.setOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageSelected(int arg0) {
                Log.v("onPageSelected", String.valueOf(arg0));
                pos.clear();
                if (arg0 == imageArra.length - 1)
                    isFirstVisitEnd = false;
                else
                    isFirstVisitEnd = true;


                if (arg0 == 0)
                    isFirstVisitBegin = false;
                else
                    isFirstVisitBegin = true;
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {                                
                try { 
                    pos.add(Integer.valueOf(arg2));

                    if (pos.size() > 0) {
                        //Log.v("onPageScrolled_arg2","arg0  : "+String.valueOf(arg0)+"   ilk : "+pos.get(0).toString()+"    son : " +pos.get(pos.size() - 1).toString()+ "   "+ String.valueOf(pos.get(0)-(pos.get(pos.size() - 1)))+"    isFirstVisitEnd: "+String.valueOf(isFirstVisitEnd.booleanValue()) );

                        // <----- swipe <-----
                        if (arg0 == imageArra.length - 2& (pos.get(pos.size() - 1) -pos.get(0)  < 100)& scrollState == 2 & isFirstVisitEnd == false) {                          
                            myPager.setCurrentItem(1, false);
                        }

                        //Log.v("onPageScrolled_arg2","arg0  : "+String.valueOf(arg0)+"   ilk : "+pos.get(0).toString()+"    son : " +pos.get(pos.size() - 1).toString()+ "   "+ String.valueOf(pos.get(0)-(pos.get(pos.size() - 1)))+"    isFirstVisitbegin: "+String.valueOf(isFirstVisitBegin.booleanValue()) );
                        if (arg0 == 0 & (pos.get(pos.size() - 1) -pos.get(0)  > -100)& scrollState == 2 & isFirstVisitBegin == false) {                         
                            myPager.setCurrentItem(imageArra.length - 2, false);
                        }       
                    }

                } catch (Exception e) {
                    Log.v("hata", e.toString());
                }

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                Log.v("onPageScrollStateChanged", String.valueOf(arg0));
                scrollState =arg0;
            }
        });
    }
}

【讨论】:

  • 可以连续滚动,但是当到达最后一个视图时仍然会出现空视图并想继续第一个视图,我们如何克服这个问题,谢谢
  • 嗨,很难理解寻呼机位置的确切值,但我更改了代码,我认为现在更好。请查看编辑,如果您有一些提高质量的想法,请与我分享(talhakosen@gmail.com)。我打算开发无限寻呼机并放到github上。
  • 第一个代码比第二个代码好,但仍然都显示空视图。第二个,当滚动到空视图时,它会慢慢堆叠在上面,你必须向后滚动一个视图,然后再继续滚动,谢谢
【解决方案4】:

我找到了另一种解决方案,基于Shlomi Hasinantonyt 的答案,无需修改集合。

ViewPager yourPager;
PagerAdapter yourAdapter;
//....
EndlessPagerAdapter endlessPagerAdapter = new EndlessPagerAdapter(yourAdapter, yourPager);
yourPager.setAdapter(endlessPagerAdapter);
yourPager.setCurrentItem(1);//for correct first page

全班:

public class EndlessPagerAdapter extends PagerAdapter {

private PagerAdapter adapter;

public EndlessPagerAdapter(PagerAdapter adapter, ViewPager viewPager) {
    this.adapter = adapter;
    viewPager.addOnPageChangeListener(new SwapPageListener(viewPager));
}

@Override
public int getCount() {
    return adapter.getCount() + 2;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
    if (adapter.getCount() < 2) {
        adapter.instantiateItem(container, position);
    }

    int newPosition;
    if (position == 0) {
        newPosition = adapter.getCount() - 1;
    } else if (position >= getCount() - 1) {
        newPosition = 0;
    } else {
        newPosition = position - 1;
    }
    return adapter.instantiateItem(container, newPosition);
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    adapter.destroyItem(container, position, object);
}

@Override
public void finishUpdate(ViewGroup container) {
    adapter.finishUpdate(container);
}

@Override
public boolean isViewFromObject(View view, Object object) {
    return adapter.isViewFromObject(view, object);
}

@Override
public void restoreState(Parcelable bundle, ClassLoader classLoader) {
    adapter.restoreState(bundle, classLoader);
}

@Override
public Parcelable saveState() {
    return adapter.saveState();
}

@Override
public void startUpdate(ViewGroup container) {
    adapter.startUpdate(container);
}

@Override
public CharSequence getPageTitle(int position) {
    return adapter.getPageTitle(position);
}

@Override
public float getPageWidth(int position) {
    return adapter.getPageWidth(position);
}

@Override
public void setPrimaryItem(ViewGroup container, int position, Object object) {
    adapter.setPrimaryItem(container, position, object);
}

@Override
public void unregisterDataSetObserver(DataSetObserver observer) {
    adapter.unregisterDataSetObserver(observer);
}

@Override
public void registerDataSetObserver(DataSetObserver observer) {
    adapter.registerDataSetObserver(observer);
}

@Override
public void notifyDataSetChanged() {
    adapter.notifyDataSetChanged();
}

@Override
public int getItemPosition(Object object) {
    return adapter.getItemPosition(object);
}

private class SwapPageListener implements ViewPager.OnPageChangeListener {

    private ViewPager viewPager;

    SwapPageListener(ViewPager viewPager) {
        this.viewPager = viewPager;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {
        if (state == ViewPager.SCROLL_STATE_IDLE) {
            PagerAdapter pagerAdapter = viewPager.getAdapter();
            if (pagerAdapter != null) {
                int itemCount = pagerAdapter.getCount();
                if (itemCount < 2) {
                    return;
                }
                int index = viewPager.getCurrentItem();
                if (index == 0 ) {
                    viewPager.setCurrentItem(itemCount - 2, false);
                } else if (index == itemCount - 1) {
                    viewPager.setCurrentItem(1, false);
                }
            }
        }
    }
}}

工作原理:

我们有一些收藏

然后向其中添加两个额外的项目

在最后一个位置显示第一个元素,在第一个位置显示最后一个元素

在事件中添加监听器和交换页面,从 4 到 1 和从 0 到 3

仅此而已。

我不建议你在那里应用动画或重布局,当元素交换时它可能会滞后。(也许,我没有遇到任何滞后)

也不要多次将此适配器设置为寻呼机,或将 SwapPageListener 移动到外部类并在初始化块中设置。

【讨论】:

    【解决方案5】:

    对于连续几天无限滚动,重要的是您在寻呼机中拥有良好的片段,因此我在页面上写下了我的答案 (Viewpager in Android to switch between days endlessly)

    效果很好!以上答案对我不起作用,因为我希望它起作用。

    【讨论】:

      【解决方案6】:

      RecyclerViewPager 实现了infinite scrolling 并且可以像画廊一样滚动。

      【讨论】:

        【解决方案7】:
        if ((pagerBottom.getCurrentItem() + 1) == (sliderimageDetails.size())) {
            pagerBottom.setCurrentItem(0);
        } else {
            pagerBottom.setCurrentItem((pagerBottom.getCurrentItem() + 1));
        }
        

        【讨论】:

        • 解释并缩进你的答案!
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2018-07-31
        • 1970-01-01
        • 2015-01-18
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多