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

我想用两栏做一个网格视图。我的意思是每行并排两张照片,就像这张照片一样。

enter image description here

但我的照片之间有空隙,因为它们的大小不一样。我是这么想的。

enter image description here

正如你可以看到的第一张图片隐藏的图例,显示联系人姓名和电话号码。其他的图片拉伸不正确。

这是我的 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" />

这里是 item 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>

所以我想要的是,显示两个图像每行,和图像自动调整大小,无论屏幕大小。我的布局有什么问题吗?

谢谢。

175532 次浏览

这里有一个相对简单的方法来做到这一点。在布局中添加一个 GridView,设置拉伸模式来拉伸列宽,设置间距为0(或者任何你想要的) ,并设置列数为2:

Res/lay.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/layp/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));
}

享受结果吧:

Example GridView

另一个简单的方法与现代内置的东西,如 百分比相对布局现在可用于新用户谁打这个问题。 感谢机器人团队发布这个项目。

<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>

为了更好的表现,你可以使用一些东西,如毕加索图像加载器,帮助你填补整个宽度的每个图像父母。 例如,在您的适配器中,您应该使用:

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 类了。

我建议在类项目中使用 ImageView 代替 Int 类型。

希望这个能帮上忙。