android - 異種の GridLayout

Question

以下のレイアウトを実装しようとしています。

ターゲットレイアウト

GridLayoutは私のニーズに適していると思いますが、2 時間の闘争の後、同様のレイアウトを作成することさえできませんでした。 .

ここでボタンを選択したので、境界を超えていることがわかります。

関連する xml コードは次のとおりです: https://gist.github.com/2834492

ネストされた線形レイアウトで同様のレイアウトに到達しましたが、さまざまな画面サイズに合わせて適切にサイズ変更することはできません。

UPDATE - おおよその LinearLayout 実装:

XML コード: https://gist.github.com/cdoger/2835887 ただし、問題は、画面構成が異なるいくつかのスクリーンショットで適切にサイズ変更されないことです。

TLDR: 最初の図のように、GridLayout を使用した異種レイアウトの実装を誰かに見せてもらえますか?

score 18 · Accepted Answer

あなたが直面している問題は、GridLayout の不適切な使用によるものです。GridLayout はその子をグリッドに表示するように作成されており、GridLayout を拡張せずにそれをオーバーライドしようとしています。必要なことはコードで実現できますが (numcolumns と columnsize を使用)、大量のコードがなければ複数の画面サイズでは役に立ちません。

大量のハッキングを必要としない唯一の適切なソリューションは、LinearLayout と RelativeLayout の両方を賢明に使用することです。LinearLayout は、項目を一列にドロップするように作られているため (水平または垂直のみ)、排他的に使用しないでください。これは、下の 4 つのボタンを試してみると特に顕著になります。上記のボタンは LinearLayout を使用して簡単に作成できますが、下の 4 つのボタンには RelativeLayout が必要です。

注: RelativeLayout は、使用経験がほとんどない人にとっては少し扱いにくい場合があります。落とし穴には次のようなものがあります: 子が重なっている、子が画面の外に出ている、高さと幅のレンダリングが不適切に適用されている。例が必要な場合はお知らせください。回答を編集します。

最後の注意: 私は、現在のフレームワークオブジェクトを独自の方法で利用することに賛成であり、要求されたソリューションを提供することを心から望んでいます。ただし、質問の制約を考えると、解決策は実行可能ではありません。

(改訂) 解決策 1

昨夜の慎重な検討の後、これは純粋な LinearLayout で達成されるかもしれません。私はこのソリューションが好きではありませんが、マルチスクリーン対応であり、ツールを必要としません。Google の開発者によると、layout_weight プロパティが原因で UI の読み込みが遅くなる可能性があるため、LinearLayout が多すぎる場合は注意が必要です。家に帰ると、RelativeLayout を利用した 2 つ目のソリューションが提供されます。現在テスト済みこれにより、すべての画面サイズと向きで必要なレイアウトパラメータが提供されます。

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" > 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">
        <LinearLayout 
            android:layout_width="match_parent" 
            android:layout_height="0dp" 
            android:layout_weight="1" 
            android:orientation="horizontal"> 
            <Button 
                android:id="@+id/Button01" 
                android:layout_width="0" 
                android:layout_height="match_parent" 
                android:layout_weight="1" 
                android:text="Button" />     
            <Button 
                android:id="@+id/Button02" 
                android:layout_width="0" 
                android:layout_height="match_parent" 
                android:layout_weight="1" 
                android:text="Button" />     
        </LinearLayout> 
        <Button 
            android:id="@+id/button3" 
            android:layout_width="match_parent" 
            android:layout_height="0dp"
            android:layout_weight="1" 
            android:text="Button" />   
        <LinearLayout 
            android:layout_width="match_parent" 
            android:layout_height="0dp" 
            android:layout_weight="1.00"
            android:orientation="horizontal">  
            <Button 
                android:id="@+id/button1" 
                android:layout_width="0dp" 
                android:layout_height="match_parent" 
                android:layout_weight="1" 
                android:text="Button" />   
            <Button 
                android:id="@+id/button2" 
                android:layout_width="0dp" 
                android:layout_height="match_parent" 
                android:layout_weight="1" 
                android:text="Button" />     
        </LinearLayout>
    </LinearLayout>    
    <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="0dp" 
        android:layout_weight="1" 
        android:orientation="horizontal">     
        <LinearLayout 
            android:layout_width="0dp" 
            android:layout_height="match_parent" 
            android:layout_weight="1" 
            android:orientation="vertical" >    
            <Button 
                android:id="@+id/button4" 
                android:layout_width="match_parent" 
                android:layout_height="0dp"
                android:layout_weight="1" 
                android:text="Button" />     
            <Button 
                android:id="@+id/button5" 
                android:layout_width="match_parent" 
                android:layout_height="0dp" 
                android:layout_weight="2" 
                android:text="Button" />     
        </LinearLayout>     
        <LinearLayout 
            android:layout_width="0dp" 
            android:layout_height="match_parent" 
            android:layout_weight="1" 
            android:orientation="vertical" > 
            <Button 
                android:id="@+id/button6" 
                android:layout_width="match_parent" 
                android:layout_height="0dp" 
                android:layout_weight="2" 
                android:text="Button" /> 
            <Button 
                android:id="@+id/button7" 
                android:layout_width="match_parent" 
                android:layout_height="0dp" 
                android:layout_weight="1" 
                android:text="Button" /> 
        </LinearLayout> 
    </LinearLayout> 
