Статьи

TabLayout или Tabbed Просмотреть в Android

Ноябрь 4, 2017

Это руководство посвящено разработке TabLayout
 / tabs, который является одним из очень важных способов предоставления пользовательского интерфейса в Android.
  Приложение контактов по умолчанию использует этот макет.
Для создания вкладки Layout нам нужно рассмотреть 3 новых аспекта: TabActivity , TabHost и TabWidget .

Давайте начнем с рассмотрения того, как мы должны объявить макет XML.  Корневой узел должен быть TabHost . Что такое TabHost и почему он необходим? Это не что иное, как контейнер для представления с вкладками, который мы хотим создать. Он предоставляет методы для добавления вкладок, их удаления и для фокусировки на конкретной вкладке и т. Д.

В рамках этого нам нужно иметь два объекта: TabWidget и FrameLayout .

Сам TabWidget не делает ничего, кроме как содержит список ярлыков вкладок, которые существуют в родительском TabHost .  По сути, это не что иное, как набор меток, которые пользователь нажимает, чтобы выбрать конкретную вкладку. Фактическое содержание каждой вкладки должно быть проведено с помощью 2 — го объекта в TabHost т.е. FrameLayout . Следовательно, и TabWidget, и FrameLayout должны присутствовать на каждой вкладке. И чтобы выровнять htme один за другим, мы встраиваем их в LinearLayout .

Следовательно, макет XML будет выглядеть так: 


<TabHost
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@android:id/tabhost"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      >
<LinearLayout
      android:id="@+id/LinearLayout01"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical">
<TabWidget
      android:id="@android:id/tabs"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"></TabWidget>
<FrameLayout
      android:id="@android:id/tabcontent"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"></FrameLayout>

</LinearLayout>
</TabHost>

Теперь перейдем к кодированию действий для макета с вкладками.

В приложении я хочу иметь 3 вкладки. Так как мне это сделать?

Каждая из вкладок может иметь либо представление, либо запускать действие путем передачи намерения, либо динамически создавать представление с помощью TabHost.TabContentFactory . Я выбрал показ только действий во всех моих вкладках.

Итак, сколько мероприятий вы думаете, нам нужно? 3? Прости 4! Должно быть основное или родительское действие, которое отображало бы все представление с вкладками и одно действие на каждой из вкладок.

Теперь давайте посмотрим на развитие основной деятельности. Это должно расширить TabActivity .  Это ничем не отличается от действия, за исключением дополнительной возможности обрабатывать несколько встроенных действий или представлений.

Итак, вот объявление основного класса: 


public class TabLayoutSample extends TabActivity {

Посмотрим теперь, как создать первую вкладку.

Во-первых, нам нужно получить дескриптор TabHost, который мы объявили в файле макета XML, чтобы в него можно было добавлять действия с вкладками. Вот код для того же: 

TabHost tabHost = getTabHost();  // The activity TabHost

В этот TabHost нам нужно добавить вкладку. Как мы можем? TabHost предоставляет внутренний класс TabSpec, который позволяет вам создавать вкладки, заполнять их содержимое и добавлять их в качестве вкладок в TabHost .   Посмотрите, как это делается: 

TabHost.TabSpec spec; 

// Create an Intent to launch an Activity for the tab (to be reused)
      intent = new Intent().setClass(this, WelcomeActivity.class);

      // Initialize a TabSpec for each tab and add it to the TabHost
      spec = tabHost.newTabSpec("welcome").setIndicator("Welcome",
                          res.getDrawable(R.drawable.tab_welcome))
                      .setContent(intent);
      tabHost.addTab(spec);

В первой строке выше мы создаем переменную spec типа TabSpec . Затем мы создаем намерение, которое будет формировать содержимое первой вкладки. Затем мы связываем его с TabSpec .

Поскольку каждая вкладка должна иметь индикатор вкладки, содержимое и тег для отслеживания этого, это достигается с помощью
метода setIndicator
(..). Даже изображение , которое должно быть показано на вкладке в верхней части устанавливается через 2 тот же самый метод в го параметра
Рез
.
getDrawable
(R.Drawable.tab_welcome).
Что это и как я установил изображение?

Эта часть представляет собой длинный набор шагов, но очень легко сделать. Создайте два изображения: светлое и темное. Назовите их как
welcome.png
и
welcome_sepia.png
. Скопируйте их в
папку / res / drawable-mdpi
.   Вам необходимо создать
нарисованный список состояний,
который указывает, какое изображение использовать для каждого состояния вкладки:

[
StateListDrawable
— это рисуемый объект, определенный в XML, который использует несколько разных изображений для представления одного и того же графического изображения в зависимости от состояния объекта. Например, виджет «Кнопка» может существовать в одном из нескольких различных состояний (нажатие, фокусировка или ни одно из них), и, используя нарисованный список состояний, вы можете предоставить различное фоновое изображение для каждого состояния.]

Итак, вот
tab_welcome.xml
: 


<?xml version="1.0" encoding="UTF-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/welcome"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/welcome_sepia" />
</selector>

Этот XML-файл описывает, какое изображение приветствия будет отображаться, когда вкладка выбрана, и какое отображение, когда вкладка не будет выбрана.  Этот XML тоже необходимо создать в той же папке —
/ res / drawable-mdpi.

Как только все это будет сделано, при
вызове setIndicator (
«Welcome»
,                      res.getDrawable (R.drawable.
Tab_welcome
))
изображение, связанное с вкладкой, отображается корректно в зависимости от состояния.
Затем последняя часть вызова tabSpec связывает действие, которое должно отображаться в содержимом действия. Для этого я
создал новое намерение, которое вызывает действие —
WelcomeActivity.class
.  это подразумевает, что
WelcomeActivity.class
уже создан и доступен. В этом случае он просто содержит приветственное сообщение для отображения.
Как только такая спецификация создана, я добавляю ее в
TabHost с
помощью
метода addtab (…)
в
TabHost
.

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

33
Share: