如何在GridView指定列间设置间距？公交选座APP开发求助

嘿，我来帮你搞定这个公交座位预订APP的GridView问题！

一、如何设置GridView指定列之间的间距 #

有两种简单有效的方式可以实现：

• 利用GridView自带属性快速设置
  直接在GridView的XML标签里添加android:horizontalSpacing和android:verticalSpacing属性，分别控制列间距和行间距，数值可以根据你的UI需求调整：

  <GridView
      android:id="@+id/seat_grid"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:horizontalSpacing="16dp" <!-- 列与列之间的水平间距 -->
      android:verticalSpacing="12dp" <!-- 行与行之间的垂直间距 -->
      android:numColumns="4" <!-- 根据你的座位布局设置对应列数 -->
      android:stretchMode="columnWidth"
      android:gravity="center" />
  

• 自定义Item布局的margin实现灵活间距
  如果自带属性满足不了你的个性化需求，比如想让中间列的间距更大，你可以给GridView的每个Item根布局设置左右margin：

  <!-- Item布局示例 -->
  <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginLeft="8dp"
      android:layout_marginRight="8dp">
  
      <!-- 这里放你的座位图标/按钮 -->
      <ImageView
          android:layout_width="50dp"
          android:layout_height="50dp"
          android:src="@drawable/seat_normal"/>
  
  </LinearLayout>
  

二、座位选择是否要用不同的Drawable选择器？ #

**必须推荐用！**这是实现座位状态切换（未选中、选中、已占用等）最优雅的方案，不需要在代码里频繁切换图片，维护起来超方便。

具体实现步骤： #

1. 先准备好三种状态的座位图片：seat_normal.png（未选中）、seat_selected.png（已选中）、seat_occupied.png（已占用），放到res/drawable目录下。
2. 在res/drawable目录创建seat_selector.xml选择器文件：

   <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <!-- 选中状态 -->
       <item android:drawable="@drawable/seat_selected" android:state_selected="true"/>
       <!-- 已占用状态（禁用点击） -->
       <item android:drawable="@drawable/seat_occupied" android:state_enabled="false"/>
       <!-- 默认未选中状态 -->
       <item android:drawable="@drawable/seat_normal"/>
   </selector>
   

3. 在Item布局里，把座位控件的背景或src设置为这个选择器：

   <ImageView
       android:layout_width="50dp"
       android:layout_height="50dp"
       android:background="@drawable/seat_selector"/>
   

4. 最后在代码里，只需要一行代码就能切换状态：

   // 标记座位为选中
   seatImageView.setSelected(true);
   // 标记座位为已占用（禁用点击）
   seatImageView.setEnabled(false);
   // 恢复为未选中
   seatImageView.setSelected(false);
   seatImageView.setEnabled(true);
   

结合你的CardView布局示例 #

把GridView嵌入到你提供的CardView里，调整后完整代码大概是这样：

<android.support.v7.widget.CardView
    android:layout_width="290dp"
    android:layout_height="390dp"
    android:layout_below="@+id/relativeLayout"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="24dp"
    android:padding="16dp">

    <GridView
        android:id="@+id/seat_grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:horizontalSpacing="16dp"
        android:verticalSpacing="12dp"
        android:numColumns="4"
        android:stretchMode="columnWidth"
        android:gravity="center"/>

</android.support.v7.widget.CardView>

内容的提问来源于stack exchange，提问作者rk_1