Gridlayout passen Vollbild

Question

ich mein Layout möchte dies mag:

Layout Diagram

Jetzt habe ich mit Gridlayout gearbeitet und das ist meine aktuelle XML-

<?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" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:background="#000000" 
> 


<GridLayout 
android:id="@+id/GridLayout1" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:columnCount="2" 
android:fillViewport="true" 
> 

<!-- Button 1 --> 
    <Button 
    android:id="@+id/B1" 
    android:layout_column="0" 
    android:layout_columnSpan="2" 
    android:layout_row="0" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:text="Button 1" 
    android:textColor="@android:color/white" 
    android:background="@drawable/schalt2" 
    /> 

<!-- Button 2 --> 

<Button 
    android:id="@+id/B2" 
    android:layout_row="1" 
    android:layout_column="0" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Button 2" 
    android:textColor="@android:color/white" 
    android:background="@drawable/schalt2" 
    /> 

<Button 
    android:id="@+id/B3" 
    android:layout_row="2" 
    android:layout_column="0" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Button 3" 
    android:textColor="@android:color/white" 
    android:background="@drawable/schalt2" 
    /> 

<Button 
    android:id="@+id/B4" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_column="1" 
    android:layout_row="1" 
    android:layout_columnSpan="1" 
    android:layout_rowSpan="2" 

    android:layout_gravity="fill_vertical" 
    android:background="@drawable/schalt2" 
    android:text="Button 4" 
    android:textColor="@android:color/white" /> 

<!-- Button 5--> 

<Button 
    android:id="@+id/B5" 
    android:layout_column="0" 
    android:layout_columnSpan="2" 
    android:layout_row="3" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:text="Button 5" 
    android:textColor="@android:color/white" 
    android:background="@drawable/schalt2" /> 

<!-- Button 6 --> 
<Button 
    android:id="@+id/B6" 
    android:layout_column="0" 
    android:layout_columnSpan="2" 
    android:layout_row="4" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_below="@+id/VIP" 
    android:text="Button 6" 
    android:textColor="@android:color/white" 
    android:background="@drawable/schalt2" 
    /> 

</GridLayout> 
</LinearLayout> 

Nun gibt es eine Menge leer ist Platz links, wie Sie sehen können: Design

Wie kann ich das GridLayout, um meine Eltern Höhe übereinstimmen?

Ich habe es auch mit einem Tab Layout versucht, aber wenn man Button 2 und Button 3 mit Button 4 erreicht, um 2 Reihen zu passen, kommt das TayLayout an seine Grenzen. Was kann ich jetzt tun?

Answer 1

Verwenden Sie Google flexbox-layout, um dies zu erreichen. Hier ist der Link: - GoogleFlexboxLayout

hinzufügen dependencies { compile 'com.google.android:flexbox:0.3.0' }

XML: -

<?xml version="1.0" encoding="utf-8"?> 
<com.google.android.flexbox.FlexboxLayout 
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" 
android:background="#000000" 
android:orientation="vertical" 
android:weightSum="4" 
app:alignContent="stretch" 
app:alignItems="stretch" 
app:flexWrap="wrap"> 

<Button 
    android:id="@+id/B1" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@android:color/holo_blue_bright" 
    android:text="Button 1" 
    android:textColor="@android:color/white" /> 

<com.google.android.flexbox.FlexboxLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    app:flexDirection="column" 
    app:layout_flexBasisPercent="50%"> 

    <Button 
     android:id="@+id/B2" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:background="@android:color/holo_green_dark" 
     android:text="Button 2" 
     android:textColor="@android:color/white" 
     /> 

    <Button 
     android:id="@+id/B3" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:background="@android:color/holo_green_light" 
     android:text="Button 3" 
     android:textColor="@android:color/white" 
     /> 

</com.google.android.flexbox.FlexboxLayout> 


<Button 
    android:id="@+id/B4" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@android:color/holo_orange_light" 
    android:text="Button 4" 
    android:textColor="@android:color/white" 
    app:layout_flexBasisPercent="50%" /> 


<Button 
    android:id="@+id/B5" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@android:color/holo_purple" 
    android:text="Button 5" 
    android:textColor="@android:color/white" /> 


<Button 
    android:id="@+id/B6" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@android:color/holo_blue_dark" 
    android:text="Button 6" 
    android:textColor="@android:color/white" /> 

</com.google.android.flexbox.FlexboxLayout>