Label Widgetプロパティの具体的な使い方ご紹介

# 目次
1. はじめに
1. 利用可能なOS
1. 機能紹介
1. まとめ

# はじめに
以前Widgetの使い方について下記の記事で概要説明をしましたが、

https://qiita.com/Kony_Team/items/c71850eca5710fe69d11

具体的にどんな使い方があるか、どのような表示になるのかをご紹介したいと思います。

アプリを開発していて、強調したい部分など
行間を少し広げた表現をしたい場合があると思います。

Lebel Widgetでは行間を広げたり、
改行設定を変更できたり様々な表現が可能です。

利用シーンに応じて各機能を紹介していきたいと思います！

# 利用可能なOS

まず紹介の前に、これからご紹介する各プロパティには対応のOSがあります。
Androidでは一部利用ができないものがあるため、ご了承ください。
|Property|iOS|Android|
|--|--|--|
|lineSpacing|○|○|
|letterSpacing|○|○|
|strikeThrough|○|○|
|strikeThroughStyle|○|ｘ|
|baseLine|○|ｘ|
|minLineHeight|○|ｘ|
|maxLineHeight|○|ｘ|


# 機能紹介
Label Widgetの設定を変更したい場合は、
右メニューのPROPERTIES->Labelタブで変更をすることができます。
![スクリーンショット 0004-09-09 13.24.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/dd32923a-8db5-368d-2ae7-06eefb97d458.png)

早速それぞれの機能を紹介します！

## テキストをコピー可能にしたい
Label Widgetを設置した場合、
デフォルトでテキストがコピーができない設定となっています。

「Text Copyable」の設定をONに変更すると、
テキストコピーができるようになります:relaxed:
![スクリーンショット 0004-09-09 12.24.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e06162e9-e400-2088-a258-8c1da6371b96.png)

設定した結果が以下となります。
|設定前|設定後|
|--|--|
|![ezgif-1-83e081ec90.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d7949e50-e529-5cf6-0fe9-c2108f095b95.gif)|![ezgif-1-29cc2767f2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/445cb754-70f2-a55d-3fdd-b62584cd2286.gif)|


## 行間の幅を調整したい
行間の幅を狭めたり広げたりしたい場合は、
「Line Spacing」のプロパティを変更することで調整が可能です。

「Line Spacing」の値をご希望の値に変更して、レイアウトをチェックしてみましょう。
![スクリーンショット 0004-09-09 12.28.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ae2c2327-bae9-0a70-6d7d-4eb23285bb15.png)

行間を10dpに設定しました。
|設定前|設定後|
|--|--|
|![beforea.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/78c45057-e89e-ca2e-4dad-5e83e75e5436.png)|![after.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/08e7ecac-3dbc-301d-5bd8-4889b37e0e5b.png)|

強調したい箇所がある場合は、
行間や文字間を広げることで目に留まりやすくなりますね:eyes::sunny:

## 文字間の幅を調整したい
文字間を狭めたり広げたりしたい場合は、
「Letter Spacing」のプロパティを変更することで調整が可能です。

文字間を10dpに設定しました。
|設定前|設定後|
|--|--|
|![beforea.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/78c45057-e89e-ca2e-4dad-5e83e75e5436.png)|![IMG_91EB133EE3AE-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/94047fcd-c210-21fa-4777-5af9c6699bd5.jpeg)|

## 改行位置を変更したい
改行の位置を変更したい場合、下記2タイプの設定が可能です。

|プロパティ|詳細|
|--|--|
|Word Wrap ※Default設定|単語ごとに改行します|
|Character Wrap|文字ごとに改行します|

実際に違いをみてみましょう。
<font color = red>赤い文字</font>が、「Word Wrap」、
<font color = blue>青い文字</font>が、「Character Wrap」で設定した場合となります。
![IMG_14585504FF13-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/90d439fc-1a45-7a8e-3f37-726001cf5b46.jpeg)

