おすすめ!プログラミング学習サービス5選!詳しくはこちら

2023Androidアプリ入門:IamgeView(Bumblebee)

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

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

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

分からない

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

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

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

焼き芋

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

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

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

  • iamgeView
  • Button

\ ぼたんだよ /

目次

完成アプリ

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

以下の画面の通りです。

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

アプリの仕様について

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

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

開発環境

android studio バージョン Bumblebee

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

OSWindows10
メモリ8GB
android studioAndroid Studio Bumblebee (2021.1.1)
JDK1.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);
    }
}

まとめ「Androidアプリの基礎」

今回の記事では「アンドロイド(Android)アプリの基礎」について解説しました。

この記事のポイント!

以下の基本的な使い方

  • iamgeView
  • Button

「アンドロイド(Android)アプリの基礎」
のイメージは分かったのではないでしょうか?

焼き芋

公式のandroidアプリ開発ユーザーガイドはコチラから参照できます!
開発時のご参考にどうぞ


以上、最後まで読んで頂きありがとうございました!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次