在Android Gridview中显示复合项目

时间:2013-04-12 12:44:54

标签: android layout gridview custom-component

我正在尝试显示一个元素网格,每个元素由一个包含ImageView顶部的RelativeView的RelativeLayout组成。

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

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

到目前为止,这是我的代码:

活动类:

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

CustomItem类:

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>

1 个答案:

答案 0 :(得分:2)

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

基于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有一些可视化问题。第一个元素缺失,我可以滚动到第二个元素上方)