複数の画像の切り替え の変更点
Top/複数の画像の切り替え
- 追加された行はこの色です。
- 削除された行はこの色です。
- 複数の画像の切り替え へ行く。
- 複数の画像の切り替え の差分を削除
#author("2024-06-05T22:20:01+09:00","","") #author("2024-06-10T14:45:57+09:00;2024-06-05T22:20:01+09:00","","") ''このページは,古いバージョンの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内に,以下の3つのパーツを配置します. - Button -- ID: button1 - ImageSwicher -- ID: showImage - textView -- ID: textView #BR 図1が配置後の様子です. #BR #ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/5-4.png, ,60%) #ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/6-4.png, ,60%) CENTER:図1 #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/5-5.png, ,60%)~ #ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/6-5.png, ,60%)~ ↓~ #ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/5-6.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/5-7.png, ,60%)~ #ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/6-7.png, ,60%)~ #BR