Как заполнить 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 – еще один из компонентов, использующих адаптеры. Он выводит элементы в виде сетки/матрицы/таблицы, нужное подчеркнуть )

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

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 нажатого элемента. Все как в обычных списках.

Читайте также: Limbo android 4 pda

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

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

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

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

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

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

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

Источник

GridView кастомный адаптер

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

Шаг 1. Создание проекта

Для этого примера я созал новый Android Gradle проект и добавил в него проектой MainActivity:

Теперь создадим новый layout activity_main.xml как показанно в 12-й строке он нужн для нашего MainActivity:

Также не забудьте добавить activity в AndroidManifest.xml:

Обратите внимание что я использую не LinerLayout и не другие типы Layout-ов а GridView, но это не критично и вам не обязательно делать также. В этом примере мне не нужны другие layout поэтом я решил не использовать их.

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

Также стоит обратить внимание на некоторые свойства компонента GridView:

android:numColumns=»auto_fit» – тут мы указываем количество колонок, так как установленно свойство auto_fit, то это количество будет определятся устройством.
android:id=»@+id/gridView» – мы указали ID чтобы иметь доступ к этому компоненту и добавлять элементы.

Шаг 2. Объект – элемент GridView

Теперь перед нами стоит задача заполнить наш GridView кнопками с именем продукта.

Для начало создадим наш продукт:

Этим объектом мы будем заполнять наш GridView.

Шаг 3. Создаём адаптер

Для того чтобы мы могли заполнить наш GridView созданым объектом во втором шаге нам нужно создать адаптер.

Создаем класс ProductAdapter и наслеуем его от BaseAdapter:

Как видите унаследовав BaseAdapter нам нужно было реализовать несколько методов, давайте их разберем.

Для начало нам нужно объявить наш список обектов (смотреть строку 15). Далее нужно создать переменую для контекста, он нам потребуется для заполнения обектов GridView.

int getCount() – должен возвращать количество элементов GridView, это наш список в строке 15;

Object getItem(int position) – возвращает эелемент с нашего GridView, где position – это индекс элемента в нашем списке;

long getItemId(int position) – возвращает id нашего элемента, в нашем случае он соответствует позиции.

View getView(int position, View convertView, ViewGroup parent) – должен возвращать элемент, который будет добавлен в GridView . Обычно тут создают и конфигурируют элемент для GridView .

Шаг 4. Применяем наш адаптер

Осталось применить наш адаптер для нашего GridView. Вернемся в MainActivity и в метод onCreate добавим создание списка наших продуктов:

После того как подготовили список продуктов, нужно применить наш адаптер к нашему GridView. Получаем GridView используя метод findViewById и после в строке 13 мы устанавливаем наш адаптер и в качестве параметра передаём контекст и список продуктов.

Источник