ボタン画像を取り込んで利用する

今度はボタンに画像を貼付けて、ボタンらしくすることにする。
ボタンをレイアウトにセットしたら、「ボタン プロパティ」ウインドウから、画像「登録」ボタンをクリックする。

すると、「メディアストレージ」ウインドウが表示される。このウインドウから、初めから用意されているボタン類や、ユーザーオリジナルのボタン類の登録・読み込みといった作業を行うことができる。

既に用意されているボタンを読み込んでみる事にする。左下の枠内には「プリインストール」と書かれたフォルダがあるので、その配下のボタン画像／モノトーン／iPadのフォルダを選ぶ。すると登録済みのボタンイメージが表示される。その中のひとつをクリックして画像を選ぶ。

すると、ボタンに選んだ画像が張り付く。おっと失礼。先に設定した背景色では暗くてわかりにくいので、背景色を白に戻してみる。

このように、登録済みの画像を呼び出してもいいが、ネットや自作の画像を登録して使う事も出来る。
UIデザイナー画面の左下にある、「ボタンアイコンを探す」とクリックすると、さまざまなボタンアイコンが表示されるのでそれを利用してもいい。（実際は、”button icon”というキーワードによるgoogle画像検索結果がブラウザに表示されるしくみだ）
googleの画像検索結果では、いろんなボタン画像がでてくる。

今回は、別途用意したボタン画像を利用する事にする。
自作やネットで入手した画像は「メディアストレージ」に登録してから使用する。

「メディアストレージ」ウインドウのユーザーデータ／ボタン画像を選択すると、最初は何も登録されていないので、フォルダの中は空になっている。 この中に、使用したいボタンをどんどん登録して使用するのだ。
「メディアストレージ」ウインドウの左上にある、「画像登録」ボタンをクリックする。

すると、Finderウインドウが表示されるので、用意しておいた画像を選んで「開く」をクリックする。

「メディアストレージ」のボタン画像フォルダに画像が登録された事がわかる。こうして、使用したい画像を先にどんどん登録しておいてもいいし、ボタンを作成するつど登録してもいい。
次回はこの登録した画像を使って、どんどんボタンを作成していくことにする。

Tweet

Glamo 【自宅や外出先から、お使いの家電をコントロールできる学習リモコンの決定版! 】 iRemocon(アイリモコン) IRM-01L

 真っ白なレイアウトにボタンを配置していく

前回「UIデザイナー」のレイアウト一覧画面からiPad用の縦画面を選ぶところまでを紹介した。今回はいよいよボタンを配置してみる。だが、その前に、背景色をいったん真っ黒にしておくことにする。
「ページプロパティ」ウインドウで「背景色」をクリックする。
カラー選択画面がでてくるので、黒を選択する。すると、iPadレイアウト画面もそれにあわせて黒くなる。
ここからボタンを配置する。「コンポーネント」ウインドウの一番上の四角い枠、これがボタンとなる。これをレイアウトにドラッグ&ドロップするとボタンが配置される。実に簡単。
ボタンのサイズはドラッグで自在に変更できる。「ボタン プロパティ」ウインドウから数値を入力してサイズを変更することも出来る。また、ボタン左上の×印をクリックすることでボタンが削除できる。
ボタン内にテキストを入力することが出来る。

また、文字サイズや文字色も自由に変更できる。
ボタンの透明度を変更することも出来る。「ボタン プロパティ」の「ボタン透明度」の数値を0.1〜1の間で0.1単位に増減することで変更される。「１」が完全な不透明で、数値を減らすごとに透明度が増していく。 ざっとここまでボタンの配置方法を紹介したが、このままではダサいので、次回はボタン画像を読み込んで利用することにする。

Tweet