#目次
- はじめに
- 作成方法
- まとめ
#はじめに
Konyでレイアウトを作成する場合、影がついたデザインを作成することがあると思います。
はじめてKonyでモックアプリを作成する際に、この影をつける方法について手こずったため、
ここでは影の作成方法を説明したいと思います。
#作成方法
[完成図]
ボタンを4つ配置し、各ボタンに影が表示されるように作成します。
それでは早速作成していきましょう！
以下のようにflexcontainerを使いボタンを作成します。
[レイアウト] [widget構成]
ボックスに影を付けたいため、
flxGotoCheckInのSkinタブからShadowを探して、
以下のように設定します。
透明度や、ぼかし度、色はお好みで設定してください。
この状態でレイアウトをみてみると、↓
・・・影が反映されていません
影を設定しても、反映されていない場合、
影を設定しているFlexContainerのFlexContainerタブのClip Boundsの設定を確認してください。
Clip BoundsがONになっている場合は、
ボックスの境界から漏れている範囲を切り取る設定となっているため、
影を作成したとしてもその部分が切り取られてしまい、反映することができません。
そのため、Clip BoundsをOffにすると・・
影が反映されました！
Clip BoundsはデフォルトでOnになっているため、
ボックスに影を付けたい場合などは、Offにして作成するようにしてくださいね！
[補足]
Widgetを複数重ねて影を作成したい場合、zindexが大きい数値のwidgetが上に来るようになっているため、
zindexの数値は、上に配置したいWidgetほど数字が大きくなるように設定してください。
↓の画像は、以下の設定になっていますが、
[before]
flxGotoCheckInのwidgetのzindex: 1
flxShadowのwidgetのindex: 2
以下の設定にすると、flxShadowが下に配置されるようになります。
[after]
flxGotoCheckInのwidgetのzindex: 2
flxShadowのwidgetのindex: 1
#まとめ
影をつける方法は基本的な内容に見えますが、
初めてKonyでモックアプリを作成する際に検索してもヒットするものがなく、
なかなか解決することができなかったため、今回Qiitaにアップすることにしました。
同じところでつまづいている人がいたら、お役に立てれば嬉しいです
#参考
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/Flex_Container.htm