Новости

Поваренная книга SwiftUI: кнопки — Часть 2

Опубликовано

4 месяца назад

22.07.2024

Автор:

AppTractor

Содержание

Создание кнопки-переключателя в SwiftUI

Кнопки-тумблеры являются неотъемлемыми компонентами многих пользовательских интерфейсов, позволяя пользователям переключаться между двумя состояниями, часто представляющими собой выбор on/off или true/false. SwiftUI с его декларативным синтаксисом делает создание таких интерактивных элементов невероятно простым. Давайте узнаем, как создать кнопку-переключатель с помощью SwiftUI.

В SwiftUI кнопка переключения — это элемент управления пользовательским интерфейсом, который можно включить (true) или выключить (false). Он привязывается к переменной в вашем коде, которая представляет его текущее состояние. Чтобы создать и настроить тумблер, рассмотрим следующий фрагмент кода:

struct ContentView: View {
  @State private var isOn = false

  var body: some View {
    Toggle(isOn: $isOn) {
      Text("Switch state")
    }
    .toggleStyle(.switch)
    .padding()
  }
}

Превью должно выглядеть так:

Поваренная книга SwiftUI: кнопки — Часть 2

Используйте представление Toggle для создания переключателя.

Вот что делает этот код:

@State private var isOn = false определяет переменную состояния isOn и устанавливает ее начальное значение в false. @State — это свойство-обертка, предоставляемое SwiftUI. Оно сообщает SwiftUI, что этот фрагмент данных является источником истины для представления. Когда состояние изменяется, представление должно быть перерисовано. Воспринимайте @State как смотрителя, который следит за определенным свойством и предупреждает SwiftUI о необходимости обновления при каждом изменении этого свойства.
Toggle(isOn: $isOn) { Text("Switch state") } создает представление Toggle. Это представление связывается с переменной состояния isOn, создавая двусторонний биндинг. В SwiftUI префикс $ перед именем переменной создает эту двустороннюю привязку к переменной состояния, что означает, что пользовательский интерфейс может изменять значение переменной, и наоборот. Представление Toggle имеет метку «Switch state«.
.toggleStyle(.switch) стилизует ваш тумблер под классический переключатель iOS.
.padding() добавляет пространство вокруг всего элемента управления тумблером, обеспечивая более удобное касание и лучшее визуальное отделение от других элементов интерфейса.

Изменение внешнего вида тумблера

В SwiftUI вы можете изменять внешний вид тумблера с помощью модификатора .toggleStyle(). Встроенные стили переключения в SwiftUI включают:

DefaultToggleStyle: Это стиль по умолчанию, который SwiftUI использует, если не указан другой стиль. Он меняет внешний вид в зависимости от платформы. На iOS он отображается как переключатель, а на macOS — как флажок. Этот стиль полезен, когда вы хотите, чтобы ваш переключатель автоматически соответствовал соглашениям платформы.
SwitchToggleStyle: Этот стиль делает ваш тумблер похожим на классический переключатель iOS, независимо от платформы. Это хороший выбор, когда вы хотите сохранить одинаковый внешний вид на разных платформах или когда вам нужен именно переключатель iOS.
CheckboxToggleStyle: Этот стиль заставляет ваш переключатель выглядеть как флажок. Он обычно используется в macOS, но может быть использован и в iOS, если вы предпочитаете внешний вид флажка, а не переключателя.
ButtonToggleStyle: Этот стиль представляет тумблер в виде кнопки, которая показывает состояние включения/выключения. Этот стиль может быть полезен, если вы хотите, чтобы пользователь подтверждал выполняемое им действие каждый раз, когда он меняет состояние тумблера.
PickToggleStyle: Этот стиль представляет тумблер в виде переключателя. Вы можете использовать этот стиль, если у вас есть несколько вариантов, которые являются взаимоисключающими.

В дополнение к этим встроенным стилям вы можете создавать собственные стили переключения, соблюдая протокол ToggleStyle. Это дает вам полный контроль над внешним видом и взаимодействием с тумблерома.

Вот и все! Вот как просто создать кнопку переключения в SwiftUI. Всегда помните, что главное — привязать ваш Toggle к переменной @State. SwiftUI позаботится обо всем остальном, перерисовывая ваш пользовательский интерфейс при каждом изменении состояния. Хорошего переключения!

Создание группы кнопок в SwiftUI

Создание группы кнопок — распространенная задача при разработке пользовательских интерфейсов. SwiftUI позволяет сделать это довольно просто с помощью представлений HStack или VStack.

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

struct ContentView: View {
  var body: some View {
    VStack {
      // Horizontal group of buttons
      HStack {
        Button("Red", action: {})
          .foregroundColor(.red)
        Button("Green", action: {})
          .foregroundColor(.green)
        Button("Blue", action: {})
          .foregroundColor(.blue)
      }
      
      Divider()
      
      // Vertical group of buttons
      VStack {
        Button("Red", action: {})
          .foregroundColor(.red)
        Button("Green", action: {})
          .foregroundColor(.green)
        Button("Blue", action: {})
          .foregroundColor(.blue)
      }
    }
  }
}

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

Используйте HStacks или VStacks для группировки кнопок.

Этот код делает следующее:

VStack выстраивает свои дочерние представления в вертикальную линию. Здесь вы используете его для группировки горизонтальных и вертикальных групп кнопок.
HStack располагает свои дочерние представления в горизонтальную линию. В этом примере он группирует кнопки по горизонтали.
Button(«Color», action: {}).foregroundColor(.color) Внутри каждого HStack или VStack вы создаете представление Button для каждого цвета. Представление Button принимает два аргумента: titleKey и action. Тут action — это замыкание, которое выполняется при нажатии на кнопку — здесь вы оставляете его пустым {}. titleKey — это ярлык для простого добавления текста, который визуально представляет кнопку. Затем вы используете модификатор .foregroundColor(.color), чтобы окрасить каждый ярлык в соответствии с его цветовым названием.
Функция Divider() создает визуальное разделение между горизонтальными и вертикальными группами кнопок.

Создание и организация групп кнопок в SwiftUI — простая и мощная задача. Это дает возможность легко упорядочивать связанные кнопки и создавать чистые и интуитивно понятные пользовательские интерфейсы. Благодаря дополнительным возможностям настройки, таким как раскраска и группировка представлений, вы можете еще больше адаптировать интерфейс под свои нужды.

Отключение кнопки в SwiftUI

Кнопки — неотъемлемая часть любого пользовательского интерфейса. Однако иногда вам может понадобиться временно отключить кнопку, чтобы помешать пользователям совершать недопустимые действия. SwiftUI позволяет легко управлять отключенным состоянием кнопок.

В следующем примере вы создадите простую кнопку, отключите ее, а затем динамически включите или отключите ее на основе определенных условий:

struct ContentView: View {
  @State private var isButtonDisabled = true

  var body: some View {
    VStack {
      Button("Tap me") {
        print("Button tapped")
      }
      .disabled(isButtonDisabled)

      Button("\(isButtonDisabled ? "Enable" : "Disable") button") {
        isButtonDisabled.toggle()
      }
      .padding()
    }
  }
}

Нажмите Enable button один раз, и ваш предварительный просмотр должен выглядеть так:

SwiftUI предоставляет модификатор для отключения/включения кнопок.

Этот код делает следующее:

@State private var isButtonDisabled = true определяет булевскую переменную @State под названием isButtonDisabled и устанавливает ее начальное значение в true. Атрибут @State указывает SwiftUI отслеживать изменения этой переменной и перерисовывать представления при ее изменении.
Button("Tap me") { print("Button tapped") } .disabled(isButtonDisabled) создает представление Button и устанавливает его отключенное состояние на основе переменной isButtonDisabled. Изначально, поскольку isButtonDisabled равна true, кнопка отключена.
Button("\(isButtonDisabled ? "Enable" : "Disable") me") { isButtonDisabled = false } — это еще один вид кнопки. При нажатии на эту кнопку переключается состояние isButtonDisabled, переключая, отключена ли первая кнопка.
VStack — обе кнопки размещены внутри представления VStack, которое располагает свои дочерние представления в вертикальную линию.

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

Добавление иконки к кнопке в SwiftUI

Чтобы добавить иконку к кнопке в SwiftUI, вы можете воспользоваться SF Symbols, которая является встроенной библиотекой с тысячами иконок, предоставленных Apple. С помощью SF Symbols можно легко повысить визуальную привлекательность и функциональность кнопок.

struct ContentView: View {
  var body: some View {
    VStack {
      Button(action: {
        // Action to perform when the button is tapped
      }) {
        Label("Show Some Love!", systemImage: "heart.fill")
          .padding()
          .foregroundColor(.white)
          .background(Color.blue)
          .cornerRadius(10)
      }
    }
  }
}

Предварительный просмотр у вас должен быть таким:

Добавьте иконку к кнопке с помощью SF Symbols.

Вот как работает этот код:

Сначала вы встраиваете кнопку в VStack, чтобы создать вертикальный стек представлений.
Внутри представления Button вы указываете действие, которое должно выполняться при нажатии на кнопку. Вы можете заменить комментарий на нужную вам функциональность.
Представление Label позволяет задать заголовок для кнопки и указать SF Symbol для использования в качестве значка. В этом примере используется SF-символ «heart.fill» для представления заполненного сердца.
Подключив к Label модификаторы, вы можете дополнительно настроить внешний вид кнопки. Вы применяете подложку, белый цвет шрифта, синий цвет фона и придаете кнопке закругленные углы с помощью модификатора cornerRadius. Не стесняйтесь настраивать эти модификаторы в соответствии с вашими предпочтениями в дизайне.

