複数の画像の切り替えの編集

Top/複数の画像の切り替え

''このページは，古いバージョンのAndroidStudioに沿った説明で，また，ところどころ未更新になっています．''~
''新しいバージョンで動作するか未確認なので，参考にする場合はそれを踏まえておいてください．''
#BR

** 複数の画像の切り替え [#kf9a7455]
*** 新しいプロジェクトの準備 [#v11692d6]

画面上のボタンを押して，表示される画像を次々切り替えられるようにします．~
#BR

新しくProjectを作り直します．~
[[数字の入力]]のところでやったのと同じように，Projectを作成します．Androidのバージョンやactivityの種類も全く同じです．

*** レイアウト内容 [#a47ed21e]

今回もLinearLayoutを使用します．~
まず，&color(red){activity_main.xml};を開きます．左上にある「Hello World!」は使わないので消しておきます．~
#BR
次に，画面左側の Paletteの中に「Layouts」の個所があるので，その中から「LinearLayout」を選択して画面上に配置します．
IDは「LinearLayout」と入れておいてください．
#BR

- LinearLayout
-- ID: LinearLayout
-- background: Color -> background_dark

#BR
LinearLayout内に，以下の３つのパーツを配置します．

- Button
-- ID: button1
- ImageSwicher
-- ID: showImage
- textView
-- ID: textView

#BR

図１が配置後の様子です．

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/6-4.png, ,60%)
CENTER:図１
#BR

*** 画像の登録 [#b3d660f7]

次に，表示する画像を何枚か用意します．~
ここでは，photo1.jpg, photo2.jpg, photo3.jpg, photo4.jpg, photo5.jpgの5枚とします．~
画像を app->res->drawableの上にコピーして，プロジェクトに登録します．その上で，プログラム内にも画像のIDを記述します．

#BR
 public class MainActivity extends AppCompatActivity {
#BR

の直後に，以下の文を追加します．

#BR
    ImageSwitcher mImageSwitcher;
    int[] mImageResources = { R.drawable.photo1, R.drawable.photo2,
            R.drawable.photo3, R.drawable.photo4,
            R.drawable.photo5};
#BR

なお，画像ファイルの名前については，先頭に大文字や数字を使えません．
#BR

- 使用できない名前の例
-- Photo1.jpg (始めの文字が大文字)
-- 1stPhoto.jpg (始めの文字が数字)

#BR

*** 画像の切り替え [#qf37976c]

画像を切り替えるための動作を記述します．~
以下の内容を，「画像の登録」の個所に書いた内容の直後に追記してください．呼び出されるごとに，指定画像の番号を変えるという内容です．

#BR
    // スライド番号の初期化
    int mSlide = 0;
    // スライド番号を移動させる内容
    private void movePosition(int move) {
        mSlide = mSlide + move;
 
        // スライド番号が，画像の枚数を超えれば0に戻す
        if (mSlide >= mImageResources.length) {
            mSlide = 0;
        }
        else if (mSlide < 0) {
            mSlide = mImageResources.length -1;
        }
 
        // スライド番号が，画像の枚数を超えれば0に戻す
        mImageSwitcher.setImageResource(mImageResources[mSlide]);
    }
#BR

次に，画像を表示する部分について，下記のように記述します．この内容は~
「protected void onCreate(Bundle savedInstanceState) {　」の中に記述してください．

#BR
        mImageSwitcher = (ImageSwitcher) findViewById(R.id.showImage);
        mImageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(getApplicationContext());
                return imageView;
            }
        });
#BR

一番最後に「セミコロン ; 」があることに注意してください．

*** ボタンの動作の記述 [#z677e67b]

上の「mImageSwitcher」の追記の直後に，ボタンが押されたときの動作を記述します．

#BR
        Button tapButton = (Button) findViewById(R.id.button1);
        tapButton.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               movePosition(1);
               TextView textView1 = (TextView)findViewById(R.id.textView);
               textView1.setText("次の写真です");
           }
        });
#BR

この記述は，ボタンが押されるごとに，「movePosition」を呼び出して画像の番号を1ずつ増やす，という内容になっています．

#BR

これで設定は終了です．~
実行すると，ボタンを押すごとに，登録した画像が切り替わって表示されます．~

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/6-5.png, ,60%)~
　　　　　　　　　　　↓~
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/6-6.png, ,60%)~
　　　　　　　　　　　↓~
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/6-7.png, ,60%)~

#BR

タイムスタンプを変更しない