Hertha  Mayer

Hertha Mayer

1596416579

SwiftUI Picker, Toggle, Slider and Stepper fully explained

Picker

Pickers can be used to let the user select a value from a fixed set of options.

@State private var selection = 0

	Picker("Select an appearence", selection: $selection) {
	    Text("Light").tag(0)
	    Text("Dark").tag(1)
	    Text("Automatic").tag(2)
	}

There are multiple types of pickers in SwiftUI, Picker , DatePicker , ColorPicker and in some way also TabView .


Ways to create your Picker

The most prominent way of creating a picker is with an Integer value. But you can also use every other value type as selection. For example boolean values:

@State private var selection = false

	Picker("Get notifications", selection: $selection) {
	    Text("Yes").tag(false)
	    Text("No").tag(true)
	}

Of course, boolean pickers like that are kind of sensless and should be better replaced with a Toggle , but if you only have two values, that don’t represent true or false you can use a boolean picker. Then you don’t need to “convert” the integer to the boolean value. You can also use a string selection, so that you directly have the value.

@State private var selection = "North America"

	Picker("Select region", selection: $selection) {
	    Text("Asia").tag("Asia")
	    Text("Africa").tag("Africa")
	    Text("North America").tag("North America")
	    ...
	}

	Text("Region: \(selection)")

You can also put a custom object in the .tag() . When you don’t want to have a default value, set the @State to a value, that isn’t in the picker.


Change the picker view

The picker content is just a view, like any other view. That means, you can extract the picker content to a View ,for example when you want to reuse the picker content. But you can’t just put the picker content in the var body: some View , because a variable cannot have multiple return objects. But that’s easy to fix, simply wrap the content in a List .

Picker("Select a count", selection: $selection) {
	    PickerView() 
	}

When you have an array of objects, the user can choose from, you don’t need to hard code the picker. Instead you can use a ForEach or a List .

Picker("Select a count", selection: $s) {
	    List(1...30, id: \.self) { int in
	        Text("\(int)").tag(int)
	    }
	}.pickerStyle(WheelPickerStyle())

For pickers with a big selection like this, you may use theWheelPickerStyle . Depending on what the value represents, the count and the style of the view, you could also use a Slider , a Stepper or a TextField . When you only have a handful of options, where the user should get easy access to, you can use SegmentedPickerStyle .

import MapKit

	@State private var selection: MKMapType = .standard

	Picker("Map type", selection: $selection) {
	    Text("Standard").tag(.standard)
	    Text("Satellite").tag(.satellite)
	    Text("Hybrid").tag(.hybrid)
	}.pickerStyle(SegmentedPickerStyle())

#swift #swiftui #ios #ui #ios-app-development

What is GEEK

Buddha Community

SwiftUI Picker, Toggle, Slider and Stepper fully explained
Hertha  Mayer

Hertha Mayer

1596416579

SwiftUI Picker, Toggle, Slider and Stepper fully explained

Picker

Pickers can be used to let the user select a value from a fixed set of options.

@State private var selection = 0

	Picker("Select an appearence", selection: $selection) {
	    Text("Light").tag(0)
	    Text("Dark").tag(1)
	    Text("Automatic").tag(2)
	}

There are multiple types of pickers in SwiftUI, Picker , DatePicker , ColorPicker and in some way also TabView .


Ways to create your Picker

The most prominent way of creating a picker is with an Integer value. But you can also use every other value type as selection. For example boolean values:

@State private var selection = false

	Picker("Get notifications", selection: $selection) {
	    Text("Yes").tag(false)
	    Text("No").tag(true)
	}

Of course, boolean pickers like that are kind of sensless and should be better replaced with a Toggle , but if you only have two values, that don’t represent true or false you can use a boolean picker. Then you don’t need to “convert” the integer to the boolean value. You can also use a string selection, so that you directly have the value.

@State private var selection = "North America"

	Picker("Select region", selection: $selection) {
	    Text("Asia").tag("Asia")
	    Text("Africa").tag("Africa")
	    Text("North America").tag("North America")
	    ...
	}

	Text("Region: \(selection)")

You can also put a custom object in the .tag() . When you don’t want to have a default value, set the @State to a value, that isn’t in the picker.


Change the picker view

The picker content is just a view, like any other view. That means, you can extract the picker content to a View ,for example when you want to reuse the picker content. But you can’t just put the picker content in the var body: some View , because a variable cannot have multiple return objects. But that’s easy to fix, simply wrap the content in a List .

Picker("Select a count", selection: $selection) {
	    PickerView() 
	}

When you have an array of objects, the user can choose from, you don’t need to hard code the picker. Instead you can use a ForEach or a List .

Picker("Select a count", selection: $s) {
	    List(1...30, id: \.self) { int in
	        Text("\(int)").tag(int)
	    }
	}.pickerStyle(WheelPickerStyle())