Используя SF Symbols, вы можете легко повысить визуальную привлекательность и удобство использования ваших кнопок в SwiftUI. Большая библиотека иконок, доступная через SF Symbols, гарантирует, что вы сможете найти идеальную иконку для представления различных действий и концепций в вашем приложении.

Создание полноэкранной кнопки в SwiftUI

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

struct ContentView: View {
  var body: some View {
    FullScreenButtonView()
  }
}

struct FullScreenButtonView: View {
  var body: some View {
    Button(action: {
      print("Full Screen Button Tapped")
    }, label: {
      Text("Full Screen Button")
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    })
  }
}

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

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

Используйте модификатор frame, чтобы сделать полноэкранную кнопку.

В приведенном выше примере вы определяете представление SwiftUI, содержащее полноэкранную кнопку. Кнопка имеет текстовый ярлык «Full Screen Button» и действие, которое печатает сообщение в консоль при нажатии.

Чтобы сделать кнопку полноэкранной, вы добавляете к ней модификатор .frame(maxWidth: .infinity, maxHeight: .infinity). Этот модификатор указывает SwiftUI расширить кнопку по горизонтали и вертикали настолько, насколько это возможно, эффективно превращая ее в полноэкранную.

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

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

Расширенная стилизация кнопок в SwiftUI

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

Здесь вы рассмотрите продвинутый пример настройки кнопок, в котором создается 3D-эффект при нажатии на кнопку. Такое тактильное взаимодействие может улучшить пользовательский опыт вашего приложения, сделав пользовательский интерфейс более динамичным и привлекательным.

struct ContentView: View {
  @State private var isPressed = false  //1

  var body: some View {
    VStack {
      Button(action: {
        isPressed.toggle()  //2
      }) {
        Text("3D Button")  //3
      }
      .font(.title)  //4
      .frame(width: 200, height: 50)  //5
      .background(  //6
        ZStack {
          Color(isPressed ? .gray : .blue)  //7

          RoundedRectangle(cornerRadius: 10, style: .continuous)
            .foregroundColor(.white)
            .blur(radius: 4)
            .offset(x: -8, y: -8)

          RoundedRectangle(cornerRadius: 10, style: .continuous)
            .fill(
              LinearGradient(gradient: Gradient(colors: [.white, Color(.white).opacity(0.5)]),
                             startPoint: .topLeading,
                             endPoint: .bottomTrailing)
            )
            .padding(2)
            .blur(radius: 2)
        }
      )
      .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))  //8
      .shadow(color: Color(isPressed ? .blue : .gray).opacity(0.3), radius: 20, x: 20, y: 20)  //9
      .shadow(color: Color(isPressed ? .blue : .gray).opacity(0.2), radius: 20, x: -20, y: -20)  //9
      .scaleEffect(isPressed ? 0.95 : 1)  //10
      .animation(.spring(response: 0.5, dampingFraction: 0.5, blendDuration: 1), value: isPressed)  //11
      .foregroundColor(isPressed ? .blue : .white)  //12
    }
  }
}

Нажмите кнопку один раз, и ваш предварительный просмотр должен выглядеть так:

Используйте модификаторы вида, чтобы сделать 3D-кнопку.

Вот что происходит в этом коде:

Объявлена переменная состояния isPressed, чтобы отслеживать, нажата ли кнопка.
Когда кнопка нажата, переменная состояния isPressed переключается между true и false.
Ярлык кнопки устанавливается в значение «3D Button».
Ярлык кнопки оформляется крупным шрифтом заголовка.
Модификатор frame используется для явной установки размера кнопки.
Модификатор background используется для установки фона кнопки.
ZStack используется для наложения нескольких представлений. Здесь используется условный оператор для изменения цвета кнопки при ее нажатии.
clipShape используется для создания представления в виде округлой формы прямоугольника.
Два модификатора shadow создают 3D-эффект, накладывая более светлые и более темные тени на разные стороны кнопки. Цвет и смещение тени меняются в зависимости от состояния isPressed.
Модификатор scaleEffect используется для небольшого уменьшения размера кнопки при нажатии, усиливая 3D-эффект.
Для сглаживания реакции кнопки на нажатие добавлена анимация. Анимация привязана к состоянию isPressed.
Модификатор foregroundColor изменяет цвет метки кнопки в зависимости от состояния isPressed.

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

Использование возможностей SwiftUI для стилизации кнопок и других элементов пользовательского интерфейса — отличный способ сформировать индивидуальность вашего приложения и помочь ему выделиться на переполненном рынке. Ничто так не говорит «Скачай меня!», как кнопка, которая одновременно визуально привлекательна и восхитительно интерактивна!

Источник

← Поваренная книга SwiftUI: кнопки — Часть 1

Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.