带有异步 ImageView 加载的 Android GridView stretchMode

Question

我将以下 GridView 定义为 w/stretchMode 设置为“columnWidth”。

<GridView android:id="@+id/grid"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:columnWidth="160dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:listSelector="@drawable/list_selector"
/>

GridView 中的每个项目的结构如下。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"
    android:padding="2dp"
>
    <FrameLayout
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"
    >
        <ImageView android:id="@+id/videoGridItemImage"
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
        />
        <TextView android:id="@+id/videoGridItemDuration"
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"    
            android:layout_gravity="bottom"    
            android:background="#88000000"
            android:textColor="#F1F1F1"
            android:textAppearance="@android:style/TextAppearance.Small"
            android:padding="2dp"
        />
    </FrameLayout>
    <TextView android:id="@+id/videoGridItemTitle" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"
        android:gravity="left"
        android:textAppearance="@android:style/TextAppearance.Medium"
        android:textColor="#F1F1F1"
        android:maxLines="1"
        android:background="#88000000"
        android:paddingLeft="2dp"
        android:paddingRight="2dp"
    />
    <TextView android:id="@+id/videoGridItemSubtitle" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"
        android:gravity="left"
        android:textStyle="italic"
        android:textColor="#666"
        android:textAppearance="@android:style/TextAppearance.Small" 
        android:maxLines="1"
        android:background="#88000000"
        android:paddingLeft="2dp"
        android:paddingRight="2dp"
    />
</LinearLayout>

在 GridView 的适配器中，我通过将 ImageView 的 url 和引用传递给专用类来异步加载和显示图像。该类将图像下载到位图中，然后使用 setImageBitmap() 更新 ImageView。此工作流程按预期运行；但是，我的图像并没有填满 ImageView 的整个宽度。左侧/右侧有少量填充物。我意识到我可以使用 scaleType="fitXY"，但这并不理想，因为它会扭曲图像。将 ImageView 的 src 属性设置为本地图像可以很好地使用stretchMode="columnWidth"。我的猜测是 ImageView 正在缩放到原始 columnWidth 而不是拉伸/动态宽度。有没有人知道为什么会发生这种情况和/或如何解决？提前感谢您的帮助。

Answer 1

你有两个选择：

1. 将 ImageView 的 layout_width 设置为 wrap_content。 ImageView 将根据图像的大小调整大小，您的列也会相应调整。

2. 将 ImageView 的 scaleType 设置为 centerCrop。这将尝试使图像适合图像视图而不倾斜它，并且只会切断任何不适合的多余部分。这不会留下任何空白。

Answer 2

我有同样的问题。我的解决方案是在图像下载之前覆盖 ImageView（在我的情况下）FrameLayout 以设置它的高度。我希望在我的 GridView 中强制执行方形图块，并像这样完成：

public class SquareFrameLayout extends FrameLayout {

  public SquareFrameLayout(Context context) {
    super(context);
  }
  public SquareFrameLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
  }
  public SquareFrameLayout(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, widthMeasureSpec);
  }
}

每个 GridView 项目是这样的：

<com.my.client.ui.layout.SquareFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/discovery_tile"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

  <ImageView
    android:id="@+id/my_image"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:scaleType="centerCrop"
    android:cropToPadding="true"
    android:contentDescription="@string/my_desc" />

</com.my.client.ui.layout.SquareFrameLayout>

然后在 GridView 中我使用了这个：

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:name="com.my.client.ui.MyFragment"
    android:id="@+id/my_gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="3"
    android:verticalSpacing="0px"
    android:horizontalSpacing="0px"
    android:stretchMode="columnWidth"
    android:gravity="fill" />