Tab layout android kotlin

Как cоздать экран с вкладками в Android на языке Kotlin

Продолжаем серию уроков об разработке мобильных андроид приложений на языке Kotlin.

В этом уроке мы покажем, как просто внедрить вкладки TabLayout в приложение Android на языке Kotlin с использованием класса FragmentPagerAdapter.

Создаем проект

Для начала создаем проект в Android Studio с Empty Activity.
В файл сборки build.gradle модуля app имплементируем библиотеку:

implementation 'com.android.support:design:26.1.0'

При нобходимости измените версию библиотеки на более актуальную.

Создаем адаптер

Создаем класс MyPagerAdapter.kt

package . import android.support.v4.app.Fragment import android.support.v4.app.FragmentManager import android.support.v4.app.FragmentPagerAdapter class MyPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) < override fun getItem(position: Int): Fragment < return when (position) < 0 -> < FirstFragment() >1 -> SecondFragment() else -> < return ThirdFragment() >> > override fun getCount(): Int < return 3 >override fun getPageTitle(position: Int): CharSequence < return when (position) < 0 ->"First Tab" 1 -> "Second Tab" else -> < return "Third Tab" >> > >

Класс MyPagerAdapter принимает экземпляр FragmentManager в качестве параметра и унаследуется от класса FragmentPagerAdapter с передачей ему экземпляра класса FragmentManager.

Переопределяем необходимые функции класса FragmentPagerAdapter: getCount() и getItem().

В getCount() мы будем возвращать количество вкладок. Здесь укажем три вкладки, но вы можете указать другое необходимое количество.

В getItem() будем возвращать фрагмент для отображения в текущей вкладке. Позиции во вкладках начинаются с нуля, поэтому перебираем три значения: 0, 1, или else и вызываем соответствующие фрагменты, позже мы создадим и рассмотрим их код.

Переопределим функцию getPageTitle(), которая устанавливает заголовки вкладок. Назовем вкладки просто “First Tab”, “Second Tab”, и “Third Tab”. Разумеется, вы можете подставить свои заголовки.

Создаем фрагменты

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

Создаем фрагменты с именами “FirstFragment”, “SecondFragment” и “ThirdFragment”, как мы вызывали их в классе MyPagerAdapter. При создании фрагментов отмечаем флажком поле “Create layout XML”, а поля “Include fragment factory methods” и“Include interface callbacks” оставляем пустыми.

В созданном автоматически для каждого фрагмента макете разметки добавляем для наглядности текст “First tab”, “Second tab” или “Third Tab” путем добавления компонента TextView с текстом. Это позволит при тестировании приложения определить правильность отображения фрагментов.

Вот пример кода одного из макетов fragment_first.xml, для остальных код аналогичен:

Теперь код фрагмента FirstFragment.kt, для остальных фрагментов код аналогичен.

package . import android.os.Bundle import android.support.v4.app.Fragment import android.view.LayoutInflater import android.view.View import android.view.ViewGroup class FirstFragment : Fragment() < override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? < // Inflate the layout for this fragment return inflater. inflate(R.layout.fragment_first, container, false) >>

Главный экран

В макете главного экрана activity_main.xml удалим TextView, добавленное по умолчанию:

Здесь мы добавим компонент TabLayout с идентификатором tabs. Для атрибута app:tabMode установим параметр fixed. Поскольку у нас только три вкладки, нам не нужна прокрутка компонента TabLayout.

Также добавим компонент ViewPager с идентификатором viewpager и разместим его под TabLayout посредством параметра layout_constraintTop_toBottomOf:

app:layout_constraintTop_toBottomOf="@+id/tabs"

В классе MainActivity.kt подключаем MyPagerAdapter к нашему ViewPager и связываем последний с TabLayout. Это обеспечит привязку нужных фрагментов к их вкладкам.

package . import android.support.v7.app.AppCompatActivity import android.os.Bundle import kotlinx.android.synthetic.main.activity_main.* class MainActivity : AppCompatActivity() < override fun onCreate(savedInstanceState: Bundle?) < super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val fragmentAdapter = MyPagerAdapter(supportFragmentManager) viewpager.adapter = fragmentAdapter tabs.setupWithViewPager(viewpager) >>

