基于Fresco的大图浏览

摘要：在此也回顾一下，做个分享今天的内容是关于大图浏览的实现，可能各种实现方法都很多，但我这里要说的是基于来实现。传送门大图浏览添加依赖既然是基于在实现之前自然要导入的相关依赖包。对于大图浏览需要支持缩放拖拽双击放大。

上个星期是个忙碌的一周，全周都在赶进度，可能是过年过的太舒畅了吧。现在终于有空来坐下来，安安静静的思考下这忙碌后的收获。在此也回顾一下，做个分享！

今天的内容是关于大图浏览的实现，可能各种实现方法都很多，但我这里要说的是基于Fresco来实现。（其实主要是项目中用的就是Fresco）

可能还有人不了解Fresco，这里我来简单的介绍一下。

Fresco是facebook推出的开源项目，该项目主要用来解决Android图片加载的，它是一个强大的图片加载组件，使用它之后，你不需要再去关心图片的加载和显示的繁琐事件。对于专注于图片App强烈推荐使用它。

下面是它的一些突出特性

Fresco中的Image Pipeline负责从网络、本地文件系统、本地资源加载图片，最大的节省空间与CPU时间，同时含有3级缓存（2级内存，1级磁盘），支持缩略图与清晰度的转换等

Fresco的Drawees，负责图片加载完成前的占位图与图片不可见时的释放，同时还支持圆形图片的实现

Fresco支持渐进式图片展示，Android本身是不支持的。

Fresco完美支持Gif与WebP动图，轻松解决每一帧都是很大的Bitmap烦恼。

传送门: Fresco

既然是基于Fresco,在实现之前自然要导入Fresco的相关依赖包。

compile "com.facebook.fresco:fresco:1.0.0"
compile "com.facebook.fresco:animated-gif:1.0.0"
compile "com.facebook.fresco:animated-webp:1.0.0"
compile "com.facebook.fresco:webpsupport:1.0.0"

如果只要实现普通图片的加载，那么只要导入第一个就可以了。好了现在你就可牛逼哄哄的使用这么高大上的组件来加载图片，至于使用步骤，随便看下相关教程就能轻松搞定，例如前面所说的圆形图片。想当初我还是苦逼是找相关的库来实现的...

上面只是针对于普通的图片展示，但不是今天的主题。下面是一段基本的使用代码

private void displayImage(SimpleDraweeView draweeView, String url) {
        GenericDraweeHierarchy hierarchy = draweeView.getHierarchy();
        //设置占位图
        if (hierarchy == null) {
            hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
                    .setPlaceholderImage(getResources().getDrawable(R.mipmap.ic_launcher)
                            , ScalingUtils.ScaleType.CENTER).build();
            draweeView.setHierarchy(hierarchy);
        } else {
            hierarchy.setPlaceholderImage(getResources().getDrawable(R.mipmap.ic_launcher)
                    , ScalingUtils.ScaleType.CENTER);
        }
 
        //构建ImageRequestBuilder，传入请求Uri
        ImageRequestBuilder requestBuilder = ImageRequestBuilder.newBuilderWithSource(Uri.parse(url));
        //构建Controller
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setOldController(draweeView.getController())
                .setImageRequest(requestBuilder.build())
                .build();
        //设置图片，Fresco设置显示图片都是通过Controller来实现
        draweeView.setController(controller);
    }

相信上面的注释已经非常明显了

我们都知道现在只要是个App且里面有图片的展示，那么基本上就有图片浏览这一个功能。对于大图浏览需要支持缩放、拖拽、双击放大。Fresco原生的SimpleDraweeView是不支持这些功能的，所以我们这里要使用另外一个控件ZoomableView。当然它也是Fresco官方提供的，我们现在要做的就是接入到我们的项目中。前面的传送门中可以找到ZoomableView。但毕竟是Fresco项目的集合体，本片文章的末尾我会提供我已经提取好的相关代码。

我们创建一个界面ZoomableActivity,至于布局大图浏览自然少不了ViewPager,这里就不多介绍ViewPager了,直接上ZoomableActivity代码

public class ZoomableActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
    private static final String EXTRA_ZOOMABLE_PATHS = "extra_zoomable_paths";
    private static final String EXTRA_ZOOMABLE_INDEX = "extra_zoomable_index";
 
    private ViewPager mViewPager;
    private TextView mZoomableIndex;
    private ArrayList mPaths;
    private int mIndex;
 
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.zoommable_activity);
        getExtraData();
        initView();
        setupViewPager();
    }
 
    private void getExtraData() {
        mPaths = getIntent().getStringArrayListExtra(EXTRA_ZOOMABLE_PATHS);
        mIndex = getIntent().getIntExtra(EXTRA_ZOOMABLE_INDEX, 0);
    }
 
    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mZoomableIndex = (TextView) findViewById(R.id.zoomable_index);
    }
 
    private void setupViewPager() {
        mViewPager.setAdapter(new ZoomableViewPagerAdapter(this, mPaths));
        mViewPager.setCurrentItem(mIndex);
        mZoomableIndex.setText(mIndex + 1 + "/" + mPaths.size());
        mViewPager.addOnPageChangeListener(this);
    }
 
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }
 
    @Override
    public void onPageSelected(int position) {
        mZoomableIndex.setText(position + 1 + "/" + mPaths.size());
    }
 
    @Override
    public void onPageScrollStateChanged(int state) {
 
    }
 
    public static void goToPage(Context context, ArrayList paths, int index) {
        Intent intent = new Intent(context, ZoomableActivity.class);
         intent.putStringArrayListExtra(EXTRA_ZOOMABLE_PATHS, paths);
        intent.putExtra(EXTRA_ZOOMABLE_INDEX, index);
        context.startActivity(intent);
    }
}

下面就是Adapter了，主要就是图片的显示，因为我这里直接是ViewPager所以使用PagerAdapter,核心代码就是它的instantiateItem方法。

@Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.zoomable_view_pager_item, null);
        ZoomableDraweeView zoomableDraweeView = (ZoomableDraweeView) view.findViewById(R.id.zoomable_image);
        //允许缩放时切换
        zoomableDraweeView.setAllowTouchInterceptionWhileZoomed(true);
        //长按
        zoomableDraweeView.setIsLongpressEnabled(false);
        //双击击放大或缩小
        zoomableDraweeView.setTapListener(new DoubleTapGestureListener(zoomableDraweeView));

        DraweeController draweeController = Fresco.newDraweeControllerBuilder()
                .setUri(mPaths.get(position))
                .build();
        //加载图片
        zoomableDraweeView.setController(draweeController);
        container.addView(view);
        view.requestLayout();
        return view;
    }

这样就实现了大图浏览的效果，是不是很简单了，我们借助ZoomableView后，只要实现交互的展示逻辑就Ok了

项目传送门：https://github.com/idisfkj/Zo...
个人blog：https://idisfkj.github.io/arc...