「四章：画像を出す」の編集履歴（バックアップ）一覧はこちら

「四章：画像を出す」(2013/08/06 (火) 12:28:48) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

初めてのプログラミングが終わって調子が出てきた人には申し訳ないが、今回プログラムはちょっとしかいじらない。
しかし、結構大事なところだからしっかりやっておくことをオススメする。

***・画像を導入する
　まずはいつも通りにプロジェクトを作成する。
　なんか自分の好きな画像でも用意しておく。&bold(){(ファイル名は半角英数および「_(アンダーバー)」のみ)}
　用意した画像はプロジェクト内にコピーしなきゃいけないが、残念なことに画像を置いておけそうなフォルダーは
　デフォルトでは存在しない。なので"layout"フォルダーや"values"フォルダーが入っている"res"フォルダーを
　右クリック→新規→フォルダーで"drawable"フォルダーを作成し、そこにファイルをコピーする。
　※最初からあるdrawable-うんたらかんたらフォルダーにはそれぞれのサイズのアイコンが入っている。
　　よって、そんなフォルダーに画像を入れたら管理が面倒なことこの上ない。

　作成したフォルダーに用意した画像を突っ込む。

***・画像を表示する
　前回のボタンを一個表示してクリックに対応させるところまで打つ。
　今回編集する部分はonClick内とレイアウトファイルとstrings.xml。
　こんな感じになる。&color(red){(途中「***」みたいに書いているところは各自置き換えて「//」以降は削除する)}
　&color(gray){丸コピなんてさせないんだからねっ！}
&bold(){・activtiy_main.xml(レイアウトファイル)}
#region(クリックして開く)
#highlight(linenumber){{
<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"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_touch" />
    
    <ImageView
        android:contentDescription="@string/***"//画像が出せないときに代わりに表示する文字列
        android:id="@+id/***"←イメージを使用する際の名前
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>
}}
#endregion
&bold(){・strings.xml}
#region(クリックして開く)
#highlight(linenumber){{
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Graphic</string>
    <string name="action_settings">Settings</string>
    <string name="button_touch">show</string>
    <string name="***">***</string>//代わりに表示する文字列

</resources>


</RelativeLayout>
}}
#endregion
&bold(){・MainActivity.java}
#region(クリックして開く)
#highlight(linenumber,java)
{{
public class MainActivity extends Activity implements OnClickListener{

　@Override
　protected void onCreate(Bundle savedInstanceState) {
　　super.onCreate(savedInstanceState);
　　setContentView(R.layout.activity_main);
		
　　//ボタンのクリックイベントを使えるようにする
　　Button button = (Button) findViewById(R.id.button01);
　　button.setOnClickListener(this);
　}

　@Override
　public void onClick(View v)
　{
　　ImageView img = (ImageView)findViewById(R.id.***);//レイアウトファイルに指定したID
		
　　img.setImageResource(R.drawable.***);//リソース名
　}

}
}}
#endregion

***・今回使用したものの解説
　・ImageView…ボタンを表示したときみたいにイメージを表示するためのもの。
　　　　　　　　リソース(今回の場合表示するために読み込んだ画像)をセットすることで表示が可能。
　　　　　　　　画像が表示できなかったときの為に"android:contentDescription"をレイアウトファイル内に
　　　　　　　　設定しておくと、strings.xmlから紐付けられた文字列を代わりに表示する。
　　　　　　　　実際に読み込ませる画像はプログラム側で設定できるので、画像を画面に一枚描画するだけならば
　　　　　　　　一つのImageViewだけで複数の画像を一枚ずつ切り替えながら表示することも可能。

　・setImageResource…ImageViewでリソースをセットするときに使った関数。
　　　　　　　　　　　今回はdrawable内の画像をセットした。

***&bold(){&color(red){・「R」について}}
　"R.id.***"やら"R.drawable.***"をおまじないのように使ってきたわけだが、
　「Rって何ぞ？」と思っている人はたくさんいるんじゃないかと思う。
　その正体だが、好奇心旺盛な人はもしかしたら見つけているかもしれない。
　プロジェクト内、"gen"フォルダーの中にある&bold(){&u(){"R.java"}}が正体である。
　こいつは例えばレイアウトファイル内に"button01"というボタンのIDが設定された時に、
　自動でプログラムから呼び出せるように紐付けを行ってくれるという素敵な機能を持っている。
　他の例を挙げるならば、"drawable"フォルダーに入れた"***.png"という画像をプログラム側で
　R.drawable.***と書けば呼び出せるようになるのもR.javaのおかげ。
　基本的に裏でいろいろやってくれる縁の下の力持ちだが、プログラマー側で余計なことをすると
　一瞬でパーになったりするので気を付けて扱おう。センシティブ。

