トップに関する質問 android studio: ImageViewで画像をぼやけさせずに拡大する方法

編集履歴

質問編集履歴

流れを整理した

2019/01/18 15:06

投稿

REIK727

スコア23

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -26,14 +26,22 @@
+import android.graphics.Bitmap
+import android.graphics.BitmapFactory
 import android.support.v7.app.AppCompatActivity
 import android.os.Bundle
+import android.os.Environment
 import android.widget.ImageView
 import com.bumptech.glide.Glide
+import kotlin.math.min
 class MainActivity : AppCompatActivity() {
@@ -46,24 +54,42 @@
         setContentView(R.layout.activity_main)
+        val view = findViewById<ImageView>(R.id.imageView)
-        //(1)pngの場合
+        //pngの場合
+        view.setImageBitmap(
+            BitmapFactory.decodeFile(
-        findViewById<ImageView>(R.id.imageView).setImageResource(R.drawable.pikachu_static)
+                Environment.getExternalStorageDirectory().path + "/MyApp/pikachu_static.png"
+            )
+        )
-        //(2)gifの場合
+        //gifの場合
+        Glide
+            .with(this)
+            .load(
-        //Glide.with(this).load(R.drawable.pikachu_dynamic).into(findViewById(R.id.imageView))
+                Environment.getExternalStorageDirectory().path + "/MyApp/pikachu_dynamic.gif"
+            )
+            .into(view)
     }
 }
 ```
 activity_main
@@ -86,11 +112,15 @@
         tools:context=".MainActivity">
     <ImageView
             android:layout_width="0dp"
+            android:layout_height="0dp"
-            android:layout_height="0dp" tools:srcCompat="@tools:sample/avatars"
+            tools:srcCompat="@tools:sample/avatars"
             android:id="@+id/imageView"
@@ -100,9 +130,13 @@
             app:layout_constraintTop_toTopOf="parent"
-            app:layout_constraintBottom_toBottomOf="parent" android:layout_marginTop="24dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            android:layout_marginTop="24dp"
-            android:layout_marginStart="24dp" android:layout_marginEnd="24dp"
+            android:layout_marginStart="24dp"
+            android:layout_marginEnd="24dp"
             android:layout_marginBottom="24dp"/>
@@ -112,51 +146,129 @@
 ### 試したこと
-(1)Vector Drawableにする
+1. Vector Drawableにする
 →ベクタ画像にしたことでぼやけは完全になくなったが、gifには使えない。
-(2)あらかじめ縦横の画素数を何倍かに増やしておく
+2. あらかじめ縦横の画素数を何倍かに増やしておく
 →ファイルサイズが大きくなるうえ、何倍に拡大すれば目立たなくなる程度のぼやけになるのかも決定できない。あまりスマートでないのでやりたくない。
-~~(3)ImageViewをwrap_contentにした上で、Bitmap.createScaledBitmap()を使って動的に拡大したものを表示する
+3. Bitmap.createScaledBitmap()を使って動的に拡大したものを表示する
-→filterをfalseにすることでぼやけをなくせる。しかしこの方法はGlideを使ってgifを表示するときは使えない。~~
+→静止画はきれいに表示できる。しかしGlideを使ってgifを表示するときは使えない。
-~~追記: 今やってみたらなぜか再現できませんでした...
-とりあえず今は無視してください。~~
+Main Activity
-さらに追記: 再現できました。リソースから読み取ったBitmapの幅と高さが正しく読み取れていなかったのが原因でした。
 ```kotin
