使用ViewPager一屏加载多张图片，图片重叠问题

最新推荐文章于 2024-04-08 17:20:08 发布
最新推荐文章于 2024-04-08 17:20:08 发布
阅读量2.8k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Android开发系列 文章标签： viewpager 图片 解决方案
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yztbydh/article/details/78626714
本文介绍如何使用ViewPager展示每屏三张图片，并实现下拉刷新功能。文章详细解释了重写getPageWidth和getItemPosition方法的原因及步骤，同时分享了解决图片重叠问题的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

需求：

使用Viewpager显示图片，每一屏显示3张图片，下拉刷新需要刷新图片

实现：

重写getpageWidth方法，return 1.0f/3即可，重写getItemPosition方法返回POSITION_NONE以实现下拉刷新。

存在问题(需要满足一系列条件才会出现)：

会出现图片重叠问题；
这里写图片描述

步骤分析：

  1. 使用List 传递需要显示的View，使用List传递需要的图片URl,为了模拟刷新，使用了两个Url的list

    private List<String> url1 = new ArrayList<String>() {{
        add("http://img0.imgtn.bdimg.com/it/u=1767109513,505165385&fm=27&gp=0.jpg");
        add("http://img2.imgtn.bdimg.com/it/u=3721213387,3527941751&fm=27&gp=0.jpg");
        add("http://img1.imgtn.bdimg.com/it/u=1092319242,1669521439&fm=27&gp=0.jpg");
        add("http://img0.imgtn.bdimg.com/it/u=2244342679,3473440563&fm=27&gp=0.jpg");
        add("http://img3.imgtn.bdimg.com/it/u=2226396175,2886745608&fm=200&gp=0.jpg");
        add("http://img4.imgtn.bdimg.com/it/u=786606732,3918934292&fm=200&gp=0.jpg");
        add("http://img1.imgtn.bdimg.com/it/u=3405902385,207740320&fm=200&gp=0.jpg");
    }};

    private List<String> url2 = new ArrayList<String>() {{
        add("http://img1.imgtn.bdimg.com/it/u=3013460182,2306048797&fm=200&gp=0.jpg");
        add("http://img0.imgtn.bdimg.com/it/u=451958898,471147024&fm=200&gp=0.jpg");
        add("http://img5.imgtn.bdimg.com/it/u=4054007864,2464688467&fm=27&gp=0.jpg");
        add("http://img2.imgtn.bdimg.com/it/u=418233788,3768880590&fm=200&gp=0.jpg");
        add("http://img3.imgtn.bdimg.com/it/u=3559536831,2045373112&fm=200&gp=0.jpg");
        add("http://img5.imgtn.bdimg.com/it/u=2992442341,2383003136&fm=27&gp=0.jpg");
        add("http://img3.imgtn.bdimg.com/it/u=3848981340,893455915&fm=200&gp=0.jpg");
    }};
    private List<String> data;
    private List<View> views;

  2. 建立Adapter：因为一屏幕显示3个，需要重写getPageWidth,因为需要刷新，重写getItemPosition (因为ViewPage的notifyDataSetChanged()方法只有在增加一页数据或者减少一页数据时，才会判定刷新，重写getItemPosition并return POSITION_NONE, 则每次都会重建);

    public class IndicatorPagerAdapter extends PagerAdapter {


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

        @Override
        public int getCount() {
            return views.size();
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = views.get(position).findViewById(R.id.imageView);
            Glide.with(imageView.getContext()).load(data.get(position)).into(imageView);
            container.addView(views.get(position));
            return views.get(position);
        }

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

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

        @Override
        public float getPageWidth(int position) {
            return 1.0f / 3;
        }
    }

  3. 通过加入SwipeRefreshLayout，达到刷新效果。

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

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        data = new LinkedList<>();
        views = new LinkedList<>();
        indicatorPagerAdapter = new IndicatorPagerAdapter();

        viewPager.setAdapter(indicatorPagerAdapter);

        swipeRefresh = (SwipeRefreshLayout) findViewById(R.id.swipeRefresh);
        swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                if (flag) {
                    data.clear();
                    data.addAll(url1);
                    createView(url1);
                    flag = !flag;
                } else {
                    data.clear();
                    data.addAll(url2);
                    createView(url2);
                    flag = !flag;
                }
                swipeRefresh.setRefreshing(false);
                indicatorPagerAdapter.notifyDataSetChanged();
            }
        });
    }

    boolean flag = false;

    private void createView(List data) {
        views.clear();
        for (int i = 0; i < data.size(); i++) {
            View inflate = LayoutInflater.from(ViewPagerActivity.this).inflate(R.layout.item_view_pager_image, null);
            views.add(inflate);
        }
    }

分析原因：

做过了2个操作：

  1. 重写了getItemPosition
  2. 重写了getPageWidth

最后解决方案：

发现一个细节点：distroyItem方法的方法体，直接container.remove(views.get(position))，只需改为containenr.remove((View) object)即可。

完整源码(注，文中传递View的方式个人认为不是最佳，谨慎模仿)

public class ViewPagerActivity extends AppCompatActivity {

