it-swarm.com.ru

Как используется TabItem при размещении в макете XML?

Документация TabLayout приводит пример вложения TabItem непосредственно в TabLayout, например так:

<Android.support.design.widget.TabLayout
     Android:layout_height="wrap_content"
     Android:layout_width="match_parent">

    <Android.support.design.widget.TabItem
         Android:text="@string/tab_text"/>

    <Android.support.design.widget.TabItem
         Android:icon="@drawable/ic_Android"/>

</Android.support.design.widget.TabLayout>

Но это не дает примера того, как это можно использовать на практике, и документация для TabItem гласит:

Это представление на самом деле не добавляется в TabLayout, это просто фиктивный элемент, который позволяет задавать текст, значок и пользовательский макет элементов вкладки. 

Так для чего TabItem? После обширного поиска в Google я не могу найти ни одного примера, когда кто-либо определял бы TabItems в XML. Есть ли способ настроить действие с вкладками, используя TabItem в файле ресурсов, как показано выше? 

19
Nathan Fig

Похоже, это относительно недавнее дополнение к библиотеке дизайна, по-видимому, добавленное в версию 23.2.0, хотя это не упоминается в истории изменений . Его функциональность довольно проста, и единственные атрибуты, которые он использует, - это три, которые указаны в его docs : text, icon и layout.

Из тестирования кажется, что это в основном ярлык XML для создания новой Tab и установки ее текста, значка и пользовательской View, как это обычно делается в коде. Когда он говорит: «Это представление на самом деле не добавляется в TabLayout», я полагаю, что оно подразумевает, что оно не является View в обычном смысле, поскольку вы не можете установить для него какой-либо стандартный атрибут макета, например layout_width или background , Он просто служит для того, чтобы TabLayout создавал новую Tab для каждой TabItem, и вызывал setText(), setIcon() и setCustomView() соответственно.

Например, чтобы добавить Tab в код, мы обычно делаем что-то вроде этого:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);

// Add Tab
TabLayout.Tab tab = tabLayout.newTab();

tab.setCustomView(R.layout.tab);
tab.setText("Tab 1");
tab.setIcon(R.drawable.ic_launcher);

tabLayout.addTab(tab);

Тогда как теперь мы можем заменить все после комментария выше, добавив TabItem в макет.

<Android.support.design.widget.TabLayout
    Android:id="@+id/tab_layout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <Android.support.design.widget.TabItem
        Android:layout="@layout/tab"
        Android:text="Tab 1"
        Android:icon="@drawable/ic_launcher" />

</Android.support.design.widget.TabLayout>

Обратите внимание, что те же требования для пользовательского макета View все еще применяются. То есть TextView для текста должен иметь системный идентификатор ресурса @Android:id/text1, а ImageView для значка должен иметь идентификатор @Android:id/icon. Например, R.layout.tab сверху:

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:gravity="center_vertical">

    <ImageView Android:id="@Android:id/icon"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />

    <TextView Android:id="@Android:id/text1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />

</LinearLayout>
30
Mike M.

Быстрое дополнение к @Mikes очень полезный ответ:

В Android Studio теперь есть Шаблон для использования TabLayout с настройкой TabItem в XML-макете. Создайте все необходимые файлы с помощью "New> Activity> Tabaged Activity" и выберите "Вкладки панели действий (с ViewPager)", как показано на скриншоте:

 Configure Tabbed Activity Template in Android Studio

Если вы хотите настроить внешний вид TabItem без настраиваемого представления: используйте white vector assets в качестве вкладки Android:icon и tint их с помощью селектора (предоставляя различные цвета на основе Android:state_selected

Цвет линии под выбранной в данный момент вкладкой устанавливается как app:tabIndicatorColor для тега TabLayout.

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

https://stackoverflow.com/a/49603559/414581

1
sunadorer