バックグラウンド

前回の記事¹でAndroid Studio を使ったシンプルなチャットルームアプリの開発に気付き、シンプルなコントロール TextView ²の使い方にも慣れてきたので、こちらでも Android Studio の使い方を勉強中です。この記事の目的は、画像ビュー ImageView を紹介し、ボタンをクリックすると画像をウィンドウ全体に引き伸ばす機能を実現する画像表示アプリを開発することです。

問題の説明

1 ページの画像表示ツールをデザインしたいのですが、ページレイアウトは次のとおりです。

幅 70%、高さ 100% の画像表示ウィンドウは、画像を表示するために使用されます (事前に Android Studio に画像をアップロードします)。
ボタンパネルの幅は 30%、高さは 100% です。3 行 2 列の 6 つのボタンが含まれています。各ボタンの幅と高さは同じです。各ボタンは異なるストレッチタイプに対応しています。クリックして画像を引き出します。上記のウィンドウストレッチ操作で。

Android Studio リソースに画像を追加する

Android Studio リソースに画像を追加する方法は非常に簡単です³。画像を AndroidStudioProjects フォルダーの下の現在のプロジェクトの drawable フォルダーにコピーするだけで、Android Studio インターフェイスのリソースリストで確認できます。

cp island.JPG ~/AndroidStudioProjects/ImageView/app/src/main/res/drawable/

次に、リソースリストで res/drawable ディレクトリを開くと、追加したばかりの画像が表示されます。現在、Android Studio は中国語の名前の画像をサポートしていないことに注意してください. 図に示すように、画像の名前は小文字 a ～ z、数字 0 ～ 9、およびアンダースコア (ドットを含めることはできません。そうしないと認識されません) のみを使用できます.。 .
「Android Studio 開発演習」を学ぶ (3) - 写真を表示する - Android Studio リソースに写真を追加する

画像ビュー ImageView の使用

ImageViewこれは画像表示コントロールです² 。レイアウトファイルでプロパティactivity_main.xmlを設定してsrc、表示する画像とリンクさせることができます⁴ :

<ImageView
	android:id="@+id/iv_scale"
	android:layout_width="match_parent"
	android:layout_height="400dp"
	android:src="@drawable/island" />

アプリでタイトルの表示をオフにする

生成されたアプリケーション APP で現在のプロジェクトのタイトル⁵を閉じたい場合は、プロパティをにres/values/themes/themes.xml設定できます。styleparentparent="Theme.*.NoActionBar"

画像表示ツールのレイアウトファイルの作成

activity_main.xmlコードは次のようになります。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline_3"
        app:layout_constraintGuide_percent=".33"
        android:orientation="horizontal"/>
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline_4"
        app:layout_constraintGuide_percent=".67"
        android:orientation="horizontal"/>
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline_1"
        app:layout_constraintGuide_percent=".70"
        android:orientation="vertical"/>
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline_2"
        app:layout_constraintGuide_percent=".85"
        android:orientation="vertical"/>
    <ImageView
        android:id="@+id/iv_scale"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/island"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="@+id/guideline_1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
    <Button
        android:id="@+id/button_1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="按钮1"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_1"
        app:layout_constraintRight_toRightOf="@+id/guideline_2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/guideline_3" />
    <Button
        android:id="@+id/button_2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="按钮2"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/guideline_3" />
    <Button
        android:id="@+id/button_3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="按钮3"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_1"
        app:layout_constraintRight_toRightOf="@+id/guideline_2"
        app:layout_constraintTop_toTopOf="@+id/guideline_3"
        app:layout_constraintBottom_toBottomOf="@+id/guideline_4" />
    <Button
        android:id="@+id/button_4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="按钮4"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline_3"
        app:layout_constraintBottom_toBottomOf="@+id/guideline_4" />
    <Button
        android:id="@+id/button_5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="按钮5"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_1"
        app:layout_constraintRight_toRightOf="@+id/guideline_2"
        app:layout_constraintTop_toTopOf="@+id/guideline_4"
        app:layout_constraintBottom_toBottomOf="parent" />
    <Button
        android:id="@+id/button_6"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="按钮6"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline_4"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

図に示すように、レイアウトには 4 本の補助線が使用されます。
「Android Studio 開発実戦」学習(3) ～画像表示～画像表示ツールのレイアウトファイルの書き方

図は、ツールコードファイルの準備を示しています。

MainActivity.javaコードは次のとおりです。

package com.example.helloworld;
import androidx.appcompat.app.AppCompatActivity;
import android.widget.ImageView;
import android.view.View;
import android.view.View.*;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
    
    
    private ImageView iv_scale;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv_scale = findViewById(R.id.iv_scale);
        OnClickListener clickT = new ClickTAction();
        findViewById(R.id.button_1).setOnClickListener(clickT);
        findViewById(R.id.button_2).setOnClickListener(clickT);
        findViewById(R.id.button_3).setOnClickListener(clickT);
        findViewById(R.id.button_4).setOnClickListener(clickT);
        findViewById(R.id.button_5).setOnClickListener(clickT);
        findViewById(R.id.button_6).setOnClickListener(clickT);
    }
    private class ClickTAction implements OnClickListener {
    
    
        @Override
        public void onClick(View v) {
    
    
            if (v.getId() == R.id.button_1) {
    
    
                // 保持图片原尺寸，并使其位于视图中间
                iv_scale.setScaleType(ImageView.ScaleType.CENTER);
            } else if (v.getId() == R.id.button_2) {
    
    
                // 拉伸图片使其位于视图中间
                iv_scale.setScaleType(ImageView.ScaleType.FIT_CENTER);
            } else if (v.getId() == R.id.button_3) {
    
    
                // 拉伸图片使其充满视图，并位于视图中间
                iv_scale.setScaleType(ImageView.ScaleType.CENTER_CROP);
            } else if (v.getId() == R.id.button_4) {
    
    
                // 使图片位于视图中间（只压不拉）
                iv_scale.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
            } else if (v.getId() == R.id.button_5) {
    
    
                // 拉伸图片使其正好填满视图（图片可能被拉伸变形）
                iv_scale.setScaleType(ImageView.ScaleType.FIT_XY);
            } else if (v.getId() == R.id.button_6) {
    
    
                // 拉伸图片使其位于视图上部
                iv_scale.setScaleType(ImageView.ScaleType.FIT_START);
            }
        }
    }
}

ImageView オブジェクトを作成し、onCreate メソッドでレイアウトファイルの id に関連付け、クリックリスナーを 6 つのボタンにバインドし、リスナーの onClick メソッドで各ボタンの機能を設定します。

運用実績

^{前に調べた方法6}に従ってapk ファイルを生成し、それを携帯電話に転送して実行すると、次のようになります。
「Android Studio 開発演習」を学ぶ(3) - 写真表示 - 実行結果

「Android Studio 開発実践」を学ぶ (2) - Chat Room_Xiatangren's Blog - CSDN Blog↩︎
Ouyang Shen. Android Studio Development Practice. Tsinghua University Press. 2017. ↩︎ ↩︎
sweet_Jayne. AndroidStudio に画像をインポートする方法と、Drawable に画像を配置する際のエラーレポートの解決策. CSDN ブログ ↩︎
ImageView（イメージビュー）｜新人チュートリアル ↩︎
Android Studioで作成したアプリのタイトルバーを消す方法 - Zhihu ↩︎
「Android Studio 開発の実践」を学ぶ (1) - Hello World_Xiatangren のブログ - CSDN ブログ↩︎

「Android Studio 開発実戦」学習(3) - 写真の表示