web-dev-qa-db-ja.com

GridLayoutは列内で子を整列します

6人の子供で構成されるGridLayoutがあります。列数は2です。左側の列の子のlayout_gravityはstart|end|fill_horizontalで、layout_widthは0dpであるため、使用可能なすべてのスペースがいっぱいになります。

これは素晴らしいことであり、以下に示す出力が得られます。 enter image description here

ビュー4、5、および6は、必要なだけの大きさです。とてもかっこいい。ビュー4、5、および6をコンテナの右側に揃えたいのですが、これは難しいことがわかりました。 GridLayoutが列の柔軟性を決定する方法のため、右側の列のビューにrightのlayout_gravityを与えるとレイアウトが台無しになります。最初の列のビューは、レイアウトの残りの幅を埋めなくなりました。 （私の理解から、これは両方の列に水平重力を定義する子があるため、GridLayoutが1つの列をフレキシブルとしてマークできなくなったためです）。

これを達成する方法はありますか？ LinearLayoutsのネストにはあまり興味がありません。以下は私の望ましい結果です。

enter image description here

参考までに、現在のビュー階層XMLは次のようになります...

<GridLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:columnCount="2">

    <View
        Android:id="@+id/view1"
        Android:layout_gravity="start|end|fill_horizontal" />

    <View
        Android:id="@+id/view4" />

    <View
        Android:id="@+id/view2"
        Android:layout_gravity="start|end|fill_horizontal" />

    <View
        Android:id="@+id/view5" />

    <View
        Android:id="@+id/view3"
        Android:layout_gravity="start|end|fill_horizontal" />

    <View
        Android:id="@+id/view6" />

</GridLayout>
androidandroid-gridlayout
14
Chris Horner

GridLayout のドキュメントから：

過剰なスペースの分布

同じ行または列グループ内の複数のコンポーネントは、並行して動作すると見なされます。このようなグループは、その中のすべてのコンポーネントが柔軟である場合にのみ柔軟です。代わりに、共通の境界の両側にある行グループと列グループは、直列に動作すると見なされます。 これらの2つの要素で構成される複合グループは、その要素の1つが柔軟である場合、柔軟性があります。

柱を伸ばすには、その内部のすべてのコンポーネントが重力を定義していることを確認してください。列が伸びないようにするには、列のコンポーネントの1つが重力を定義していないことを確認します。

柔軟性の原則が完全な曖昧性解消を提供しない場合、GridLayoutのアルゴリズムは、右端と下端に近い行と列を優先します。

（強調鉱山）

したがって、次の出力を設計するには： enter image description here

説明：

enter image description here

注意：

  • 右側の列の最大幅コンポーネントの重力を軸（上、下、左、右など）に揃えないでください。ビューが軸に対してw.r.tに位置合わせされている場合、複合グループが柔軟性を失うため、ビューは拡大しません。これにより、複合グループ内の他の要素が縮小されます（fill_horizo​​ntalが指定されていても、柔軟でない複合グループでは効果がありません）。最も幅の広いコンポーネントの幅は、グリッドの右側の列の幅になります。

  • コンテンツの長さが長くなったときにテキストを折り返す場合は、ビューの幅を0dp（Android:layout_width="0dp"）、グリッドレイアウトが動的に幅を計算するように：

enter image description here

グリッドレイアウトのXML：

<GridLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    Android:alignmentMode="alignBounds"
    Android:background="#ffffffff"
    Android:columnCount="6"
    Android:columnOrderPreserved="false"
    Android:orientation="horizontal"
    Android:padding="5dp"
    Android:useDefaultMargins="true" >

    <Button
        Android:id="@+id/view1"
        Android:layout_width="0dp"
        Android:layout_columnSpan="4"
        Android:layout_gravity="left|fill"
        Android:background="#ff00BFFF"
        Android:text="View 1" />

    <Button
        Android:id="@+id/view4"
        Android:layout_columnSpan="2"
        Android:layout_gravity="right|clip_horizontal"
        Android:background="#ffff0000"
        Android:padding="5dp"
        Android:text="hi"
        Android:textColor="#ffffffff" />

    <Button
        Android:id="@+id/view2"
        Android:layout_width="0dp"
        Android:layout_columnSpan="4"
        Android:layout_gravity="left|fill"
        Android:background="#ff00ff00"
        Android:text="View 2 has a very very very long text" />

    <Button
        Android:id="@+id/view5"
        Android:layout_columnSpan="2"
        Android:layout_gravity="clip_horizontal"
        Android:background="#ffDDA0DD"
        Android:padding="5dp"
        Android:text="hello something"
        Android:textColor="#ffffffff" />

    <Button
        Android:id="@+id/view3"
        Android:layout_width="0dp"
        Android:layout_columnSpan="4"
        Android:layout_gravity="left|fill"
        Android:background="#ffffD700"
        Android:text="View 3 has a very very very long text" />

    <Button
        Android:id="@+id/view6"
        Android:layout_columnSpan="2"
        Android:layout_gravity="clip_horizontal|right"
        Android:background="#ff4169E1"
        Android:padding="5dp"
        Android:text="hello world"
        Android:textColor="#ffffffff" />

</GridLayout>
17
Infinite Recursion

私の答えを修正して、別のアプローチを使用させてください。これはレイアウトファイルです。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/container"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:columnCount="2" >


<TextView
    Android:id="@+id/TextView1"
    Android:layout_column="0"
    Android:layout_columnSpan="1"
    Android:layout_row="0"
    Android:background="#87CEFA"
    Android:text="@string/view1" />

<TextView
    Android:id="@+id/TextView4"
    Android:gravity="right"
    Android:layout_column="1"
    Android:layout_columnSpan="1"
    Android:layout_row="0"
    Android:layout_gravity="right"
    Android:background="#FF3030"
    Android:text="@string/view4" />

<TextView
    Android:id="@+id/TextView2"
    Android:layout_column="0"
    Android:layout_columnSpan="1"
    Android:layout_row="1"
    Android:width="0dp"
    Android:layout_gravity="fill_horizontal"
    Android:background="#90EE90"
    Android:text="@string/view2" />

<TextView
    Android:id="@+id/TextView5"
    Android:gravity="right"
    Android:layout_column="1"
    Android:layout_columnSpan="1"
    Android:layout_row="1"
    Android:background="#EE82EE"
    Android:paddingLeft="36dp"
    Android:layout_gravity="right"
    Android:text="@string/view5" />

<TextView
    Android:id="@+id/TextView3"
    Android:layout_column="0"
    Android:layout_columnSpan="1"
    Android:layout_row="2"
    Android:width="0dp"
    Android:layout_gravity="fill_horizontal"
    Android:background="#EEEE00"
    Android:text="@string/view3" />

<TextView
    Android:id="@+id/TextView6"
    Android:gravity="right"
    Android:layout_column="1"
    Android:layout_columnSpan="1"
    Android:layout_row="2"
    Android:background="#EE7621"
    Android:layout_gravity="right"
    Android:text="@string/view6" />

</GridLayout>

そしてここに結果があります：

enter image description here

両方の列の幅はコンテンツによって決まります。ビュー5では、左側にパディングを追加しました。つまり、パディングを使用してセルの幅（および高さ）を拡張できます。これは機能しますか？

1
user3460486