Как сделать табы в android

Делаем вкладки с помощью TabLayout

Сейчас вкладки лучше всего реализовывать за счёт использования ViewPager с пользовательским «индикатором вкладок» сверху. В этой статье мы будем использовать TabLayout от Google, включенный в библиотеку Android Support Design в Android 6.0 Marshmallow (API 23).

До Android Marshmallow самым простым способом создания вкладок с помощью фрагментов было использование вкладок ActionBar. Однако, все методы, связанные с режимами навигации в классе ActionBar (такие как setNavigationMode(), addTab(), selectTab() и т.д.) на данный момент являются устаревшими.

Библиотека Android Support Design

Перед началом работы с вкладками, нужно добавить необходимую библиотеку. Чтобы добавить библиотеку в свой проект, нужно в файле build.gradle модуля приложения добавить следующую зависимость в блок dependencies.

Создание TabLayout

Просто добавьте android.support.design.widget.TabLayout, который будет использоваться для отображения различных параметров вкладок, в код разметки. Компонент android.support.v4.view.ViewPager будет использоваться для создания страницы, отображающей фрагменты, которые мы создадим далее.

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

Теперь, когда у нас есть ViewPager и вкладки в разметке, мы можем перейти к определению содержимого каждой из вкладок. Поскольку каждая вкладка представляет собой только фрагмент, нам необходимо создать и определить Fragment, который нужно показать. В зависимости от ваших требований, в вашем приложении может быть один или несколько фрагментов.

В папке res/layout создадим файл fragment_page.xml и определим в нём код разметки, который будет отображаться на экране при выборе определённой вкладки.

Теперь создадим класс PageFragment и определим в нём логику подключения для фрагмента.

Подключение FragmentPagerAdapter

Следующее, что нужно сделать, это реализовать адаптер для вашего ViewPager, который контролирует порядок вкладок, заголовков и связанного с ними контента. Наиболее важными методами для реализации здесь являются getPageTitle(int position), который используется для получения заголовка нужно вкладки, и getItem(int position), который определяет фрагмент для каждой вкладки.

Настройка вкладки

Наконец, нам нужно прикрепить наш ViewPager к SampleFragmentPagerAdapter, а затем настроить вкладки с помощью двух шагов:

Посмотрим, что получилось:

device 2018 02 01 200222

Настройка TabLayout

Существует множество атрибутов, которые вы можете использовать для настройки поведения TabLayout, например:

Название Параметры Описание
tabBackground @drawable/image Фон, применяемый к вкладкам
tabGravity center, fill Гравитация вкладок
tabIndicatorColor @color/blue Цвет линии индикатора
tabIndicatorHeight @dimen/tabh Высота линии индикатора
tabMaxWidth @dimen/tabmaxw Максимальная ширина вкладки
tabMode fixed, scrollable Выбор режима — фиксированные вкладки или прокручиваемый список
tabTextColor @color/blue Цвет текста на вкладке

Здесь вы можете посмотреть все атрибуты для TabLayout.

Создание стиля для TabLayout

Как правило, цвет индикатора вкладки устанавливается как accent, определённый в вашей теме Material Design. Вы можете переопределить этот цвет, создав свой собственный стиль в файле res/values/styles.xml и затем применить этот стиль к TabLayout.

Вы можете переопределить этот стиль для TabLayout в коде разметки:

Ниже вы можете увидеть пример ещё одного стиля, который можно задать для TabLayout:

Добавление иконок в TabLayout

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

Внутри класса FragmentPagerAdapter вы можете удалить строку getPageTitle() или просто вернуть null.

После настройки TabLayout в классе активности, вы можете использовать функцию getTabAt() для установки иконки:

device 2018 02 01 203735

Добавление иконок и текста в TabLayout

Другой подход — использовать SpannableString для добавление иконок и текста в TabLayout. Снова перепишем метод getPageTitle().

По умолчанию, вкладка, созданная TabLayout, устанавливает для свойства textAllCaps значение true, что предотвращает визуализацию ImageSpans. Вы можете переопределить это поведение. изменив в styles.xml свойство tabTextAppearance.

