android - 在 Android Gridview 中显示复合项目

Question

我正在尝试显示一个元素网格，每个元素都由一个relativelayout组成，其中包含一个位于textview顶部的imageview。

我已经看过someone else问同样的问题，我已经采用了 the proposed solution ;无论如何，在此解决方案中，getView() 函数仅返回 ImageView 项，而不返回 TextView。我尝试返回一个扩展了RelativeLayout 的自定义项目，但我无法看到Gridview 中的元素。如果我单击它们，我仍然会收到 Toast 消息(请参阅下面的监听器代码)，但屏幕上仅可见 Gridview 的(灰色)背景。

如果我按照上面的解决方案中的建议仅传递 ImageView 或 TextView，我仍然可以看到单个项目。所以我的问题是如何管理 getView 以在自定义 View 中返回两个项目。

这是迄今为止我的代码:

Activity 类别:

List<String> mItemsImage;
List<String> mItemsText;

@Override
public void onCreate(Bundle savedInstanceState){
    super.onCreate(savedInstanceState);
    setContentView(R.layout.mylayout);

    mItemsImage = new ArrayList<String>();
    mItemsText = new ArrayList<String>();

    mGridView = (GridView) findViewById(R.id.mygridview);

    fillArraylists();

    mGridView.setAdapter(new CustomItemAdapter(this, mItemsImage, mItemsText));

    mGridView.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
            Toast.makeText(MyActivity.this, "text is + "mItemsText.get(position), Toast.LENGTH_SHORT).show();
        }
    });
}

适配器类:

class CustomItemAdapter extends BaseAdapter{
    private Context mContext;
    private List<String> mImageList;
    private List<String> mTextList;

    public CustomItemAdapter(Context c, List<String> imageList, List<String> textList) {
        mContext = c;
        mImageList = imageList;
        mTextList = textList;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        CustomItem item;

        if (convertView == null) {  // if it's not recycled, initialize some attributes
            item = new CustomItem(mContext, mImageList.get(position), mTextList.get(position));
            item.findViewById(R.id.grid_item);//Tried to add this line in a second moment, but it didn't work anyway
            item.setLayoutParams(new GridView.LayoutParams(parent.getWidth() >> 2, parent.getHeight() >> 2));
        } else {
            item = (CustomItem) convertView;
        }
        return item;
        //if I do 'return item.image' or 'return item.text' I can see the View on screen normally
    }
}

自定义项目类:

class CustomItem extends RelativeLayout{
    public ImageView image;
    public TextView text;

    public CustomItem(Context ctx, String imagepath, String description){
        super(ctx);

        image = new ImageView(ctx);
        image.findViewById(R.id.grid_item_image);
        image.setScaleType(ImageView.ScaleType.CENTER_CROP);
        image.setPadding(8, 8, 8, 8);
        image.setImageBitmap(BitmapFactory.decodeFile(imagepath));

        text = new TextView(ctx);
        text.findViewById(R.id.grid_item_text);
        text.setPadding(8, 0, 8, 0);
        text.setText(description);
    }
}

mylayout.xml:

...

<GridView
    android:id="@+id/mygridview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background_lightgrey_rect"
    android:gravity="center"
    android:numColumns="2"
    android:stretchMode="columnWidth" >
</GridView>

grid_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/grid_item" >

    <ImageView
        android:id="@+id/grid_item_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/default_image"
        android:contentDescription="@string/image_not_found" />

    <TextView
        android:id="@+id/grid_item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/grid_item_image"
        android:layout_centerHorizontal="true"
        android:text="@string/image_not_found"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>

Answer 1

好的，我找到了解决方案的一部分。

基于this ，我编辑了getView方法如下:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    RelativeLayout item;

    if (convertView == null) {  // if it's not recycled, initialize some attributes
        LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        item = (RelativeLayout) inflater.inflate(R.layout.grid_item, null, true);
        ImageView image = (ImageView) item.findViewById(R.id.grid_item_image);
        image.setScaleType(ImageView.ScaleType.CENTER_CROP);
        image.setImageBitmap(BitmapFactory.decodeFile(mImageList.get(position)));

        TextView text = (TextView) item.findViewById(R.id.grid_item_text);
        text.setText(mTextList.get(position));
        item.setLayoutParams(new GridView.LayoutParams(parent.getWidth() >> 2, parent.getHeight() >> 2));

    } else {
        item = (RelativeLayout) convertView;
    }

    return item;
}

我不再需要 CustomItem 类。

grid_item.xml 现在是:

<ImageView
    android:id="@+id/grid_item_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/grid_item_text"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:contentDescription="@string/image_not_found"
    android:src="@drawable/default_image" />

<TextView
    android:id="@+id/grid_item_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:text="@string/image_not_found"
    android:textAppearance="?android:attr/textAppearanceLarge" />

(不过，我的 gridView 仍然存在一些可视化问题。第一个元素丢失了，我可以滚动到第二个元素上方)