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

需求：

使用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;        }    }}