摘要：在此也回顧一下，做個(gè)分享今天的內(nèi)容是關(guān)于大圖瀏覽的實(shí)現(xiàn)，可能各種實(shí)現(xiàn)方法都很多，但我這里要說(shuō)的是基于來(lái)實(shí)現(xiàn)。傳送門大圖瀏覽添加依賴既然是基于在實(shí)現(xiàn)之前自然要導(dǎo)入的相關(guān)依賴包。對(duì)于大圖瀏覽需要支持縮放拖拽雙擊放大。

上個(gè)星期是個(gè)忙碌的一周，全周都在趕進(jìn)度，可能是過(guò)年過(guò)的太舒暢了吧?，F(xiàn)在終于有空來(lái)坐下來(lái)，安安靜靜的思考下這忙碌后的收獲。在此也回顧一下，做個(gè)分享！

今天的內(nèi)容是關(guān)于大圖瀏覽的實(shí)現(xiàn)，可能各種實(shí)現(xiàn)方法都很多，但我這里要說(shuō)的是基于Fresco來(lái)實(shí)現(xiàn)。（其實(shí)主要是項(xiàng)目中用的就是Fresco）

可能還有人不了解Fresco，這里我來(lái)簡(jiǎn)單的介紹一下。

Fresco是facebook推出的開源項(xiàng)目，該項(xiàng)目主要用來(lái)解決Android圖片加載的，它是一個(gè)強(qiáng)大的圖片加載組件，使用它之后，你不需要再去關(guān)心圖片的加載和顯示的繁瑣事件。對(duì)于專注于圖片App強(qiáng)烈推薦使用它。

下面是它的一些突出特性

Fresco中的Image Pipeline負(fù)責(zé)從網(wǎng)絡(luò)、本地文件系統(tǒng)、本地資源加載圖片，最大的節(jié)省空間與CPU時(shí)間，同時(shí)含有3級(jí)緩存（2級(jí)內(nèi)存，1級(jí)磁盤），支持縮略圖與清晰度的轉(zhuǎn)換等

Fresco的Drawees，負(fù)責(zé)圖片加載完成前的占位圖與圖片不可見(jiàn)時(shí)的釋放，同時(shí)還支持圓形圖片的實(shí)現(xiàn)

Fresco支持漸進(jìn)式圖片展示，Android本身是不支持的。

Fresco完美支持Gif與WebP動(dòng)圖，輕松解決每一幀都是很大的Bitmap煩惱。

傳送門: Fresco

既然是基于Fresco,在實(shí)現(xiàn)之前自然要導(dǎo)入Fresco的相關(guān)依賴包。

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"

如果只要實(shí)現(xiàn)普通圖片的加載，那么只要導(dǎo)入第一個(gè)就可以了。好了現(xiàn)在你就可牛逼哄哄的使用這么高大上的組件來(lái)加載圖片，至于使用步驟，隨便看下相關(guān)教程就能輕松搞定，例如前面所說(shuō)的圓形圖片。想當(dāng)初我還是苦逼是找相關(guān)的庫(kù)來(lái)實(shí)現(xiàn)的...

上面只是針對(duì)于普通的圖片展示，但不是今天的主題。下面是一段基本的使用代碼

private void displayImage(SimpleDraweeView draweeView, String url) {
        GenericDraweeHierarchy hierarchy = draweeView.getHierarchy();
        //設(shè)置占位圖
        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);
        }
 
        //構(gòu)建ImageRequestBuilder，傳入請(qǐng)求Uri
        ImageRequestBuilder requestBuilder = ImageRequestBuilder.newBuilderWithSource(Uri.parse(url));
        //構(gòu)建Controller
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setOldController(draweeView.getController())
                .setImageRequest(requestBuilder.build())
                .build();
        //設(shè)置圖片，F(xiàn)resco設(shè)置顯示圖片都是通過(guò)Controller來(lái)實(shí)現(xiàn)
        draweeView.setController(controller);
    }

相信上面的注釋已經(jīng)非常明顯了

我們都知道現(xiàn)在只要是個(gè)App且里面有圖片的展示，那么基本上就有圖片瀏覽這一個(gè)功能。對(duì)于大圖瀏覽需要支持縮放、拖拽、雙擊放大。Fresco原生的SimpleDraweeView是不支持這些功能的，所以我們這里要使用另外一個(gè)控件ZoomableView。當(dāng)然它也是Fresco官方提供的，我們現(xiàn)在要做的就是接入到我們的項(xiàng)目中。前面的傳送門中可以找到ZoomableView。但畢竟是Fresco項(xiàng)目的集合體，本片文章的末尾我會(huì)提供我已經(jīng)提取好的相關(guān)代碼。

我們創(chuàng)建一個(gè)界面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了，主要就是圖片的顯示，因?yàn)槲疫@里直接是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);
        //允許縮放時(shí)切換
        zoomableDraweeView.setAllowTouchInterceptionWhileZoomed(true);
        //長(zhǎng)按
        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;
    }

這樣就實(shí)現(xiàn)了大圖瀏覽的效果，是不是很簡(jiǎn)單了，我們借助ZoomableView后，只要實(shí)現(xiàn)交互的展示邏輯就Ok了

項(xiàng)目傳送門：https://github.com/idisfkj/Zo...
個(gè)人blog：https://idisfkj.github.io/arc...