Gridview android studio kotlin

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

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

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

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

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

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

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

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

Источник

Tutorialwing

In this article, we will learn about android GridView using Kotlin. We will go through various example that demonstrates how to use different attributes of GridView. For example,

In this article, we will get answer to questions like –

• What is GridView?
• Why should we consider GridView while designing ui for any app?
• What are possibilities using GridView while designing ui? etc.

Let’s have a quick demo of things we want to cover in this tutorial –

Output

Getting Started

We can define android GridView widget as below –

GridView is, a subclass of ViewGroup, a widget that are used to display items in 2-dimensional scrollable grid like view. You can use either BaseAdapter or ArrayAdapter or any other custom adapter to provide data in GridView.

Now, how do we use GridView in android application ?

Creating New Project

At first, we will create an application.
So, follow steps below to create any android project in Kotlin –

Step	Description
1.	Open Android Studio (Ignore if already done).
2.	Go to File => New => New Project. This will open a new window. Then, under Phone and Tablet section, select Empty Activity. Then, click Next.
3.	In next screen, select project name as GridView. Then, fill other required details.
4.	Then, clicking on Finish button creates new project.

Some very important concepts (Recommended to learn before you move ahead)

Before we move ahead, we need to setup for viewBinding to access Android GridView Using Kotlin file without using findViewById() method.

Setup ViewBinding

Add viewBinding true in app/build.gradle file.

Now, set content in activity using view binding.
Open MainActivity.kt file and write below code in it.

Now, we can access view in Kotlin file without using findViewById() method.

Using GridView in Kotlin

Follow steps below to use GridView in newly created project –

• Open res/values/strings.xml file. Then, add below code into it.
• Now, open res/values/dimens.xml file. Then, add below code into it.

Note – If there is no dimens.xml file in res/layout folder, then, you need to create this file.

Create View For Single Item in GridView

Now, you need to create a view for an item shown in gridView. So, create an xml file, named list_item.xml, in res/layout folder.

Now, open main/res/layout/list_item.xml file. Then, add below code into this file.

We are showing image and name of an item in gridView. So, there is imageView and textView in list_item.xml file.

Create Adapter For GridView

Now, we will create an customer adapter for GridView that will be used to provide data to it.

So, create a kotlin class, named ImageListAdapter.kt, file in main/java/com.tutorialwing.gridview folder. Then, add below code into it.

As we already know, this class provides data for an item to the GridView. We have inherited this class from ArrayAdapter class. A constructor has also been defined that accepts context, resourceId and itemList. resourceId is id of xml layout file of single item. Then, we have overridden some of the methods in this class.

S. No.	Method	Description
1.	getCount()	It returns the number of elements in item list provided to adapter class. Number of grids in gridView will be equal to number of elements
2.	getView()	Returns the view at given position in the adapter. Here, It’s using class ItemHolder to recycle/reuse the already created View. Note that a view is created only when convertView is null. Otherwise, it’s returning already created view.

Since adapter class is ready, we will use GridView widget in xml file. Then, we will access this GridView using kotlin file and perform some operations on it.
Open res/layout/activity_main.xml file. Then, add below code in it –

In activity_main.xml file, we have used gridView widget. This widget is responsible for providing view like grid. Now, we will access this gridView using kotlin file and perform some actions on it.
We can also access it in Kotlin File, MainActivity.kt, as below –

Here, we have accessed gridView using kotlin file i.e. In MainActivity.kt file. Then, an instance of ImageListAdapter class has been created. Then, this adapter class is set as an adapter of gridView.

After that we have set click listener (ItemClickListener) to gridView.

Now, run the application. We will get output as below –

Custom Adapter Using BaseAdapter

We can also create adapter for gridView by inheriting it from BaseAdapter. We can do it as below –

Create a new file, named ImageAdapter.kt, in main/java/com.tutorialwing.gridview folder. Then, add below code into it.

In this file, a single element contains only image. So, We can download all the drawable images here. Then, unzip the file and put all the images in res/drawable folder.

In this file, following methods have been overridden in this file –

S. No.	Method	Description
1.	getCount()	It returns the number of elements in item list provided to adapter class. Number of grids in gridView will be equal to number of elements
2.	getView()	Returns the view at given position in the adapter. Here, It’s using class ItemHolder to recycle/reuse the already created View. Note that a view is created only when convertView is null. Otherwise, it’s returning already created view.
3.	getItem()	Returns the item present at given position.
4.	getItemId()	Returns the id of the item at given position.

We can set this adapter in gridView as below –

Difference between BaseAdapter and ArrayAdapter

BaseAdapter is abstract while ArrayAdapter extends BaseAdapter. If you are using ArrayAdapter, you inherits all the features implemented in ArrayAdapter. But, if you are using BaseAdapter, you will have to implements all the abstract methods.

Different Attributes of GridView in XML

Now, we will see how to use different attributes of Android GridView using Kotlin to customise it –

Set Id of GridView

Many a time, we need id of View to access it in kotlin file or create ui relative to that view in xml file. So, we can set id of GridView using android:id attribute like below –

Here, we have set id of GridView as gridView_ID using android:id=”” attribute. So, if we need to reference this GridView, we need to use this id – gridView_ID.
Learn to Set ID of GridView Dynamically

Set Width of GridView

We use android:layout_width=”” attribute to set width of GridView.
We can do it as below –

Width can be either “MATCH_PARENT” or “WRAP_CONTENT” or any fixed value (like 20dp, 30dp etc.).
Learn to Set Width of GridView Dynamically

Set Height of GridView

We use android:layout_height=”” attribute to set height of GridView.
We can do it as below –

Height can be either “MATCH_PARENT” or “WRAP_CONTENT” or any fixed value.
Learn to Set Height of GridView Dynamically

Set Padding of GridView

We use android:padding=”” attribute to set padding of GridView.
We can do it as below –

Here, we have set padding of 10dp in GridView using android:padding=”” attribute.
Learn to Set Padding of GridView Dynamically

Set Margin of GridView

We use android:layout_margin=”” attribute to set margin of GridView.
We can do it as below –

Here, we have set margin of 10dp in GridView using android:layout_margin=”” attribute.
Learn to Set Margin of GridView Dynamically

Set Background of GridView

We use android:background=”” attribute to set background of GridView.
We can do it as below –

Here, we have set background of color #ff0000 in GridView using android:background=”” attribute.
Learn to Set Background of GridView Dynamically

Set Visibility of GridView

We use android:visibility=”” attribute to set visibility of GridView.
We can do it as below –

Here, we have set visibility of GridView using android:visiblity=”” attribute. Visibility can be of three types – gone, visible and invisible
Learn to Set Visibility of GridView Dynamically

Thus, we have seen what is GridView, how can we use android GridView using Kotlin ? etc. We also went through different attributes of android GridView.

Источник