</LinearLayout>

解決策 1 の説明

LinearLayouts の鍵は、命令を個別の Layouts として定義し、それらに他のものをネストすることです。より多くの次元に制約を適用すると、他のものをカプセル化するために、より多くの LinearLayouts を追加する必要があります。あなたの場合、プロポーションを維持するために、さらに2人の親を持つことが重要でした. 別のレベルを追加する必要がある場合の優れた指標は、整数値以外のものを使用して layout_weight を利用する必要がある場合です。正しく計算するのが難しくなります。そこから、それを列に分割するのは比較的簡単でした。

解決策 2 (失敗)

RelativeLayout と "struts" を使用して望ましい結果を得ることができましたが、高さが 2 ボタンの倍数のレイアウトでしか実現できませんでした。レイアウトのレベルが大幅に削減されるため、このようなトリックは素晴らしいので、私は純粋な XML ソリューションに取り組み、達成した場合はここに回答を投稿します。それまでの間、上記の LinearLayout はニーズに完全に適合するはずです。

score 10 · Accepted Answer

このような？

ここに画像の説明を入力してください

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.54" >
        <Button
            android:id="@+id/Button01"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.00"
            android:text="Button" />    
        <Button
            android:id="@+id/Button02"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.00"
            android:text="Button" />    
    </LinearLayout>
    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="99dp" > 
        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button" />  
        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button" />    
    </LinearLayout>   
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >    
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >   
            <Button
                android:id="@+id/button4"
                android:layout_width="match_parent"
                android:layout_height="152dp"
                android:text="Button" />    
            <Button
                android:id="@+id/button5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />    
        </LinearLayout>    
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >
            <Button
                android:id="@+id/button6"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />
            <Button
                android:id="@+id/button7"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

score 8 · Accepted Answer

多くの人が言っているように、ネストされた線形レイアウトがここで勝つ唯一の方法のようです。一部のソリューションでは、レイアウトパラメータを最も柔軟な方法で使用していません。以下のコードは、アスペクト比の変更に対して堅牢な方法でそれを実行しようとしています。詳細はコメント欄にあります。

