使用Fresco实现大图浏览（支持手势放大、拖拽）

一、Fresco简介

Fresco是facebook出品的一款图片加载框架，使用了Fresco之后，不需要再考虑图片的加载和内存占用的问题，堪称图片加载的神器。Fresco将图片存储到一个特殊的区域，避免了OOM。

Fresco：https://github.com/facebook/fresco

二、使用Fresco实现大图浏览

先上效果图：

1、需求

• 点击图片出现大图浏览的界面
• 背景要全黑
• 没有状态栏
• 支持手势放大及拖拽
• 点击关闭大图浏览

2、功能实现

（1）、引入Fresco和PhotoDraweeView

要实现手势放大和拖拽，还需要引入PhotoDraweeView

PhotoDraweeView：https://github.com/ongakuer/PhotoDraweeView

在项目中添加依赖

compile 'com.facebook.fresco:fresco:1.2.0'compile 'me.relex:photodraweeview:1.1.2'

（2）、初始化Fresco

创建MyApp，继承自Application，在onCreate()方法中初始化Fresco

public class MyApp extends Application {    @Override    public void onCreate() {        super.onCreate();        Fresco.initialize(this);    }}

在清单文件中指定Application类，

<application    android:name=".MyApp"    android:allowBackup="true"    android:icon="@mipmap/ic_launcher"    android:label="@string/app_name"    android:roundIcon="@mipmap/ic_launcher_round"    android:supportsRtl="true"    android:theme="@style/AppTheme">    <activity android:name=".MainActivity">        <intent-filter>            <action android:name="android.intent.action.MAIN"/>            <category android:name="android.intent.category.LAUNCHER"/>        </intent-filter>    </activity></application>

（3）、添加SimpleDraweeView控件

在主页面添加SimpleDraweeView控件，设置下载链接，然后设置点击事件，跳转到图片浏览页面

添加SimpleDraweeView控件

<com.facebook.drawee.view.SimpleDraweeView    android:id="@+id/sd_view"    android:clickable="true"    android:layout_centerInParent="true"    android:layout_width="match_parent"    android:layout_height="match_parent"/>

设置下载链接并设置点击事件

public class MainActivity extends AppCompatActivity {    private SimpleDraweeView mImageView;    private String IMG_URL = "https://juemuren4449.com/uploads/mouse.jpg";    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        initData();        initEvent();    }    private void initView() {        mImageView = (SimpleDraweeView) findViewById(R.id.sd_view);    }    private void initData() {        mImageView.setImageURI(IMG_URL);    }    private void initEvent() {        mImageView.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Intent intent = new Intent(MainActivity.this, ImageViewActivity.class);                intent.putExtra("img_url", IMG_URL);                startActivity(intent);            }        });    }}

（4）、添加PhotoDraweeView控件

在大图浏览布局中添加PhotoDraweeView控件

<me.relex.photodraweeview.PhotoDraweeView    android:id="@+id/photoView"    android:layout_width="match_parent"    android:layout_height="match_parent"/>

将PipelineDraweeController设置给PhotoDraweeView，并设置点击关闭

public class ImageViewActivity extends Activity {    private PhotoDraweeView mPhotoDraweeView;    private String img_url;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_image_view);        initView();        initData();        initEvent();    }    private void initView() {        mPhotoDraweeView = (PhotoDraweeView) findViewById(R.id.photoView);    }    private void initData() {        img_url = getIntent().getStringExtra("img_url");        if (!TextUtils.isEmpty(img_url)) {            PipelineDraweeControllerBuilder controller = Fresco.newDraweeControllerBuilder();            controller.setUri(img_url);//设置图片url            controller.setOldController(mPhotoDraweeView.getController());            controller.setControllerListener(new BaseControllerListener<ImageInfo>() {                @Override                public void onFinalImageSet(String id, ImageInfo imageInfo, Animatable animatable) {                    super.onFinalImageSet(id, imageInfo, animatable);                    if (imageInfo == null || mPhotoDraweeView == null) {                        return;                    }                    mPhotoDraweeView.update(imageInfo.getWidth(), imageInfo.getHeight());                }            });            mPhotoDraweeView.setController(controller.build());        } else {            Toast.makeText(this, "图片获取失败", Toast.LENGTH_SHORT).show();        }    }    private void initEvent() {        //添加点击事件        mPhotoDraweeView.setOnPhotoTapListener(new OnPhotoTapListener() {            @Override            public void onPhotoTap(View view, float x, float y) {                finish();            }        });    }}

（5）、设置大图浏览Activity的主题

在清单文件中设置ImageViewActivity的主题为全屏

<activity    android:name=".ImageViewActivity"    android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"></activity>

至此，我们就使用Fresco实现了大图浏览的功能

注意：如果使用上面的方法，那么ImageViewActivity要继承自Activity，当然也可以通过其他方式实现全屏，例如自定义主题样式。

代码已上传至Github：https://github.com/juemuren4449/FrescoBigpicBrowsing

欢迎访问我的博客：https://juemuren4449.com/