当前位置: 首页 > 面试题库 >

无限滚动图像ViewPager

南门展
2023-03-14
问题内容

如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; 
    }


}

问题答案:

我遇到了同样的问题,但是我找到了解决的办法-
代码可以在github上找到。

如果将类InfiniteViewPager和InfinitePagerAdapter复制到项目中,则可以进行一些小的更改来实现无限(环绕)滚动。

在您的“活动”中,将您的PagerAdapter包裹为InfinitePagerAdapter

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" />

您可以将类重命名为所需的任何类。该代码仅在至少有三页的情况下才有效(示例代码中有九页,因此可以正常工作)。



 类似资料:
  • 问题内容: 在Bing搜索引擎上搜索图像时,结果显示如下: http://www.bing.com/images/search?q=stack+overflow 请注意,如何保持滚动状态和滚动状态,并且没有“正常”分页。 我的问题是:他们如何做到这一点?我可以看到发生了一些Ajax / javascript事件,但是代码不容易阅读。我特别想知道他们如何知道用户查看端口内是否有“空框”。 问题答案:

  • 无限滚动用来在页面滚动到接近底部时加载新内容或进行其他操作。 在底部的无限滚动 你只需在可滚动的容器上添加“infinite-scroll”类,一般是页面滚动区域 - div.content <style type="text/css"> .infinite-scroll-preloader { margin-top:-20px; } </style> <heade

  • 无限滚动用来在页面滚动到接近底部时加载新内容或进行其他操作。 无限滚动HTML结构 你只需在可滚动的容器上添加“infinite-scroll”类,一般是页面滚动区域 - <div class="page-content">: <div class="page"> <div class="page-content infinite-scroll" data-distance="100">

  • 无限滚动 iScroll集成了一套智能缓存系统,它允许对一堆近乎无限的元素的数据进行处理和重用。目前无限滚动还处于早期开发阶段,所以虽然当前版本已经足够稳定,但是还没有做好广泛推广的准备。 具体示例请参考 无限滚动示例 ,并请提交你的建议和报告bug。 作者将会尽可能快的将功能变更的细节添加上来。

  • 滚动至底部时,加载更多数据。 基础用法 在要实现滚动加载的列表上上添加v-infinite-scroll,并赋值相应的加载方法,可实现滚动到底部时自动执行加载方法。 demo <template> <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto"> <li v-for="i in count

  • InfiniteScroll 无限滚动 滚动至底部时,加载更多数据。 基础用法 在要实现滚动加载的列表上上添加v-infinite-scroll,并赋值相应的加载方法,可实现滚动到底部时自动执行加载方法。 demo <template> <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto"> <