「Word Wrap」に設定した方は、「20%還元します！」の後で改行し、
単語ごとに改行がされています。
「Character Wrap」で設定した方は、単語に関係なく、
枠いっぱいになったところで、改行がされています。

単語ごとに自動で折り返しをしたい場合などは是非使ってみて下さい。

## 文字の基準となる線（baseline）を調整したい

文字の基準線とは、
アルファベット等の「文字の下端」のことを指します。（以下参照）
小文字の「g」や「y」などは、ベースラインよりも少し下にはみ出て表示されます。
![スクリーンショット 0004-09-09 12.12.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4f071603-6923-b5b2-0b63-92b28772d0b8.png)
（参考）https://qumeru.com/magazine/373

ベースラインを調整したい場合は、
「Base Line」で設定が可能です。

![スクリーンショット 0004-09-09 12.59.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6ba74e1e-a925-f8c6-8d83-7c006bd8126b.png)

試しにタイトル文字をアルファベットに変更し、
「Base Line」の設定値を5dpに変更してみた結果がこちらになります。

左側は、「p」の下部分が少し見切れていますが、
右側は、5dp上部に表示され「p」の文字が綺麗に表示されるようになりました！
|設定前|設定後|
|--|--|
|![befroee.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a3bd6181-28aa-3638-e33a-3ffd34a3037f.png)|![aferrr.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/23879e83-b5d7-bb58-989d-05965e7ce7e0.png)|

ローマ字を表示する際に、バランスを調整したい時など利用してみてくださいね:raised_hand_tone1:

## 打ち消し線（取り消し線）を表示したい
最後に打ち消し線を表示する場合は、
「Strike Through」をONにすることで設定が可能です。

![スクリーンショット 0004-09-09 13.06.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/06dd76bc-d572-e078-8977-1ee8ccab0557.png)

設定した時の表示は以下のようになります。

|設定前|設定後|
|--|--|
|![beforea.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/78c45057-e89e-ca2e-4dad-5e83e75e5436.png)|![IMG_19E192D93E61-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1263641c-e6c4-b505-3bea-64cdf0d514ba.jpeg)|

また線のタイプも何種類か用意されており、
色々選ぶことができるので、好みに合わせて変更してみてくださいね！

|タイプ|表示|
|--|--|
|Thick|![スクリーンショット 0004-09-09 13.09.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a4ea982c-cbb9-b813-8666-0b37c3a5f47e.png)|
|Double|![スクリーンショット 0004-09-09 13.10.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/dab7d884-430a-cd9c-a68f-90e1fdb16dc8.png)|
|Pattern Dot|![スクリーンショット 0004-09-09 13.10.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2c3a418e-1cc6-d10f-5485-d79fec047c22.png)|
|Pattern Dash|![スクリーンショット 0004-09-09 13.11.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6126e695-929e-fc97-c02c-ab15390b0764.png)|
|Pattern Dash Dot|![スクリーンショット 0004-09-09 13.12.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/75261eaa-2e75-013d-a3f7-585727b0baa2.png)|
|Pattern Dash Dot Dot|![スクリーンショット 0004-09-09 13.14.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d2e4fa64-9b42-809d-f7fd-97d04cac212f.png)|
|Pattern Dash Dot Dot|![スクリーンショット 0004-09-09 13.14.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d2e4fa64-9b42-809d-f7fd-97d04cac212f.png)|
|By WordBy Word|![スクリーンショット 0004-09-09 13.16.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5952f865-278f-5178-dafc-c98426cfe2f3.png)|

# まとめ
Label Widgetの設定あれこれについて紹介しました！
画面デザインを作成する上で、何気によく使う機能なので是非参考にしてみてくださいね:relaxed:


# 参考

[Label Widget](https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/Label.htm)
[Base Line](https://docs.kony.com/7_3/konylibrary/visualizer/viz_widget_prog_guide/Content/label.htm)