サイズ違いのイラストを並べよう

たんたむ

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。

この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。
開発バージョンの違いや、文字コード、設定等により、コピペしてもうまく機能しない時があります。
未経験者の方の参考動画としてご覧ください

Androidアプリの作り方_サイズの違うイラストの並べ方

SeekBarの利用_学習内容

この動画は「サイズの違うイラストの並べ方」を解説したものです。
ポイントさえつかむと、自由に応用することができると思います。

難易度　：★★☆☆☆ （ 未経験者にも、再現、応用が可能なレベル。（エクリプスの基本操作は必要 ））

動画で学ぶスマフォアプリ_使用素材

動画で学べるAndroidアプリ開発_サイズが違う画像のレイアウト
クラゲイラスト400px
サメのイラスト
サメのイラスト600px
クジライラスト
クジライラスト800px

動画で学ぶアプリ作成_作成の流れ

  1. 新規アプリ作成
  2. 縦並びレイアウトへ変更  （ LinearLayout ）
  3. 画像の用意
    • ネットからダウンロード
    • アプリに組み込む
  4. 画像の配置と並べ替え
  5. 画像の表示サイズをそろえる
  6. 起動テスト
  7. 説明を省いた復習

動画で学ぶAndroidアプリ 【ソース】

2・縦並びレイアウトへ変更 （ LinearLayout ）

  • TextViewの削除
  • 縦並びのレイアウトに変更する

縦並びレイアウト_LinearLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.test0924b.MainActivity" >

</LinearLayout>

※ バージョンによって多少違いがありますが、学習には問題ないです。

4・画像の配置と並べ替え

  • 画像を３枚配置する
  • 画像の並べ替え

３・画像の配置と並べ替え2

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.test0924b.MainActivity" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img_whale800px" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img_shark600px" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img_jellyfish400px" />

</LinearLayout>

5・画像の表示サイズをそろえる

  • 全ての画像の、横幅と縦幅を最大化する
  • 全ての画像の、表示の割合を指定する

5・画像の表示サイズをそろえる

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.test0922.MainActivity" >

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/img_whale800px" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/img_shark600px" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/img_jellyfish400px" />

</LinearLayout>

6・起動テスト

  1. パッケージエクスプローラ内のプロジェクトをクリック（ 名前は作成毎に異なる ）
  2. メニューの実行ボタンをクリック
  3. 30秒～2分ほどでエミュレータが起動し、アプリが表示される

動画で学ぶAndroidアプリ_エミュレータ起動時の注意「プロジェクトを先にクリック」