ボタン画像を取り込んで利用する
今度はボタンに画像を貼付けて、ボタンらしくすることにする。
ボタンをレイアウトにセットしたら、「ボタン プロパティ」ウインドウから、画像「登録」ボタンをクリックする。
すると、「メディアストレージ」ウインドウが表示される。このウインドウから、初めから用意されているボタン類や、ユーザーオリジナルのボタン類の登録・読み込みといった作業を行うことができる。
既に用意されているボタンを読み込んでみる事にする。左下の枠内には「プリインストール」と書かれたフォルダがあるので、その配下のボタン画像／モノトーン／iPadのフォルダを選ぶ。すると登録済みのボタンイメージが表示される。その中のひとつをクリックして画像を選ぶ。
すると、ボタンに選んだ画像が張り付く。おっと失礼。先に設定した背景色では暗くてわかりにくいので、背景色を白に戻してみる。
このように、登録済みの画像を呼び出してもいいが、ネットや自作の画像を登録して使う事も出来る。
UIデザイナー画面の左下にある、「ボタンアイコンを探す」とクリックすると、さまざまなボタンアイコンが表示されるのでそれを利用してもいい。（実際は、”button icon”というキーワードによるgoogle画像検索結果がブラウザに表示されるしくみだ）
googleの画像検索結果では、いろんなボタン画像がでてくる。
今回は、別途用意したボタン画像を利用する事にする。
自作やネットで入手した画像は「メディアストレージ」に登録してから使用する。
「メディアストレージ」ウインドウのユーザーデータ／ボタン画像を選択すると、最初は何も登録されていないので、フォルダの中は空になっている。 この中に、使用したいボタンをどんどん登録して使用するのだ。
「メディアストレージ」ウインドウの左上にある、「画像登録」ボタンをクリックする。
すると、Finderウインドウが表示されるので、用意しておいた画像を選んで「開く」をクリックする。
「メディアストレージ」のボタン画像フォルダに画像が登録された事がわかる。
こうして、使用したい画像を先にどんどん登録しておいてもいいし、ボタンを作成するつど登録してもいい。
次回はこの登録した画像を使って、どんどんボタンを作成していくことにする。
ボタン内にテキストを入力することが出来る。
ボタンの透明度を変更することも出来る。「ボタン プロパティ」の「ボタン透明度」の数値を0.1〜1の間で0.1単位に増減することで変更される。「１」が完全な不透明で、数値を減らすごとに透明度が増していく。
ざっとここまでボタンの配置方法を紹介したが、このままではダサいので、次回はボタン画像を読み込んで利用することにする。
ログインすると最初はこのようなレイアウト一覧画面が出てくる。
リモコンデザインのサンプルがいくつも登録されていることがわかる。
iPhone用やAndroid用、カスタムサイズの画面サンプルなどがある。モノトーン調やクリア調、宇宙をイメージしたサンプルが見つかる。
「iPad（1024 x 768）モノトーン（iPad専用）」デザインを開くと、このような画面になる。「コンポーネント」「ページ プロパティ」の各ウインドウや、「ツールヒント」ウインドウも開かれている。
できあがったサンプル画面から修正していく方法もあるが、今回は１から画面を作り上げていくことにする。レイアウト一覧画面にもどり、左上の「＋」をクリックする。
機器選択ウインドウが表示されるので、「iPad」を選択する。
縦向きか横向きかを選択できる。今回は「縦向き」を選んで、縦型のリモコン画面をつくることにする。
真っ白なレイアウトがでてきた。ここからリモコンを作り上げていくのである。
次回から、ボタンを実際に作っていくことにする。