带有两列的Gridview和自动调整大小的图像

179

我试图做一个两列的gridview。我的意思是每行并排两张照片，就像这张图片一样。

在此处输入图片说明

但由于尺寸不一样，我的照片之间留有空格。这就是我得到的。

在此处输入图片说明

如您所见，第一张图片隐藏了图例，该图例显示了联系人姓名和电话号码。并且其他图片没有正确拉伸。

这是我的GridView xml文件。如您所见，columnWidth设置为200dp。我希望它是自动的，因此图片会针对每种屏幕尺寸自动调整大小。

<?xml version="1.0" encoding="utf-8"?>
<GridView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridViewContacts"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:numColumns="2"
    android:columnWidth="200dp"
    android:stretchMode="columnWidth"    
    android:gravity="center" />

这是项目xml文件，代表每个项目本身。

<?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="match_parent" >

    <ImageView
        android:id="@+id/imageViewContactIcon"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />

    <LinearLayout
        android:id="@+id/linearlayoutContactName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:background="#99000000"
        android:layout_alignBottom="@+id/imageViewContactIcon">

        <TextView
            android:id="@+id/textViewContactName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            android:textSize="15sp"
            android:text="Lorem Ipsum" />       

        <TextView
            android:id="@+id/textViewContactNumber"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FFFFFF"
            android:layout_marginLeft="5dp"
            android:focusable="true"
            android:ellipsize="marquee"
            android:marqueeRepeatLimit="marquee_forever"
            android:textSize="10sp"
            android:text="123456789" />

    </LinearLayout>

</RelativeLayout>

所以我想要的是每行显示两个图像，并且无论屏幕大小如何，图像都会自动调整大小。我在布局上做错了什么？

谢谢。

android  android-layout  android-gridview 
— 罗格
source
1
也许您应该尝试将ImageView封装在其自己的LinearLayout中。这样，您可以完全根据需要配置LinearLayout标签，然后只需使ImageView填充它即可。
— 丹妮
@dani是什么意思？我仍然可以完全按照需要配置ImageView。你能举个例子吗？
— rogcg
我认为您需要从图像创建拇指，这些图像都是相同的，例如100x100或您需要的图像。如果您可以在示例图像上看到，则您寻找的效果仅显示图像的一部分。并且在您的项目中，您仅显示原始图像，如果您需要创建图库，这是错误的。尝试在android dev网站中寻找大拇指：)
— Vasil Valchev
@VasilValchev，但是问题是，即使我创建了拇指（例如100x100），我也需要针对不同的屏幕尺寸调整其大小。我确实scaleType在ImageView上使用了centerCrop 属性。我需要实现的是一种使图片并排显示并自动调整为不同屏幕尺寸的方法。
— rogcg
您总是可以在水平白色代码中获得屏幕尺寸，然后将其除以/ 2。如果您在项目中可以看到问题出在高度上，如果您知道您的体重到底是多少，那么您总是可以制作出一个完美的矩形。我看不出问题在哪里？
— Vasil Valchev

Answers:

402

这是一个相对简单的方法。将GridView放入布局中，设置拉伸模式以拉伸列宽，将间距设置为0（或任意设置），并将列数设置为2：

RES /布局/ main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:verticalSpacing="0dp"
        android:horizontalSpacing="0dp"
        android:stretchMode="columnWidth"
        android:numColumns="2"/>

</FrameLayout>

进行自定义ImageView，以保持其纵横比：

src / com / example / graphicstest / SquareImageView.java

public class SquareImageView extends ImageView {
    public SquareImageView(Context context) {
        super(context);
    }

    public SquareImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width
    }
}

使用此SquareImageView为网格项目进行布局，并将scaleType设置为centerCrop：

res / layout / grid_item.xml

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

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="match_parent">

    <com.example.graphicstest.SquareImageView
        android:id="@+id/picture"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"/>

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:layout_gravity="bottom"
        android:textColor="@android:color/white"
        android:background="#55000000"/>

</FrameLayout>

现在为您制作某种适配器GridView：

src / com / example / graphicstest / MyAdapter.java

private final class MyAdapter extends BaseAdapter {
    private final List<Item> mItems = new ArrayList<Item>();
    private final LayoutInflater mInflater;

    public MyAdapter(Context context) {
        mInflater = LayoutInflater.from(context);

        mItems.add(new Item("Red",       R.drawable.red));
        mItems.add(new Item("Magenta",   R.drawable.magenta));
        mItems.add(new Item("Dark Gray", R.drawable.dark_gray));
        mItems.add(new Item("Gray",      R.drawable.gray));
        mItems.add(new Item("Green",     R.drawable.green));
        mItems.add(new Item("Cyan",      R.drawable.cyan));
    }

    @Override
    public int getCount() {
        return mItems.size();
    }

    @Override
    public Item getItem(int i) {
        return mItems.get(i);
    }

    @Override
    public long getItemId(int i) {
        return mItems.get(i).drawableId;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        View v = view;
        ImageView picture;
        TextView name;

        if (v == null) {
            v = mInflater.inflate(R.layout.grid_item, viewGroup, false);
            v.setTag(R.id.picture, v.findViewById(R.id.picture));
            v.setTag(R.id.text, v.findViewById(R.id.text));
        }

        picture = (ImageView) v.getTag(R.id.picture);
        name = (TextView) v.getTag(R.id.text);

        Item item = getItem(i);

        picture.setImageResource(item.drawableId);
        name.setText(item.name);

        return v;
    }

    private static class Item {
        public final String name;
        public final int drawableId;

        Item(String name, int drawableId) {
            this.name = name;
            this.drawableId = drawableId;
        }
    }
}

将该适配器设置为您的GridView：

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    GridView gridView = (GridView)findViewById(R.id.gridview);
    gridView.setAdapter(new MyAdapter(this));
}

并享受结果：

GridView示例

— 凯文·科波克
source
3
有效！但我想请您解释一下为创建类的必要性，ImageView以及为什么要使用类似这样的内容<com.example.graphicstest.SquareImageView>而不是<ImageView>在xml文件中使用简单的标记。您能否向我详细说明此长宽比以及如何不创建此类对项目有影响。有没有一种方法可以优化此过程，而无需自定义ImageView类？无论如何，谢谢您的帮助。
— rogcg 2013年
10
基本上，在Android的ImageView类中，除非您硬编码宽度和高度，否则无法简单地指定“嘿，为此视图保留方形长宽比（宽度/高度）”。您可以在适配器的getView中对LayoutParams进行一些手动调整，但是坦率地说，让ImageView处理所有尺寸要简单得多，并且只需覆盖结果以说“无论宽度最终是多少，都应使我的高度保持不变”。您无需考虑它，它始终是正方形，并且可以按预期工作。基本上，这是使视图保持正方形的最简单方法。
— 凯文·科波克
8
我想不出要避免创建自定义ImageView类的原因，因为您可以使用常规ImageView进行所有操作，但这只是使您不必进行测量和LayoutParams实例化以及检查整个地方。
— 凯文·科波克
1
感谢您的编辑，以为它可以像魅力一样工作！
— Zander 2015年
1
@kcoppock：非常感谢您分享此代码。我最喜欢的是您可以用“真实”图片替换imageview的颜色，并适当调整尺寸！我想了解的是，是否有可能调整视图的大小，以便一定数量的视图填充整个屏幕。
— AntonSack 2015年
14

现在，对于遇到此问题的新用户，可以使用另一种简单的方法，使用诸如PercentRelativeLayout之类的现代内置内容。感谢android团队发布了这个项目。

<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
app:layout_widthPercent="50%">

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/picture"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="#55000000"
        android:paddingBottom="15dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="15dp"
        android:textColor="@android:color/white" />

</FrameLayout>

为了获得更好的性能，您可以使用诸如Picasso图像加载器之类的东西，以帮助您填充每个图像父对象的整个宽度。例如，在您的适配器中，您应该使用以下命令：

int width= context.getResources().getDisplayMetrics().widthPixels;
    com.squareup.picasso.Picasso
            .with(context)
            .load("some url")
            .centerCrop().resize(width/2,width/2)
            .error(R.drawable.placeholder)
            .placeholder(R.drawable.placeholder)
            .into(item.drawableId);

现在您不再需要CustomImageView类。

聚苯乙烯我建议在类Item中使用ImageView代替Type Int。

希望有帮助。

— 设定最大
source
使用API​​ 26.1时，它已被描述。看到链接
— Dominikus K.17
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.