ViewPager+ImageView 图片滑动预览

最新推荐文章于 2021-12-11 23:15:22 发布

原创最新推荐文章于 2021-12-11 23:15:22 发布 · 3.9k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种解决ViewPager中图片加载卡顿的方法，通过预加载所有图片到ImageView列表，并结合自定义PagerAdapter来提高用户体验。文章还探讨了如何通过监听事件实现页面间的导航。

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

项目需求：

1、展示从网上url获取的图片

2、页面既可以左右滑动，也可以依靠向左向右的箭头按钮控制

难点：

1、如果在ViewpagerAdapter里面使用ImageLoader加载ImageView，因为网络请求耗时较长，会造成每张图片都卡顿

解决方案：

1）先将图片都下载下来

List<String> imageUrls = FragmentSetting.imageUrls;
         len = imageUrls.size();
        List<ImageView> lists = new ArrayList<>();
        ImageViewFactory factory = new ImageViewFactory();
        for (int i = 0;i<len;i++){
            lists.add(factory.getImageView(context, imageUrls.get(i)));
        }
        ImagePager mypager = new ImagePager(context,lists);
        imgPager.setAdapter(mypager);

其中：

public class ImageViewFactory {
    public ImageView getImageView(Context context,String imgUrl){
        ImageView imageView = (ImageView) LayoutInflater.from(context).inflate(
                R.layout.imageview, null);
        getImageRequest(context,imageView,imgUrl);
        return imageView;
    }

    private void getImageRequest(Context context, final ImageView imageView, String imgUrl) {
        ImageRequest imReq = new ImageRequest(imgUrl, new Response.Listener<Bitmap>() {

            @Override
            public void onResponse(Bitmap arg0) {
                imageView.setImageBitmap(arg0);
            }
        }, 0, 0, Bitmap.Config.RGB_565, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError volleyError) {
//                imageView.setImageResource(R.mipmap.default_pic);
            }
        }
        );
        RequestQueue queue = RequestManager.getRequestQueue();
        queue.add(imReq);
        queue.start();
    }
}

重写PagerAdapter

package com.chinaso.so.ui.control;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.android.volley.toolbox.ImageLoader;
import com.chinaso.so.R;

import java.util.List;

/**
 * Created by chinaso on 2015/11/4.
 */
public class ImagePager extends PagerAdapter {
    private Context context;
    private List<ImageView> strDrawables;

    public  ImagePager(Context context, List<ImageView> strDrawables) {
        this.context=context;
        this.strDrawables=strDrawables;
    }

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

    @Override
    public View instantiateItem(ViewGroup container, int position) {
        ImageView imageView = strDrawables.get(position);
        container.addView(imageView);
        return imageView;
    }

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

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

}

2、currentItem是有两个改变的原因，一个是button的click事件，一个是需要重写Viewpager的setOnPageChangeListener事件

（1）重写ChangeedListener

imgPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                if (currentImg == 0) {
                    //如果offsetPixels是0页面也被滑动了，代表在第一页还要往左划
                    if (positionOffsetPixels == 0 && currentPageScrollStatus == 1) {
                        CoverActivity.this.finish();
                    }
                } else if (currentImg == (len - 1)) {
                    //已经在最后一页还想往右划
                    if (positionOffsetPixels == 0 && currentPageScrollStatus == 2) {
                        Toast.makeText(context, "没有下一张啦", Toast.LENGTH_SHORT).show();
                    }
                }
            }

            @Override
            public void onPageSelected(int position) {
                currentImg = position;
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                //记录page滑动状态，如果滑动了state就是1
                currentPageScrollStatus = state;
            }


        });

参数解释：onPageScrollStateChanged(int arg0) ，此方法是在状态改变的时候调用，其中arg0这个参数有三种状态（0，1，2）。arg0 ==1表示正在滑动，arg0==2表示滑动完毕了，arg0==0表示什么都没做。当页面开始滑动的时候，三种状态的变化顺序为（1，2，0）。
onPageScrolled(int arg0,float arg1,int arg2) ，当页面在滑动的时候会调用此方法，在滑动被停止之前，此方法回一直得到调用。其中三个参数的含义分别为：arg0 :当前页面，及你点击滑动的页面。arg1:当前页面偏移的百分比。arg2:当前页面偏移的像素位置。

onPageSelected(int arg0) ，此方法是页面跳转完后得到调用，arg0是你当前选中的页面的position。

（2）重写Click事件

  private class RotateOnClickListener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            if (view != null){
                int id = view.getId();
                if (id == R.id.point_left){
                    if (currentImg <= 0) {
                        CoverActivity.this.finish();

                    }
                    imgPager.setCurrentItem(--currentImg);
                }else if (id == R.id.point_right){
                    if (currentImg >= (len-1)) {
                        Toast.makeText(context,"没有下一张啦",Toast.LENGTH_SHORT).show();
                    }else{
                    imgPager.setCurrentItem(++currentImg);}
                }
            }
        }
    }