GridLayout - 对齐元素

Question

我正在尝试减少 2 列之间的空间，尝试使用负边距，但没有奏效。有没有办法让图像中的两个元素更接近？

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:useDefaultMargins="true"
    android:alignmentMode="alignBounds"
    android:columnOrderPreserved="false"
    android:layout_gravity="center"
    android:orientation="horizontal"
    android:stretchMode="columnWidth"
    android:background="@color/orange"
    android:textSize="12sp"
    android:columnCount="8">
  <ImageButton
        android:id="@+id/settings"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="1"
        android:layout_gravity="left"
        android:src="@drawable/settings" />
    <TextView
        android:id="@+id/currentCityName"
        android:layout_column="2"     
        android:textSize="22sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="City name"
        android:layout_columnSpan="4"
        android:layout_gravity="center_horizontal"

        />
  <ImageButton
        android:id="@+id/refresh"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="7"

        android:layout_columnSpan="1"
        android:layout_gravity="right"
        android:src="@drawable/reload" />
    <ImageView
        android:id="@+id/currentWeatherImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="8"
        android:layout_rowSpan="3"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/cloud" />
    <ImageView
        android:id="@+id/humidityIcon"
        android:layout_width="20dp"         
        android:paddingTop="10dp"
        android:paddingLeft="0dp"
        android:paddingRight="0dp"
        android:layout_marginRight="0dp"
        android:layout_gravity="left"
        android:background="#000000"
        android:src="@drawable/humidity" />
    <TextView
        android:id="@+id/humidity"       
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="13sp"
        android:paddingTop="10dp"
        android:paddingLeft="0dp"
        android:layout_marginLeft="0dp"
        android:layout_gravity="left"
        android:background="#FFFFFF"
        />
    <TextView
        android:id="@+id/temperature"
        android:layout_columnSpan="4"
        android:layout_rowSpan="2"
        android:textSize="49sp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="5dp"
        android:layout_gravity="center_horizontal"/>
    <ImageView
        android:id="@+id/windSpeedIcon"
        android:layout_width="30dp"
        android:layout_marginRight="1dp"
        android:paddingRight="1dp"
        android:layout_gravity="right"
        android:src="@drawable/wind" />

    <TextView
        android:id="@+id/windSpeed"
        android:textSize="12sp"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        />
    <!-- android:layout_width="40dp" -->
    <TextView
        android:id="@+id/precipitationIcon"
        android:textSize="28sp"
        android:layout_width="40dp"
        />
    <TextView
        android:id="@+id/precipitation"
        android:layout_column="0"
        android:textSize="13sp"
        android:layout_width="40dp"
        />
    <TextView
        android:id="@+id/windDirection16Point"          
        android:textSize="13sp"
        android:layout_width="80dp"
        android:layout_columnSpan="2"
        />
    <TextView
    android:id="@+id/weatherDescription"
    android:layout_gravity="center_horizontal"
    android:layout_row="7"
    android:layout_columnSpan="8"/>

<TextView
    android:id="@+id/section_label"
    android:layout_margin="5dp" 
    android:layout_columnSpan="8" />    
<EditText
    android:minLines="4"
    android:maxLines="4"
    android:id="@+id/edit"
    android:layout_columnSpan="8"/>   

Answer 1

我建议使用RelativeLayout来实现整个视图，应该是整个视图的最佳解决方案。

Answer 2

你解决了错误的问题——你问的是如何减少网格布局中列之间的空间，但也许你一开始就不应该使用这样的布局！

您应该为您的特定布局使用的是 relative positioning 和 compound drawables 的组合（此处为 android:drawableStart）。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="80dp"
    android:background="#d89018"
    android:paddingBottom="4dp"
    android:paddingLeft="8dp"
    android:paddingRight="8dp"
    android:paddingTop="4dp"
    >

    <TextView
        android:id="@+id/temperature"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:text="25 ℃"
        android:textColor="#fff"
        android:textSize="49sp"
        />

    <TextView
        android:id="@+id/humidity"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:drawableStart="@drawable/humidity"
        android:gravity="center_vertical"
        android:text="83 %"
        android:textColor="#fff"
        />

    <TextView
        android:id="@+id/windSpeed"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:drawableStart="@drawable/wind"
        android:gravity="center_vertical"
        android:text="19 km/h"
        android:textColor="#fff"
        />

    <TextView
        android:id="@+id/precipitation"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:drawableStart="@drawable/precipitation"
        android:gravity="center_vertical"
        android:text="0.1 mm"
        android:textColor="#fff"
        />

    <TextView
        android:id="@+id/windDirection16Point"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignLeft="@id/windSpeed"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:drawableStart="@drawable/windDirection"
        android:gravity="center_vertical"
        android:text="NNW"
        android:textColor="#fff"
        />

</RelativeLayout>

这种布局不仅更简单，您还可以让 Android 为您处理所有间距。 要更改复合可绘制对象和文本之间的间距，请在上面的布局代码中使用android:drawablePadding；在 Java 代码中，应该是 TextView.setCompoundDrawablePadding)。

---

用于示例的图标：water、windsock、rainy-weather 和 wind-rose。

Answer 3

我认为发生的事情是您的视图被拉伸，因为它们试图匹配其列中另一个视图的宽度。

尝试减小 View 的 columnSpan 或将布局分成两个单独的 GridLayout。

或者，考虑完全使用不同的布局。我会在这里推荐 RelativeLayout 而不是 GridLayout，但我不知道这如何适合更大的窗口。

Answer 4

试试这个：

<?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="100dp">

    <LinearLayout
      android:id="@+id/col1"
      android:layout_width="match_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical"
      android:layout_weight="2.4"
      >
        <LinearLayout
          android:id="@+id/col1_row1"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          >   
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:src="@drawable/icon"/>
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="83%"/>
      </LinearLayout>         
        <LinearLayout
          android:id="@+id/col1_row2"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          >   
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:src="@drawable/icon"/>
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="1.0mm"/>
      </LinearLayout>
    </LinearLayout>  

    <LinearLayout
      android:id="@+id/col2"
      android:layout_width="match_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical"
      android:layout_weight="2.0"
      android:gravity="center"
      >
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="25'"
          android:textSize="50dp"
          />      
    </LinearLayout>

    <LinearLayout
      android:id="@+id/col3"
      android:layout_width="match_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical"
      android:layout_weight="2.4"
      >
        <LinearLayout
          android:id="@+id/col3_row1"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          >   
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:src="@drawable/icon"/>
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="19Km"/>
      </LinearLayout>         
        <LinearLayout
          android:id="@+id/col3_row2"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          >   
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:src="@drawable/icon"/>
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="NNW"/>
      </LinearLayout>
    </LinearLayout>

</LinearLayout>

Answer 5

我认为您应该将 usedefaultMargins 更改为 false 并为元素设置自己的边距。

android:useDefaultMargins="false";