    private ViewPager viewPager;

    private SwipeRefreshLayout swipeRefresh;

    private List<String> url1 = new ArrayList<String>() {{
        add("http://img0.imgtn.bdimg.com/it/u=1767109513,505165385&fm=27&gp=0.jpg");
        add("http://img2.imgtn.bdimg.com/it/u=3721213387,3527941751&fm=27&gp=0.jpg");
        add("http://img1.imgtn.bdimg.com/it/u=1092319242,1669521439&fm=27&gp=0.jpg");
        add("http://img0.imgtn.bdimg.com/it/u=2244342679,3473440563&fm=27&gp=0.jpg");
        add("http://img3.imgtn.bdimg.com/it/u=2226396175,2886745608&fm=200&gp=0.jpg");
        add("http://img4.imgtn.bdimg.com/it/u=786606732,3918934292&fm=200&gp=0.jpg");
        add("http://img1.imgtn.bdimg.com/it/u=3405902385,207740320&fm=200&gp=0.jpg");
    }};

    private List<String> url2 = new ArrayList<String>() {{
        add("http://img1.imgtn.bdimg.com/it/u=3013460182,2306048797&fm=200&gp=0.jpg");
        add("http://img0.imgtn.bdimg.com/it/u=451958898,471147024&fm=200&gp=0.jpg");
        add("http://img5.imgtn.bdimg.com/it/u=4054007864,2464688467&fm=27&gp=0.jpg");
        add("http://img2.imgtn.bdimg.com/it/u=418233788,3768880590&fm=200&gp=0.jpg");
        add("http://img3.imgtn.bdimg.com/it/u=3559536831,2045373112&fm=200&gp=0.jpg");
        add("http://img5.imgtn.bdimg.com/it/u=2992442341,2383003136&fm=27&gp=0.jpg");
        add("http://img3.imgtn.bdimg.com/it/u=3848981340,893455915&fm=200&gp=0.jpg");
    }};
    private List<String> data;
    private List<View> views;

    IndicatorPagerAdapter indicatorPagerAdapter;

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

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        data = new LinkedList<>();
        views = new LinkedList<>();
        indicatorPagerAdapter = new IndicatorPagerAdapter();

        viewPager.setAdapter(indicatorPagerAdapter);

