GridLayout适合全屏

时间:2017-07-11 15:59:09

标签: android xml

我希望我的布局像这样:

Layout Diagram

现在我使用了GridLayout,这是我当前的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>

你可以看到还有很多空的空间: Design

如何让GridLayout与我父母的身高相匹配?

我也尝试使用Tab Layout但是当按钮4到达Button 2和按钮4以适合2行时,TayLayout达到了它的限制。 我现在能做什么?

1 个答案:

答案 0 :(得分:0)

使用Google flexbox-layout来实现这一目标。这是链接: - GoogleFlexboxLayout

添加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>