GridLayoutとRow / Column Span Woe

121

導入AndroidデベロッパーブログポストGridLayoutショーをスパンが自動インデックスの割り当てに影響を与える方法のこの図。

自動インデックス割り当て

私は実際にを使用してそれを実装しようとしていGridLayoutます。ここに私がこれまでに持っているものがあります：

<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.commonsware.android.gridlayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    app:orientation="horizontal"
    app:columnCount="8">

    <Button
        app:layout_columnSpan="2"
        app:layout_rowSpan="2"
        android:layout_gravity="fill_horizontal"
        android:text="@string/string_1"/>

  <Button
    app:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="@string/string_2"/>

  <Button
    app:layout_rowSpan="4"
    android:text="@string/string_3"/>

  <Button
    app:layout_columnSpan="3"
    app:layout_rowSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="@string/string_4"/>

  <Button
    app:layout_columnSpan="3"
    android:layout_gravity="fill_horizontal"
    android:text="@string/string_5"/>

  <Button
    app:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="@string/string_6"/>

  <android.support.v7.widget.Space
    app:layout_column="0"
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

</android.support.v7.widget.GridLayout>

<Space>各列の幅が最小になるように要素を導入する必要がありました。そうでなければ、幅がゼロの列がたくさんあります。

ただし、それらを使用しても、次のようになります。

GridLayoutのサンプル

特に：

  • にもかかわらずandroid:layout_gravity="fill_horizontal"、列スパンを持つ私のウィジェットはスパンされた列を埋めません

  • android:layout_rowSpan値にもかかわらず、行にまたがるものはありません

誰かがブログ投稿から図を再現できますGridLayoutか？

ありがとう！

android  android-gridlayout 
— CommonsWare
ソース
178
私もあなたが質問をすることを推測する:)
— StackOverflowed

回答:

76

かなりハッキーな感じがしますが、必要な範囲を超えて列と行を追加することで、適切な外観を得ることができました。次に、高さを定義する各行のスペースで追加の列を埋め、幅を定義する各列のスペースで追加の行を埋めました。柔軟性を高めるために、これらのスペースサイズをコードで設定して、重みに似たものを提供できると思います。スクリーンショットを追加しようとしましたが、必要な評判がありません。

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="9"
android:orientation="horizontal"
android:rowCount="8" >

<Button
    android:layout_columnSpan="2"
    android:layout_gravity="fill"
    android:layout_rowSpan="2"
    android:text="1" />

<Button
    android:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="2" />

<Button
    android:layout_gravity="fill_vertical"
    android:layout_rowSpan="4"
    android:text="3" />

<Button
    android:layout_columnSpan="3"
    android:layout_gravity="fill"
    android:layout_rowSpan="2"
    android:text="4" />

<Button
    android:layout_columnSpan="3"
    android:layout_gravity="fill_horizontal"
    android:text="5" />

<Button
    android:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="6" />

<Space
    android:layout_width="36dp"
    android:layout_column="0"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="1"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="2"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="3"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="4"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="5"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="6"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="7"
    android:layout_row="7" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="0" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="1" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="2" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="3" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="4" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="5" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="6" />

</GridLayout>

スクリーンショット

