スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Dashcodeでプログラミング(画像を切り換えて表示する)

 前回作製したWidgetを改造して、画像をクリックすると次々と表示が変わるようしてみよう。
まず切り換えて表示する画像をWidgetに追加する。画面右下をファイル一覧にしておいてから、ライブラリウィンドウから追加したい画像をImagesフォルダにドラッグする。

 続いて、画像をクリックした時のイベントハンドラを作製する。以前にボタンのハンドラを作製した時と同じように、インスペクタウィンドウでイベント一覧を表示し、onclickイベントにchangeImageというイベントハンドラを作製する。

 画像を変更する場合は、画像パーツのsrc属性に表示したいファイルのパスを入れてやればいい。だから、単純にクリックされたら表示を変えるというだけであれば、次のようなコードを書けばいい。

 だけど今回は切り換える画像をいくつか用意して、クリックするたびにそれを順番に表示するようにしたい。こういう場合は配列を使うと便利だ。

 上記のように、Imagesという配列を作製し、表示したいファイルのパス名を入れておく。indexというグローバル変数は「今何番目の画像を表示しているか」を記憶しておく変数だ。
 そして、changeImageの内容は以下のようにする。

 まず、indexの値を増やす。このときindexの値が配列の上限に達したらindexを0、つまり最初の画像にもどす。最後にイメージパーツのsrc属性を変更する。
 ここまで終ったら実行してみよう。クリックで画像が変わっていくはずだ。
スポンサーサイト

Comment

Post comment

Secret

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。