Android: Photo Viewer

since: 2016/08/11
update: 2016/08/16
reference:
1. Android Studio Tutorial - Zooming ImageView 
2. chrisbanes/PhotoView
3. JitPack | Publish JVM and Android libraries

A. Create a Project
    1. 設定好專案相關資料後 > Next

    2. Minimum SDK 選擇 API 18: Android 4.3 (Jelly Bean)
        > Next

3. 選擇 Empty Activity > Next

4. Customize the Activity: 使用預設即可 > Finish

5. Copy & Paste image files to drawable folder:

-----------------------------------------------------------------------------------------------

B. 調整 Gradle Scripts 設定:
    1. 點選: Gradle Scripts > build.gradle (Project: xxxxxx)

       修改如下:
....
allprojects {
    repositories {
        jcenter()

        //@PhotoViewer ------
        maven { url "https://jitpack.io" }
    }
}
....

    2. 點選: Gradle Scripts > build.gradle (Modual: app)

       修改如下:

....
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:24.1.1'

    //@PhotoViewer: Add Library ------
    // go to https://github.com/chrisbanes/PhotoView to check the newest version
    compile 'com.github.chrisbanes:PhotoView:1.3.0'
}
....

    3. 按下右上方的 "Sync Now":

-----------------------------------------------------------------------------------------------

C. Design the Interface:
    1. 點選 activity_main.xml 檔案, 刪除 RelativeLayout 以外的元件:
        > 加入 ImageButton 元件
        > 將其 layout_width 與 layout_height 皆設為: match_parent

    2. 記住此元件的 id: imageView, 並設定好圖檔的 src:

    3. activity_main.xml 完成如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="cat.myhome.photoviewer.MainActivity">

    <ImageButton
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imageView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/cat_1024" />
</RelativeLayout>

-----------------------------------------------------------------------------------------------

D. 開啟 MainActivity.java 檔案, 修改如下:
package cat.myhome.photoviewer;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

//@PhotoViewer ------
import android.widget.ImageView;
import uk.co.senab.photoview.PhotoViewAttacher;

public class MainActivity extends AppCompatActivity {

    //@PhotoViewer ------
    ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //@PhotoViewer ------
        imageView = (ImageView)findViewById(R.id.imageView);
        PhotoViewAttacher photoView = new PhotoViewAttacher(imageView);
        photoView.update();
    }
}

-----------------------------------------------------------------------------------------------

E. 結果:

備註: 載入太大的圖檔時, 會出現訊息:
         Bitmap too large to be uploaded into a texture exception

         最快的解決方式是取消硬體加速:
         在 application 或 activity 裡加入: android:hardwareAccelerated="false"