ボタンを押した時に画像が変わるようにする。

xcodeには元々デフォルトのボタンが有り、色をつけたり、ある程度形を変えたり、画像を設定することが出来る。

しかし、ゲーム風やアナログ風のボタンを表示したい時もある。

ひょっとしたらxcodeの基本設定でなんとかなるものなのかもしれないけれど、よく判らんので自分なりにやってみた。

まずは、普通状態と押した時の状態のボタンの画像を用意する。
ボタンを押した時に画像が変わるようにする。普通
ボタンを押した時に画像が変わるようにする。おした時

これらをナビゲータエリアにドラッグ・アンド・ドロップで入れる。
ボタンを押した時に画像が変わるようにする。
アラートが出るのでCopy items if neededのチェックを確認してフィニッシュ。

右下のMedia Libraryに表示されるようになります。
ボタンを押した時に画像が変わるようにする。

まず、ストーリーボードで普通状態のボタンを表示させるが、何もない状態でいきなり画像を置くと画面いっぱい最大サイズで表示されてしまうので、先にimage Viewを配置します。

さらにそのimage viewも何もない状態のストーリーボードに入れると、全画面のimage Viewになってしまうので先にラベル等を一つ置いておくと良い。
ボタンを押した時に画像が変わるようにする。

ボタンを押した時に画像が変わるようにする。

配置するとこんな感じ。
ボタンを押した時に画像が変わるようにする。

UIImageViewは右のサイズインスペクタで希望のサイズにしておき、そこに右下のメディアライブラリーから普通状態の画像を入れるとイメージビューのサイズに合わせてボタンが表示される。
ボタンを押した時に画像が変わるようにする。

ボタンの画像に重なるようにUIButtonを配置してサイズを調整します。
ボタンを押した時に画像が変わるようにする。

ボタンを押した時に画像が変わるようにする。

ボタンの画像はアウトレット接続、UIButtonは、「touch Down」、「touch Up Inside」、「touch Up Outside」の三種類でUIButton接続します。
ボタンを押した時に画像が変わるようにする。

これはボタンを押した瞬間に押した状態の画像に変えて、ボタンから離した瞬間に元の状態の画像に戻すためです。
またこれだけでは、押した状態でスライドさせると押した状態のまま画像が変わらずに残ってしまうことを防ぐため、touch Up Outsideも設定します。

完成のコードがコチラです。

これで、押した瞬間に画像が変わって離すと元に戻るボタンが出来るはずです。

もっと簡単な方法あるで、という方居られましたら教えて下さい。(−人−)

ボタンを押した時に画像が変わるようにする。

追記7/22
よくよく考えて見ればボタンと画像を切り離す必要はなくボタンのアウトレット接続で画像を変えればよかったんだなと気付いた。
ま、初心者ゆえの過ちかな。(^_^;)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">