ここに画像の説明を入力してください

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- First row. -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <!-- Equal weights cause two columns of equal width. -->

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="A" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="B" />
    </LinearLayout>

    <!-- Second row. -->

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="C" />

    <!-- Third row. -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <!-- Equal weights cause two columns of equal width. -->

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="D" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="E" />
    </LinearLayout>

    <!-- Uneven fourth and fifth rows. -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:baselineAligned="false" >

        <!-- Left column. Equal weight with right column gives them equal width. -->

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >

            <!--
                 The use of weights below assigns all extra space to G. There
                 are other choices. LinearLayout computes sizes along its
                     axis as given, then divides the remaining extra space using
                 weights.  If a component doesn't have a weight, it keeps
                 the specified size exactly.
            -->


            <!-- Fill width of layout and use wrap height (because there's no weight). -->

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="F" />

            <!-- Fill width of layout and put all the extra space here. -->

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="G" />
        </LinearLayout>

        <!-- Right column. Equal weight with left column gives them equal width. -->

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >

            <!-- Same as above except top button gets all the extra space. -->

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="H" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="I" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

score 5 · Accepted Answer

これが私が1年後に約束した解決策です=）基本的にViewTreeObserverを使用して親レイアウトの寸法を取得し、それに応じてカスタムビューを作成します。このコードは 1 年前のものであるため、ViewTreeObserver はディメンションを動的に取得する最良の方法ではない可能性があります。

ここで完全なソースコードを見つけることができます: https://github.com/cdoger/Android_layout

画面を幅8等分、高さ6等分しました。ビューをどのようにレイアウトしたかのスナップショットを次に示します。

final RelativeLayout mainLayout = (RelativeLayout) findViewById(R.id.main_layout);
ViewTreeObserver vto = mainLayout.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        final int oneUnitWidth = mainLayout.getMeasuredWidth() / 8;
        final int oneUnitHeight = mainLayout.getMeasuredHeight() / 6;
        /**
         * 1
         ***************************************************************/
        final RelativeLayout.LayoutParams otelParams = new RelativeLayout.LayoutParams(
                oneUnitWidth * 4, oneUnitHeight);
        otelParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
        otelParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
        // otelParams.setMargins(0, 0, 2, 0);
        View1.setLayoutParams(otelParams);
        /***************************************************************/

        /**
         * 2
         ***************************************************************/
        final RelativeLayout.LayoutParams otherParams = new RelativeLayout.LayoutParams(
                oneUnitWidth * 4, oneUnitHeight);
        otherParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
        otherParams.addRule(RelativeLayout.RIGHT_OF, View1.getId());
        otherParams.setMargins(2, 0, 0, 0);
        View2.setLayoutParams(otherParams);
        /***************************************************************/
//... goes on like this

最終的なスクリーンショットは次のとおりです。

ここに画像の説明を入力

score 3 · Accepted Answer

以下のように GridLayout を LinearLayout に埋め込み、うまくいったか試してみてください。

ここに画像の説明を入力

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="horizontal" >

<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2" >

    <Button
        android:layout_column="0"
        android:layout_columnSpan="1"
        android:layout_gravity="start|end"
        android:layout_row="0"
        android:text="ASDFASDF" />

    <Button
        android:layout_column="1"
        android:layout_gravity="start|end"
        android:layout_row="0"
        android:text="SDAVDFBDFB" />

    <Button
        android:layout_column="0"
        android:layout_columnSpan="2"
        android:layout_gravity="fill|center"
        android:layout_row="1"
        android:text="ASDVADFBFDAFEW" />

    <Button
        android:layout_column="0"
        android:layout_columnSpan="1"
        android:layout_gravity="fill|center"
        android:layout_row="2"
        android:text="FWEA AWFWEA" />

    <Button
        android:layout_column="1"
        android:layout_columnSpan="1"
        android:layout_gravity="fill"
        android:layout_row="2"
        android:text="BERWEfasf" />

    <Button
        android:layout_width="94dp"
        android:layout_column="0"
        android:layout_columnSpan="1"
        android:layout_gravity="fill|center"
        android:layout_row="3"
        android:text="SDFVBFAEVSAD" />

    <Button
        android:layout_column="0"
        android:layout_columnSpan="1"
        android:layout_gravity="fill|center"
        android:layout_row="4"
        android:layout_rowSpan="2"
        android:text="GVBAERWEFSD" />

    <Button
        android:layout_column="1"
        android:layout_columnSpan="1"
        android:layout_gravity="fill|center"
        android:layout_row="3"
        android:layout_rowSpan="2"
        android:text="VSDFAVE SDFASDWA SDFASD" />

    <Button
        android:layout_column="1"
        android:layout_columnSpan="1"
        android:layout_gravity="fill|center"
        android:layout_row="5"
        android:text="FWEWEGAWEFWAE"/>
</GridLayout>

    </LinearLayout>

android - 異種の GridLayout

6 に答える 6

Related

Reference