Новости программирования

Переключение темы приложения SwiftUI

[ad_1]

В этой короткой статье объясняется, как изменить тему приложения во время его работы, и все необходимое, чтобы оно работало во время выполнения.
Итак, прежде всего, давайте создадим наш проект Xcode и ресурсы, которые мы будем использовать в одном простом представлении, которое продемонстрирует переключение между темной/светлой темой, а также реализует проверку, использует ли система темную/светлую тему.
Откройте Xcode и создайте новый проект, например Файл->Создать->Проект. Выберите iOS в качестве шаблона.
Скриншот 29.01.2022, 18.14.08.png

Затем создайте свой идентификатор и выберите SwiftUI в качестве интерфейса и Swift в качестве языка.
Скриншот 29.01.2022, 14.18.34.png

После того, как мы создали наш проект, давайте организуем представления в папки и добавим некоторые цветовые активы, которые будут отличать наш светлый режим от темного.
Итак, сначала создайте папку Views в корне нашего проекта, переместите в нее ContentView.swift и создайте новый HomeView.swift внутри той же папки.
Скриншот 29.01.2022, 14.28.22.png

Далее давайте создадим наши цветовые активы. Нажмите «Активы» и на панели навигации. Щелкните правой кнопкой мыши -> Новый цвет Набор.
Скриншот 29.01.2022 в 14.29.12.png

Давайте назовем наш новый набор цветов «Акцент». Давайте добавим еще три набора цветов и назовем их:

  • Фоновый цвет
  • ФонЦветСписок
  • ЦветОсновной
  • ТекстЦветПервичный
  • TextColorSecondary
    Скриншот 29.01.2022, 14.38.38.png

После того, как мы создали наш набор цветов, мы должны создать расширение, чтобы использовать наши собственные цвета и модификаторы. Создайте папку Extensions и добавьте расширение Color.swift.
Скриншот 29.01.2022, 14.54.57.png

extension Color {
 static var theme: Color  {
   return Color("theme")
 }
 static var BackgroundColor: Color  {
   return Color("BackgroundColor")
 }
 static var BackgroundColorList: Color  {
   return Color("BackgroundColorList")
 }
 static var ColorPrimary: Color  {
   return Color("ColorPrimary")
 }
 static var Accent: Color  {
   return Color("AccentColor")
 }
 static var TextColorPrimary: Color  {
   return Color("TextColorPrimary")
 }
 static var TextColorSecondary: Color  {
   return Color("TextColorSecondary")
 }
}

Далее давайте создадим новую папку под названием Fonts и скопируем/вставим наши причудливые шрифты в новую папку.
Скриншот 29.01.2022, 14.43.39.png

Также создайте новую папку с именем Utils и добавьте класс Constants.swift и класс UserDefaultsUtils.swift, которые будут нашим синглтоном для установки/получения нашей темы приложения.

Константы.swift

import Foundation
class Constants {
  public static let DARK_MODE = “DARK_MODE”
  public static let LIGHT_MODE = “LIGHT_MODE”
}

UserDefaultsutils.swift

import Foundation
class UserDefaultsUtils {
static var shared = UserDefaultsUtils()
 func setDarkMode(enable: Bool) {
   let defaults = UserDefaults.standard
   defaults.set(enable, forKey: Constants.DARK_MODE)
 }
 func getDarkMode() -> Bool {
  let defaults = UserDefaults.standard
  return defaults.bool(forKey: Constants.DARK_MODE)
 }
}

Итак, давайте добавим немного кода в наш HomeView.swift. Сначала мы собираемся добавить переменную среды, которая будет представлять системную цветовую схему, которая используется в настоящее время, если мы решим использовать ту же тему, что и текущая системная тема. Во-вторых, мы будем использовать государственную собственность isDarkModeOn это сохранит наше состояние темы нашего окна и будет сохранено в UserDefaults для последующего использования.

@Environment(.colorScheme) private var colorScheme: ColorScheme
@State private var isDarkModeOn = false

Далее давайте добавим нашу функцию для установки темы нашего приложения при открытии и функцию для изменения темы на Toggle.

func setAppTheme(){
  //MARK: use saved device theme from toggle
  isDarkModeOn = UserDefaultsUtils.shared.getDarkMode()
  changeDarkMode(state: isDarkModeOn)
  //MARK: or use device theme
  /*if (colorScheme == .dark)
  {
    isDarkModeOn = true
  }
  else{
    isDarkModeOn = false
  }
  changeDarkMode(state: isDarkModeOn)*/
}
func changeDarkMode(state: Bool){
  (UIApplication.shared.connectedScenes.first as? 
  IWindowScene)?.windows.first!.overrideUserInterfaceStyle = state ?   .dark : .light
  UserDefaultsUtils.shared.setDarkMode(enable: state)
}

И, наконец, наше тело HomeView.swift.

var ToggleThemeView: some View {
Toggle("Dark Mode", isOn: $isDarkModeOn).onChange(of: isDarkModeOn) { (state)  in
changeDarkMode(state: state)
}.labelsHidden()
}
var body: some View {
  NavigationView {
   ZStack {
    Color.BackgroundColorList.edgesIgnoringSafeArea(.all)
    VStack(alignment: .leading) {
      Text("Switch   theme").foregroundColor(Color.TextColorSecondary).padding(10).font(F  ont.custom("Baloo-Regular", size: 15))
      ToggleThemeView
 }
 .background(Color.BackgroundColorList)
 .font(Font.custom("Baloo-Regular", size: 20))
 .navigationBarTitle("", displayMode: .inline)
 .navigationBarItems(
 leading:
   Text("DarkModeSwitch").font(Font.custom("Baloo-Regular", size: 20)))
   .navigationBarBackButtonHidden(true)
   foregroundColor(Color.TextColorPrimary)
  }
 }
  .background(Color.BackgroundColorList)
  .navigationViewStyle(StackNavigationViewStyle())
  .onAppear(perform: {
  setAppTheme()
 })
}

Итак, если мы откроем наше приложение, первая тема будет светлой. Мы можем переключить его на темный или использовать тему устройства по умолчанию.
Снимок экрана симулятора — iPhone 13 — 29 января 2022 г., 16.57.01.png
Снимок экрана симулятора — iPhone 13 — 29 января 2022 г., 16.57.04.png

Вот и все. Код доступен в репозитории GitHub.
Гитхаб

[ad_2]
Source: codementor.io/community/new

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Переключение темы приложения SwiftUI

Название: Переключение темы приложения SwiftUI . Краткое описание: [ad_1] ⭐ В этой короткой статье объясняется, как измен . Дата публикации: 29.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»