Android Studio 相当于 CSS 显示网格

Question

在 CSS 中，我可以轻松创建如下图所示的网格：

.grid {
  display: grid;
  grid-template: repeat(2, 1fr) / repeat(2, 1fr);

  width: 200px;
  height: 200px;

  margin: auto;
}

.grid > div {
  border: 1px solid black;
  text-align: center;
  line-height: 100px; 
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

我今天开始使用 Android Studio，想达到类似的效果吗？我试过线性布局，但无法让它们换行或指定列数和行数。这是我目前所拥有的：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="1" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="3" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="4" />
</LinearLayout>

但它们都排成一行，更像是一个 flexbox。似乎有一个网格布局，但它是遗留的，所以我假设它已经贬值了。如何制作像上面那样的网格布局，指定列数和行数？

Answer 1

这是使用

制作上述网格布局的方法

Android工作室：

MainActivity.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="vertical">

<GridLayout

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:columnCount="2"

    android:rowCount="2">

 <TextView
     android:id="@+id/textView"

     android:layout_width="40dp"

     android:layout_height="40dp"

     android:text="1"

     android:TextSize="25"

     android:background="@drawable/border"

     android:textAlignment="center"/>

 <TextView

     android:id="@+id/textView2"

     android:layout_width="40dp"

     android:layout_height="40dp"

     android:text="2"

     android:TextSize="25"

     android:background="@drawable/border"

     android:textAlignment="center"/>

 <TextView

     android:id="@+id/textView3"

     android:layout_width="40dp"

     android:layout_height="40dp"

     android:text="3"

     android:TextSize="25"

     android:background="@drawable/border"

     android:textAlignment="center"/>

 <TextView

     android:id="@+id/textView4"

     android:layout_width="40dp"

     android:layout_height="40dp"

     android:text="4"

     android:TextSize="25"

     android:background="@drawable/border"

     android:textAlignment="center"/>

          </GridLayout>
  </LinearLayout>

转到 res 文件并展开它，右键单击

drawable 然后点击 Drawable 资源文件。在

Drawable资源文件写边框作为文件名

还可以。

border.xml

<?XML version="1.0" encoding="utf-8"?

<shape

 xmlns:android="http://schemas.android.com/apk/re
s/android"

android:shape="rectangle">

 <solid

     android: color="@android:color/white"/>

 <stroke

     android: width="2dp"/>

  </shape>

Answer 2

根本没有弃用 GridLayout。

dependencies {
    implementation "androidx.gridlayout:gridlayout:1.0.0"
}

那就是 XML:

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.gridlayout.widget.GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:useDefaultMargins="true"
        app:columnCount="2"
        app:rowCount="2">

            <TextView
                app:layout_columnWeight="1.00"
                app:layout_rowWeight="1.00"
                android:gravity="center"
                android:fontFamily="sans-serif-medium"
                android:textColor="#000000"
                android:textSize="32sp"
                android:text="1"/>

            <TextView
                app:layout_columnWeight="1.00"
                app:layout_rowWeight="1.00"
                android:gravity="center"
                android:fontFamily="sans-serif-medium"
                android:textColor="#000000"
                android:textSize="32sp"
                android:text="2"/>

            <TextView
                app:layout_columnWeight="1.00"
                app:layout_rowWeight="1.00"
                android:gravity="center"
                android:fontFamily="sans-serif-medium"
                android:textColor="#000000"
                android:textSize="32sp"
                android:text="3"/>

            <TextView
                app:layout_columnWeight="1.00"
                app:layout_rowWeight="1.00"
                android:gravity="center"
                android:fontFamily="sans-serif-medium"
                android:textColor="#000000"
                android:textSize="32sp"
                android:text="4"/>

    </androidx.gridlayout.widget.GridLayout>

</layout>

还有它的文档：androidx.gridlayout.widget。

但是，对于动态项，您可能希望使用 RecyclerView 和 GridLayoutManager。

Android Studio 相当于 CSS 显示网格

Android Studio Equivalate to CSS display grid

android

android-layout

android-gridlayout