Tabhost android studio пример

TabHost и TabWidget (Вкладки)

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

Находится в разделе Containers.

Хотя данный компонент не помечен, как устаревший, сама компания Google практически его не использует в своих примерах (если ошибаюсь, то ткните мордочкой в пример). В качестве альтернативы попробуйте TabLayout (Android Design Support Library).

TabHost является контейнером, который может содержать элементы TabWidget.

TabHost показывает ярлычки каждой страницы в своей коллекции. Когда пользователь выбирает вкладку, этот объект посылает сообщение в родительский контейнер TabHost для переключения на выбранную вкладку.

Когда вы перетаскиваете TabHost на форму по умолчанию, то создаётся готовый шаблон, который нужно немного модифицировать под ваши нужды — можно убрать корневой элемент LinearLayout и сделать таким сам TabHost.

Обратите внимание, что после элемента TabWidget идёт контейнер FrameLayout, в который вложены контейнеры LinearLayout, которые по сути являются формой для каждой конкретной вкладки. Поэтому здесь можно расположить ваши элементы управления: кнопки, текстовые поля и т.д.

Если сейчас запустить проект, то ничего хорошего не увидим. Все кнопки просто налезут друг на друга. Необходимо написать дополнительный код

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

Методы класса TabHost

• setup() — инициализирует контейнер вкладок. Необходимо вызывать перед добавлением вкладок, если TabHost загружается методом findViewById()
• addTab() — добавляет новую вкладку
• setcurrentTab() — выводит заданную вкладку на передний план

Методы класса TabWidget

Большинство методов для работы с вкладками реализованы в классе TabWidget. У вкладки есть индикатор позиции табуляции, информационное наполнение и идентификатор для работы в программном коде. Их необходимо определить созданием экземпляра вложенного класса TabSpec (см. код выше).

• setContent() — задает ресурс для вкладки
• setIndicator() — выводит текст на ярлычке вкладки

Дополнительное чтение

Изменяем размер текста в заголовке TabWidget — обратите внимание на комментарии, где даются дельные советы про использование стилей.

How to change the font size of tabhost in android — на эту же тему с размерами шрифта через стили

Источник

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

— создаем экран с вкладками
— используем иконку в названии вкладки
— используем обработчик перехода между вкладками

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

Project name: P0761_Tab
Build Target: Android 2.3.3
Application name: Tab
Package name: ru.startandroid.develop.p0761tab
Create Activity: MainActivity

Пропишем тексты в strings.xml:

Удалим все дефолтное с экрана main.xml и добавим туда компонент TabHost из вкладки Composite:

Компонент добавился и притащил с собой еще кучу всего. Давайте смотреть. TabHost – корневой элемент вкладок. В нем вертикальный LinearLayout, в котором расположены TabWidget и FrameLayout. TabWidget будет отображать заголовки вкладок, а FrameLayout – содержимое вкладок. В этом FrameLayout мы размещаем все View-компоненты, которые хотим отображать на вкладках. Позже мы (в коде) сообщим вкладке, какой именно компонент она должна показать (явно укажем id), вкладка выберет из этой общей кучи нужный ей компонент и отобразит его, как свое содержимое.

По дефолту во FrameLayout созданы три LinearLayout – они могут быть использованы, как контейнеры для содержимого вкладок. Т.е. вы их заполняете компонентами, как вам необходимо, а потом в коде просто указываете id нужного LinearLayout-а и он со всем содержимым отобразится на вкладке.

Нам сейчас не нужны LInearLayout, мы не будем делать вкладки с сложным содержимым, разместим во FrameLayout просто несколько TextView.

В итоге main.xml получился такой:

Создадим еще один layout-файл — tab_header.xml:

Этот layout мы используем как свой экран для заголовка вкладки. Тут просто TextView.

Создайте в папке res папку drawable, если ее нет. В ней создайте файл tab_icon_selector.xml:

Подробно об этом можно почитать тут. Этот xml-файл мы укажем как картинку для заголовка вкладки. И когда система будет прорисовывать заголовок вкладки, она обратится к этому файлу, чтобы понять какую картинку ей отображать. Этот код будет возвращать стандартную Android картинку star_on, если вкладка выбрана (state_selected=»true»). Иначе вернет star_off. Далее увидим это в приложении, и станет понятней.

Находим компонент TabHost. Обратите внимание, используется андроидный id. Он был таким по умолчанию при добавлении компонента в main.xml. В принципе, в нашем случае, этот id можно сменить на свой. Далее вызываем обязательный метод setup. Это первичная инициализация. В этом методе TabHost находит в себе TabWidget и FrameLayout. Вот их id в main.xml менять нельзя. Иначе TabHost будет ругаться, что не может их найти.

Далее создаем три вкладки. Для создания используется метод newTabSpec, на вход он берет тэг. Тэг – это просто некий строковый идентификатор вкладки. Позже увидим, где он используется. Для первой вкладки задаем название методом setIndicator. В метод setContent передаем id компонента (из FrameLayout), который мы хотели бы видеть в качестве содержимого вкладки. В нашем случае это TextView. Метод addTab присоединяет готовую вкладку к TabHost.

Вторая вкладка создается аналогично, только используем другую реализацию метода setIndicator. Заголовок вкладки может содержать не только текст, но и картинку. И здесь мы это используем – передаем в метод текст и xml вместо картинки. Тот самый xml, который определяет картинку по состоянию вкладки. Разумеется, если вам нужна статичная картинка, вы можете указать ее и не использовать xml вообще.

