More than 1 year has passed since last update.

Skinの概要と使い方のご紹介

Last updated at 2022-08-02Posted at 2022-08-02

はじめに

今回は、Visualizerで文字の色などを定義する
Skinの機能について紹介します！

Konyで開発を行うにあたり、
必ずと言っていいほど使う機能ですので、
しっかりと学んでいきましょう！

Skinとは

概要

Skinとは、VisualizerでボタンやラベルなどのWidgetのビジュアルを決めるための機能となります。

一度Skinを定義すると、
次同じレイアウトを適用したいWidgetに対して対象のSkinを割り当てることで、
全く同じレイアウトを作ることができます。

例えば、全体の画面共通でボタンの色を青色にしたい場合、
青色のSkinを作成し、全てのボタンWidgetに割り当てると
画面全体でボタンの見た目を同じにすることができます。

Skinで設定できる内容

Skinを使ってどんなものが設定できるか簡単に説明します。

SkinではWidgetの色、透明度、フォント、枠線、影などを設定することができます。

またクリック動作があるWidget等では、
Widgetが押下された時やホバーされた時のSkinも指定することができます。

以下に設定可能な状態の一覧を説明します。

	詳細	状態
Normal	ユーザーによって操作されていないときの通常の状態を指します。
Focus	Widgetが押下された時の状態を指します。
Hover Skin	カーソルをWidget上に置いたときの状態を指します。 ※Webブラウザのみ対応
Blocked UI	非アクティブになっている状態を指します。（例）サインインボタンは、ユーザ名とパスワードのフィールドが空であるため、背景が薄く表示され、現在利用できないことを示します。

※Normal以外は、一部のWidgetのみで利用可能です。

実際によく使うのは、Normal、Focus、Hover Skinとなります。

それでは、実際に作り方を見ていきましょう！

作成方法

下記の2つの画面で、
共通した青い角丸のボタンがあると思います。

Skin機能を使って、これらの同じレイアウトのボタンを作ってきましょう！

画面1	画面2

Skinを作る

まずはFormにボタンWidgetを配置します。

ボタンWidgetは、デフォルトで青色・四角のボタンとなっています。

配置したボタンWidgetを選択した状態で、
右サイドメニューのPROPERTIES->Skinタブをクリックします。

Skinタブでは、Widgetの色や透明度を決めるOpacity、フォントの設定など、
レイアウトに関する設定を行うことができます。

今回、色はそのままなので、Colorの設定はスキップします。
ボタンの色を変えたい場合は、Colorのプロパティで希望の色に変更することができます。

角丸のボタンを作るので、
Borderのプロパティを変更していきます。

Borderの設定を以下のように変更してください。

角丸のボタンが完成しましたか？

今回、ボタンの中のフォントも変えているので、
フォントも設定しておきましょう。

するとこのようなボタンが完成したかと思います！

Skinが完成したら、Skinの名前をつけておきましょう。

Skin名には、分かりやすい名前を指定することをおすすめします。
例えば、画面上にタイトル用のラベルや詳細を記載するラベルがある場合、
それぞれ以下のように設定すると、
別の画面でSkinを指定する場合にどのSkinを使えば良いか分かりやすくなります。
例）
・タイトル： sknLblTitle
・詳細：　sknDescription

名前の変更は、Nameプロパティで変更が可能です。
今回は、sknBtnBlueNormalとしました。