2024 Socio Informatics Seminar Wiki Site
複数の画像の切り替え
をテンプレートにして作成
開始行:
''このページは，古いバージョンのAndroidStudioに沿った説明...
''新しいバージョンで動作するか未確認なので，参考にする場...
#BR
** 複数の画像の切り替え [#kf9a7455]
*** 新しいプロジェクトの準備 [#v11692d6]
画面上のボタンを押して，表示される画像を次々切り替えられ...
#BR
新しくProjectを作り直します．~
[[数字の入力]]のところでやったのと同じように，Projectを作...
*** レイアウト内容 [#a47ed21e]
今回もLinearLayoutを使用します．~
まず，&color(red){activity_main.xml};を開きます．左上にあ...
#BR
次に，画面左側の Paletteの中に「Layouts」の個所があるので...
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....
CENTER:図１
#BR
*** 画像の登録 [#b3d660f7]
次に，表示する画像を何枚か用意します．~
ここでは，photo1.jpg, photo2.jpg, photo3.jpg, photo4.jpg,...
画像を app->res->drawableの上にコピーして，プロジェクトに...
#BR
public class MainActivity extends AppCompatActivity {
#BR
の直後に，以下の文を追加します．
#BR
ImageSwitcher mImageSwitcher;
int[] mImageResources = { R.drawable.photo1, R.drawab...
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[m...
}
#BR
次に，画像を表示する部分について，下記のように記述します...
「protected void onCreate(Bundle savedInstanceState) { ...
#BR
mImageSwitcher = (ImageSwitcher) findViewById(R.i...
mImageSwitcher.setFactory(new ViewSwitcher.ViewFa...
@Override
public View makeView() {
ImageView imageView = new ImageView(getAp...
return imageView;
}
});
#BR
一番最後に「セミコロン ; 」があることに注意してください．
*** ボタンの動作の記述 [#z677e67b]
上の「mImageSwitcher」の追記の直後に，ボタンが押されたと...
#BR
Button tapButton = (Button) findViewById(R.id.but...
tapButton.setOnClickListener(new View.OnClickList...
@Override
public void onClick(View v) {
movePosition(1);
TextView textView1 = (TextView)findViewByI...
textView1.setText("次の写真です");
}
});
#BR
この記述は，ボタンが押されるごとに，「movePosition」を呼...
#BR
これで設定は終了です．~
実行すると，ボタンを押すごとに，登録した画像が切り替わっ...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/6-5....
↓~
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/6-6....
↓~
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/6-7....
#BR
終了行:
''このページは，古いバージョンのAndroidStudioに沿った説明...
''新しいバージョンで動作するか未確認なので，参考にする場...
#BR
** 複数の画像の切り替え [#kf9a7455]
*** 新しいプロジェクトの準備 [#v11692d6]
画面上のボタンを押して，表示される画像を次々切り替えられ...
#BR
新しくProjectを作り直します．~
[[数字の入力]]のところでやったのと同じように，Projectを作...
*** レイアウト内容 [#a47ed21e]
今回もLinearLayoutを使用します．~
まず，&color(red){activity_main.xml};を開きます．左上にあ...
#BR
次に，画面左側の Paletteの中に「Layouts」の個所があるので...
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....
CENTER:図１
#BR
*** 画像の登録 [#b3d660f7]
次に，表示する画像を何枚か用意します．~
ここでは，photo1.jpg, photo2.jpg, photo3.jpg, photo4.jpg,...
画像を app->res->drawableの上にコピーして，プロジェクトに...
#BR
public class MainActivity extends AppCompatActivity {
#BR
の直後に，以下の文を追加します．
#BR
ImageSwitcher mImageSwitcher;
int[] mImageResources = { R.drawable.photo1, R.drawab...
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[m...
}
#BR
次に，画像を表示する部分について，下記のように記述します...
「protected void onCreate(Bundle savedInstanceState) { ...
#BR
mImageSwitcher = (ImageSwitcher) findViewById(R.i...
mImageSwitcher.setFactory(new ViewSwitcher.ViewFa...
@Override
public View makeView() {
ImageView imageView = new ImageView(getAp...
return imageView;
}
});
#BR
一番最後に「セミコロン ; 」があることに注意してください．
*** ボタンの動作の記述 [#z677e67b]
上の「mImageSwitcher」の追記の直後に，ボタンが押されたと...
#BR
Button tapButton = (Button) findViewById(R.id.but...
tapButton.setOnClickListener(new View.OnClickList...
@Override
public void onClick(View v) {
movePosition(1);
TextView textView1 = (TextView)findViewByI...
textView1.setText("次の写真です");
}
});
#BR
この記述は，ボタンが押されるごとに，「movePosition」を呼...
#BR
これで設定は終了です．~
実行すると，ボタンを押すごとに，登録した画像が切り替わっ...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/6-5....
↓~
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/6-6....
↓~
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/6-7....
#BR
ページ名:
