Рубрики
Без рубрики

Таблица для Android в AppBarLayout

Android TabLayout, пример проекта Android AppBarLayout, панель приложений для Android, дизайн материалов для Android, дизайн макета вкладки для Android, пример кода макета для Android

Автор оригинала: Pankaj Kumar.

В этом уроке мы обсудим и реализуем TabLayout для Android в нашем приложении для Android. Также мы рассмотрим детали дизайна материалов.

Android TabLayout AppBarLayout

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

AppBarLayout

AppBarLayout-это вертикальная линейная разметка, которая, как правило, является первым дочерним элементом в области координат и в большинстве случаев служит оболочкой для панели инструментов. Использование панели инструментов в качестве прямого дочернего элемента CoordinatorLayout будет работать нормально, но она не сможет координировать свои действия с другими присутствующими дочерними представлениями. Вот где возникает важность AppBarLayout. Это позволяет дочерним представлениям достигать желаемого поведения прокрутки с помощью параметра app:layout_scrollFlags

Ниже приведен пример xml-макета для приведенного выше описания:

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

  • прокрутка : Этот флаг обычно устанавливается для всех видов, которым необходимо прокручивать за пределами экрана. Представления, которые не используют этот флаг, остаются статичными, позволяя другим прокручиваемым представлениям скользить за ним
  • введите всегда : Этот флаг гарантирует, что любая прокрутка вниз приведет к тому, что вид станет видимым, что позволит быстро вернуться к шаблону
  • enterAlwaysCollapsed : дополнительный флаг для “enterAlways”, который изменяет возвращаемый вид только на начальную прокрутку до его свернутой высоты.
  • exitUntilCollapsed : Этот флаг заставляет прокручивать представление до тех пор, пока оно не свернется (будет достигнута его минимальная высота) перед выходом
  • привязка : По окончании прокрутки, если вид виден только частично, он будет привязан и прокручен до ближайшего края. Следовательно, это позволяет избежать промежуточных анимационных состояний представления

Таблица

Макет вкладки-еще один популярный тип представления, представленный в Руководстве по дизайну материалов. Он обеспечивает горизонтальное расположение вкладок, которые обычно размещаются в верхней части экрана в соответствии с рекомендациями пользовательского интерфейса Android.

В следующем фрагменте xml показано, как определяется макет вкладки.

Макет вкладки состоит из двух важных xml-атрибутов, описанных ниже:

  • приложение:tabMode – Это принимает два значения:

    • исправлено – При этом отображаются все вкладки на экране. Обычно используется, когда имеется до 3 вкладок
    • прокрутка – Это позволяет пользователю прокручивать вкладки по горизонтали.

  • приложение:tabGravity – Этот атрибут работает только в том случае, если приложение:tapMode="исправлено" . Это также принимает два значения:

    • заполнено – Это распределит горизонтальную ширину по всем вкладкам
    • центр – Он отобразит все вкладки в центральной горизонтальной части экрана

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

Давайте перейдем к бизнес-логике нашего приложения, в котором размещена панель инструментов и таблица внутри панели приложений.

Структура проекта Android TabLayout AppBarLayout

Пример кода для Android-таблицы AppBarLayout

В activity_main.xml приводится ниже.

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

  • Вывод строки без оператора приложение:layout_behavior="@string/appbar_scrolling_view_behavior будет перекрывать вывод строки с выводом приложения.
  • Вывод строки в качестве прямого дочернего элемента в выводе координатора не будет прокручиваться. Следовательно, мы сохранили его внутри вложенного представления
  • В макете вкладки нет layout_scrollFlags . Следовательно, он не будет прокручиваться с экрана, как панель инструментов. Мы скоро это увидим.

В MainActivity.java приводится ниже

package com.journaldev.tablayoutappbar;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;


public class MainActivity extends AppCompatActivity {


    TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

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

        tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
    }

}

Результаты вышеупомянутого приложения показаны ниже

Несколько примечательных моментов из приведенного выше вывода::

  • При прокрутке строка состояния также прокручивается вверх, тем самым в большинстве случаев панель инструментов находится в несогласованном состоянии
  • Индикаторы панели вкладок имеют цвет по умолчанию, установленный в качестве цветового акцента
  • Цвет фона вкладок по умолчанию-colorPrimary

Первый вопрос-серьезный. Чтобы решить эту проблему, перейдите к решениям->значения-21->styles.xml файл. Измените строку @android:цвет/прозрачный на @color/colorPrimaryDark

Вот как должен выглядеть вывод сейчас:

Существует множество способов настройки макетов вкладок. Попробуйте вызвать раздел() в методе new Tab() вместо setText(). На нем будут отображаться рисованные значки. Вы даже можете реализовать их оба, как

tabLayout.addTab(tabLayout.newTab().setText("Speaker Phone").setIcon(android.R.drawable.stat_sys_speakerphone));
        tabLayout.addTab(tabLayout.newTab().setText("Headset").setIcon(android.R.drawable.stat_sys_headset));
        tabLayout.addTab(tabLayout.newTab().setText("Bluetooth").setIcon(android.R.drawable.stat_sys_data_bluetooth));

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

Кроме того, мы можем создавать ваши собственные стили в style.xml как показано ниже.

Давайте добавим приведенный выше стиль в соответствующий вид в activity_main.xml

В итоге мы получили такой результат:

Вы можете дополнительно оформить его в соответствии с вашими собственными потребностями, чтобы улучшить UX вашего приложения. На этом этот урок заканчивается. Мы будем реализовывать макеты вкладок с помощью ViewPager в нашем следующем приложении. Вы можете скачать проект Макеты вкладок Android по ссылке ниже