Используйте возможности просмотра вкладок для навигации

Мы узнали, как добавить боковую панель для iPad в предыдущем посте в блоге, но этот подход не так хорош для iPhone.

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

Проверка, является ли устройство iPad

Сначала нам нужно определить, работает ли приложение на iPhone или iPad. Для этого мы должны использовать перечисление UIUserInterfaceIdiom. Он может ответить на вопрос, на каком устройстве работает приложение, начиная с телефона и заканчивая автомобилем в carplay.

На этот раз нас интересуют два случая enum:

  • phone - интерфейс для iPhone или iPod touch;
  • pad - интерфейс для iPad.

Чтобы получить текущий интерфейс устройства, нам нужно получить к нему доступ из класса UIDevice, представляющего текущее работающее устройство. Чтобы получить идиому пользовательского интерфейса, нам нужно получить ее из существующей переменной класса из класса UIDevice. Затем из переменной userInterfaceIdiom мы получаем текущую идиому устройства.

Чтобы получить доступ к этому более удобным способом, мы можем расширить класс UIDevice и добавить новую статическую переменную, которая будет сокращенной версией процесса, описанного ранее.

extension UIDevice {
  static var idiom: UIUserInterfaceIdiom {
    UIDevice.current.userInterfaceIdiom
  }
}

Чтобы сделать его еще более привлекательным, мы можем добавить две статические переменные, чтобы узнать, является ли устройство iPhone или iPad.

extension UIDevice {
static var isIpad: Bool {
    idiom == .pad
  }
  
  static var isiPhone: Bool {
    idiom == .phone
  }
}

Разделение навигации

Теперь, когда мы знаем, какое устройство у пользователей нашего приложения, мы можем разделить навигацию. Это означает, что мы будем использовать TabView, а для iPad — боковую панель для iPhone.

После создания нового проекта SwiftUI с помощью Xcode мы могли отделить навигацию в файле ContentView.swift. Тогда прямо в body мы можем добавить логический оператор, проверяющий, является ли устройство iPad, а по-другому, это может быть вид телефона.

struct ContentView: View {
  var body: some View {
    if UIDevice.isIpad {
     // iPad view
    } else {
	    // iPhone view
    }
  }
}

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

struct ContentView: View {
  var body: some View {
    if UIDevice.isIpad {
      NavigationView {
        List {
          NavigationLink(destination: DashboardView()) {
            Label("Dashboard", systemImage: "square.dashed")
          }
          // ...
        }
      
        DashboardView()
      }
    } else {
      TabView {
        DashboardView()
          .tabItem {
            Label("Dashboard", systemImage: "square.dashed")
          }
        // ...
      }
	  }
  }
}

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

struct ContentView: View {
  var body: some View {
    if UIDevice.isIpad {
      sidebar
    } else {
      tabview
    }
  }
  
  private var sidebar: some View {
    NavigationView {
      List {
        NavigationLink(destination: DashboardView()) {
          Label("Dashboard", systemImage: "square.dashed")
        }
        // ...
    }
      
      DashboardView()
    }
  }
  
  private var tabview: some View {
    TabView {
      DashboardView()
        .tabItem {
          Label("Dashboard", systemImage: "square.dashed")
        }
      // ..
    }
  }
}

Ограничения

Жизнь — это не только радуга и бабочки. У этого подхода есть некоторые ограничения. Вкладка iPhone может содержать до пяти элементов. Если есть больше вкладок, то он переходит на вкладку «Дополнительно».

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

TL;DR

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

Ссылки