在GridView中缩放ImageView时出现空白区域

Question

我希望您能够实现类似于Google Play卡片式UI的界面。我已经创建了一个GridView，并将卡片的背景作为xml文件。现在，我想让图片适应卡片，以便底部阴影可见，但图片的宽度与卡片的宽度相同。问题是，即使我将GridView.LayoutParams设置成图像大小的比例，图像周围仍然有白色空间。我尝试过不同的scaleType，但没有一个有效。此外，一旦我将图像的宽度调整到适合卡片的宽度，如何确保底部阴影仍然可见呢？

我的图片适配器类：

package me.zamaaan.wallpaper;

import android.content.Context;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter{
    private Context mContext;

    // Keep all Images in array
    public Integer[] mThumbIds = {
            R.drawable.background1, R.drawable.background2,
            R.drawable.background3, R.drawable.background4,
            R.drawable.background1, R.drawable.background2,
            R.drawable.background1, R.drawable.background2,
            R.drawable.background3, R.drawable.background4,
            R.drawable.background1, R.drawable.background2,
            R.drawable.background3
    };


    // Constructor
    public ImageAdapter(Context c){
        mContext = c;
    }
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return mThumbIds.length;
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return mThumbIds[position];
    }

    @Override
    public long getItemId(int arg0) {
        // TODO Auto-generated method stub
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = new ImageView(mContext);
        imageView.setImageResource(mThumbIds[position]);
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        int width_dp = 109;
        double height_dp = width_dp/0.5625;
        int width_px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, width_dp, mContext.getResources().getDisplayMetrics());

        int height_px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, (int)height_dp, mContext.getResources().getDisplayMetrics());

        imageView.setLayoutParams(new GridView.LayoutParams(width_px, height_px));
        imageView.setBackgroundResource(R.drawable.bg_card);

        return imageView;
    }

}

bg_card.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"
               android:dither="true">

            <corners android:radius="2dp"/>

            <solid android:color="#ccc" />

        </shape>
    </item>

    <item android:bottom="2dp">
        <shape android:shape="rectangle"
               android:dither="true">

            <corners android:radius="2dp" />

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

            <padding android:bottom="8dp"
                     android:left="8dp"
                     android:right="8dp"
                     android:top="8dp" />
        </shape>
    </item>
</layer-list>

gridview.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/landscape"
  android:orientation="horizontal"
  android:layout_width="fill_parent" 
  android:layout_height="wrap_content"
  android:layout_gravity="center_horizontal"
  android:background="#eeeeee"
  android:gravity="center">

<GridView  
    android:id="@+id/grid_view"
    android:layout_marginTop="16.50dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="3"
    android:paddingBottom="8dp"
    android:horizontalSpacing="11dp"
    android:verticalSpacing="7dp"
    android:gravity="center"
    android:stretchMode="columnWidth"
    >

</GridView>

</RelativeLayout>

实际图像的尺寸为：

720x1280px

- Jiyda Moussa

Answer 1

您的图片未填满卡片，因为在您的卡片背景中两侧各有8dp的内边距

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    ...
    <item android:bottom="2dp">
        <shape android:shape="rectangle"
               android:dither="true">
            <corners android:radius="2dp" />
            <solid android:color="@android:color/white" />
            <padding android:bottom="8dp"
                     android:left="8dp"
                     android:right="8dp"
                     android:top="8dp" />
        </shape>
    </item>
</layer-list>

去除填充以使其充满整个宽度。

如果您想同时保留阴影，最好为您的背景创建一个9-patch，这样您就可以定义内容的位置，例如：

左侧和顶部的黑线表示可缩放区域，底部和右侧的线表示内容所在的区域（请注意，右侧的内容区域不覆盖阴影区域）。

- Joseph Earl