我正在尝试用两列制作一个网格视图。我的意思是每行并排两张照片,就像这张图片一样。
但是我的图片之间有空格,因为它的大小不一样。这就是我得到的。
如您所见,第一张图片隐藏了显示联系人姓名和电话号码的图例。并且其他图片没有正确拉伸。
这是我的 GridView xml 文件。如您所见,columnWidth设置为 200dp 。 我希望它是自动 的,所以图片会根据每个屏幕尺寸自动调整大小。
columnWidth
<?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>
所以我想要的是每行显示两个图像,并且无论屏幕大小如何,图像都会自动调整大小。 我在布局上做错了什么?
谢谢。
这是一个相对简单的方法来做到这一点。将 GridView 放入您的布局中,设置拉伸模式以拉伸列宽,将间距设置为 0(或任何您想要的),并将列数设置为 2:
资源/布局/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保持其纵横比的自定义:
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:
资源/布局/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:
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)); }
并享受结果: