Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FlexboxLayout implement GridView effect

Google has published FlexboxLayout lib. Now I want use FlexboxLayout to implement a GridView effect, as the GridView has two rows and four lists. If the item count is less than 8, itemview will align left. When I use FlexboxLayout, item in second row align center, how can I put them align left?

I know little about front end.

here is the code:

<com.google.android.flexbox.FlexboxLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@android:color/holo_green_light"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    app:flexWrap="wrap"
    app:alignItems="baseline"
    app:alignContent="stretch"
    app:justifyContent="space_around">

    <android.support.v7.widget.AppCompatButton
        android:background="@android:color/holo_red_dark"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="20%"/>

    <android.support.v7.widget.AppCompatButton
        android:background="@android:color/holo_red_dark"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="20%"/>

    <android.support.v7.widget.AppCompatButton
        android:background="@android:color/holo_red_dark"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="20%"/>

    <android.support.v7.widget.AppCompatButton
        android:background="@android:color/holo_red_dark"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="20%"/>

    <android.support.v7.widget.AppCompatButton
        android:background="@android:color/holo_red_dark"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="20%"/>

    <android.support.v7.widget.AppCompatButton
        android:background="@android:color/holo_red_dark"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="20%"/>

    <android.support.v7.widget.AppCompatButton
        android:background="@android:color/holo_red_dark"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="20%"/>

</com.google.android.flexbox.FlexboxLayout>
like image 857
Dio_V Avatar asked Sep 11 '25 05:09

Dio_V


1 Answers

Change:

app:alignItems="baseline"
app:alignContent="stretch"
app:justifyContent="space_around"

To:

app:flexWrap="wrap"
app:flexDirection="row"
app:alignItems="center"
app:alignContent="flex_start"
app:justifyContent="flex_start"
like image 64
himanshu1496 Avatar answered Sep 12 '25 20:09

himanshu1496