Табличная разметка (Grid View)

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

В введении к разделу мы рассмотрели пример динамического формирования элементов с помощью адаптера.

Пример

В данном уроке мы создадим сетку для картинок. При нажатии на картинку будем отображать ее положение в таблице.

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

    Здесь компонент GridView заполняет весь экран. Атрибуты в целом очевидны. Подробнее об атрибутах читайте в документации класса GridView.

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

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

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

  5. Создайте новый класс ImageAdapter, который наследует абстрактный класс BaseAdapter:

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

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

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

    Если переданный объект View не равен null, ImageView повторно использует для инициализации существующий View.

    В конце метода getView() используется параметр position для выбора изображения из массива ресурсов изображений mThumbIds.

    Все, что осталось, это определить массив ресурсов изображений mThumbIds.

  6. Запустите приложение.

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

Добавить комментарий