Picker View Styles in SwiftUI
Tags: swift, swiftui, ios
Published: 2021-02-22 18:53:20

---
title: Picker View Styles in SwiftUI
published: true
description: 
tags: #swift #SwiftUI #ios
//cover_image: https://direct_url_to_image.jpg
---
<!-- wp:paragraph -->
<p>In this post we are going to take a look at the different ways we can style a picker view in our SwiftUI project. Let's first setup a simple picker view like in the example below.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>    var arrayOfNames = &#91;"Tom", "Nick", "Tony", "Dylan"]
    @State private var selectedIndex = 0
    
    var body: some View {
        Picker("Names", selection: $selectedIndex) {
            ForEach(0 ..&lt; arrayOfNames.count) {
                Text(self.arrayOfNames&#91;$0])
            }
        }
    }
}</code></pre>
<!-- /wp:code -->

<!-- wp:image {"align":"center","id":1549,"width":337,"height":598,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://swifttom.com/wp-content/uploads/2021/02/Simulator-Screen-Shot-iPod-touch-7th-generation-2021-02-19-at-17.19.09-577x1024.png" alt="" class="wp-image-1549" width="337" height="598"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Above we created a basic picker view with four names to choose from. Now let us change the style of our picker to be included in a <strong>Form</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>    var arrayOfNames = &#91;"Tom", "Nick", "Tony", "Dylan"]
    @State private var selectedIndex = 0
    
    var body: some View {
        NavigationView {
            Form {
                Picker("Names", selection: $selectedIndex) {
                    ForEach(0 ..&lt; arrayOfNames.count) {
                        Text(self.arrayOfNames&#91;$0])
                    }
                }
            }
        }
    }
}</code></pre>
<!-- /wp:code -->

<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:gallery {"ids":[1555,1556],"linkTo":"none"} -->
<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://swifttom.com/wp-content/uploads/2021/02/Simulator-Screen-Shot-iPhone-12-2021-02-21-at-11.05.49-1-473x1024.png" alt="" data-id="1555" data-full-url="https://swifttom.com/wp-content/uploads/2021/02/Simulator-Screen-Shot-iPhone-12-2021-02-21-at-11.05.49-1.png" data-link="https://swifttom.com/?attachment_id=1555" class="wp-image-1555"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://swifttom.com/wp-content/uploads/2021/02/Simulator-Screen-Shot-iPhone-12-2021-02-21-at-11.05.54-1-473x1024.png" alt="" data-id="1556" data-full-url="https://swifttom.com/wp-content/uploads/2021/02/Simulator-Screen-Shot-iPhone-12-2021-02-21-at-11.05.54-1.png" data-link="https://swifttom.com/?attachment_id=1556" class="wp-image-1556"/></figure></li></ul></figure>
<!-- /wp:gallery --></div></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>In the example above is wrapped our code in a <strong>NavigationView</strong> and a <strong>Form</strong>. This changes our picker view style so that it segues us to another view to make our selection. This is great for a picker that has many options to choose from. But let's say we didn't want to segue to another view to see our options. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's see how we can implement a segmented picker view style.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>    var arrayOfNames = &#91;"Tom", "Nick", "Tony", "Dylan"]
    @State private var selectedIndex = 0
    
    var body: some View {
        NavigationView {
            Form {
                Picker("Names", selection: $selectedIndex) {
                    ForEach(0 ..&lt; arrayOfNames.count) {
                        Text(self.arrayOfNames&#91;$0])
                    }
                }.pickerStyle(SegmentedPickerStyle())
            }
        }
    }</code></pre>
<!-- /wp:code -->

<!-- wp:image {"align":"center","id":1558,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://swifttom.com/wp-content/uploads/2021/02/Simulator-Screen-Shot-iPhone-12-2021-02-21-at-11.14.46-473x1024.png" alt="" class="wp-image-1558"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>By just adding <strong>.pickerStyle(SegmentedPickerStyle())</strong> to our picker view, SwiftUI gives us a segmented style picker view with minimal change to our code. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's say we don't want either of these styles. What if we wanted a picker view like we originally had in our first example. We can easily do this by switching our picker style to <strong>.pickerStyle(<strong>WheelPickerStyle</strong>())</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1560,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://swifttom.com/wp-content/uploads/2021/02/Simulator-Screen-Shot-iPhone-12-2021-02-21-at-11.20.45-473x1024.png" alt="" class="wp-image-1560"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>I hope this helps you in your next SwiftUI Project.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks for reading and happy coding! ⛏⛏⛏</p>
<!-- /wp:paragraph -->