初めてのプログラミングが終わって調子が出てきた人には申し訳ないが、今回プログラムはちょっとしかいじらない。
しかし、結構大事なところだからしっかりやっておくことをオススメする。

***・画像を導入する
　まずはいつも通りにプロジェクトを作成する。
　なんか自分の好きな画像でも用意しておく。&bold(){(ファイル名は半角英数および「_(アンダーバー)」のみ)}
　用意した画像はプロジェクト内にコピーしなきゃいけないが、残念なことに画像を置いておけそうなフォルダーは
　デフォルトでは存在しない。なので"layout"フォルダーや"values"フォルダーが入っている"res"フォルダーを
　右クリック→新規→フォルダーで"drawable"フォルダーを作成し、そこにファイルをコピーする。
　※最初からあるdrawable-うんたらかんたらフォルダーにはそれぞれのサイズのアイコンが入っている。
　　よって、そんなフォルダーに画像を入れたら管理が面倒なことこの上ない。

　作成したフォルダーに用意した画像を突っ込む。

***・画像を表示する
　前回のボタンを一個表示してクリックに対応させるところまで打つ。
　今回編集する部分はonClick内とレイアウトファイルとstrings.xml。
　こんな感じになる。&color(red){(***は各自置き換える。xmlの//以降は削除する。)}
　&color(gray){丸コピなんてさせないんだからねっ！}
&bold(){・activtiy_main.xml(レイアウトファイル)}
#region(クリックして開く)
#highlight(linenumber){{
<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"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_touch" />
    
    <ImageView
        android:contentDescription="@string/***"//画像が出せないときに代わりに表示する文字列
        android:id="@+id/***"←イメージを使用する際の名前
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>
}}
#endregion
&bold(){・strings.xml}
#region(クリックして開く)
#highlight(linenumber){{
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Graphic</string>
    <string name="action_settings">Settings</string>
    <string name="button_touch">show</string>
    <string name="***">***</string>//代わりに表示する文字列

</resources>


</RelativeLayout>
}}
#endregion
&bold(){・MainActivity.java}
#region(クリックして開く)
#highlight(linenumber,java)
{{
public class MainActivity extends Activity implements OnClickListener{

　@Override
　protected void onCreate(Bundle savedInstanceState) {
　　super.onCreate(savedInstanceState);
　　setContentView(R.layout.activity_main);
		
　　//ボタンのクリックイベントを使えるようにする
　　Button button = (Button) findViewById(R.id.button01);
　　button.setOnClickListener(this);
　}

　@Override
　public void onClick(View v)
　{
　　ImageView img = (ImageView)findViewById(R.id.***);//レイアウトファイルに指定したID
		
　　img.setImageResource(R.drawable.***);//リソース名
　}

}
}}
#endregion

***・今回使用したものの解説
　・ImageView…ボタンを表示したときみたいにイメージを表示するためのもの。
　　　　　　　　リソース(今回の場合表示するために読み込んだ画像)をセットすることで表示が可能。
　　　　　　　　画像が表示できなかったときの為に"android:contentDescription"をレイアウトファイル内に
　　　　　　　　設定しておくと、strings.xmlから紐付けられた文字列を代わりに表示する。
　　　　　　　　実際に読み込ませる画像はプログラム側で設定できるので、画像を画面に一枚描画するだけならば
　　　　　　　　一つのImageViewだけで複数の画像を一枚ずつ切り替えながら表示することも可能。

　・setImageResource…ImageViewでリソースをセットするときに使った関数。
　　　　　　　　　　　今回はdrawable内の画像をセットした。

***&bold(){&color(red){・「R」について}}
　"R.id.***"やら"R.drawable.***"をおまじないのように使ってきたわけだが、
　「Rって何ぞ？」と思っている人はたくさんいるんじゃないかと思う。
　その正体だが、好奇心旺盛な人はもしかしたら見つけているかもしれない。
　プロジェクト内、"gen"フォルダーの中にある&bold(){&u(){"R.java"}}が正体である。
　こいつは例えばレイアウトファイル内に"button01"というボタンのIDが設定された時に、
　自動でプログラムから呼び出せるように紐付けを行ってくれるという素敵な機能を持っている。
　他の例を挙げるならば、"drawable"フォルダーに入れた"***.png"という画像をプログラム側で
　R.drawable.***と書けば呼び出せるようになるのもR.javaのおかげ。
　基本的に裏でいろいろやってくれる縁の下の力持ちだが、プログラマー側で余計なことをすると
　一瞬でパーになったりするので気を付けて扱おう。センシティブ。