Gridview android что это

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

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

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

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

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

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

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

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

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

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

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

Источник

GridView

Знакомьтесь — GridView

Компонент GridView представляет собой плоскую таблицу. Для GridView можно использовать собственные поля для отображения элементов данных, создав класс, производный от класса ArrayAdapter или BaseAdapter и т.п, и переопределив его метод getView().

В старых версиях студии находился в разделе Containers, сейчас находится в Legacy и считается устаревшим.

Число столбцов для GridView чаще задаётся статически. Число строк в элементе определяется динамически на основании числа элементов, которые предоставляет адаптер.

Свойства

android:numColumns — определяет количество столбцов. Если поставлено значение auto_fit, то система вычислит количество столбцов, основанное на доступном пространстве
android:verticalSpacing — устанавливает размер пустого пространства между ячейками таблицы
android:columnWidth — устанавливает ширину столбцов
android:stretchMode — указывает, куда распределяется остаток свободного пространства для таблицы с установленным значением android:numColumns=»auto_fit». Принимает значения columnWidth для paспределения остатка свободного пространства между ячейками столбцов для их увеличения или spacingWidth — для увеличения пространства между ячейками

Базовый пример

Если поместить GridView на форму, то увидим следующую картину.

Внесём небольшие правки

В коде реализуем наполнение таблицы через адаптер. Создадим новый файл DataAdapter.java:

Теперь напишем код для основного окна приложения. Как и у ListView, нам нужно использовать метод setAdapter(), а также методы setOnItemSelectedListener(), onItemSelected(), onNothingSelected().

Запустите проект и начинайте выбирать любой элемент — его название отобразится в текстовой метке в верхней части экрана. Я обратил внимание, что в эмуляторе с помощью джойстика можно выбрать нужный элемент, но в современных телефонах джойстика нет, поэтому я позже добавил метод setOnItemClickListener(), чтобы можно было щёлкать по элементам в GridView и выводить их названия в метке.

GridView с картинками

Вместо текста можно использовать и картинки. Немного модифицируем проект. В шаблоне разметки изменим GridView:

Создадим новый адаптер ImageAdapter.java, в котором будет возможность подключать картинки

Теперь код в основной активности:

Зная номер позиции можно доработать программу, чтобы при щелчке на картинке, она открывалась на весь экран. Давайте так и сделаем. Создадим новый XML-файл разметки в папке res/layout под именем full_image.xml:

Создадим новую активность, в которой будет выводиться изображение на весь экран (файл FullImageActivity.java):

Класс получает от намерения номер позиции и выводит по этому номеру изображение из ресурсов.

Теперь в основной активности модифицируем код для щелчка

Осталось добавить в манифест новую активность:

У нас получилась галерея с просмотром отдельной картинки.

GridView с картинками и пояснительным текстом

Модифицируем предыдущий пример и создадим сетку, состоящую из картинок с сопроводительным текстом внизу.

Можно было оставить предыдущую разметку для активности, но я решил чуть её изменить, убрав лишние элементы

Теперь создадим разметку для отдельной ячейки сетки — нам нужны ImageView и TextView:

res/layout/cellgrid.xml

Создадим новый класс ImageTextAdapter. Он практически не отличается от класса ImageAdapter, поменялся только метод getView(), разницу в коде я закоментировал для сравнения

Осталось вызвать нужный адаптер в активности:

Убрать вертикальную прокрутку

Прочитал заметку про убирание вертикальной прокрутки, которая возникает при движении пальцем вверх. Может пригодится кому-то:

Галерея

Рассмотрим вариант создания галереи на основе GridView.

Создаём новый проект. Также нужно подготовить фотографии для галереи, которые следует поместить в папку res/drawable-hdpi.

Поместим на главном экране приложения GridView:

Создадим новый класс ImageAdapter.java, наследующий от BaseAdapter, для размещения изображений в сетке GridView через собственный адаптер.

Открываем основной класс приложения и связываем через созданный адаптер изображения с GridView:

Запустим проект и проверим, что всё отображается нормально.

Не обращайте внимания, что картинки на скриншоте повторяются, просто было лень готовить пятнадцать разных фотографий.

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

Создадим в папке layout файл разметки full_image.xml для этой цели.

Создадим новый класс FullImageActivity.java для активности, которая будет отображать картинку на весь экран. Активность через намерение будет получать идентификатор картинки и выводить её на экран.

Не забываем прописать новый класс в манифесте проекта.

Возвращаемся к главной активности и добавляем обработчик щелчков на сетке:

Снова запускаем проект и щёлкаем по любой миниатюре — должен запуститься новый экран с картинкой во весь рост. Теперь можно разглядеть кота получше.

Загружаем картинки из внешнего накопителя

Попробуем загрузить картинки с внешнего накопителя в GridView. Пример писался под Android 2.3, возможно сейчас уже не заработает.

Разметка основного экрана состоит из одного компонента GridView:

Для данного компонента нужен адаптер. Создадим новый класс ImageAdapter.

ImageAdapter.java

Код для главной активности:

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

Источник

Элемент управления GridView. Android

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

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

Запустите новый проект с именем хеллогридвиев.

Найдите фотографии, которые вы хотели бы использовать, или Скачайте эти образцы изображений. Добавьте файлы изображений в каталог ресурсов проекта. В окне Свойства задайте для параметра Действие сборки значение AndroidResource.

Откройте файл Resources/Layout/Main. axml и вставьте в него следующее:

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

Откройте HelloGridView.cs и вставьте следующий код для OnCreate() Method

После того как для представления содержимого будет задан макет Main. axml , объект будет захвачен из макета с помощью FindViewById . Классу Adapter Затем свойство используется для задания пользовательского адаптера () в ImageAdapter качестве источника для всех элементов, отображаемых в сетке. Объект ImageAdapter создается на следующем шаге.

