GridView является составляющей частью ViewGroup отображающим элементы дву-пространственной, пролистываемой таблицы. Элементы таблицы автоматически попадают на экран приложения при помощи элемента ListAdapter.

В данном руководстве, вы создадите таблицу из миниатюр. Когда вы выберете элемент, сообщение укажет вам о расположении изображения.

1. Создайте новый проект HelloGridView.
2. Отберите фотографии, которые вы будете использовтаь, либо скачайте данный архив с образцами миниатюр. Сохраните файлы изображений в каталог res/drawable/
3. Откройте файл res/layout/main.xml и вставьте следующий код:

[code lang=»xml»]
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
[/code]

Элемент GridView заполнит весь экран. Атрибуты говорят сами за себя. Более подробную информацию об атрибутах можно прочитать на GridView .

4. Откройте файл HelloGridView.java и вставьте следующий код при помощи метода onCreate() :

[code lang=»js»]
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));

gridview.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show();
}
});
}
[/code]

После установки раскладки main.xml под режим просмотра содержимого, из элемент GridView получает значение внешнего вида вместе с findViewById(int). Затем метод setAdapter() устанавливает адаптер (ImageAdapter) в качестве источника всех элементов, отображаемых в таблице. Сам файл ImageAdapter мы создадим в следующем шаге.

Для того, чтобы вызывать файл в таблице по клику, метод setOnItemClickListener() получает новое значение AdapterView.OnItemClickListener. Этот анонимный класс определяет возвратный метод onItemClick(), используемый для показа Toast который отражает индексную позицию (основанную на нулевом значении) выбранного элемента. (на практике эта значение может быть использовано для получения полноразмерной картинки).

5. Создайте новый класс ImageAdapter, расширяющий программное значение BaseAdapter:

[code lang=»js»]
public class ImageAdapter extends BaseAdapter {
private Context mContext;

public ImageAdapter(Context c) {
mContext = c;
}

public int getCount() {
return mThumbIds.length;
}

public Object getItem(int position) {
return null;
}

public long getItemId(int position) {
return 0;
}

// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) { // if it’s not recycled, initialize some attributes
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}

imageView.setImageResource(mThumbIds[position]);
return imageView;
}

// references to our images
private Integer[] mThumbIds = {
R.drawable.sample_2, R.drawable.sample_3,
R.drawable.sample_4, R.drawable.sample_5,
R.drawable.sample_6, R.drawable.sample_7,
R.drawable.sample_0, R.drawable.sample_1,
R.drawable.sample_2, R.drawable.sample_3,
R.drawable.sample_4, R.drawable.sample_5,
R.drawable.sample_6, R.drawable.sample_7,
R.drawable.sample_0, R.drawable.sample_1,
R.drawable.sample_2, R.drawable.sample_3,
R.drawable.sample_4, R.drawable.sample_5,
R.drawable.sample_6, R.drawable.sample_7
};
}
[/code]

Во-первых, он вводит некоторые требуемые методы, унаследованные от BaseAdapter. Конструктор и элемент getCount() не требуют пояснений. Как правило, getItem(int) должен вернуть текущий объект к конкретной позиции адаптера, но в данном примере данное свойство отмечено не было. Таким же образом, getItemId(int) id ряда, но здесь это не требуется.

Первым необходимым методом является getView(). Данный метод создает новый элемент View для каждого изображения добавленного в ImageAdapter. Когда он вызывается, туда попадает элемент View, который обычно представляет собой утилизируемый объект (по крайней мере после того как он уже был однажды вызван), поэтому система проводит проверку, если объект не имеет нулевое значение. Если это происходит, элемент ImageView инициализируется и конфигурируется в соответствие с предпочитаемыми свойствами воспроизведения изображения:

o setLayoutParams(ViewGroup.LayoutParams) устанавливает высоту и ширину элемента View—это гарантирует, что вне зависимости от размера изображения, каждый из них будет подогнано под нужный размер с тем, чтобы соответствовать необходимым размерам.
o setScaleType(ImageView.ScaleType) указывает на то, что изображения необходимо будет кадрировать по центру (если необходимо).
o setPadding(int, int, int, int) определяет отступление со всех сторон. (Обратите внимание на то, что если у изображений разные соотношения сторон, меньший отступ будет означать большую центровку изображения, если его размер не совпадает с размерамИ, определенными ImageView.)

Если элемент View переданный подклассу getView()обладает не нулевым значением, тогда активный ImageView инициализируется вместе с утилизируемым объектом View .

Заканчивая говорить о методе getView() , стоит упомянуть, что числовое значение position переданное данному методу используется для выбора изображения из строки mThumbIds , являющейся источником изображений для ImageView.

6. Запустите приложение
Ваша раскладка в виде таблицы должна выглядеть примерно так:

Попробуйте поэкспериментировать с поведением элементов GridView и ImageView , изменяя их свойства. Например, вместо использования setLayoutParams(ViewGroup.LayoutParams), примените setAdjustViewBounds(boolean).