При создании третьей вкладки используем еще одну реализацию метода setIndicator, которая берет на вход View и его ставит как заголовок. Используем тут наш layout-файл tab_header.

Вкладки созданы. Устанавливаем (setCurrentTabByTag) вторую в качестве выбранной по умолчанию. И пропишем (setOnTabChangedListener) для TabHost обработчик, который срабатывает при переключении вкладок. Будем выводить сообщение с тэгом вкладки.

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

Выбрана вторая вкладка, т.к. мы это определили методом setCurrentTabByTag. Ее содержимое – это TextView с как мы и указывали в коде в методе setContent при создании вкладки.

У третьей вкладки заголовок соответствует содержимому tab_header, т.к. мы использовали setIndicator, который принимает на вход View.

Выберем первую вкладку.

Сработал обработчик и появилось сообщение с тэгом выбранной вкладки. Содержимое первой вкладки – это TextView с из FrameLayout.

Обратите внимание, что сменилась картинка на заголовке второй вкладки. Это обеспечил selector из res/drawable/tab_icon_selector. В зависимости от состояния вкладки он выдает разные картинки.

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

— используем Activity в качестве содержимого вкладки
— используем TabActivity

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

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

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

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

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

Источник

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

— используем Activity в качестве содержимого вкладки
— используем TabActivity

В качестве вкладки можно использовать Activity. Для этого существует реализация метода setContent, которая принимает на вход Intent. А в Intent мы прописываем, какое Activity нам нужно.

При использовании Intent и вкладок есть нюанс. Наше основное Activity, которое содержит TabHost должно наследовать не android.app.Activity как обычно, а android.app.TabActivity. В этом случае нам не надо заморачиваться с дополнительной инициализацией для работы с Intent.

Project name: P0771_TabIntent
Build Target: Android 2.3.3
Application name: TabIntent
Package name: ru.startandroid.develop.p0771tabintent
Create Activity: MainActivity

Пропишем тексты в strings.xml:

Менять id у TabHost в случае использования android.app.TabActivity нельзя. Иначе система просто не найдет TabHost.

FrameLayout не заполняем, т.к. мы не будем использовать его компоненты для содержимого вкладок. Мы будем туда целые Activity грузить.

Создадим пару Activity.

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

Наше Activity наследует TabActivity. Это дает нам возможность получить TabHost методом getTabHost. Нам не нужно самим искать его на экране. Также этот замечательный метод выполняет за нас обычную инициализацию, нам не надо вызывать метод setup, как на прошлом уроке. И кроме обычной инициализации, этот метод выполняет подготовку для работы с Activity, как содержимым вкладок.

Ну а далее вам все знакомо с прошлого урока. Создаем вкладки, указываем имена. В методе setContent вместо содержимого из FrameLayout мы даем Intent, указывающий на необходимое нам Activity.

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

Первая вкладка с OneActivity

Вторая вкладка с TwoActivity

А как отрабатывают события Activity LifeCycle? При первом показе первой вкладки срабатывают три метода OneActivity: onCreate, onStart, onResume. Переключаемся на вторую вкладку – срабатывает onPause в OneActivity, а потом три метода TwoActivity: onCreate, onStart, onResume. И далее при переключениях между вкладками одна уходит в onPause, другая возвращается в onResume.

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

— вручную создаем содержимое вкладки

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

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

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

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

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

Источник

TabHost in Android with Example

TabHost is a container that holds a set of tabs. Each tab consists of either the activity or the fragments. TabHost consists of two children of which one is FrameLayout (which is used to show the contents of the activity) and another one is TabWidget.(It is used to choose the tab which the user wants to open). Mostly Tabhost is used in the project with the help of the LinearLayout.

Important Methods of TabHost

• addTab(TabSpec tabSpec): This method is used to add the new tab onto a tab widget. Whenever a new tab is being specified using TabSpec class, one needs to add that tab in our TabHost.

TabHost tabhost = (TabHost) findViewById(R.id.tabhost);

// setting up the tabhost

// setting the name of the new tab

TabHost.TabSpec spec = tabhost.newTabSpec(“Tab One”);

// adding the tab to tabhost

• clearAllTabs(): This method is used to clear all tabs within the tab host. After adding the tab as shown above, if some want to clear the tab from TabHost, then write the below code.

tabHost.clearAllTabs(); // this method is used to clear all the tabs from tabhost

• setOnTabChangedListener(OnTabChangeListener): This method is used to register a callback that needs to be invoked when the selected state of any of the items in this list changes. This method is used when one needs to invoke the callback and register it when state changes of any selected items in the list.
• setCurrentTab(int index): By default, tab hosts set the first tab position as the default position which will appear when the app is being launched, but we can explicitly change the default position which of the tab using these methods. (Position starts from 0)

tabHost.setCurrentTab(1); // it will set second tab as default selected tab

Example

Let’s try to understand the TabHost in detail by making a small project. A sample GIF is given below to get an idea about what we are going to do in this project . Note that we are going to implement this project using the Java language.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Источник

Делаем вкладки с помощью 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, а затем настроить вкладки с помощью двух шагов:

• В методе onCreate() активности определим ViewPager и подключим адаптер.
• Установим ViewPager в TabLayout, чтобы подключить пейджер с вкладками.

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

Настройка 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() для установки иконки:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник