- 追加された行はこの色です。
- 削除された行はこの色です。
#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