Тестируем приложение

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

Как видите, очень просто создать приложение с вкладками в Android на языке Kotlin.

Исходный код приложения доступен здесь.

Источник

Урок 19. Как создать андроид-приложение с вкладками – TabLayout с ViewPager2 на Kotlin

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

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

Добавление TabLayout в макет разметки экрана

Чтобы добавить вкладки на экран, нужно открыть макет разметки и добавить компонент com.google.android.material.tabs.TabLayout в верхней части экрана:

Для корректного размещения нужно изменить компонент ViewPager2 – высоту укажем 0dp. Таким образом, высоту компонента будет регулировать корневой ConstraintLayout по заданным ограничениям. А вместо ограничения app:layout_constraintTop_toTopOf=”parent” поставим app:layout_constraintTop_toBottomOf=”@+id/tab_layout” – чтобы верх компонента ViewPager2 был ограничен не верхней границей родительского компонента, а нижней границей компонента TabLayout.

Рассмотрим подробнее компонент com.google.android.material.tabs.TabLayout. Свойство app:tabMode=”scrollable” обеспечивает размещение в видимой части экрана только нескольких вкладок, остальные будут доступны в процессе прокрутки. Если мы не укажем это свойство, то в видимой части экрана будут одновременно отображаться все вкладки, и при большом их количестве визуальное восприятие будет затруднено.

Свойство app:tabIndicatorColor=”@color/teal_200″ указывает цвет, а app:tabIndicatorHeight=”4dp” – толщину индикатора вкладки.

Далее идут свойства ширины – указываем по родителю – и высоты – указываем по содержимому.

Последние три свойства – ограничения верхней части и боковых сторон компонента по родителю.

Реализация вкладок в MainActivity

Открываем класс MainActivity и пишем реализацию вкладок:

package info.fandroid.viewpager2app import android.os.Bundle import androidx.fragment.app.FragmentActivity import androidx.viewpager2.widget.ViewPager2 import com.google.android.material.tabs.TabLayout import com.google.android.material.tabs.TabLayoutMediator class MainActivity : FragmentActivity() < private lateinit var adapter: NumberAdapter private lateinit var viewPager: ViewPager2 private lateinit var tabLayout: TabLayout override fun onCreate(savedInstanceState: Bundle?) < super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) adapter = NumberAdapter(this) viewPager = findViewById(R.id.pager) viewPager.adapter = adapter tabLayout = findViewById(R.id.tab_layout) TabLayoutMediator(tabLayout, viewPager) < tab, position ->tab.text = "TAB $<(position + 1)>" >.attach() > >

Инициализируем TabLayout так же, как мы это делали с ViewPager2 на прошлом уроке. Сначала объявляем переменную с ленивой инициализацией. В onCreate находим компонент TabLayout по идентификатору в макете разметки и связываем его с переменной.

Для синхронизации компонента TabLayout с ViewPager2, установки текста заголовков вкладок, а также стиля вкладок, используется класс TabLayoutMediator. Судя из его названия, это посредник, который выполняет связывание и согласование позиций списка вкладок со списком страниц ViewPager2, он слушает коллбек ViewPager2 и в соответствии с прокруткой страниц прокручивает и вкладки.

В данном случае мы обращаемся к свойству tab.text и передаем в заголовки одинаковый текст – слово «TAB» – с номером вкладки. Во второй половине урока модифицируем этот участок кода для передачи разного текста в заголовки вкладок.

Метод attach() связывает TabLayout с ViewPager2.

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

Уникальные имена для вкладок

А что, если нам нужно присвоить вкладкам уникальные имена? Давайте это реализуем.

Изменим код класса MainActivity:

package info.fandroid.viewpager2app import android.os.Bundle import androidx.fragment.app.FragmentActivity import androidx.viewpager2.widget.ViewPager2 import com.google.android.material.tabs.TabLayout import com.google.android.material.tabs.TabLayoutMediator class MainActivity : FragmentActivity() < private lateinit var adapter: NumberAdapter private lateinit var viewPager: ViewPager2 private lateinit var tabLayout: TabLayout private val tabNames: Array= arrayOf( "Первый", "Второй", "Третий", "Четвертый", "Пятый", "Шестой", "Седьмой", "Восьмой", "Девятый", "Десятый", ) override fun onCreate(savedInstanceState: Bundle?) < super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) adapter = NumberAdapter(this) viewPager = findViewById(R.id.pager) viewPager.adapter = adapter tabLayout = findViewById(R.id.tab_layout) TabLayoutMediator(tabLayout, viewPager) < tab, position ->tab.text = tabNames[position] >.attach() > >

Мы создаем строковый массив tabNames с набором собственных имен для каждой вкладки. Затем присваиваем имена вкладкам: tab.text = tabNames[position]. Поскольку позиция вкладки служит нам индексом для обращения к элементам массива, имена в массиве должны располагаться в том же порядке.

Мы здесь создали массив имен только из десяти элементов, и во избежание ошибки нужно также ограничить десятью и количество вкладок. Мы определили количество вкладок на прошлом уроке в классе NumberAdapter, в методе getItemCount() – проверьте и исправьте:

package info.fandroid.viewpager2app import android.os.Bundle import androidx.fragment.app.Fragment import androidx.fragment.app.FragmentActivity import androidx.viewpager2.adapter.FragmentStateAdapter class NumberAdapter(fragment: FragmentActivity) : FragmentStateAdapter(fragment) < override fun getItemCount(): Int = 10 override fun createFragment(position: Int): Fragment < val fragment = NumberFragment() fragment.arguments = Bundle().apply < putInt(ARG_OBJECT, position + 1) >return fragment > >

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

Отключение капса в заголовках вкладок

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

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

Теперь созданный стиль нужно применить компоненту TabLayout в activity_main.xml:

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

Бейджи для вкладок

Также вкладкам можно устанавливать бейджи, для этого измените код TabLayoutMediator в классе MainActivity:

TabLayoutMediator(tabLayout, viewPager) < tab, position ->tab.text = tabNames[position] if (position == 2) < val badge = tab.getOrCreateBadge() badge.number = 1 >>.attach()

Здесь мы в заголовок третьей вкладки добавляем бейдж с числом 1. Удалить бейджи можно методом tab.removeBadge().

Иконки заголовков вкладок

Можно также установить иконки в заголовках вкладок, вместо текста или вместе с ним.

Добавим в MainActivity массив со ссылками на иконки:

private val tabNumbers: Array = arrayOf( R.drawable.baseline_looks_one_black_48, R.drawable.baseline_looks_two_black_48, R.drawable.baseline_looks_3_black_48, R.drawable.baseline_looks_4_black_48, R.drawable.baseline_looks_5_black_48, R.drawable.baseline_looks_6_black_48 )

Иконки были предварительно скачаны с сайта материального дизайна и сохранены в папку res/drawable нашего проекта. Вы можете взять их из исходников или скачать по ссылке.

Поскольку иконок всего шесть, во избежание ошибки измените на шесть количество вкладок в методе getItemCount() класса NumberAdapter.

Теперь можно установить иконки для вкладок методом tab.setIcon(tabNumbers[position]):

TabLayoutMediator(tabLayout, viewPager) < tab, position ->tab.text = tabNames[position] tab.setIcon(tabNumbers[position]) if (position == 2) < val badge = tab.getOrCreateBadge() badge.number = 1 >>.attach()

Вот что должно получиться при запуске приложения:

Если удалить или закомментировать строку tab.text = tabNames[position], то в заголовках вкладок останутся только иконки:

Исходный код

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

На прошлом уроке мы познакомились с нижней панелью навигации BottomNavigationView. В этом уроке реализуем

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

Щоб відправити коментар вам необхідно авторизуватись.

Источник

Tab layout android kotlin

Learn Latest Tutorials

Preparation

Trending Technologies

B.Tech / MCA

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

• Website Designing
• Website Development
• Java Development
• PHP Development
• WordPress
• Graphic Designing
• Logo
• Digital Marketing
• On Page and Off Page SEO
• PPC
• Content Development
• Corporate Training
• Classroom and Online Training
• Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

Like/Subscribe us for latest updates or newsletter

Источник