androidで、scaleGestureおよびviewFlipper実装した際、画像が画面に収まらない（はみ出し）

androidStudioでクイズアプリを作成しています。
クイズに複数の画像を添付したいと思い、viewFlipperを使用しました。
また、それぞれの画像について拡大縮小機能を実装したいため、scaleGestureを実装しました。
しかし、AVDと実機でも試しましたが画像が画面からはみ出して表示されてしまいます。
xmlで色々試しましたが、画像がImageViewクラスでないせいか画像のサイズを画面に合わせることができなくて3週間困っています。

実現したいのは、viewFlipperとscaleGestureを実装しながら、画面が表示された際に、画像が画面をはみ出さない（画面に収まっている）形です。
よろしくお願いいたします。

※MondaiActivityクラスでview1_1.setScaleType(ScaleGesture.ScaleType.FIT_XY)を試しましたが、縦横比が崩れるうえ、拡大縮小機能が効かなくなったため断念しました。
※xmlでScaleTypeを試しましたがまったく効きませんでした。
※画像の大きさを一律に縮小することが望ましくないです。（各画像の大きさが一律でないため）

JAVA
1//csvから問題文や画像をsetするクラスです。
2public class MondaiActivity extends AppCompatActivity implements View.OnClickListener {
3
4//問題の画像をセット
5    @SuppressLint("ResourceType")
6    public void setDrawable() {
7        //レイアウトの初期化
8        LinearLayout questionLayout = (LinearLayout) findViewById(R.id.question_image);//画面レイアウトID取得
9        TextView questionText = findViewById(R.id.question);//問題文ID取得
10        questionText.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);//問題文のheightを元に戻す
11        ViewGroup.LayoutParams layoutParams = questionLayout.getLayoutParams();
12        layoutParams.height = 300;
13        //画像数に合わせてレイアウト取得
14        switch (data.get(count).getImageLength()) {
15            case 0: //画像が0枚の場合
16                //画像の高さを0にして問題テキストを中心にもってくる
17                layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT;
18                questionText.setHeight(400);
19                break;
20            case 1: //画像の1枚の場合
21                getLayoutInflater().inflate(R.layout.image_one, questionLayout);
22                ScaleGesture view1_1 = findViewById(R.id.view1_1);
23
24                for (int i = 1; i < 2; i++) {
25                    String fileName = "question" + (count + 1) + "_" + i;
26                    int imgId = getResources().getIdentifier(fileName, "drawable", getPackageName());
27                    if (imgId != 0) {
28                        switch (i) {
29                            case 1:
30                                view1_1.setImageResource(imgId);
31                                break;
32                        }
33                    }
34                }
35        }
36   }
37

JAVA
1//ScaleGestureクラスです。
2public class ScaleGesture extends androidx.appcompat.widget.AppCompatImageView {
3    private static final String TAG = "MyImageView";
4    // 画像処理
5    private Matrix baseMatrix = new Matrix(); // タッチダウン時の画像保存用
6    private Matrix imgMatrix = new Matrix(); //　画像変換用
7
8    //画像のピンチイン、ピンチアウト
9    public final SimpleOnScaleGestureListener onScaleGestureListener = new SimpleOnScaleGestureListener() {
10        @Override
11        public boolean onScale(ScaleGestureDetector detector) {
12            // TODO Auto-generated method stub
13            Log.v(TAG, "onScale");
14            imgMatrix.set(baseMatrix);
15            imgMatrix.postScale(detector.getScaleFactor(), detector.getScaleFactor(),
16                    detector.getFocusX(), detector.getFocusY());
17            setImageMatrix(imgMatrix);
18            return super.onScale(detector);
19        }
20
21        @Override
22        public boolean onScaleBegin(ScaleGestureDetector detector) {
23            // TODO Auto-generated method stub
24            Log.v(TAG, "onScaleBegin");
25            baseMatrix.set(imgMatrix);
26            return super.onScaleBegin(detector);
27        }
28
29        @Override
30        public void onScaleEnd(ScaleGestureDetector detector) {
31            // TODO Auto-generated method stub
32            Log.v(TAG, "onScaleEnd");
33            super.onScaleEnd(detector);
34        }
35    };
36    private ScaleGestureDetector gesDetect = null;
37
38    public ScaleGesture(Context context, AttributeSet attrs) {
39        super(context, attrs);
40        // TODO Auto-generated constructor stub
41        setScaleType(ImageView.ScaleType.MATRIX);
42        gesDetect = new ScaleGestureDetector(context, onScaleGestureListener);
43    }
44
45    @SuppressLint("ClickableViewAccessibility")
46    @Override
47    public boolean onTouchEvent(MotionEvent event) {
48        // TODO Auto-generated method stub
49        gesDetect.onTouchEvent(event);
50        // マルチタッチ処理中か
51        return gesDetect.isInProgress();
52    }
53
54    public void setImgMatrix(int imgMatrix) {
55        this.imgMatrix = baseMatrix;
56    }
57}
58

xml
1<!--問題を表示する画面のxmlです。-->
2<?xml version="1.0" encoding="utf-8"?>
3<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:id="@+id/mondaiView"
6    android:layout_width="match_parent"
7    android:layout_height="match_parent"
8    tools:context=".MondaiActivity">
9
10    <LinearLayout
11        android:layout_width="match_parent"
12        android:layout_height="match_parent"
13        android:orientation="vertical">
14
15        <LinearLayout
16            android:layout_width="match_parent"
17            android:layout_height="wrap_content"
18            android:orientation="horizontal">
19
20            <!--top画面に戻るボタン-->
21            <Button
22                android:id="@+id/button_top"
23                android:layout_width="wrap_content"
24                android:layout_height="wrap_content"
25                android:onClick="onClickTop"
26                android:text="@string/button_top"
27                tools:ignore="MissingConstraints"
28                tools:layout_editor_absoluteX="7dp"
29                tools:layout_editor_absoluteY="3dp" />
30
31            <!--現在の問題No.-->
32            <TextView
33                android:id="@+id/question_target"
34                android:layout_width="match_parent"
35                android:layout_height="wrap_content"
36                android:gravity="end"
37                android:text="@string/question_target"
38                android:textSize="16sp"
39                android:textStyle="bold" />
40        </LinearLayout>
41
42        <!--問題文-->
43        <TextView
44            android:id="@+id/question"
45            android:layout_width="match_parent"
46            android:layout_height="0dp"
47            android:layout_margin="5dp"
48            android:layout_weight="30"
49            android:gravity="center_vertical"
50            android:singleLine="false"
51            android:textSize="16sp" />
52
53        <!--画像-->
54        <LinearLayout
55            android:id="@+id/question_image"
56            android:layout_width="match_parent"
57            android:layout_height="wrap_content"
58            android:orientation="vertical" />
59
60        <ViewFlipper
61            android:id="@+id/flipper"
62            android:layout_width="match_parent"
63            android:layout_height="wrap_content"
64            android:layout_gravity="center_vertical" />
65
66    <Button
67        android:id="@+id/button_answer1"
68        android:layout_width="match_parent"
69        android:layout_height="wrap_content" />
70
71    <Button
72        android:id="@+id/button_answer2"
73        android:layout_width="match_parent"
74        android:layout_height="wrap_content" />
75
76    <Button
77        android:id="@+id/button_answer3"
78        android:layout_width="match_parent"
79        android:layout_height="wrap_content" />
80
81    <Button
82        android:id="@+id/button_answer4"
83        android:layout_width="match_parent"
84        android:layout_height="wrap_content" />
85
86
87</LinearLayout>
88
89    </androidx.constraintlayout.widget.ConstraintLayout>
90

xml
1<!--画像を差し込むxmlです-->
2<?xml version="1.0" encoding="utf-8"?>
3<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:app="http://schemas.android.com/apk/res-auto"
5    android:id="@+id/one"
6    android:layout_width="match_parent"
7    android:layout_height="match_parent"
8    android:layout_gravity="center_horizontal"
9    android:orientation="vertical">
10
11    <ViewFlipper
12        android:id="@+id/flipper"
13        android:layout_width="match_parent"
14        android:layout_height="match_parent"
15        >
16
17<!--ScaleGestureクラスで画像をsetしています-->
18        <io.github.ohshiro.quizapp.ScaleGesture
19            android:id="@+id/view1_1"
20            android:layout_width="match_parent"
21            android:layout_height="match_parent"
22            android:src="@drawable/question1_1"
23            />
24    </ViewFlipper>
25
26</LinearLayout>

hoshi-takanori

2021/08/27 22:22

とりあえず画像をぴったりに表示したいなら view1_1.setScaleType(ScaleGesture.ScaleType.CENTER_INSIDE); (XML なら android:scaleType="centerInside") でできると思いますが、いまいち何がしたいかわからないというか、まず 2 つの画像を同時に表示したいのか、それとも切り替えて表示したいのか、切り替える方法はどうするかなどを考える必要があるかと。拡大縮小はその後でしょう。また、レイアウトの作り方は ConstraintLayout をもっと活用したほうが良いのでは…。

ohshiro_hide

2021/08/28 04:21

回答いただきありがとうございます。 activity側でscaleTypeを記述すると画像の大きさ自体はいい感じに変わるのですが、画像の大きさが固定されていしまい拡大縮小機能が消えてしまいました。画像切り替えの件ですが、複数枚（2枚～4枚）の画像があった場合、viewFlipperを使いフリックで画面を切り替え（1枚ごと画像を表示）、画像の大きさは拡大縮小できるようにしたいと思っています。現状、フリック操作や拡大縮小はできますが、表示された画像（初期状態の画像）が画面いっぱいに広がっていない状態です。（横長の画像であれば見切れている、小さい画像が小さいまま） constraintLayoutは手をつけていませんでした。一度試してみます。