基於Fresco的大圖瀏覽

上個星期是個忙碌的一週，全周都在趕進度，多是過年過的太舒暢了吧。如今終於有空來坐下來，安安靜靜的思考下這忙碌後的收穫。在此也回顧一下，作個分享！

今天的內容是關於大圖瀏覽的實現，可能各類實現方法都不少，但我這裏要說的是基於Fresco來實現。（其實主要是項目中用的就是Fresco）

Fresco

可能還有人不瞭解Fresco，這裏我來簡單的介紹一下。

Fresco是facebook推出的開源項目，該項目主要用來解決Android圖片加載的，它是一個強大的圖片加載組件，使用它以後，你不須要再去關心圖片的加載和顯示的繁雜事件。對於專一於圖片App強烈推薦使用它。

Feature

下面是它的一些突出特性

• 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'

若是隻要實現普通圖片的加載，那麼只要導入第一個就能夠了。好了如今你就可牛逼哄哄的使用這麼高大上的組件來加載圖片，至於使用步驟，隨便看下相關教程就能輕鬆搞定，例如前面所說的圓形圖片。想當初我仍是苦逼是找相關的庫來實現的...

SimpleDraweeView

上面只是針對於普通的圖片展現，但不是今天的主題。下面是一段基本的使用代碼

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);
    }

相信上面的註釋已經很是明顯了

ZoomableView

咱們都知道如今只要是個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<String> 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<String> 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...

關注