コンポーネントの使い方 - 応用編

前回の記事の続きです。

今回は、応用編なので「コンポーネントが使える」から「コンポーネントを使いこなせる」までレベルアップする人のための内容にしていきたいと思います。

それでは早速!

インスタンスを切り離す

コンポーネントを一度作ったら二度と変更しないと言うことはほぼあり得なくて、細かい変更を繰り返しながら実用的なコンポーネントを定義していくと言うのが基本的なワークフローになると思います。

そこで、「インスタンスを切り離す（Detach Instance）」と言う操作が必要になる時がきます。

この操作を行うと、その名の通りインスタンスがマスターから切り離されて、自由に変更することが可能になります。要するに、普通のレイヤーに戻ります。

やり方は、コンテクストメニュー（右クリック）からインスタンスを切り離す（Detach Instance）を選択するか、Command + Option + bを押します。

2つ作ったインスタンスのうち一つ（上のインスタンス）をマスターから切り離した。マスター内容を変更しても、切り離された方には影響していないのが分かる。

コンポーネントから切り離された部品は、自由に変更ができるようになるので、そこから新しいコンポーネントを定義するために使ったり、マスターコンポーネントを変更する前の一時的な試行錯誤に使ったりできるようになります。

コンポーネントを階層化する

コンポーネントは、レイヤー名をスラッシュで区切ることによって、階層的に管理することができます。

例えば、入力フォームで使われるテキスト入力用のコンポーネントで内容がvalid(正しい値が入力されている状態) なUI部品はForm / Text Input / Validのように階層分けしておくような感じです。

こうすることによって、「兄弟のコンポーネント」を相互に切り替えてデザインファイルを作ることができるようになります。

やり方

1. インスタンスを選択
2. インスペクター内の「Instance」から兄弟のコンポーネントを切り替える

コンポーネントの中にコンポーネントを入れていみよう

コンポーネントの中にはさらに小さなコンポーネントを含めることができます。

このようにコンポーネントを使い回し可能な小さな単位ごとに定義しておくと、インスタンスの中でバリエーションを変化させてUIの「状態」を管理・表現することができます。

上の例では、１つのコンポーネントの中に、２つのコンポーネントを内包している。
1. ユーザーのアイコンを表示するコンポーネント
2. ユーザー名を表示するコンポーネント
さらに、上記の２つのコンポーネントがそれぞれ2つの状態を持っていて、冒頭で紹介したテクニックを使って切り替えが可能になっている
これにより、１つのコンポーネントの中に合計４種類の状態が内包されており、別々の画面を4回作るより効率的に組み合わせを表現することができるようになっている。

以上

紹介したポイントはたった３つですが、これらのテクニックを駆使して、コンポーネントをうまく階層設計するのは慣れるまで結構難しいかもしれません。しかし、階層構造やクラス設計が綺麗になっているとデザイナーにとっても使いやすく、プログラマーにとっても実装しやすいUIが設計できると思いますので、興味があればやってみてください。