        swipeRefresh = (SwipeRefreshLayout) findViewById(R.id.swipeRefresh);
        swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                if (flag) {
                    data.clear();
                    data.addAll(url1);
                    createView(url1);
                    flag = !flag;
                } else {
                    data.clear();
                    data.addAll(url2);
                    createView(url2);
                    flag = !flag;
                }
                swipeRefresh.setRefreshing(false);
                indicatorPagerAdapter.notifyDataSetChanged();
            }
        });
    }

    boolean flag = false;

    private void createView(List data) {
        views.clear();
        for (int i = 0; i < data.size(); i++) {
            View inflate = LayoutInflater.from(ViewPagerActivity.this).inflate(R.layout.item_view_pager_image, null);
            views.add(inflate);
        }
    }

    public class IndicatorPagerAdapter extends PagerAdapter {


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

        @Override
        public int getCount() {
            return views.size();
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = views.get(position).findViewById(R.id.imageView);
            Glide.with(imageView.getContext()).load(data.get(position)).into(imageView);
            container.addView(views.get(position));
            return views.get(position);
        }

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

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

        @Override
        public float getPageWidth(int position) {
            return 1.0f / 3;
        }
    }

}
基于ViewPager实现大量图片浏览功能
Tiger的专栏
09-22 2113
1.      了解一下ViewPager的执行原理，写的很详细可参考 http://blog.youkuaiyun.com/ddtou/article/details/21244879 2.      ViewPager浏览大量图片时导致内存溢出 在了解ViewPager原理之后，说一下浏览大量图片是产生内存溢出的原因，了解一下每次移动下一页要返回的View的方法 首先看一下初始化新视图 @Ove
android多个图片滑动切换效果,Android开发之使用ViewPager实现图片左右滑动切换效果...
weixin_30767945的博客
05-25 1182
Android中图片的左右切换随处可见，今天我也试着查阅资料试着做了一下，挺简单的一个小Demo，却也发现了一些问题，话不多说，上代码~：使用了3个xml文件作为ViewPager的滑动page，布局都是相同的，如下只展示其中之一：android:layout_width="match_parent"android:layout_height="match_parent"android:orien...
ViewPagerDemo两个viewpager重合问题
02-22
ViewPagerDemo两个viewpager重合问题，这个问题有时候有些头疼，app主页很常见，事件分发机制
ViewPager多次切换后，TextView的文字出现重叠
洛漠O_o的专栏
02-23 1794
问题描述解决方案public void destroyItem(ViewGroup container, int position, Object object) { ((LazyViewPager) container).removeView((View)object); }
ViewPager 多张图片滑动展示
AFlcw的博客
10-21 242
xml <android.support.v4.view.ViewPager android:id="@+id/img_list" android:layout_width="match_parent" android:scaleType="fitXY" android:layout_height="@dimen/x280"> </android.support.v4.view.ViewPager> 导包 compile 'co...
ViewPager与ViewPager2实现堆叠效果
Jeffray1991的博客
04-27 3199
先上图看效果，GIF稍微有点糊，凑合着看！上面是ViewPager2实现的，下面是ViewPager实现的~ 出发点 最近公司想要实现这样一种效果，实现并不难，本着尝试新技术的想法，打算用ViewPager2实现这种效果。中间也或多或少遇见了小麻烦，发出来与大家一起讨论下~ 需求实现 方式一、ViewPager实现： 代码如下： viewpager.offscreenPageLimit = 2 val mScaleOffset = 200f
一步步实现Viewpager卡片翻页效果
01-20
增加这个限制可以提高用户体验，因为更多的卡片会被预先加载并准备好显示，这样在滑动时可以更平滑地过渡。在这里，设置适当的值可以决定多少个卡片可以同时显示，从而创造出多层卡片叠加的视觉效果。 总结，实现...
android实现Glide加载图片(优化上下滑动图片重复加载问题) 简易新闻（八）
Tobey_r1的博客
08-10 3584
android实现Glide加载图片(优化上下滑动图片重复加载问题) 简易新闻（十）
使用ViewPager来实现Tab效果
07-25
`ViewPager`组件是Google提供的Android Support Library的一部分，它允许用户左右滑动查看多个页面，非常适合用来实现这种效果。本篇文章将深入探讨如何使用`ViewPager`来创建Tab功能，并解决`ImageButton`不可点击...
CardSlideView：一行代码实现ViewPager卡片效果，比ViewPager2更强大，实质上同样是RecyclerView
01-28
一行代码实现ViewPager卡片效果，比ViewPager2更强大，实质上同样是RecyclerView 效果 功能 项目装饰 可设item之间间距，可做到重叠 可设各个view自身的padding和margin 横竖两个方向 无限循环 页面和线性两种滑动...
Android-各种方向的ViewPager层叠卡片
08-12
各种方向的ViewPager层叠卡片
ViewPager 实现多个图片水平滚动
08-08
Android ViewPager 实现多个图片水平滚动,代码计算viewpager的宽度,我的项目是每屏只能显示三张图片，这个要自己根据项目要求计算，扩展更复杂的应用请在adapter中设置布局通过inflate引入，并通过position灵活判断
ImageView显示叠加图
最新发布
lyl0530的博客
04-08 360
layout_food_add_icon.xml：叠加两个drawable；针对ic_add_food设置外边距。imageView显示叠加图：背景是绿色，中间为add图标。
通过ViewPager控件实现多张图片动态切换
星月工厂
12-02 1577
本博客实现的功能 通过ViewPager动态显示多张图片 点击图片实现放大的效果
Viewpager+Fragment重复滑动后出现view重叠问题
小夫的博客
06-17 4887
viewpager+fragment这个组合用起来非常爽呀~~~ 但有时候会有点奇葩的问题需要注意 我就遇到了viewpager反复滑动，之前加载的fragment被重建了，但view没有delete掉，于是就view覆盖上去了，就出来各种奇葩的问题了。 想来想去，百度谷歌一齐上，大概有一些方法可以解决这个问题~~~ 1、viewpager.setOffscreenPage
解决viewPager fragment有时候内容重叠的问题的方法
sinat_21468979的博客
11-08 2983
在fragment的类中重写下面的方法，然后根据参数的boolean值去显示或者隐藏当前的view即可 public void setUserVisibleHint(boolean isVisibleToUser) { super.setUserVisibleHint(isVisibleToUser); getView().setVisibility(isVisibleToUse
Viewer.js –JS/jQuery图片查看器-实现多张图片预览组件
CharlieChen的专栏
12-06 7283
参考和下载：http://www.dowebok.com/192.html 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转（类似微博的图片旋转） 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式（可做屏保） 支持缩略图 支持标题显示 支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本，您可以任意选择。 GitHub ...
Android中的Fragment与ViewPager的搭配使用，有没有问题重叠问题，怎么解决
QYgujingjing的专栏
07-22 1360
Android中的Fragment与ViewPager的搭配使用，有没有问题重叠问题，怎么解决
android 多图片 动画效果,Android中用ViewPager实现多页面滑动切换及动画效果的实例...
weixin_34708196的博客
05-25 468
一、首先，我们来看一下效果图，这是新浪微博的Tab滑动效果。我们可以手势滑动，也可以点击上面的图标进行切换。与此同方式，白色横条会移动到相应的页卡头标下。这是一个动画效果，白条是缓慢滑动过去的。好了，接下来我们就来实现它。二、在开始前，我们先要认识一个控件，ViewPager。它是Android SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。这个附加包是android-support...
解决ViewPager图片动画问题：自定义ImageView放大缩小实现
背景是作者希望在ViewPager中控制每个图片视图的独立动画效果，避免多个页面同时放大导致的视觉混乱，以及全屏图片可能的重叠问题。在没有找到现成的Demo可供参考的情况下，作者决定自定义ImageView来满足需求。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值