【Android】画像を表示するには

Android

■ はじめに

Androidで、画像を表示する方法を学ぶ。

目次

【１】使用上の注意
【２】画像を表示する
【３】背景画像を表示する
【４】Viewで画像を表示する
【５】ボタンに画像アイコンを表示する

【１】使用上の注意

 * 画像のファイル名を「小文字半角英字」「半角数字」「半角アンダーバー」にしておくこと

【２】画像を表示する

手順 

 [1] 画像を「res/drawable（下記「画像を格納するフォルダ」を参照のこと）」に入れておく
 [2] 画像を表示したい画面（例「res/layout/activity_main.xml」）を開く
 [3] デザインで、Palate の[Images and Media]-[ImageView] を選択し、表示したい場所にドラッグ&ドロップ
 [4] Resource Choserダイアログが表示されるので、手順[1]で事前に用意しておいた画像を選択し、「OK」ボタン押下

【３】背景画像を表示する

手順 

 [1] 画像を「res/drawable（下記「画像を格納するフォルダ」を参照のこと）」に入れておく
 [2] 画像を表示したい画面（例「res/layout/activity_main.xml」）を開く
 [3] エディタで、以下のサンプルのように、RelativeLayoutなどの「android:background="@drawable/【画像ID】"」を設定

サンプル

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="@drawable/sample" <!-- ★ここ★ -->
    tools:context=".MainActivity" >

【４】Viewで画像を表示する

 * 画像ファイル「bg.jpg(背景画像)」「sampleImage.png」を「res/drawable」に入れておく

サンプル

MainActivity.java 

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        View view = new SampleView(this);
        setContentView(view);
    }
}

SampleView.java 

// 画像「sampleBitmap」が、画面の真ん中に表示される
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;

public class SampleView extends View {
    private Bitmap backGround;
    private Bitmap sampleBitmap;
    Paint paint;
    public GameView(Context context) {
        super(context);

        // 画像読み込み
        Resources resources = this.getContext().getResources();
        this.backGround = BitmapFactory.decodeResource(resources, R.drawable.bg);
        this.sampleBitmap = BitmapFactory.decodeResource(resources, R.drawable.sampleImage);
        this.paint = new Paint();
    }

    @Override
    public void onDraw(Canvas canvas) {
        this.backGround = Bitmap.createScaledBitmap(this.backGround,
                canvas.getWidth(), canvas.getHeight(), true);
        canvas.drawBitmap(this.backGround, 0, 0, this.paint);

        int canvasX = canvas.getWidth() / 2;
        int canvasY = canvas.getHeight() / 2;
        int x = this.canvasX - this.sampleBitmap.getWidth() / 2;
        int y = this.canvasY - this.sampleBitmap.getHeight() / 2;
        canvas.drawBitmap(this.sampleBitmap, x, y, this.paint);
    }
}

【５】ボタンに画像アイコンを表示する

* 「drawableXxxxx」で指定
* 以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2020/08/08/000000

参考文献

http://boco.hp3200.com/game-devs/view/2.html

関連記事

画像をアニメーション表示するには
https://dk521123.hatenablog.com/entry/2015/09/20/114559
音声を再生するには
https://dk521123.hatenablog.com/entry/2020/07/18/000000
動画を再生するには
https://dk521123.hatenablog.com/entry/2013/09/30/002134
画面コンポーネント / Button
https://dk521123.hatenablog.com/entry/2020/08/08/000000