複数の画像の切り替え の履歴(No.2)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 複数の画像の切り替え へ行く。
  • 1 (2024-06-05 (水) 22:18:42)
  • 2 (2024-06-05 (水) 22:20:01)

---

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

複数の画像の切り替え†

新しいプロジェクトの準備†

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

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

レイアウト内容†

今回もLinearLayoutを使用します．
まず，activity_main.xmlを開きます．左上にある「Hello World!」は使わないので消しておきます．

次に，画面左側の Paletteの中に「Layouts」の個所があるので，その中から「LinearLayout」を選択して画面上に配置します． IDは「LinearLayout」と入れておいてください．

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

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

• Button
  • ID: button1
• ImageSwicher
  • ID: showImage
• textView
  • ID: textView

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

画像の登録†

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

public class MainActivity extends AppCompatActivity {

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

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

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

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

画像の切り替え†

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

   // スライド番号の初期化
   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]);
   }

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

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

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

ボタンの動作の記述†

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

       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("次の写真です");
          }
       });

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

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

　　　　　　　　　　　↓

　　　　　　　　　　　↓