web-dev-qa-db-ja.com

Xamarinフォーム-AbsoluteLayout-ポジションの仕組み

私はAbsoluteLayoutを使用してXamarin.Formsを操作していますが、要素の配置を処理する方法を理解できていません。

私は比例値を使用しているので、要素をAbsoluteLayout.LayoutBounds="1, 0.05, 0.15, 0.1"各値は比例です(したがって、フラグは「すべて」ですAbsoluteLayout.LayoutFlags="All"

画面の上部/右側に配置されます。ただし、少し外では場所をとりません。それはどういう意味ですか?外に出ると、各要素は画面に再配置されますか?

enter image description here

しかし、今、別の質問があります。要素を配置するとき、X/Y位置に基づくものは何ですか?中心か別の点ですか?

enter image description here

この例では、0.15を試してみましたが、レンダリングが少しおかしいので、0を設定してから、レンダリングが必要なものと一致します。

「テストしてみるとわかります。」と言うこともできますが、どのように機能するのかがわからないため、デザイナーと私がすべての要素を配置するのは時間の無駄です。したがって、デバッグを試してみます。

また、デザイナーが作成したデザインについてのポジションを生成するソフトウェアが存在するかどうかを調べています。要素の位置X/Yをパーセントで意味します。

少し早いですがお礼を !

10
Emixam23

AbsoluteLayoutFlag.Allでは、Rectangleの境界パラメーターには次の意味があります。

  • xは、コントロールの左側にある残りのスペースの割合(つまり、親の幅-コントロールの幅)を意味します
  • yは、コントロールの上部にある残りのスペース(つまり、親の高さ-コントロールの高さ)のパーセンテージを意味します
  • widthは、親の幅のパーセンテージで表したコントロールの幅です。
  • heightは、親の高さのパーセンテージで表したコントロールの高さです。

幅と高さは、人々が通常期待するものです。しかし、xとyは、「左」と「上」に慣れているわけではありません。したがって、左パーセンテージをxに、トップパーセンテージをyに変換するコンバーターを作成できます。

x =左/(1-幅)
y =上/(1-高さ)

23
François
<AbsoluteLayout BackgroundColor="Yellow">
<BoxView
    Color="Red"
    AbsoluteLayout.LayoutBounds="1.0, 1.0, 0.5, 0.5"
    AbsoluteLayout.LayoutFlags="All" />

<BoxView
    Color="Green"
    WidthRequest="50"
    HeightRequest="50"
    AbsoluteLayout.LayoutBounds="0.1, 0.1, AutoSize, AutoSize"
    AbsoluteLayout.LayoutFlags="PositionProportional" />

<BoxView
    Color="Blue"
    AbsoluteLayout.LayoutBounds="0.25, 0.25, 0.5, 0.5"
    AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>

enter image description here

AbsoluteLayoutを調査したとき、私はこのサンプルを作成し、

テストしてみると

私の調査から決定したこと:XYViewの左上隅の座標です。それは相対的な位置です。ご覧のように、赤い長方形1.0, 1.0は中心位置なので、私が理解しているように、画面の100%の幅は2.0(高さも同じ)。 AbsoluteLayout内のすべてのビューは、親AbsoluteLayoutの値に依存して配置されました。

編集:

XYViewの中心座標であり、左上隅ではありません。そしてWidthの100%は1.0

8

X && Yは要素の中心です

1
Emixam23

私はいくつかのテストを行ったところ、AbsoluteLayoutFlag.Allを使用すると、基本的に、パーセンテージとして指定されたX値は、アンカーが長方形のどこにあるかを表しています。 X = 10%の場合と同様に、アンカーは長方形の左から10%です。

Xが0.1で、幅が20%の場合。長さの90%が右に移動し、10%が左に移動します。

X = 0.5で、特定の幅が20%の場合。 10%は左に、10%は右に移動します。

X境界の式

四角形の変数(Ax、Ay、Wx、Wy)

W-必要な幅

Ax-X値。 (アンカー位置)

X1-左側を基準とした左上隅のX位置の値(X = 0)

X2-左側を基準とした右上隅のx位置の値(X = 0)

式にはアンカー値の5つの可能なシナリオがあります

Ax = 0:

X1 = 0&X2 = Wx

Ax = 1:

X2 = 1&X1 =(1-Wx)

Ax = 0.5

X1 = Ax.5)(Wx)

X2 = Ax +(0.5)(Wx)

---(0 <Ax <0.5

X1 = AxAx)(Wx)

X2 = Ax +(1-Ax)(Wx)

---(0.5 <Ax <1

X1 = Ax-(Ax)(Wx)

X2 = Ax +(1-Ax)(Wx)

0
Janwilx72

遅い答えとして、AbsoluteLayoutのフォークを備えたnugetパッケージを配置しましたが、期待どおりに機能しています。

NugetパッケージをインストールするSmartMachines.AbsoluteLayout、名前空間を追加xmlns:sm="clr-namespace:SmartMachines;Assembly=AbsoluteLayout"を使用すると、ネイティブXamarinとまったく同じAbsoluteLayoutが作成されますが、プロポーショナルアライメント動作が期待されます。

それがグーグルとデバッグで他の人々を数時間節約することを願っています。

0
smartmachines