Чтобы сделать что-то при щелчке элемента в сетке, на событие подписывается анонимный делегат ItemClick . Он показывает Toast , что показывает позицию индекса (от нуля) выбранного элемента (в реальном сценарии это положение можно использовать для получения изображения полного размера для некоторой другой задачи). Обратите внимание, что вместо событий .NET можно использовать классы прослушивателей в стиле Java.

Создайте новый класс с именем ImageAdapter , подклассом BaseAdapter :

Во первых, он реализует некоторые обязательные методы, наследуемые от BaseAdapter . Конструктор и Count свойство являются самими пояснениями. Возмож GetItem(int) должен возвращать фактический объект в указанной позиции в адаптере, но он игнорируется в этом примере. Подоб GetItemId(int) должен возвращать идентификатор строки элемента, но здесь это не требуется.

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

LayoutParams Задает высоту и ширину представления — это гарантирует, что независимо от размера рисунка размер изображения изменяется и обрезается в соответствии с соответствующими размерами.

SetScaleType() объявляет, что изображения следует обрезать в центре (при необходимости).

SetPadding(int, int, int, int) Определяет заполнение для всех сторон. (Обратите внимание, что если изображения имеют разные пропорции, то меньшее заполнение приведет к более обрезке изображения, если оно не соответствует измерениям, заданным для Имажевиев.)

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

В конце GetView() , position целое число, передаваемое в метод, используется для выбора изображения из thumbIds массива, установленного в качестве ресурса изображения для ImageView .

Все, что осталось, — это определить thumbIds массив рисуемых ресурсов.

Запустите приложение. Макет сетки должен выглядеть примерно так:

Попробуйте поэкспериментировать с поведением GridView и ImageView путем настройки их свойств. Например, вместо использования функции LayoutParams try используйте SetAdjustViewBounds() .

Ссылки

части этой страницы являются изменениями на основе работы, созданной и совместно используемой Project Android с открытым кодом, и используются в соответствии с терминами, описанными в лицензии Creative commons attribution 2,5.

Источник

Полный список

GridView – еще один из компонентов, использующих адаптеры. Он выводит элементы в виде сетки/матрицы/таблицы, нужное подчеркнуть )

Сделаем простой пример. И рассмотрим интересные атрибуты этого компонента.

Project name: P0571_GridView
Build Target: Android 2.3.3
Application name: GridView
Package name: ru.startandroid.develop.p0571gridview
Create Activity: MainActivity

В экран main.xml поместим GridView:

Создадим в любой папке res/drawable-* файл rect.xml

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

Создадим свой layout для адаптера – item.xml

LinearLayout с фоном drawable/rect, который мы создали ранее. И TextView.

Кода немного. Определяем GridView и создаем адаптер. В качестве layout для адаптера используем созданный item.xml, а tvText – это элемент, в который адаптер будет вставлять текст. Метод adjustGridView пока пустой, в нем будем кодить настройки Grid-а.

Давайте смотреть, какие для GridView есть атрибуты.

numColumns и columnWidth

numColumns – кол-во столбцов в сетке. Если его не задавать, то столбец будет по умолчанию один. Запустим приложение и убедимся.

Давайте поменяем это свойство — укажем, например 3. Сделаем это в пустом пока что методе adjustGridView

Сохраним и запустим.

Все верно, получилось три столбца.

Это свойство также может иметь значение AUTO_FIT. В этом случае проверяется значение поля атрибута columnWidth (ширина столбца).

— если ширина столбца явно указана, то кол-во столбцов рассчитывается исходя из ширины, доступной GridView, и ширины столбцов.

— иначе, кол-во столбцов считается равным 2

Проверим. Укажем кол-во столбцов = AUTO_FIT, а ширину столбцов задавать пока не будем.

Запускаем, видим два столбца

Теперь укажем явно ширину столбцов, пусть будет 50.

Теперь кол-во столбцов рассчитывается исходя из их ширины.

Видно, что в экран влезло 6 столбцов. Вы можете поизменять параметр ширины столбцов и убедиться, что их кол-во будет меняться.

horizontalSpacing, verticalSpacing

Это горизонтальный и вертикальный отступы между ячейками. Пусть будет 5.

Между ячейками появилось расстояние.

stretchMode

Этот параметр определяет, как будет использовано свободное пространство, если оно есть. Используется в случае, когда вы указываете ширину столбца и кол-во ставите в режим AUTO_FIT. Изменим наш метод, добавим туда настройку stretch-параметра.

stretchMode может принимать 4 значения:

NO_STRETCH – свободное пространство не используется

Столбцы выровнены по левому краю. Все свободное пространство справа.

STRETCH_COLUMN_WIDTH – свободное пространство используется столбцами, это режим по умолчанию

Столбцы растянуты по ширине. Она уже может не соответствовать той, что указана в setColumnWidth.

STRETCH_SPACING – свободное пространство равномерно распределяется между столбцами

Ширина столбцов неизменна. Увеличены интервалы между ними.

STRETCH_SPACING_UNIFORM – свободное пространство равномерно распределяется не только между столбцами, но и справа и слева

Ширина столбцов неизменна. Увеличены интервалы между ними и с боков.

Разумеется, все эти параметры можно задавать не только программно, но и через атрибуты в layout-файлах. Вместо ArrayAdapter можно использовать любой другой. Можно прикрутить обработчик setOnItemClickListener и получать позицию или id нажатого элемента. Все как в обычных списках.

Есть также хороший гугловский пример по этой теме:

На следующем уроке:

Присоединяйтесь к нам в Telegram:

— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.

— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование

— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня

— новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме

Источник