ユーザーインターフェイス /
コンポーネント / テキストビュー
テキストビュー
このTextViewコンポーネントを使用して、アプリに大きなテキストコンテンツを入力できます。
editableプロパティをfalseに設定することにより、任意のコンテンツを表示することもできます。
使用法
<TextView loaded="onTextViewLoaded" hint="Enter Date" text="{{ viewDate }}" secure="false" keyboardType="datetime" returnKeyType="done" autocorrect="false" maxLength="10">
</TextView>
const observableModule = require("tns-core-modules/data/observable");
function onNavigatingTo(args) {
const page = args.object;
const vm = new observableModule.Observable();
vm.set("viewDate", "");
page.bindingContext = vm;
}
function onTextViewLoaded(argsloaded) {
const textView = argsloaded.object;
textView.on("focus", (args) => {
const view = args.object;
console.log("On TextView focus");
});
textView.on("blur", (args) => {
const view = args.object;
console.log("On TextView blur");
});
}
exports.onNavigatingTo = onNavigatingTo;
exports.onTextViewLoaded = onTextViewLoaded;
import {Observable} from "tns-core-modules/data/observable";
import {Page} from "tns-core-modules/ui/page";
import {TextView} from "tns-core-modules/ui/text-view";
export function onNavigatingTo(args) {
const page: Page = <Page> args.object;
const vm = new Observable();
vm.set("viewDate", "");
page.bindingContext = vm;
}
export function onTextViewLoaded(argsloaded) {
let textView: TextView = <TextView> argsloaded.object;
textView.on("focus", (args) => {
let view: TextView = <TextView> args.object;
console.log("On TextView focus");
});
textView.on("blur", (args) => {
let view: TextView = <TextView> args.object;
console.log("On TextView blur");
});
}
デモソース
コードビハインドによるTextViewコンポーネントの作成
<StackLayout id="stackLayoutId">
<Button text="Disable third TextView" tap="{{ onTap }}" />
</StackLayout>
function onNavigatingTo(args) {
const page = args.object;
const vm = new observableModule.Observable();
// changing TextView editable property value on button tap
vm.set("onTap", (btargs) => {
const button = btargs.object;
const thirdTextview = btargs.object.page.getViewById("thirdTextViewId");
thirdTextview.editable = !thirdTextview.editable;
if (thirdTextview.editable) {
button.text = "Disable third TextView";
} else {
button.text = "Enable third TextView";
}
});
page.bindingContext = vm;
}
function onPageLoaded(args) {
const page = args.object;
const vm = page.bindingContext;
const stackLayout = page.getViewById("stackLayoutId");
// creating new TextView and changing the hint
const firstTextview = new textViewModule.TextView();
firstTextview.hint = "Enter text";
// creating new TextView and binding the text property
const secondTextview = new textViewModule.TextView();
const options = {
sourceProperty: "text",
targetProperty: "secondTextProperty"
};
secondTextview.bind(options, vm);
vm.set("secondTextProperty", "Sample TextView text");
// creating new TextView and changing the text
const thirdTextview = new textViewModule.TextView();
thirdTextview.id = "thirdTextViewId";
thirdTextview.text = "Third TextView";
// adding the newly created TextViews in a StackLayout
stackLayout.addChild(firstTextview);
stackLayout.addChild(secondTextview);
stackLayout.addChild(thirdTextview);
}
exports.onNavigatingTo = onNavigatingTo;
exports.onPageLoaded = onPageLoaded;
export function onNavigatingTo(args) {
const page: Page = <Page> args.object;
const vm = new Observable();
// changing TextView editable property value on button tap
vm.set("onTap", (btargs) => {
const button: Button = <Button> btargs.object;
const thirdTextview = (<TextView>button.page.getViewById("thirdTextViewId"));
thirdTextview.editable = !thirdTextview.editable;
if (thirdTextview.editable) {
button.text = "Disable third TextView";
} else {
button.text = "Enable third TextView";
}
});
page.bindingContext = vm;
}
export function onPageLoaded(args) {
const page: Page = <Page> args.object;
const vm = page.bindingContext;
const stackLayout: StackLayout = <StackLayout> page.getViewById("stackLayoutId");
// creating new TextView and changing the hint
const firstTextview = new TextView();
firstTextview.hint = "Enter text";
// creating new TextView and binding the text property
const secondTextview = new TextView();
const options = {
sourceProperty: "text",
targetProperty: "secondTextProperty"
};
secondTextview.bind(options, vm);
vm.set("secondTextProperty", "Sample TextView text");
// creating new TextView and changing the text
const thirdTextview = new TextView();
thirdTextview.id = "thirdTextViewId";
thirdTextview.text = "Third TextView";
// adding the newly created TextViews in a StackLayout
stackLayout.addChild(firstTextview);
stackLayout.addChild(secondTextview);
stackLayout.addChild(thirdTextview);
}
プロパティ
| 名前 | タイプ | 説明 |
|---|
autocapitalizationType | "AutocapitalizationType" | 自動大文字化タイプを取得または設定します。 |
autocorrect | boolean | 自動修正を有効または無効にします。 |
keyboardType | "KeyboardType" | ソフトキーボードのタイプを取得または設定します。 |
letterSpacing | number | レタースペーススタイルプロパティを取得または設定します。 |
lineHiehgt | number | 行の高さのスタイルプロパティを取得または設定します。 |
maxLength | number | 入力として許可されるシンボルの最大数を取得または設定します。 |
returnKeyType | "ReturnKeyType" | ソフトキーボードのReturnキーのフレーバーを取得または設定します。 |
secure | string | テキストフィールドがパスワード入力用かどうかを取得または設定します。 |
text | string | テキストを取得または設定します。 |
textAlignment | TextAlignment | テキストの配置を取得または設定します。 |
textDecoration | TextDecoration | テキストの装飾を取得または設定します。 |
textTransform | TextTransform | テキストの変換を取得または設定します。 |
whiteSpace | WhiteSpace | 空白スタイルのプロパティを取得または設定します。 |
メソッド
| 名前 | 説明 |
|---|
| focus |
ビューのフォーカス取得を試みます。
このビューまたはその子孫の1つが実際にフォーカスを取得したかどうかを示す値を返します。返り値の型はbooleanです。
|
| dismissSoftInput |
ソフト入力手段（通常はソフトキーボード）を非表示にします。 |
イベント
| 名前 | 説明 |
|---|
| blur | テキストフィールドがフォーカスされていないときに発生します。 |
| focus | テキストフィールドがフォーカスされているときに発生します。 |
| textChange | 新しいテキスト入力があると発生します。 |
APIリファレンス
ネイティブコンポーネント