0

Alloy フレームワークを使用してAppcelerator Studioでモバイル アプリケーションを構築しています。ユーザー インターフェイスを構築するために、*.tssファイル (css のようなもの) を使用し、UI コンポーネントの幅と高さのプロパティに対して、Titanium.UI.SIZEまたはのような定数を使用しています。Titanium.UI.FILL

次のようなサイズ計算を行うことができるような、Alloyフレームワークで利用可能なCSS CALCメソッドのようなものがあるかどうか疑問に思っていました:

width: calc(Titanium.UI.FILL - 20px)
height: calc(80% - 30px)

前もって感謝します！

4

4 に答える 4

0

TSS (チタン スタイル シート) は CSS ではありません。これは純粋に宣言型の json ファイルですが、内部で一部の Titanium コードを使用したり、関数を使用して翻訳しTi.UI.FILLたりTi.UI.SIZEすることができますL()。

値を計算するための解決策として、次の 3 つの方法が考えられます。

  1. 内部のアプリのブートストラップの一部として必要なものを事前に計算しalloy.js、「名前空間」の一部として合金に保存します-「グローバルスコープ」に存在することに注意してください-しかし、私はそれが何になるとは思いませんアプリをダウンさせます。したがって、次のようなものになります。

Alloy.js:

Alloy.UI.MyScreen.MyComponent.height = DO YOU CALCULATION HERE;

ControllerStyle.tss:

"#myComponent" : {
    height: Alloy.UI.MyScreen.MyComponent.height
}

名前空間を正しく構築し、クロージャを使用してグローバル スコープを汚染しないようにしてください。

詳細については、alloy.jsこちらを参照してください: http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_Controllers-section-34636384_AlloyControllers-InitializerFile(alloy.js)

  1. 2 番目の解決策は、動的スタイルを使用することです。ここを参照してください: http://docs.appcelerator.com/platform/latest/#!/guide/Dynamic_Styles

  2. 3 番目の解決策は、必要なプロパティをコントローラー コードに適用することです。これは、コントローラーが読み込まれて速度が低下するときに、js とネイティブの間の「橋を渡る」ことを強制するため、私の最も嫌いな方法です。

于 2016-06-19T12:07:48.220 に答える
0

できることの 1 つは、事前に計算することです。もう 1 つは、計算された幅を tss ではなくコントローラー ファイルに設定することです。

このようなものを計算する必要がある場合、私がする傾向があるのは、これを事前に計算し、それを使用する目的が複数ある場合はアプリ全体で使用することです。たとえば、これを行いますalloy.js

Alloy.Globals.marginContentWidth = 300;

または、Ti プラットフォームの任意の定数を使用して何かを計算することもできます。今、tssあなたはこれを使うことができます

"#myUI": {
    width: Alloy.Globals.marginContentWidth
}

これはあなたのために働くでしょう。

もう 1 つのことは、Web サイトの場合のようにモバイル UI について考えないことです。モバイルでは、より柔軟に考える必要があります。おそらく幅 - 20px が必要な理由の 1 つは、両側に 10px の余白が必要だからです。

まず... px を使用しないでください。モバイル開発ではポイント または が必要ですdpが、これがデフォルトなのでそのまま使用できます20。より柔軟に処理するには、次のようにします。

width: Ti.UI.FILL,
right: 10,
left: 10

これで問題がうまく解決するはずです

于 2016-06-19T12:07:55.190 に答える
0

.tss ファイル内で幅または高さを設定する場合は、Alloy グローバル オブジェクト (Alloy.CFG.yourVar または Alloy.Globals.yourVar) のプロパティに値を設定する必要があります。

Alloy.js

Alloy.CFG.width = Ti.Platform.displayCaps.platformWidth - 20;

view.tss

"#myView":{
    width:Alloy.CFG.width
}

コントローラーで値を設定する場合、グローバル オブジェクト プロパティのように使用する必要はありません。

index.js

$.myView.width = Ti.Platform.displayCaps.platformWidth - 20;

http://docs.appcelerator.com/platform/latest/#!/api/Titanium.Platform.DisplayCaps-property-platformHeight

于 2016-06-20T08:53:38.560 に答える
-1

まず、.tss は一種の .css ではありません :)、むしろ一種の json ファイルです。

今あなたがしたいことは、チタンであらゆる種類の計算を行うことができるので、合金とチタンをもう少し深く学ぶ必要がありますが、他の方法があり、.css と比較しているので、正しく理解していない可能性があります。 .

ですから、まず合金とチタンとは何か、それらがどのように機能し、どのように相互にサポートするかを学ぶことをお勧めします.

正しい道を歩み始めるための完全に明確な Titanium Docs にいつでもアクセスできます。まずは試してみてください。時間をかけて学習してください。いつでもサポートいたします。:)

幸運を！

于 2016-06-18T16:15:38.363 に答える