For pickers with a big selection like this, you may use theWheelPickerStyle . Depending on what the value represents, the count and the style of the view, you could also use a Slider , a Stepper or a TextField . When you only have a handful of options, where the user should get easy access to, you can use SegmentedPickerStyle .

import MapKit

	@State private var selection: MKMapType = .standard

	Picker("Map type", selection: $selection) {
	    Text("Standard").tag(.standard)
	    Text("Satellite").tag(.satellite)
	    Text("Hybrid").tag(.hybrid)
	}.pickerStyle(SegmentedPickerStyle())

#swift #swiftui #ios #ui #ios-app-development

Fredy  Larson

Fredy Larson

1594359060

SwiftUI 2.0 Scroll Reader - Image Picker - Chat UI - Xcode 12 - SwiftUI 2.0 Tutorials

In this Video i’m going to show how to create a Stylish Chat UI With Scroll Reader - Image Picker - Scroll To Bottom - Custom Shapes Using SwiftUI 2.0 | SwiftUI Chat UI | SwiftUI 2.0 Scroll Reader | SwiftUI 2.0 Image Picker | SwiftUI Scroll To Bottom - SwiftUI 2.0 Scroll View | Scroll To Bottom Using SwiftUI | Xcode 12.

Source Code
https://kavsoft.tech/Swift/Chat_UI_SwiftUI2.0/

Support Us By Contributions !!!

https://donorbox.org/kavsoft

My Xcode Version is 12 Beta
My macOS Version is 10.15.5 Catalina

For Any Queries And Any Request For Videos Use The Given Link

https://kavsoft.tech/#contact

For More

https://kavsoft.tech

#ui #swiftui #picker

Yoav Reisler

1596775802

Range Slider Using SwiftUI - Custom Slider Using SwiftUI - SwiftUI Tutorials

In this Video going to show how to create Range Sliders Using SwiftUI | Slider With Range Facility Using SwiftUI | Custom Slider Using SwiftUI | Ranging Slider Using SwiftUI.

#swiftui #swift #mobile-apps

SwiftUI Scratch Card Effect - Custom Masking - Animation's -View Builder-SwiftUI Tutorials

Hello Guys 🖐🖐🖐🖐
In this Video I’m going to show how to create a Stylish Scratch Card Animation Effect With Custom Masking in SwiftUI | Scratch to reveal content SwiftUI | SwiftUI Custom View Masking | SwiftUI Custom Animation’s | SwiftUI View Builder’s | SwiftUI Gesture’s | Xcode 12 SwiftUI.

► Source Code: https://www.patreon.com/posts/early-access-52075157

► Support Us
Patreon : https://www.patreon.com/kavsoft
Contributions : https://donorbox.org/kavsoft
Or By Visiting the Link Given Below:

► Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. It’s gives a great experience and I think you should give it a try too https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=kavsoft&utm_content=description-only

► My MacBook Specs
M1 MacBook Pro(16GB)
Xcode Version: 12.5
macOS Version: 11.4 Big Sur

► Official Website: https://kavsoft.dev
For Any Queries: https://kavsoft.dev/#contact

► Social Platforms
Instagram: https://www.instagram.com/_kavsoft/
Twitter: https://twitter.com/_Kavsoft

► Timestamps
0:00 Intro
0:26 Building Home View
1:56 Building Scratch Card View(View Builder)

Thanks for watching
Make sure to like and Subscribe For More Content !!!

#swiftui #animation's #swiftui

SwiftUI Cloud App UI - Adaptable For Both iOS & macOS - Complex UI - SwiftUI Tutorials

Hello Guys 🖐🖐🖐🖐
In this Video I’m going to show how to create a adaptable Cloud App UI for Both iOS & macOS Using SwiftUI | SwiftUI Cloud App UI | SwiftUI macOS App Development | SwiftUI Mac Catalyst Apps | SwiftUI Complex UI | SwiftUI Mac App | SwiftUI Custom Side Bar Menu | SwiftUI Hamburger Menu | SwiftUI Slide Out Menu | Xcode SwiftUI.

► Source Code: https://www.patreon.com/posts/early-access-app-52186632

► Support Us
Patreon : https://www.patreon.com/kavsoft
Contributions : https://donorbox.org/kavsoft
Or By Visiting the Link Given Below:

► Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. It’s gives a great experience and I think you should give it a try too https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=kavsoft&utm_content=description-only

► My MacBook Specs
M1 MacBook Pro(16GB)
Xcode Version: 12.5
macOS Version: 11.4 Big Sur

► Official Website: https://kavsoft.dev
For Any Queries: https://kavsoft.dev/#contact

► Social Platforms
Instagram: https://www.instagram.com/_kavsoft/
Twitter: https://twitter.com/_Kavsoft

► Timestamps
0:00 Intro
0:42 Building Side Bar Menu
7:54 Building Main Content View
20:32 Building Side View
23:37 Adapting App For iOS

Thanks for watching
Make sure to like and Subscribe For More Content !!!

#swiftui #complex ui #swiftui #ios & macos