Обратите внимание на дополнительные пробелы, которые добавляются перед заголовком вкладки при создании класса SpannableString. Пустое пространство используется для размещения иконки, чтобы название отображалось полностью. В зависимости от того, где вы хотите разместить иконку, вы можете указать начало диапазона и его конец в методе setSpan().

device 2018 02 01 205601

Добавление пользовательской разметки в TabLayout

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

Теперь добавим метод getTabView() в класс SampleFragmentPagerAdapter.

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

Получение или выбор текущей страницы

С последними обновлениями библиотеки Android Suppoty Design вы также можете получить выбранную позицию вкладки, вызвав метод getSelectedTabPosition(). Если вам нужно сохранить или восстановить выбранную позицию вкладки во время поворота экрана или других изменений конфигурации, этот метод полезен для восстановления исходной позиции.

Во-первых, переместите экземпляры tabLayout и viewPager в глобальные переменные класса активности.

Во-вторых, мы можем сохранить и восстановить позицию вкладки, используя методы onSaveInstanceState() и onRestoreInstanceState().

Использование вкладок без фрагментов

В случае, если вы не хотите использовать в своём приложении фрагменты, вы можете воспользоваться классом android.support.v4.view.PagerAdapter, как, например, в нашем приложении «Карточки для детей«.

device 2018 02 02 164021

Здесь вместо фрагментов в ViewPager передаётся адаптер, наследующий от PagerAdapter. Его код можно увидеть ниже.

Установка адаптера аналогична способам выше, просто вызываем метод setAdapter() и передаёт в него экземпляр класса TabAdapter.

Ещё вариант реализации вкладок

Также вы можете создать свои собственные вкладки с помощью шагов ниже. Такой подход используется в нашем приложении «Менеджер паролей для Wi-Fi сетей«.

device 2018 02 01 211123

Для этого в разметке нужно использовать компоненты TabHost и TabWidget. Внутри с помощью FrameLayout мы задаём, какой контент будет отображаться на экране.

Затем в коде активности добавим следующий код для определения этих компонент и настройки вкладок.

В этом случае переключать вкладки можно легко с помощью метода у TabHost setCurrentTab(int position).

Делаем вкладки с помощью TabLayout : 3 комментария

Я создал ретрофит запрос, получил данные и хочу установить количество вкладок соответственно количеству полученных строк. Куда в адаптере мне вставить этот код? Я создал AsyncTask, но не получается нигде изменить значение количества вкладок, которое задано по умолчанию.

Источник

Создание фрагментов и использование вкладок для Android

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

Фрагменты позволяют встраивание их в активности, вкладки и другие элементы.

Новый проект

Ошибки в gradle

После обновления Android Studio до версии 3.0 у меня постоянно вылетает ошибка сборки gradle app, ссылается на зависимости test.runner, test.esspresso и не видит support.appcompat и support.design, хотя все элементы SDK отвечают текущим требованиям и обновлены.

Если вы столкнулись с подобными ошибками напишите об этом в комментариях, я же не нашел лучше способа решить проблему, чем удалить тестовые зависимости вообще, а в поддержке support.appcompat и support.design, изменить версию, поставив знак плюс после первой цифры версии. Также я добавил зависимость support-v4, так как в проекте используются некоторые элементы из ранних версий.

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

Макет виджета вкладок

Среда разработки Android создала для нас пустой фрагмент, который мы использовать не будем, закроем его и посмотрим на макет главной активности.
Он представляет из себя три вкладки виджета TabLayout, содержащие три пункта виджета TabItem, дублируя их можно сделать больше вкладок, чем предложено первоначально. Соответственно удалять их, оставляя меньше двух смысла нет, иначе проще использовать обычную активность.

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

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

Создадим наши фрагменты, для этого кликнем правой кнопкой на папке java и в контекстном меню выберем New>Fragment>Fragment(Blank). Отличие от остальных пунктов этого подменю в расположении элементов на фрагменте.

Для удобства я буду присваивать номер к предложенному имени фрагмента (BlankFragment1 и т.д.), сниму галочки с пунктов Include fragment factory metods и Include interface callbacks, которые добавят в java класс методы и интерфейс вызовы, безусловно полезные, но в данном примере нами не используемые.

