ユーザーインターフェイス / コンポーネント / フォーマットされた文字列

フォーマットされた文字列

NativeScriptには、さまざまなテキスト変換および装飾をサポートするためのFormattedStringと呼ばれる特別なクラスがあります。 FormattedStringクラスは、Label、TextView、TextField、 Buttonなどのすべてのテキスト関連コンポーネントで使用できます。

使用法

フォーマットされた文字列を持つLabel

<Label>
	<FormattedString>
		<Span text="Words " color="#006600">
		</Span>
		<Span text="with " color="#990000" fontWeight="Bold">
		</Span>
		<Span text="different " color="#ffcc00">
		</Span>
		<Span text="color.">
		</Span>
	</FormattedString>
</Label>

フォーマットされた文字列を持つTextField

<TextField>
	<FormattedString>
		<Span text="Formatted " fontSize="16">
		</Span>
		<Span text="String " fontSize="18">
		</Span>
		<Span text="TextField" fontSize="22">
		</Span>
	</FormattedString>
</TextField>

フォーマットされた文字列を持つTextView

<TextView>
	<FormattedString>
		<Span text="Formatted ">
		</Span>
		<Span text="String ">
		</Span>
		<Span text="TextView" fontSize="20" color="#990000">
		</Span>
	</FormattedString>
</TextView>

フォーマットされた文字列を持つButton

<Button class="-primary p-8">
	<FormattedString>
		<Span text="Formatted ">
		</Span>
		<Span text="String ">
		</Span>
		<Span text="Button" backgroundColor="#0066ff">
		</Span>
	</FormattedString>
</Button>
デモソース

ヒントと手法

コードビハインドによるボタンの作成

FormattedStringsは、コードビハインドを介して定義することもできます。

フォーマットされた文字列を持つLabel

const label = new Label();

const firstLabelSpan = new Span();
firstLabelSpan.text = "Formatted String ";
const secondLabelSpan = new Span();
secondLabelSpan.text = "Label";

const formattedStringLabel = new FormattedString();
formattedStringLabel.spans.push(firstLabelSpan);
formattedStringLabel.spans.push(secondLabelSpan);

label.formattedText = formattedStringLabel;
const label = new Label();

const firstLabelSpan = new Span();
firstLabelSpan.text = "Formatted String ";
const secondLabelSpan = new Span();
secondLabelSpan.text = "Label";

const formattedStringLabel = new FormattedString();
formattedStringLabel.spans.push(firstLabelSpan);
formattedStringLabel.spans.push(secondLabelSpan);

label.formattedText = formattedStringLabel;

フォーマットされた文字列を持つTextField

const textField = new TextField();

const formattedStringTextField = new FormattedString();
const firstTextFieldSpan = new Span();
const secondTextFieldSpan = new Span();

firstTextFieldSpan.fontSize = 15;
firstTextFieldSpan.text = "Formatted String ";
secondTextFieldSpan.text = "TextField";

formattedStringTextField.spans.push(firstTextFieldSpan);
formattedStringTextField.spans.push(secondTextFieldSpan);

textField.formattedText = formattedStringTextField;
const textField = new TextField();

const formattedStringTextField = new FormattedString();
const firstTextFieldSpan = new Span();
const secondTextFieldSpan = new Span();

firstTextFieldSpan.fontSize = 15;
firstTextFieldSpan.text = "Formatted String ";
secondTextFieldSpan.text = "TextField";

formattedStringTextField.spans.push(firstTextFieldSpan);
formattedStringTextField.spans.push(secondTextFieldSpan);

textField.formattedText = formattedStringTextField;

フォーマットされた文字列を持つTextView

const textView = new TextView();

const formattedStringTextView = new FormattedString();
const firstTextViewSpan = new Span();
const secondTextViewSpan = new Span();

firstTextViewSpan.fontSize = 15;
firstTextViewSpan.text = "Formatted String ";
secondTextViewSpan.text = "TextView";

formattedStringTextView.spans.push(firstTextViewSpan);
formattedStringTextView.spans.push(secondTextViewSpan);

textView.formattedText = formattedStringTextView;
const textView = new TextView();

const formattedStringTextView = new FormattedString();
const firstTextViewSpan = new Span();
const secondTextViewSpan = new Span();

firstTextViewSpan.fontSize = 15;
firstTextViewSpan.text = "Formatted String ";
secondTextViewSpan.text = "TextView";

formattedStringTextView.spans.push(firstTextViewSpan);
formattedStringTextView.spans.push(secondTextViewSpan);

textView.formattedText = formattedStringTextView;

フォーマットされた文字列を持つButton

const button = new Button();

const formattedStringButton = new FormattedString();
const firstButtonSpan = new Span();
const secondButtonSpan = new Span();

firstButtonSpan.text = "Formatted String ";
secondButtonSpan.text = "Button";

formattedStringButton.spans.push(firstButtonSpan);
formattedStringButton.spans.push(secondButtonSpan);

button.formattedText = formattedStringButton;
const button = new Button();

const formattedStringButton = new FormattedString();
const firstButtonSpan = new Span();
const secondButtonSpan = new Span();

firstButtonSpan.text = "Formatted String ";
secondButtonSpan.text = "Button";

formattedStringButton.spans.push(firstButtonSpan);
formattedStringButton.spans.push(secondButtonSpan);

button.formattedText = formattedStringButton;

プロパティ

名前 タイプ 説明
spans ObservableArray<Span> 一般的なテキストプロパティを定義するために使用されるSpanオブジェクトの監視可能なコレクション。

APIリファレンス

名前 タイプ
tns-core-modules/text/formatted-stringModule
FormattedStringClass
SpanClass
ViewBaseClass
入門
コアコンセプト
ユーザーインターフェース
ツール
ハードウェアアクセス
プラグインの開発
リリース
アプリテンプレート
パフォーマンスの最適化
フレームワークモジュール
ガイド
サポートを受ける
トラブルシューティング
Siedkick
NativeScriptドキュメントのライセンス