Android. Пользовательские элементы GridView

В этой статье рассматривается возможность создания пользовательских элементов для компонента GridView. Эта проблема порождена тем, что адаптер для GridView воспринимает как элементы только объекты класса View. В качестве примера будет использоваться элемент, состоящий из изображения и текста.

Приступим к примеру. Для начала нам понадобится объявить блок GridView в разметке. Например:

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

    <GridView
        android:id="@+id/custom_grid"
        android:columnWidth="100dp"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:numColumns="auto_fit" >
    </GridView>

</LinearLayout>

Проинициализируем GridView, добавив адаптер в методе onCreate() класса Activity:

package com.seostella.customgridview;

import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;

public class CustomGridViewActivity extends Activity {
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		GridView customGrid = (GridView) findViewById(R.id.custom_grid);
		customGrid.setAdapter(new CustomGridAdapter(this));
	}
}

Создадим адаптер для GridView:

package com.seostella.customgridview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomGridAdapter extends BaseAdapter{
	private Context context;

	public CustomGridAdapter(Context context) {
		this.context = context;
	}

	@Override
	public int getCount() {
		return 12;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		View customView = convertView;

		if (convertView == null) {
			LayoutInflater li = LayoutInflater.from(context);
			customView = li.inflate(R.layout.item, null);

			TextView tv = (TextView) customView
					.findViewById(R.id.item_text_view);
			tv.setText("Item " + position);

			ImageView iv = (ImageView) customView
					.findViewById(R.id.item_image_view);
			iv.setImageResource( R.drawable.ic_launcher );
		}

		return customView;
	}

	@Override
	public Object getItem(int arg0) {
		return null;
	}

	@Override
	public long getItemId(int arg0) {
		return 0;
	}
}

Рассмотрим ключевые особенности этого класса.

public int getCount() {
	return 12;
}

- означает, что в GridView будет 12 элементов.

В методе getView() происходит создание пользовательского элемента GridView. Ниже приведен этот метод.

@Override
public View getView(int position, View convertView, ViewGroup parent) {
	View customView = convertView;

	if (convertView == null) {
		LayoutInflater li = LayoutInflater.from(context);
		customView = li.inflate(R.layout.item, null);

		TextView tv = (TextView) customView
				.findViewById(R.id.item_text_view);
		tv.setText("Item " + position);

		ImageView iv = (ImageView) customView
				.findViewById(R.id.item_image_view);
		iv.setImageResource( R.drawable.ic_launcher );
	}

	return customView;
}

Для создания пользовательского элемента, достаточно получить его разметку с помощью следующих двух строчек кода:

// ...
LayoutInflater li = LayoutInflater.from(context);
customView = li.inflate(R.layout.item, null);
// ...

Дальше с элементом можно производить те же операции, что и с обычным элементом разметки. В данном случае каждому элементу присваевается текст "Item 0", "Item 1", "Item 2" и т.д. А для всех изображений будет использована стандартная иконка R.drawable.ic_launcher.

Разметка элемента, которая использовалась в примере (файл item.xml):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/item" 
	android:layout_width="wrap_content"
	android:layout_height="wrap_content" 
	android:orientation="vertical" >

	<ImageView 
		android:id="@+id/item_image_view"
		android:layout_width="wrap_content" 
		android:layout_height="wrap_content">
	</ImageView>

	<TextView 
		android:id="@+id/item_text_view"
		android:layout_width="wrap_content" 
		android:layout_height="wrap_content" >
	</TextView>

</LinearLayout>

В итоге Вы увидите на экране эмулятора (мобильного телефона) следующее окно: