Изучаем панели вкладок в iOS 26 с Liquid Glass

Если у вашего приложения есть панель вкладок (Tab Bar), и вы перекомпилируете его с помощью Xcode 26, вы автоматически увидите, что ваша панель вкладок имеет новый вид и ощущение на основе Liquid Glass. В этой статье мы рассмотрим новую панель вкладок и какие новые возможности мы получили с редизайном Liquid Glass. Я также потрачу немного времени на предоставление некоторых советов о том, как вы можете применить модификаторы iOS 26 к вашей панели вкладок, используя «Backport» подход Дэйва ДеЛонга.

К концу этой статьи вы будете гораздо лучше понимать, как Liquid Glass изменяет панель вкладок вашего приложения и как можно настроить ее, чтобы она действительно соответствовала философии дизайна Liquid Glass в iOS 26.

Основы панели вкладок в iOS 26

Если вы приняли обновления панели вкладок iOS 18, вы уже готовы для принятия новых функций, которые мы получаем с Liquid Glass. Если вы этого не сделали, вот как выглядит очень простая панель вкладок с использованием TabView и Tab:

TabView {
  Tab("Workouts", systemImage: "dumbbell.fill") {
    WorkoutsView()
  }

  Tab("Exercises", systemImage: "figure.strengthtraining.traditional") {
    ExercisesView()
  }
}

Если вы скомпилируете свое приложение с помощью Xcode 26 и запустите его на устройстве с установленной iOS 18, ваша панель вкладок будет выглядеть примерно так:

При запуске того же кода на iOS 26 вы обнаружите, что панель вкладок приобретает новый дизайн на основе Liquid Glass:

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

Вот как выглядит полный экран, на котором находится этот таббар:

Чтобы это приложение чувствовало себя более комфортно на iOS 26, я думаю, нам следует расширить содержимое списка, чтобы оно оказалось под панелью вкладок, используя немного размытое наложение. Подобно тому, что Apple делает для своих собственных приложений:

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

Понимание эффекта размытия панели вкладок

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

Приложение, которое мы рассматриваем в этом посте, имеет макет представления, который выглядит примерно так:

VStack {
  ScrollView(.horizontal) { /* filter options */ }
  List { /* The exercises */ }
  Button { /* The purple button + action */
}

В результате вкладка не мешает прокручиваемому контейнеру, и мы получаем сплошной цветной фон.

Если мы сейчас уберем кнопку, то фактически получим размытый фон, который нам и нужен:

Следующая цель — снова добавить кнопку «Add Exercise» таким образом, чтобы она хорошо сочеталась с Liquid Glass, поэтому давайте рассмотрим некоторые другие интересные поведения вкладок в iOS 26 и то, как мы можем их включить.

Минимизация представления вкладок Liquid Glass

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

Хотя этот эффект не возвращает нашу кнопку «Add Exercise», он подключает функцию из iOS 26, которая мне очень нравится. Мы можем сделать так, чтобы наша панель вкладок минимизировалась, когда пользователь прокручивает страницу вверх или вниз, применив новый модификатор представления к нашему TabView:

TabView {
  /* ... */
}.tabBarMinimizeBehavior(.onScrollDown)

Когда этот модификатор вида применяется к вашему представлению вкладок, оно автоматически сворачивается при прокрутке содержимого, на которое наложена панель вкладок. Так что в нашем случае панель вкладок сворачивается при прокрутке списка упражнений.

Обратите внимание, что панель вкладок не сворачивается, если мы применяем этот модификатор к старому дизайну. Это потому, что панель вкладок не перекрывает прокручиваемый контент. Это еще более наглядно показывает, что старый дизайн не очень хорошо вписывается в мир Liquid Glass.

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

Добавление view над панелью вкладок в iOS 26

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

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

Чтобы разместить дополнительное представление на панели вкладок, вы применяете модификатор представления tabViewBottomAccessory к вашему TabView:

TabView {
  /* ... */
}
.tabBarMinimizeBehavior(.onScrollDown)
.tabViewBottomAccessory {
  Button("Add exercise") {
    // Action to add an exercise
  }.purpleButton()
}

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

.tabViewBottomAccessory {
  if activeTab == .workouts {
    Button("Start workout") {
      // Action to add an exercise
    }.purpleButton()
  } else {
    Button("Add exercise") {
      // Action to add an exercise
    }.purpleButton()
  }
}

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

Итак, хотя этот подход позволяет нам снова добавить кнопку «Add exercise», похоже, это не выход.

Добавление плавающей кнопки к нашему представлению

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

Tab("Add", systemImage: "plus", value: Tabs.exercises, role: .search) {
  /* Your view */
}

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

Тем не менее, я думаю, что плавающая кнопка — это то, что нам нужно в этом мире Liquid Glass, поэтому давайте добавим ее в наше представление упражнений.

Она не будет использовать TabView API, но я думаю, что важно охватить решение, которое, по моему мнению, работает хорошо.

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

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

ZStack(alignment: .bottomTrailing) {
  // view contents

  Button(action: {
    // ...
  }) {
    Label("Add Exercise", systemImage: "plus")
      .bold()
      .labelStyle(.iconOnly)
      .padding()
  }
  .glassEffect(.regular.interactive())
  .padding([.bottom, .trailing], 12)
}

Ключ к тому, чтобы наша плавающая кнопка выглядела на месте — это применение модификатора вида glassEffect. Я не буду подробно описывать этот модификатор, но вы, вероятно, догадаетесь, что он делает. Он придает нашей кнопке тот дизайн Liquid Glass, который мы ищем:

Я не на 100% уверен в этом подходе, потому что мне показалось, что в наличии большой фиолетовой кнопки в моем старом дизайне было что-то приятное. Но это новая эра дизайна. И это кажется чем-то, что хорошо впишется в язык дизайна iOS 26.

Вкратце

Знание того, какие у вас есть возможности для настройки TabView в iOS 26, очень поможет вам с внедрением Liquid Glass. Знание того, как можно свернуть панель вкладок или когда назначить дополнительное представление, может действительно помочь вам создать лучший опыт для ваших пользователей. Добавление вкладки поиска поможет SwiftUI правильно и согласованно позиционировать функцию поиска на разных платформах.

Хотя Liquid Glass — это огромное изменение с точки зрения языка дизайна, мне очень нравятся эти новые API TabView, и я с нетерпением жду возможности провести с ними больше времени.

Источник