Сформированный BlankFragment1.java унаследует методы от класса fragment, и содержит одну процедуру onCreateView, запускающую fragment_blank_fragment1, в который добавим RelativeLayout и поместим в него TextView, настроив ширину и высоту элементов.

Переместим TextView ниже и по центру, создадим дополнительно еще два фрагмента аналогичным образом, в них TextView расположим со смещением.

Редактирование MainActivity

Перейдем или откроем файл MainActivity.java, найдем в нем класс PlaceholderFragment,

сложим весь участок кода в строку и удалим его. В функции getItem закомментируем или удалим строку так:

и добавим следующий код ниже:

Данный код определяет, какая вкладка была выбрана, нумерация вкладок начинается с нуля и если, например, это нулевая вкладка, то в будет выполнен код BlankFragment1(), и во вкладку будет встроен фрагмент №1.

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

Источник

Android programmers blog

Simply about difficult

Поиск по этому блогу

понедельник, 26 декабря 2011 г.

Tab Layout на Android часть первая

Однажды появилось у меня желание написать одно Android приложение, идея есть но нет реализации так как языка java я не знаю и с разработкой под Android я никогда не сталкивался. GUI я хотел написать с красивыми табами для простоты использования, но полазив по интернетам я не нашел никакого гайда который бы толково объяснял как делаются эти заветные табы. Тогда я залез на забугорный американский сайт и о чудо я нашел то что нужно, нормальная статья с кодом который работает и который не требует всякого мусора который пишут в русских гайдах, все написано ясно и красиво.
Ссылку на сайт я приведу в конце статьи, а сейчас я напишу маленький гайд.

Вот так просто будет выглядеть наши табы:

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

public class SimpleActivity extends Activity

public class SimpleActivity extends TabActivity

для особо внимательных я выделил то что нужно изменить. Далее создаем три файла у меня они называются — SomeClass1, SomeClass2 и SomeClass3, Вы называйте как хотите но в коде эти названия будут упоминаться.

Теперь мы заполняем эти классы каким-то текстом что бы при перелистывании было видно что layout меняется. Я напишу только один класс так как они отличаються только текстом внутри «setText». Код ниже:

Теперь заполняем main.xml, открываем файл, удаляем весь текст который там есть и вставляем туда вот такой код:

Здесь мы создали объект TabHost который обеспечивает работу табов в проекте. Должно получиться примерно вот такое в Eclipse

Дальше открываем наш SimpleActivity.java и в onCreate() вставляем вот такой код

Ну и под конец всего этого праздника жизни нам нужно прописать в Simple Manifest.xml несколько строк что бы определить наши классы к которым мы будем обращаться.

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

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

Ни на что не претендую, просто решил написать мини гайд для новичков, каким сам являюсь… Спасибо за внимание!

Источник

Создание интерфейса с вкладками «Дизайн материала» в приложении для Android

Команда разработчиков материалов в Google просто определяет функциональность вкладок в Android следующим образом:

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

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

Предпосылки

Чтобы следовать этому руководству, вам понадобится:

a75d3a6450f83e5225d93ca857bbe8cb

Введение в компонент TabLayout

TabLayout предоставляет горизонтальный макет для отображения вкладок.

Компонент TabLayout может иметь функции отображаемых вкладок одним из двух способов: фиксированным и прокручиваемым. Если вкладки зафиксированы, все вкладки будут отображаться на экране одновременно.

На приведенном ниже TabLayout последнее официальное Android-приложение WhatsApp (на момент написания статьи), в котором используется TabLayout с фиксированной конфигурацией режима.

308e00d65f1e0bc8af1faf12fd0f0e58

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

Вот пример TabLayout с прокручиваемым режимом вкладок, представленный в последней версии Android-приложения News & Weather от Google.

973a7ccb4743806c53efa453d1a52191

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

8b9602bade32c58532dc73b479f2b1f4

Дизайн — это не только то, на что он похож и что чувствует. Дизайн — это то, как он работает. — Стив Джобс

1. Создайте проект Android Studio

f4a4d03dc2dff19a14f49cb272183397

2. Создание фрагментов (страниц)

Вот мой FragmentOne.kt :

Вот также мой R.layout.fragment_one :

3. Добавление TabLayout и ViewPager

Чтобы начать использовать TabLayout и ViewPager в своем проекте, убедитесь, что вы импортируете поддержку проектирования, а также артефакт поддержки Android — поэтому добавьте их в файл build.gradle вашего модуля, чтобы импортировать их.

Менеджер по расположению, который позволяет пользователю пролистывать страницы данных влево и вправо …

4. Создание PagerAdapter

5. Инициализация компонентов

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

onTabSelectedListener() используется для включения прослушивателя, который будет вызываться при изменении выбора вкладки. Мы переопределили следующие обратные вызовы:

Источник

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

— используем навигацию в ActionBar

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

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

Project name: P1081_ActionBarNavigation
Build Target: Android 4.1
Application name: ActionBarItems
Package name: ru.startandroid.develop.p1081actionbarnavigation
Create Activity: MainActivity

Никакие строки не добавляем, основной layout не трогаем.

Смотрим, что нам нужно, чтобы включить табы.

В onCreate мы получаем доступ к ActionBar и устанавливаем для него режим навигации в NAVIGATION_MODE_TABS. Далее идет добавление табов. Тут все несложно – создаем, пишем текст, присваиваем обработчика, добавляем в ActionBar.

Обработчиком для табов мы сделали MainActivity, оно реализует методы интерфейса ActionBar.TabListener:

onTabReselected – выбран уже выбранный таб

В эти методы поместим запись в лог и посмотрим, как оно все там работает.

Все сохраняем и запускаем приложение.

384x640xL0108 010.JPG.pagespeed.ic.8 lUc0vNSY

Сейчас выбран первый таб и лог сразу об этом сообщает:

Нажмем на второй таб,

384x640xL0108 020.JPG.pagespeed.ic.a9 XYKU1BT

unselected tab: tab1
selected tab: tab2

Первый таб «развыбран», а второй выбран.

Еще раз нажмем на второй таб:

reselected tab: tab2

Второй таб перевыбран. Все логично и понятно.

Я, чтобы не перегружать урок, не стал реализовывать какие-либо операции по навигации в приложении. А, вообще, подразумевается, что в методах обработчика мы кодим операции с фрагментами. Нам даже любезно предоставляют объект FragmentTransaction для этих целей. При этом хелп предупреждает, что в этих методах нам не надо самим вызывать метод commit, а также мы не можем добавлять транзакцию в BackStack.

Выпадающий список

Теперь посмотрим, как работает навигация с выпадающим списком.

В onCreate получаем ActionBar и включаем ему режим навигации NAVIGATION_MODE_LIST. Для выпадающего списка необходимо создать адаптер, реализующий SpinnerAdapter. Пусть это будет ArrayAdapter. При создании используем массив из трех строк. Далее вызываем метод setListNavigationCallbacks, в который передаем адаптер и обработчик.

Обработчиком у нас снова является Activity, реализует метод onNavigationItemSelected интерфейса ActionBar.OnNavigationListener. Этот метод дает нам позицию и id выбранного из списка элемента. Выводим в лог эту инфу и соответствующий элемент массива.

В манифесте я прописал для MainActivity атрибут темы: android:theme=»@android:style/Theme.Holo.Light». Иначе был темный текст на темном фоне.

Все сохраняем и запускаем.

Первый элемент сразу выбран. В логах видим:

selected: position = 0, one

Выберем какой-нить другой элемент из списка

selected: position = 2, three

Снова все логично и понятно.

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

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

При этом, если места будет недостаточно, то ActionBar разделит все свои элементы на две полосы.

Начиная с четвертой версии Андроид, можно использовать атрибут uiOptions для Activity или Application в манифесте. Если присвоить ему значение splitActionBarWhenNarrow, то результат при нехватке места получится такой:

384x640xL0108 070.JPG.pagespeed.ic.JvgQ

Элементы ушли вниз. Правда, при этом почему-то перестает работать withText в showAsAction.

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

— работаем с ListFragment

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

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

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

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

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

Источник