\n1. Introduction<\/h2>\n
\n Swift is a modern programming language used for developing applications in the Apple ecosystem. With its fast, safe, and modern syntax, Swift plays a crucial role in iOS application development. UIKit is a framework for constructing and managing user interfaces, providing various UI components.\n <\/p>\n
\n In this blog, we will explore one of the components of UIKit, the Picker View. The Picker View is a UI element that provides a selection of options to the user and allows easy reflection of the selected value. For example, it is useful for date pickers or selecting items from a list. We will learn how to create and use a Picker View with the Swift language.\n <\/p>\n<\/section>\n\n2. What is a Picker View?<\/h2>\n
\n A Picker View is a view that allows the user to select from multiple items. It typically appears as a scrollable list, where users can scroll with their finger to make a selection. It offers similar functionality to Android’s Spinner or iOS’s UIAlertController but provides a more intuitive and user-friendly interface.\n <\/p>\n
\n iOS’s Picker View has two basic types.\n <\/p>\n
\n- UIPickerView:<\/strong> It generally creates a 2D selector that allows items to be selected by scrolling vertically.<\/li>\n
- UIDatePicker:<\/strong> A special Picker for date and time selection, helping users to choose more specific dates and times.<\/li>\n<\/ul>\n<\/section>\n\n
3. Basic Structure of UIPickerView<\/h2>\n
\n UIPickerView operates similarly to UITableView, but each item displays important values for selection. To use UIPickerView, several protocols need to be implemented, following the data source protocol and delegate.\n <\/p>\n
\n class MyViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {\n var pickerView: UIPickerView!\n var items: [String] = [\"Apple\", \"Banana\", \"Cherry\", \"Date\", \"Elderberry\"]\n \n override func viewDidLoad() {\n super.viewDidLoad()\n \n pickerView = UIPickerView()\n pickerView.dataSource = self\n pickerView.delegate = self\n \n view.addSubview(pickerView)\n }\n\n \/\/ UIPickerView DataSource Methods\n func numberOfComponents(in pickerView: UIPickerView) -> Int {\n return 1\n }\n\n func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {\n return items.count\n }\n }\n <\/code><\/pre>\n<\/section>\n\n4. Configuring UIPickerView and Displaying Items<\/h2>\n
\n The items to be displayed in the UIPickerView are stored in the ‘items’ array. The ‘numberOfComponents’ method returns the number of columns in the Picker View, and the ‘numberOfRowsInComponent’ method returns the number of items in each column.\n <\/p>\n
\n Now, to display each item, we need to implement the pickerView(_:titleForRow:forComponent:)<\/code> method. This method provides the title of the item to be displayed in each row of the Picker View.\n <\/p>\n\n func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {\n return items[row]\n }\n <\/code><\/pre>\n<\/section>\n\n5. Handling Item Selection<\/h2>\n
\n When a user selects an item from the UIPickerView, actions can be taken based on the selected value. To retrieve the selected item, we implement the pickerView(_:didSelectRow:inComponent:)<\/code> method.\n <\/p>\n\n func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {\n let selectedItem = items[row]\n \/\/ Logic to handle the selected item\n print(\"Selected item: \\(selectedItem)\")\n }\n <\/code><\/pre>\n<\/section>\n\n6. UI Customization<\/h2>\n
\n The Picker View is provided in its basic form, but it can be customized in various ways. For instance, custom views can be provided for each item. To do this, we use the pickerView(_:viewForRow:forComponent:reusing:)<\/code> method.\n <\/p>\n\n func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {\n let label = UILabel()\n label.text = items[row]\n label.textAlignment = .center\n \/\/ Additional styling\n return label\n }\n <\/code><\/pre>\n<\/section>\n\n7. Using UIDatePicker<\/h2>\n
\n UIDatePicker is a picker that can be used to set specific dates and times. UIDatePicker supports various styles when created and can be used in date or time format. It can be simply utilized as shown in the code example below.\n <\/p>\n
\n @IBOutlet weak var datePicker: UIDatePicker!\n\n override func viewDidLoad() {\n super.viewDidLoad()\n\n \/\/ Configuring UIDatePicker\n datePicker.datePickerMode = .date\n }\n\n @IBAction func dateChanged(_ sender: UIDatePicker) {\n let selectedDate = sender.date\n \/\/ Logic to handle the selected date\n print(\"Selected date: \\(selectedDate)\")\n }\n <\/code><\/pre>\n<\/section>\n\n8. Integrating Picker View into a Real App<\/h2>\n
\n Now we will demonstrate how to set up UIPickerView and UIDatePicker and integrate them into a real application without omitting any steps. Based on the view controller we have created, selected items and dates can be easily reflected or saved to other UI elements.\n <\/p>\n
\n For example, here is a code snippet that displays the selected fruit name on a UILabel.\n <\/p>\n
\n @IBOutlet weak var selectedFruitLabel: UILabel!\n \n func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {\n let selectedItem = items[row]\n selectedFruitLabel.text = \"Selected fruit: \\(selectedItem)\"\n }\n <\/code><\/pre>\n<\/section>\n\n9. Conclusion<\/h2>\n
\n In this post, we learned how to implement UIPickerView and UIDatePicker using Swift and UIKit. We learned how to build a user-friendly interface and control the app’s behavior based on selected items.\n <\/p>\n
\n The Picker View is a very useful tool that enriches the user experience of the app and helps users easily select the necessary information. It can be beneficial in various scenarios, so we encourage you to customize and implement it in a way that fits your application.\n <\/p>\n<\/section>\n<\/article>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"
1. Introduction Swift is a modern programming language used for developing applications in the Apple ecosystem. With its fast, safe, and modern syntax, Swift plays a crucial role in iOS application development. UIKit is a framework for constructing and managing user interfaces, providing various UI components. In this blog, we will explore one of the … \ub354 \ubcf4\uae30 “Using UIKit style in Swift, iPhone app development, 05 Choosing desired items using Picker View”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[127],"tags":[],"class_list":["post-32645","post","type-post","status-publish","format-standard","hentry","category-swift-iphone-app-development-uikit"],"yoast_head":"\nUsing UIKit style in Swift, iPhone app development, 05 Choosing desired items using Picker View - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atmokpo.com\/w\/32645\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using UIKit style in Swift, iPhone app development, 05 Choosing desired items using Picker View - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"1. Introduction Swift is a modern programming language used for developing applications in the Apple ecosystem. With its fast, safe, and modern syntax, Swift plays a crucial role in iOS application development. UIKit is a framework for constructing and managing user interfaces, providing various UI components. In this blog, we will explore one of the … \ub354 \ubcf4\uae30 "Using UIKit style in Swift, iPhone app development, 05 Choosing desired items using Picker View"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32645\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:10:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:25:02+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/32645\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32645\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"Using UIKit style in Swift, iPhone app development, 05 Choosing desired items using Picker View\",\"datePublished\":\"2024-11-01T09:10:34+00:00\",\"dateModified\":\"2024-11-01T11:25:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32645\/\"},\"wordCount\":589,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"Swift iPhone app development (UIKit)\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32645\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32645\/\",\"name\":\"Using UIKit style in Swift, iPhone app development, 05 Choosing desired items using Picker View - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:10:34+00:00\",\"dateModified\":\"2024-11-01T11:25:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32645\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32645\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32645\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using UIKit style in Swift, iPhone app development, 05 Choosing desired items using Picker View\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using UIKit style in Swift, iPhone app development, 05 Choosing desired items using Picker View - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atmokpo.com\/w\/32645\/","og_locale":"ko_KR","og_type":"article","og_title":"Using UIKit style in Swift, iPhone app development, 05 Choosing desired items using Picker View - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"1. Introduction Swift is a modern programming language used for developing applications in the Apple ecosystem. With its fast, safe, and modern syntax, Swift plays a crucial role in iOS application development. UIKit is a framework for constructing and managing user interfaces, providing various UI components. In this blog, we will explore one of the … \ub354 \ubcf4\uae30 \"Using UIKit style in Swift, iPhone app development, 05 Choosing desired items using Picker View\"","og_url":"https:\/\/atmokpo.com\/w\/32645\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:10:34+00:00","article_modified_time":"2024-11-01T11:25:02+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"4\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/32645\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32645\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"Using UIKit style in Swift, iPhone app development, 05 Choosing desired items using Picker View","datePublished":"2024-11-01T09:10:34+00:00","dateModified":"2024-11-01T11:25:02+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32645\/"},"wordCount":589,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["Swift iPhone app development (UIKit)"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32645\/","url":"https:\/\/atmokpo.com\/w\/32645\/","name":"Using UIKit style in Swift, iPhone app development, 05 Choosing desired items using Picker View - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:10:34+00:00","dateModified":"2024-11-01T11:25:02+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32645\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32645\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32645\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"Using UIKit style in Swift, iPhone app development, 05 Choosing desired items using Picker View"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32645","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=32645"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32645\/revisions"}],"predecessor-version":[{"id":32646,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32645\/revisions\/32646"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32645"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32645"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}