GridView 行和列之间的颜色设置，GridView 的 item 正方形显示

实现两个需求
- 通过 GridView 背景和其 item 背景实现行列之间的颜色
- 使 GridView 的 item 显示正方形效果

普通方式效果

这个时候的代码如下：

GridView 代码

<GridView
        android:id="@+id/gv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnWidth="95dp"
        android:horizontalSpacing="2dp"
        android:verticalSpacing="2dp"
        android:numColumns="auto_fit" />

GridView item 代码

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

    <ImageView
        android:id="@+id/iv_item"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ico_personal_settings" />

    <TextView
        android:id="@+id/tv_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:textSize="15sp"
        tools:text="标题" />
</LinearLayout>

如果这个时候我们想要实现 item 行列之间背景色，其实只需要再次基础上分别给 GridView 和 item设置不同的背景色即可，代码修改如下：

GridView 代码

<GridView
        android:id="@+id/gv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:columnWidth="95dp"
        android:horizontalSpacing="5dp"
        android:numColumns="auto_fit"
        android:verticalSpacing="5dp" />

多了设置背景色这句，别的无修改。再来看看其 item 布局：

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

    <ImageView
        android:id="@+id/iv_item"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ico_personal_settings" />

    <TextView
        android:id="@+id/tv_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:textSize="15sp"
        tools:text="标题" />
</LinearLayout>

同样只增加了背景颜色，别的无修改，现在来看看效果：

这样就实现了刚开始提出的第一个需求，接下来看看如何实现 GridView 的每个 item 显示为正方形。

GridView item显示正方形

如果我们通过设置 item 布局的宽高为正方形，其实是没有效果的，下面直接看实现方式。

1. 自定义 item 布局

   public class SquareLayout extends RelativeLayout {
   
      public SquareLayout(Context context) {
          super(context);
      }
   
      public SquareLayout(Context context, AttributeSet attrs) {
          super(context, attrs);
      }
   
      @Override
      protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
          setMeasuredDimension(getDefaultSize(0, widthMeasureSpec),
                  getDefaultSize(0, heightMeasureSpec));
          widthMeasureSpec = heightMeasureSpec = MeasureSpec.makeMeasureSpec(getMeasuredWidth(),
                  MeasureSpec.EXACTLY);
          super.onMeasure(widthMeasureSpec, heightMeasureSpec);
      }
   }

2. 修改 item 布局

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@color/colorAccent"
      android:gravity="center"
      android:orientation="vertical">
   
      <com.cxs.yukumenu.SquareLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:gravity="center">
   
          <ImageView
              android:id="@+id/iv_item"
              android:layout_width="35dp"
              android:layout_height="35dp"
              android:scaleType="centerCrop"
              android:src="@drawable/ico_personal_settings" />
   
          <TextView
              android:id="@+id/tv_item"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_below="@id/iv_item"
              android:layout_marginTop="8dp"
              android:textSize="15sp"
              tools:text="标题" />
      </com.cxs.yukumenu.SquareLayout>
   </LinearLayout>

   这里需要说明的是，如果你的 Item 最外层本来就是 RelativeLayout 的话，就可以直接将自定义的 RelativeLayout 作为跟布局使用。

现在就可以来看看效果了：

就这样，两个需求都实现了。核心代码都贴出来了。

---

Android 技术分享平台，欢迎各位同行关注