+package com.example.myapplication
+import android.graphics.Bitmap
+import android.graphics.BitmapFactory
+import android.os.Bundle
+import android.os.Environment
+import android.support.v7.app.AppCompatActivity
+import android.view.ViewTreeObserver
+import android.widget.ImageView
+import kotlin.math.min
+class MainActivity : AppCompatActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
-val opt = BitmapFactory.Options()
+        setContentView(R.layout.activity_main)
-opt.inScaled = false //こうすることで正しく画素数を読み取れる
-val pikachu = BitmapFactory.decodeResource(resources, R.drawable.pikachu_static, opt)
-findViewById<ImageView>(R.id.imageView).setImageBitmap(
+        val view = findViewById<ImageView>(R.id.imageView)
+        view.viewTreeObserver.addOnGlobalLayoutListener(
+            object : ViewTreeObserver.OnGlobalLayoutListener {
+                override fun onGlobalLayout() {
+                    //getResizedBitmap()はviewの幅と高さが決定してからでないと使えないためここで画像をセットする
-    //10倍に拡大する
+                    view.setImageBitmap(
+                        getResizedBitmap(
+                            BitmapFactory.decodeFile(
-    Bitmap.createScaledBitmap(pikachu, pikachu.width * 10, pikachu.height * 10, false)
+                                Environment.getExternalStorageDirectory().path + "/MyApp/pikachu_static.png"
+                            ),
+                            view
-)
+                        )
+                    )
+                    //幅と高さだけ取得できれば用済みなのでリスナを削除
+                    view.viewTreeObserver.removeOnGlobalLayoutListener(this)
+                }
+            }
+        )
+    }
+    //originalをviewに入る最大の大きさに拡大する。このときcreateScaledBitmap()のfilterにfalseを指定するとぼやけないっぽい。
+    fun getResizedBitmap(original: Bitmap, view: ImageView): Bitmap {
+        val magnification = min(view.width / original.width, view.height / original.height)
+        return Bitmap.createScaledBitmap(
+            original, original.width * magnification, original.height * magnification, false
+        )
+    }
+}
-```
+```
+activity_main
+```
+さっきと一緒
+```
-![イメージ説明](4920370c67043a3b99d0d25df2d5fadc.png)
+![イメージ説明](678a3f2f7895ca2bb884c7d27b39b661.png)
-しかし結局gifには使えません。

やや修正

2019/01/18 15:06

投稿

REIK727

スコア23

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -134,7 +134,7 @@
 とりあえず今は無視してください。~~
-さらに追記: 解決しました。リソースから読み取ったBitmapの幅と高さが正しく読み取れていなかったのが原因でした。
+さらに追記: 再現できました。リソースから読み取ったBitmapの幅と高さが正しく読み取れていなかったのが原因でした。
 ```kotin

やや追記

2019/01/16 14:20

投稿

REIK727

スコア23

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -156,6 +156,8 @@
 ![イメージ説明](4920370c67043a3b99d0d25df2d5fadc.png)
+しかし結局gifには使えません。
 ### 補足情報（FW/ツールのバージョンなど）

返事ができない旨を消去

2019/01/16 12:27

投稿

REIK727

スコア23

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,7 +1,3 @@
-**※私用で20:00ごろまで返事はできません。ご了承ください。**
 ### 前提・実現したいこと

2019/01/16 11:09

投稿

REIK727

スコア23

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -118,7 +118,7 @@
-(1)XMLにする
+(1)Vector Drawableにする
 →ベクタ画像にしたことでぼやけは完全になくなったが、gifには使えない。

返事ができない旨を追記

2019/01/16 07:20

投稿

REIK727

スコア23

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,3 +1,7 @@
+**※私用で20:00ごろまで返事はできません。ご了承ください。**
 ### 前提・実現したいこと

「試したこと」にさらに追記

2019/01/16 07:07

投稿

REIK727

スコア23

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -130,9 +130,31 @@
 →filterをfalseにすることでぼやけをなくせる。しかしこの方法はGlideを使ってgifを表示するときは使えない。~~
-今やってみたらなぜか再現できませんでした...
+~~追記: 今やってみたらなぜか再現できませんでした...
-とりあえず今は無視してください。
+とりあえず今は無視してください。~~
+さらに追記: 解決しました。リソースから読み取ったBitmapの幅と高さが正しく読み取れていなかったのが原因でした。
+```kotin
+val opt = BitmapFactory.Options()
+opt.inScaled = false //こうすることで正しく画素数を読み取れる
+val pikachu = BitmapFactory.decodeResource(resources, R.drawable.pikachu_static, opt)
+findViewById<ImageView>(R.id.imageView).setImageBitmap(
+    //10倍に拡大する
+    Bitmap.createScaledBitmap(pikachu, pikachu.width * 10, pikachu.height * 10, false)
+)
+```
+![イメージ説明](4920370c67043a3b99d0d25df2d5fadc.png)

「試したこと」に追記

2019/01/16 06:36

投稿

REIK727

スコア23

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -126,9 +126,13 @@
-(3)ImageViewをwrap_contentにした上で、Bitmap.createScaledBitmap()を使って動的に拡大したものを表示する
+~~(3)ImageViewをwrap_contentにした上で、Bitmap.createScaledBitmap()を使って動的に拡大したものを表示する
-→filterをfalseにすることでぼやけをなくせる。しかしこの方法はGlideを使ってgifを表示するときは使えない。
+→filterをfalseにすることでぼやけをなくせる。しかしこの方法はGlideを使ってgifを表示するときは使えない。~~
+今やってみたらなぜか再現できませんでした...
+とりあえず今は無視してください。