使用 Fresco 實現大圖瀏覽（支援手勢放大、拖拽）

掘墓人4449發表於2017-04-08

一、Fresco簡介

Fresco是facebook出品的一款圖片載入框架，使用了Fresco之後，不需要再考慮圖片的載入和記憶體佔用的問題，堪稱圖片載入的神器。Fresco將圖片儲存到一個特殊的區域，避免了OOM。

Fresco：github.com/facebook/fr…

二、使用Fresco實現大圖瀏覽

先上效果圖：

使用 Fresco 實現大圖瀏覽（支援手勢放大、拖拽）
效果圖

1、需求

  • 點選圖片出現大圖瀏覽的介面
  • 背景要全黑
  • 沒有狀態列
  • 支援手勢放大及拖拽
  • 點選關閉大圖瀏覽

2、功能實現

（1）、引入Fresco和PhotoDraweeView

要實現手勢放大和拖拽，還需要引入PhotoDraweeView

PhotoDraweeView：github.com/ongakuer/Ph…

在專案中新增依賴

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：github.com/juemuren444…

歡迎訪問我的部落格：juemuren4449.com/

相關文章