Пришло время разобраться с таким элементом пользовательского интерфейса Android приложений, как GridView. GridView это вид объектов в виде сетки, который очень часто используется в самых разнообразных приложениях. Особенно полезно его использование в тех случаях, когда нужно компактно представить некоторые данные, например, изображения или вкладки программы. Элемент GridView может использоваться как для создания приложения просмотра изображений, так и для аудио или видео плеера, в котором элементы будут отображаться в виде сетки. 

Создаем новый проект, традиционно все названия оставим по умолчанию, либо можете назвать по своему, но вся дальнейшая путаница на вашей совести. Выбираем Blank Activity. Мы будет отображать набор изображений в виде сетки, поэтому подготовьте набор картинок, который будете использовать и поместите его в папке res/drawable-hdpi. Можно взять картинки с одного из прошлых уроков. 

Открываем layout файл по имени activity_main.xml и добавим туда GridView:

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

Теперь создадим новый java класс по имени ImageAdapter.java, который расширяется от BaseAdapter и добавим в него следующий код:

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

public class ImageAdapter extends BaseAdapter {
 private Context mContext;

 //Добавляем изображения в массив:
 public Integer[] mThumbIds = {
 R.drawable.leaves, R.drawable.sun, R.drawable.water, 
 };

 //Конструктор:
 public ImageAdapter(Context c){
 mContext = c;
 }

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

 @Override
 public Object getItem(int position) {
 return mThumbIds[position];
 }

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

 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
 ImageView imageView = new ImageView(mContext);
 imageView.setImageResource(mThumbIds[position]);
 imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
 imageView.setLayoutParams(new GridView.LayoutParams(70, 70));
 return imageView;
 }
}

Теперь откроем основной java класс приложения MainActivity.java и немного его изменим до вот такого состояния:

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;

public class MainActivity extends Activity {

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

 GridView gridView = (GridView) findViewById(R.id.grid_view);

 //Создаем пример класса ImageAdapter:
 gridView.setAdapter(new ImageAdapter(this));
 }
}

Можем запустить наше приложение уже сейчас и посмотреть, что из него получилось:

Наши картинки отображаются в виде сетки, но при нажатии на них ничего не происходит. Давайте немного усовершенствуем программу и добавим ей функцию просмотра выбранной картинки в полный экран. Для этого создадим в нашем проекте новый xml файл по имени full_image.xml и добавим туда следующее:

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

Нужно также создать новый класс по имени FullImageActivity.java и снабдить его таким кодом:

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;

public class FullImageActivity extends Activity {

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

 //Создаем намерение получать данные:
 Intent i = getIntent();

 //Получаем id изображения:
 int position = i.getExtras().getInt("id");
 ImageAdapter imageAdapter = new ImageAdapter(this);

 ImageView imageView = (ImageView) findViewById(R.id.full_image_view);
 imageView.setImageResource(imageAdapter.mThumbIds[position]);
 }
}

Теперь нужно возвратиться к MainActivity.java и немного его преобразовать, а именно добавить метод обработки нажатий по изображениям:

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;

public class MainActivity extends Activity {

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

 GridView gridView = (GridView) findViewById(R.id.grid_view);

 //Создаем пример класса ImageAdapter:
 gridView.setAdapter(new ImageAdapter(this));

 /**
 * Обработчик нажатия для GridView элемента:
 * */
 gridView.setOnItemClickListener(new OnItemClickListener() {
 @Override
 public void onItemClick(AdapterView<?> parent, View v,
 int position, long id) {

 //Отправляем id изображения в класс FullImageActivity:
 Intent i = new Intent(getApplicationContext(), FullImageActivity.class);
 //Передаем необходимый index:
 i.putExtra("id", position);
 startActivity(i);
 }
 });
 }
}

Для того, чтобы приложение заработало, остается только зайти в манифест приложения AndroidManifest.xml и добавить в него созданные новые активности:

<activity android:name=".FullImageActivity"></activity>

Запускаем приложение и смотрим на конечный результат: