2023Androidアプリ入門:IamgeView（Bumblebee）

2023 2/01

2022-04-15 2023-02-01

こんにちは！　文系SEの焼き芋です！

アンドロイドアプリ開発で

画像ファイルの表示方法が

分からない

という悩みを抱えていませんか？

そこで、今回は「簡単なアプリ」を作って基本的な使い方をご紹介します。

この記事で解決できるお悩み

やきいも

この記事はこんな人におすすめです！
Androidアプリ開発をこれから始める方

この記事で解決できる悩み

以下の基本的な使い方が分かります。

iamgeView
Button

完成アプリ

作成するアプリの完成イメージは

以下の画面の通りです。

プロフィール画像表示をクリックすると、焼き芋さんが表示されます！

アプリの仕様について

デモアプリの仕様は以下の通りです。

初期画面で「ブログタイトル」画像を表示
「プロフィール画像表示」クリック
「プロフィール画像」が表示される

開発環境

今回の開発環境は以下の通りです。

OS	Windows10
メモリ	8GB
android studio	Android Studio Bumblebee (2021.1.1)
JDK	1.8.0_172
プログラミング言語	Java

開発環境

プログラミングの手順

以下の手順で実装していきます。

STEP

画像ファイルを格納

STEP

画面レイアウトの実装（activity_main.xml）

STEP

プログラム処理の実装（MainActivity.java)

画像ファイルを格納

画像ファイルを「res>drawable」の下に格納します。
今回の例では以下のファイルを格納しました。
「blog.png」
「profile.png」

画面レイアウトの実装（activity_main.xml）

「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">
    <ImageView
        android:id="@+id/imageBlogId"
        android:layout_width="410dp"
        android:layout_height="241dp"
        android:layout_marginTop="66dp"
        android:layout_marginBottom="100dp"
        app:layout_constraintBottom_toTopOf="@+id/buttonPrfId"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/blog" />
    <Button
        android:id="@+id/buttonPrfId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="129dp"
        android:layout_marginTop="29dp"
        android:layout_marginEnd="128dp"
        android:layout_marginBottom="205dp"
        android:onClick="profileButtonFunction"
        android:text="プロフィール画像表示"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageBlogId" />
</androidx.constraintlayout.widget.ConstraintLayout>

プログラム処理の実装（MainActivity.java)

「MainActivity.java」のプログラムソースコードは以下の通りです。

プログラムを見る！

package com.demoappchangeimage;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
    public void profileButtonFunction(View view){
        ImageView image = (ImageView) findViewById(R.id.imageBlogId);
        image.setImageResource(R.drawable.profile);
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}