2016-06-18 13 views
0

私はAlloy frameworkを使ってAppcelerator Studioにモバイルアプリケーションを構築しています。ユーザーインターフェイスを構築するには、*.tssファイル(種類のCSS)を使用し、Titanium.UI.SIZEまたはTitanium.UI.FILLなどの定数をUIコンポーネントの幅と高さのプロパティに使用しています。事前にAppcelerator CSSのような計算方法

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

ありがとう:合金フレームワークで利用できるCSSのCALC方法の一種がある場合

私が思っていた、そのようなことは、このようなサイズの計算を行うことが可能です!

答えて

0

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

alloy.js

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

view.tss

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

あなたのコントローラに値を設定した場合、あなたはグローバルオブジェクトのプロパティと同じように使用する必要はありません。あなたはこの質問に答えるが、これはstackoverflowの答えではないことを

index.js

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

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

+0

情報ありがとう! – revy

-1

まず、.tsは一種の.css :)ではなく、むしろjsonファイルのようなものです。

ここで、合金&チタンをもっと深く学ぶ必要があります。チタンのあらゆる種類の計算を行うことができますが、それ以外の方法があります。おそらくそれを.cssと比較しているため、それを正しくしていない。

まず、合金&チタンがどのようなもので、どのように機能し、どのようにお互いをサポートしているかを知ることをお勧めします。

あなたは正しい道で始めるために絶対に明確なTitanium Docsにいつでも向かうことができます。最初に試してみて、時間をかけて物事を学んでください。私たちはいつもあなたをサポートするためにここにいます。 :)

幸運!

+0

良いです。 StackOverflowでは、答えは答えではなく、ドキュメントへのポインタでなければなりません –

0

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

  1. あなたはalloy.js内部アプリブートストラップの一部として必要なものを事前に計算し、「名前空間の一部として、合金に保存する:

    計算値を持つための解決策として、私は3つの可能な方法を参照してください" - それは"グローバルスコープ "にあることに注意してください - しかし、私はそれがあなたのアプリケーションをダウンさせるものとは思わない。あなたは汚さないようにあなたの名前空間権と使用クロージャを構築してください

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

Alloy.js:

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

ControllerStyle.tssですから、このようなものを持っているでしょうグローバルスコープ。 alloy.jsの詳細については

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

<オール開始=「2」>
  • 第2の解決策は、動的スタイルを使用することです。あなたのコントローラーコードに必要なプロパティを適用することです - コントローラがロードされて速度が遅くなるとjsとネイティブの間の "クロスをブリッジする"ため、これは少なくとも私のお気に入りです。あなたは落ちる。

  • +0

    ありがとう、確かに非常に有用な情報。 – revy

    0

    あなたができることは、あらかじめ計算しておき、計算された幅をtssではなくコントローラファイルに設定することです。

    私がこのようなことを計算する必要があるとき、これを事前に計算して、アプリケーションを使用する目的が複数ある場合は、アプリ全体で使用することができます。 alloy.js

    Alloy.Globals.marginContentWidth = 300; 
    

    それとも、何かを計算したTiプラットフォームから任意のContantをを使用することができ、例えばこれを行います。今tssに、あなたはこれがあなたのために動作します。この

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

    を使用することができます。

    もう1つのことは、あなたがウェブサイトのようにモバイルUIについて考えることではありません。モバイルでは、より柔軟に考える必要があります。幅を20pxにする理由の1つは、両側に10pxのマージンが必要なためです。

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

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

    これはあなたの問題を解決する必要があり、うまく