— ターニー
ソース
7
まあ、私見はこれまでに提示された他のソリューションよりも徐々にハッキングが少なくなっています-少なくともここでは、ハードワイヤードサイズがSpace要素にあります。今後の読者のためにスクリーンショットを追加しました。ありがとう！
— CommonsWare 2012
なぜrowCount8に設定されているのですか？4行（最大のサイズrowSpan）と追加の1 行が必要なので、5行にする必要がありSpaceます。何が欠けていますか？
— curioustechizen 2012
元の質問の画像からの行数と列数をそのまま使用しました（これはそれ自体がAndroid開発ブログの投稿からのものです）。次に、行と列の数に1を加えて、境界線の外側のスペース用のスペースを作りました。5行でも問題なく機能するはずです。
— kturney
5
この解決策は、以下と<Gridlayout>は対照的にのみ機能することがわかります<android.support.v7.widget.GridLayout>
— Didia
row_spanとcolumn spanを動的に設定するにはどうすればよいですか？
17 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:columnCount="8"
        android:rowCount="7" >

        <TextView
            android:layout_width="50dip"
            android:layout_height="50dip"
            android:layout_columnSpan="2"
            android:layout_rowSpan="2"
            android:background="#a30000"
            android:gravity="center"
            android:text="1"
            android:textColor="@android:color/white"
            android:textSize="20dip" />

        <TextView
            android:layout_width="50dip"
            android:layout_height="25dip"
            android:layout_columnSpan="2"
            android:layout_rowSpan="1"
            android:background="#0c00a3"
            android:gravity="center"
            android:text="2"
            android:textColor="@android:color/white"
            android:textSize="20dip" />

        <TextView
            android:layout_width="25dip"
            android:layout_height="100dip"
            android:layout_columnSpan="1"
            android:layout_rowSpan="4"
            android:background="#00a313"
            android:gravity="center"
            android:text="3"
            android:textColor="@android:color/white"
            android:textSize="20dip" />

        <TextView
            android:layout_width="75dip"
            android:layout_height="50dip"
            android:layout_columnSpan="3"
            android:layout_rowSpan="2"
            android:background="#a29100"
            android:gravity="center"
            android:text="4"
            android:textColor="@android:color/white"
            android:textSize="20dip" />

        <TextView
            android:layout_width="75dip"
            android:layout_height="25dip"
            android:layout_columnSpan="3"
            android:layout_rowSpan="1"
            android:background="#a500ab"
            android:gravity="center"
            android:text="5"
            android:textColor="@android:color/white"
            android:textSize="20dip" />

        <TextView
            android:layout_width="50dip"
            android:layout_height="25dip"
            android:layout_columnSpan="2"
            android:layout_rowSpan="1"
            android:background="#00a9ab"
            android:gravity="center"
            android:text="6"
            android:textColor="@android:color/white"
            android:textSize="20dip" />
    </GridLayout>

</RelativeLayout>

スクリーンショット

— HandlerExploit
ソース
2
ありがとう！興味深いのはGridLayout、Androidサポートパッケージからに切り替えると、レイアウトが壊れて、2つに完全な互換性がないことを示していることです。また、ウィジェットのハードワイヤリングサイズを含まないこれを行う方法があることを本当に望んでいます。他にどのような答えがあるか（ある場合）を確認するために、これを少しの間ロールさせておきます。再度、感謝します！
— CommonsWare 2012
4
「AndroidサポートパッケージからGridLayoutに切り替えると、レイアウトが壊れます」-実際には、バックポートのXML名前空間を使用して、必要なandroid:属性を属性に変換しなかったのは私の責任でしたapp:。バックポートでは機能します。
— CommonsWare 2012
それらのいくつかを動的にサイズ設定する方法を見つけましたが、それは列または行の全幅がすでに隣接するビューによって定義されている場合に限られます。定義されたスパンに応じて、ウェイトのように機能し、スペースを均等に分散するとは思わない。それは完璧ではありませんが、現在のプロジェクトで必要なものに対しては完璧に機能します。
— HandlerExploit
さて、あなたの例は、AbsoluteLayoutのアプローチとRelativeLayoutのアプローチを混ぜたものに似ていますね。これは動的でも移植性でもありません。なぜ正確にこれにGridLayoutが必要なのですか？とにかく、GridLayoutは壊れているか、または未完成です...
— Bondax 2013年
@Bondaxこの実装は、高さ、幅、列幅、および列スパンの両方でグリッド項目を明確に定義します。グリッド（画面の幅）に異なる幅が定義されている場合、グリッドレイアウトは限られたスペース内でグリッドアイテムをフロートします。これはプロジェクトの要件であり、これは問題を完全に解決しました。
— HandlerExploit 2013年
6

列にlayout_gravityとlayout_columntWeightの両方を設定する必要があります

<android.support.v7.widget.GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView android:text="سوم شخص"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        />

    <TextView android:text="دوم شخص"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        />

    <TextView android:text="اول شخص"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        />
 </android.support.v7.widget.GridLayout>
— ホセイン・シャードスト
ソース
2

Android Support V7 GridLayoutライブラリは、重量の原則に対応することで、余剰スペースの分散を容易にします。柱を伸ばすには、その内部のコンポーネントが重量または重力を定義していることを確認してください。列が伸びないようにするには、列のコンポーネントの1つが重量または重力を定義していないことを確認します。このライブラリの依存関係を忘れずに追加してください。build.gradle にcom.android.support:gridlayout-v7:25.0.1を追加します。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:columnCount="2"
app:rowCount="2">

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="First"
    app:layout_columnWeight="1"
    app:layout_rowWeight="1" />

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="Second"
    app:layout_columnWeight="1"
    app:layout_rowWeight="1" />

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="Third"
    app:layout_columnWeight="1"
    app:layout_rowWeight="1" />

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"        
    app:layout_columnWeight="1"
    app:layout_rowWeight="1"
    android:text="fourth"/>

</android.support.v7.widget.GridLayout>
— ペルミタ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.