Site icon AppTractor

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

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()
  }
}

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

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

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

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

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

В дополнение к этим встроенным стилям вы можете создавать собственные стили переключения, соблюдая протокол 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 для группировки кнопок.

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

Создание и организация групп кнопок в 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 предоставляет модификатор для отключения/включения кнопок.

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

Отключение кнопок в 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.

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

Используя 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-кнопку.

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

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

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

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

Источник

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

Exit mobile version