I am making an app where a user has the option to use two UIPickers in the same view controller. How can this be done. I am wanting one picker to display beach names and another to display animals living at the beach.
Thanks for your help
Here's a quick guide to doing this:
1.Initialize pickers, and picker data sets in the class:
var pickerView1 = UIPickerView()
var pickerView2 = UIPickerView()
var pickerView1Data: [String] = ["Waikiki", "Long Beach", ...]
var pickerView2Data: [String] = ["Crab", "Seal", ...]
2.Set delegates, data sources, and tags (in viewDidLoad).
pickerView1.dataSource = self
pickerView1.delegate = self
pickerView1.tag = 1
pickerView2.dataSource = self
pickerView2.delegate = self
pickerView2.tag = 2
3.Set number of rows
func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
var returnIndex: Int = 0
if pickerView.tag == 1 {
returnIndex = pickerView1Data.count
} else if pickerView.tag == 2 {
returnIndex = pickerView2Data.count
}
return returnIndex
}
4.Return data for each row
func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
var returnRow: String!
if pickerView.tag == 1 {
returnRow = pickerView1Data[row]
} else if pickerView.tag == 2 {
returnRow = pickerView2Data[row]
}
return returnRow
}
5.Capture pickerView selection
func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
// This method is triggered whenever the user makes a change to the picker selection.
if pickerView.tag == 1 {
beachTextField.text = pickerView1Data[row]
} else if pickerView.tag == 2 {
animalTextField.text = pickerView2Data[row]
}
}
Of course, this is on top of everything else you have to do to set up picker views, but this should be everything that needs to be taken care of for two picker views.
Related
I am trying to develop a function in which the user enters a number in a TextField and based on the selection of the picker, it will calculate the number and display it either in a label or another text field. Now keep in mind, the picker has to retain String titles, but it will have different numbers for each row.
import UIKit
class ViewController: UIViewController, UIPickerViewDelegate,
UIPickerViewDataSource {
#IBOutlet weak var numberInput: UITextField!
#IBOutlet weak var pickerControl: UIPickerView!
#IBOutlet weak var pickerControl2: UIPickerView!
#IBOutlet weak var resultField: UILabel!
var pickerData = ["Logistic","Administration","Clinic"]
var pickerData2 = ["Days","Weeks","Months"]
override func viewDidLoad() {
super.viewDidLoad()
pickerControl.delegate = self
pickerControl2.delegate = self
pickerControl.delegate = self
pickerControl2.delegate = self
}
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}
func pickerView(_ pickerView: UIPickerView,
numberOfRowsInComponent component: Int) -> Int {
if pickerView == pickerControl {
return pickerData.count
} else if pickerView == pickerControl2 {
return pickerData2.count
}
return 1
}
func pickerView(_ pickerView: UIPickerView, titleForRow row:
Int, forComponent component: Int) -> String? {
if pickerView == pickerControl {
return pickerData[row]
} else if pickerView == pickerControl2 {
return pickerData2[row]
}
return ""
}
func pickerView(_ pickerView: UIPickerView, didSelectRow row:
Int, inComponent component: Int) -> String? {
let entry = Float(numberInput.text!) ?? 0.0
if pickerView == pickerControl {
return (Array(pickerData)[row])
}
if pickerView == pickerControl2 {
if Array(pickerData2)[row] == "Days" {
self.resultField.text = String(entry * 3)
}
if Array(pickerData2)[row] == "Weeks" {
self.resultField.text = String(entry * 4)
}
if Array(pickerData2)[row] == "Months" {
self.resultField.text = String(entry * 6)
}
return Array(pickerData2)[row]
}
return ""
}
}
The function signature for pickerView(didSelect...) isn't correct, so it's not getting called. You'll see that Xcode is giving you a warning about it. That function shouldn't be returning anything.
Here's an example of how to change it:
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
let entry = Float(numberInput.text ?? "") ?? 0.0
if pickerView == pickerControl {
return
}
switch pickerData2[row] {
case "Days":
self.resultField.text = String(entry * 3)
case "Weeks":
self.resultField.text = String(entry * 4)
case "Months":
self.resultField.text = String(entry * 6)
default:
break
}
}
You'll note that I also used a switch statement, which I think is a little cleaner looking. But, if you didn't and stuck to your if/else, you don't have to use Array() for everything -- you can do things like if pickerControl2[row] == "Days" { }
You could clean things up even further by defining pickerData2 as:
var pickerData2 : [(title: String, value: Float)] = [(title: "Days",value: 3),(title: "Weeks",value: 4),(title: "Months", value:6)]
Then, in titleForRow, you could return pickerData2[row].title
and later, in didSelectRow:
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
let entry = Float(numberInput.text ?? "") ?? 0.0
if pickerView == pickerControl {
return
}
self.resultField.text = String(entry * pickerData2[row].value)
}
I have a PickerView with 3 components based on this code. The two picker to the right change their content based on the previous selection to the left.
Unfortunately the app crashes when I change a parent picker to another one with less rows than the previews one: 🛑 Fatal Error: Index out of range.
I tried to return the child picker to their first position after selecting another parent picker, but it didn't worked out. (Please see under didSelectRow
Do you have another idea?
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 3
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
if component == 0 {
return countries.count
} else if component == 1 {
let selectedCountry = pickerView.selectedRow(inComponent: 0)
return countries[selectedCountry].cities.count
} else {
let selectedCountry = pickerView.selectedRow(inComponent: 0)
let selectedCity = pickerView.selectedRow(inComponent: 1)
return countries[selectedCountry].cities[selectedCity].posts.count
}
}
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
if component == 0 {
return countries[row].name
} else if component == 1{
let selectedCountry = pickerView.selectedRow(inComponent: 0)
return countries[selectedCountry].cities[row].name
} else {
let selectedCountry = pickerView.selectedRow(inComponent: 0)
let selectedCity = pickerView.selectedRow(inComponent: 1)
return countries[selectedCountry].cities[selectedCity].posts[row]
}
}
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
pickerView.reloadAllComponents()
if component == 0 {
pickerView.selectRow(0, inComponent: 1, animated: true)
pickerView.selectRow(0, inComponent: 2, animated: true)
} else if component == 1 {
pickerView.selectRow(0, inComponent: 2, animated: true)
}
}
When you call reloadAllComponents() in your didSelectRow you haven't updated the selected rows yet so it's crashing.
Change the order around and it should be fine.
Reset the value of the 1st component of UIPickerView when component 0 is changed might be of interest here as well.
Note pickerView.reloadAllComponents() isn't strictly necessary, as pointed out in the post above. You could just reload the ones that need to change.
A suggestion as well: Your code would be easier to read/maintain if you used say an enum to organize your components so instead of if component == 0 you could have if componentType == .country (or better yet, a switch), for example.
This is another question of an app I am trying to develop for a small company. Essentially, I want to make it easier for people to find account numbers. The first column in the PickerView is essentially the department. The second will be the task that he/she is going to do, and the third will be the location. I've figured out how to visually make 3 columns, but i cannot figure out how to put it into the code. By that, I mean how to actually set values/selections for the third column. Furthermore, I'm having some issues trying to connect it with the .append function so that only certain options are presented with certain selections in the column. The append function isn't a necessity, but it would be nice to use it if possible.
This is the first app I have ever coded and I "trained myself", hence my amateur mistakes if any. Any help is appreciated.
import UIKit
cllass Account {
var account: String
var jlCode: [String]
var location: [[String]]
init(account:String, jlCode:[String], location:[[String]]) {
self.jlCode = jlCode
self.account = account
self.location = location
}
}
class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
#IBOutlet weak var pickerView: UIPickerView!
#IBOutlet weak var accountLbl: UILabel!
#IBOutlet weak var infoLbl: UILabel!
#IBOutlet weak var imageView: UIImageView!
var accounts = [Account]()
override func viewDidLoad() {
pickerView.delegate = self
pickerView.dataSource = self
infoLbl.text = """
test
"""
//A. PARKS - Tasks for account number 12345678910
accounts.append(Account(account: "12345678910", jlCode: ["task 1"], location: [["here"]]))
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 3
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
if component == 0 {
return accounts.count
} else if component == 1 {
let selectedAccount = pickerView.selectedRow(inComponent: 0)
return accounts[selectedAccount].jlCode.count
} else if component == 2 {
let selectedAccount = pickerView.selectedRow(inComponent: 0)
let selectedjlCode = pickerView.selectedRow(inComponent: 1)
let location = pickerView.selectedRow(inComponent: 2)
return accounts[selectedAccount].jlCode[selectedjlCode].location.count
}
return 3
}
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
if component == 0 {
return accounts[row].account
} else if component == 1 {
let selectedAccount = pickerView.selectedRow(inComponent: 0)
return accounts[selectedAccount].jlCode[row]
} else if component == 2 {
let selectedAccount = pickerView.selectedRow(inComponent: 0)
let selectedjlCode = pickerView.selectedRow(inComponent: 1)
let selectedLocation = pickerView.selectedRow(inComponent: 2)
return accounts[selectedAccount].jlCode[selectedjlCode].location[selectedLocation]
}
return nil
}
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
pickerView.reloadComponent(1)
let selectedAccount = pickerView.selectedRow(inComponent: 0)
let selectedjlCode = pickerView.selectedRow(inComponent: 1)
let account = accounts[selectedAccount].account
let jlCode = accounts[selectedAccount].jlCode[selectedjlCode]
accountLbl.text = "Account Number: \(account)\nJL Code: \(jlCode)"
}
}
It seems your titleForRow function is somewhat lacking. You are currently only serving component 0 (accounts) and... anything that is not accounts. You need to be more explicit and deliver the texts accordingly.
To help you on your way, and make it easier for you to comprehend what is happening might I suggest that you create these constants in the top of your class?
private let accountsComponent = 0
private let tasksComponent = 1
private let locationsComponent = 2
Then you should alter the titleForRow function to cater for all the above tasks:
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
if component == accountsComponent {
return accounts[row].account
} else if component == tasksComponent {
let selectedAccount = pickerView.selectedRow(inComponent: accountsComponent)
return accounts[selectedAccount].jlCode[row]
} else if component == locationsComponent {
// THIS IS WHAT IS MISSING
// You need to return the location strings from this place.
}
return nil
}
You will need to return the appropriate strings from the if component == locationsComponent part...
[edit2]
OK, since you're just starting out I'll go the extra mile:
It's not obvious that you've grasped exactly what the numberOfRowsInComponent and titleForRow functions are for(?)
The numberOfRows tells the component how many values each component ("column") contains. The titleForRow is where you return the actual text-strings that should be displayed for each row in each component.
So, as I mentioned in my comments, create a Location struct:
struct Location {
var identifier: Int
var label: String
}
In your controller, create an array of this struct.
let locations: [Location] = [Location(identifier: 1, label: "Outdoors"),
Location(identifier: 2, label: "Indoor"),
Location(identifier: 3, label: "Narnia")]
Then your numberOfRows should lean on this array to return the appropriate number of rows for the location-component:
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
// Only including the parts to return the location-stuff
} else if component == 2 {
return locations.count
}
return 0 // This will never be reached as long as the numberOfComponents returns 3
}
and the titleForRow:
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
// Only including the parts to return the location-stuff
} else if component == 2 {
return locations[row].label
}
return nil
}
I have created a pickerView that uses 3 different arrays to populate 3 textfields but when I tap on one textfield, select a row, and then directly tap another textfield, my pickerView does not update to the information in the array for that textfield.
If I tap on a textfield then tap away to dismiss the pickerview and then tap another textfield it updates and works fine.
var teams = [String]()
var schedules = ["A","B"]
var services = ["9AM","12PM","5PM"]
var pickerView:UIPickerView!
override func viewDidLoad() {
super.viewDidLoad()
pickerView.delegate = self
pickerView.dataSource = self
teamTextField.inputView = self.pickerView
serviceTextField.inputView = self.pickerView
scheduleTextField.inputView = self.pickerView
}
func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
return 1
}
func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
if teamTextField.isFirstResponder() {
return teams.count
}
else if scheduleTextField.isFirstResponder() {
return schedules.count
}
else {
return services.count
}
}
func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
if teamTextField.isFirstResponder() {
return teams[row]
}
else if scheduleTextField.isFirstResponder() {
return schedules[row]
}
else {
return services[row]
}
}
func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
if teamTextField.isFirstResponder() {
let itemSelected = teams[row]
teamTextField.text = itemSelected
}
else if scheduleTextField.isFirstResponder() {
let itemSelected = schedules[row]
scheduleTextField.text = itemSelected
}
else if serviceTextField.isFirstResponder() {
let itemSelected = services[row]
serviceTextField.text = itemSelected
}
}
func textFieldDidBeginEditing(textField: UITextField) {
pickerView.reloadAllComponents()
}
That should be all the necessary code you need. If you need anything else, let me know.
Try to add this:
#IBAction func textFieldDidBeginEditing(sender: AnyObject) {
pickerView.reloadAllComponents()
}
and connect it to the 'Editing Did Begin' sent events of your UITextField's
I have a pickerview in swift with two components. It works except for when I want to set the row in the second component with selectrow. This is when the user reloads the app and we already have a value set. The first component selectrow works.
Here is my code:
override func viewDidLoad() {
super.viewDidLoad()
print("In viewDidLoad")
detailArmy.loadarmy(detailArmy, armymember: detailItem)
myGeneralPicker.dataSource = self
myGeneralPicker.delegate = self
// Set General Picker View to current value
let general = generalTypeInfo()
picker1Options = general.generalType()
print("Detail Item general: \(detailArmy.general)")
if detailArmy.general == "" {
myGeneralPicker.selectRow(0, inComponent: 0, animated: false)
picker2Options = general.generalInfo("None")
} else {
myGeneralPicker.selectRow(picker1Options.indexOf(detailArmy.general)!, inComponent: 0, animated: false)
picker2Options = general.generalInfo(detailArmy.general)
}
print("Detail Item general Type: \(detailArmy.generaltype) picker2Options: \(picker2Options)")
if detailArmy.generaltype == "" {
myGeneralPicker.selectRow(0, inComponent: 1, animated: false)
} else {
//myGeneralPicker.selectRow(picker2Options.indexOf(detailArmy.generaltype)!, inComponent: 1, animated: false)
myGeneralPicker.selectRow(4, inComponent: 1, animated: false)
}
}
//MARK: Delegates and data sources
func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
//println("In numberOfComponenetsInPickerView pickerView: \(pickerView)")
return 2
}
func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
if component == 0 {
return picker1Options.count
} else {
return picker2Options.count
}
}
//Mark: Delegates
func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
//var dicerow = dice[row]
print("titleForRow row: \(row) component: \(component)")
if component == 0 {
return String(picker1Options[row])
} else {
return String(picker2Options[row])
}
}
func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
if component == 0 {
generalpickinfo = picker1Options[row]
print("pickerView general selected: \(generalpickinfo)")
let general = generalTypeInfo()
picker2Options = general.generalInfo(picker1Options[row])
pickerView.reloadAllComponents()
myGeneralPicker.selectRow(0, inComponent: 1, animated: false)
} else {
generalpicktype = picker2Options[row]
print("pickerView general type selected: \(generalpicktype)")
}
}
func pickerView(pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusingView view: UIView?) -> UIView {
print("viewForRow row: \(row) component: \(component)")
let pickGeneralLabel = UILabel()
pickGeneralLabel.textAlignment = .Center
if component == 0 {
pickGeneralLabel.text = String(picker1Options[row])
} else {
pickGeneralLabel.text = String(picker2Options[row])
}
return pickGeneralLabel
}
class generalTypeInfo {
func generalType() -> [String] {
return ["None","C-in-C","Subordinate","Ally"]
}
func generalInfo(type: String) -> [String] {
if type == "None" {
return ["None"]
} else {
return ["None","Brilliant","Inert"]
}
}
func generalTypeIndex(type: String) -> Int {
let generalTypeDict = ["None": 0, "C-in-C": 1, "Subordinate": 2, "Ally": 3]
return generalTypeDict[type]!
}
func generalInfoIndex(type: String) -> Int {
let generalInfoDict = ["None": 0, "Brilliant": 1, "Inert": 2]
return generalInfoDict[type]!
}
}
In my code currently I have deliberately put a value of 4 in this line:
myGeneralPicker.selectRow(4, inComponent: 1, animated: false)
the line above has the correct code I want to run, but I put this in because it should crash the application since there isn't a 4th value. And it completely ignores this.
Anyone tell me what I'm doing incorrectly with this? Thanks.
So, ask a question, and then find out the answer..
The answer is to move the selectrow into the ViewDidAppear.
I found the solution here:
UIPickerView selectRow doesn't works
Thanks