Using Swift in Xcode, I want to make:
1) A PICKER, with data from an array
2) A BUTTON, when pressed will update a LABEL with the text from a selected row of the PICKER
My code currently:
var array = ["Sydney", "London", "Washington", "Tokyo", "San Francisco"]
func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
return 1
}
func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return array.count
}
func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String! {
return array[row]
}
#IBOutlet weak var PICKER: UIPickerView!
#IBOutlet weak var LABEL: UILabel!
#IBAction func BUTTON(sender: AnyObject) {
LABEL.text = array[PICKER.selectedRowInComponent(0)]
}
So far everything worked. But I have 2 questions:
1) Should I put a "0" in PICKER.selectedRowInComponent? What does it mean? Because it didn't work without a number or with any other number. Wouldn't that mean selecting only the first row (instead of selecting the row the user has selected)?
2) How do I make the PICKER to show the middle item of an array by default and not the first item when the app loads (e.g. Washington in this case)?
Pickers can have multiple wheels (components). For example, you might have separate wheels for each digit, or you might have day, month, and year wheels. They are numbered starting at 0. So "Component 0" is just the first wheel (and you only have one).
Selecting rows is done by calling selectRow(inComponent:animated:).
UIPickerView can have multiple wheels (named components), and are numbered starting at 0. For example, a picker view with 3 components looks like the following where
the first wheel ("6") is component 0
the second wheel ("00") is the component 1
the third wheel ("AM") is the component 2
Unrelated to question title, but selecting a row is done by calling selectRow(_:inComponent:animated:)
var array = ["Sydney", "London", "Washington", "Tokyo", "San Francisco"]
// code...
yourPicker.selectRow(array.count/2, inComponent: 0, animated: true);
Related
I have encountered some synchronisation/graphic update problems with my UIPickerView.
I want a view with 2 components, where the content of the second component depends on the selected row of the first component.
My code is inspired from: Swift UIPickerView 1st component changes 2nd components data
However, while it seems to work, sometimes (not every time) there are some visual problems, as seen on the screenshots below. (on the second screenshot, you can see that the rows of the second component are not really correct, and are a mix of the rows from the first and the second component)
Here is the code:
import UIKit
class AddActivityViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
#IBOutlet weak var typePicker: UIPickerView!
var pickerData: [(String,[String])] = []
override func viewDidLoad() {
super.viewDidLoad()
self.typePicker.delegate = self
self.typePicker.dataSource = self
pickerData = [("sport",["bike", "run", "soccer", "basketball"]),
("games",["videogame", "boardgame", "adventuregame"])]
// not sure if necessary
typePicker.reloadAllComponents()
typePicker.selectRow(0, inComponent: 0, animated: false)
// pickerData = [("sport",["bike", "run", "soccer"]),
// ("games",["videogame", "boardgame", "adventuregame"])]
}
// number of columns in Picker
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 2
}
// number of rows per column in Picker
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
print("function 1 called")
if component == 0 {
return pickerData.count
} else {
let selectedRowInFirstComponent = pickerView.selectedRow(inComponent: 0)
return pickerData[selectedRowInFirstComponent].1.count
}
}
// what to show for a specific row (row) and column (component)
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
print("function 2 called with values: component: \(component), row: \(row)")
if component == 0 {
// refresh and reset 2nd component everytime another 1st component is chosen
pickerView.reloadComponent(1)
pickerView.selectRow(0, inComponent: 1, animated: true)
// return the first value of the tuple (so the category name) at index row
return pickerData[row].0
} else {
// component is 1, so we look which row is selected in the first component
let selectedRowInFirstComponent = pickerView.selectedRow(inComponent: 0)
// we check if the selected row is the minimum of the given row index and the amount of elements in a given category tuple array
print("---",row, (pickerData[selectedRowInFirstComponent].1.count)-1)
let safeRowIndex = min(row, (pickerData[selectedRowInFirstComponent].1.count)-1)
return pickerData[selectedRowInFirstComponent].1[safeRowIndex]
}
//return pickerData[component].1[row]
}
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
// This method is triggered whenever the user makes a change to the picker selection.
// The parameter named row and component represents what was selected.
}
}
Is this a problem with my code or generally a complicated aspect of UIPickers that can not be trivially solved?
Additionally, is there a nicer way to develop this functionality?
I solved the error, however I do not understand why this solves it.
The solution is to imlement the func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int)method, which I did not believe to be necessary just to show the fields.
In other words, just add this to my existing code:
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
if component == 0 {
pickerView.reloadComponent(1)
} else {
let selectedRowInFirstComponent = pickerView.selectedRow(inComponent: 0)
print(pickerData[selectedRowInFirstComponent].1[row])
}
}
I have 2 UIPickerViews in an ios program which I am running on an iPad simulator.
They have one component in each.
I find the relevant picker view by using a switch on the tag. The two single component views need to be changed by adding or deleting components.
This is easy enough in the data source with
pickerData.append(textInput)
pickerData.sort()
pickerData.reloadAllComponents
and
pickerData.remove(at: lastDataSelected)
picker.reloadAllComponents()
where lastDataSelected is the row integer.
This works to change the data source but not entirely when transferred to the UIPickerViews.
The UIPickerView display is not updated until I scroll the view. To be more precise, the item selected is correct but the text label is not updated. After scrolling the data labels are all showing correctly.
I have tried to programatically scroll from one end to the other but this does not help.
So how can I tell the program to update the view without the user scrolling it?
picker.reloadInputViews() does not help.
Apart from this the number of items (rows) isn't changed to reflect the changes in the picker data so the last item falls off the list when adding a new one.
So the second question is how to get the UIPickerView functions to update the number of rows?
I haven't been able to find any examples of dynamically updated picker views so hope someone can help or point me in the right direction.
The remaining code is fairly standard I believe but I'm obviously missing something in the update process.
override func viewDidLoad() {
super.viewDidLoad()
flvPicker = UIPickerView()
flvPicker.delegate = self
flvPicker.dataSource = self
flvPicker.tag = 0
}
func numberOfComponents(in pickerView: UIPickerView) -> Int {
switch pickerView.tag {
case 0:
return 1
case 1:
etc...
}
}
var numberOfRowsInComponent = 0
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
switch pickerView.tag {
case 0:
return flvPickerData.count
case 1:
etc...
}
}
func pickerView(_
pickerView: UIPickerView,
titleForRow row: Int, forComponent component: Int) -> String? {
switch pickerView.tag {
case 0:
return flvPickerData[row]
case 1:
etc...
}
}
func pickerView( _ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
switch pickerView.tag {
case 0:
flavourSelected = flvPickerData[row]
lastFlavourSelected = row
case 1: etc...
}
}
I think the question is really how to get the UIPickerView to update correctly after making changes to it's data source and therefore row count.
You can use reloadComponent(_:) method from UIPickerView.
A little late to the party, but if you want to update a picker view, there's also the method selectRow. This also has the benefit of an animation property, so you can animate any updates.
Example:
for (index, day) in weeklyOptions[0].enumerated() {
if scheduledTime.contains(day) {
weeklyDatePicker.selectRow(index, inComponent: 0, animated: true)
}
}
When I traverse this UIPickerView from top down, the row is reported correctly for each element. However, traversing the UIPickerView from bottom to top, when "Choice 3" is tapped, the row resets itself to zero where it should actually be 2. I added the label for visual proof -- it flashes "2", then resets itself to zero when traversing the UIPickerView as described. Obviously, not being able to depend on the relationship between display element and actual row being accurate breaks things. No idea why this isn't working...
class ViewController3: UIViewController, UITextFieldDelegate, UIPickerViewDelegate, UIPickerViewDataSource {
#IBOutlet weak var picker: UIPickerView!
#IBOutlet weak var textLabel: UILabel!
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return 4
}
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}
func pickerView(_ pickerView: UIPickerView,titleForRow row: Int,forComponent component: Int) -> String? {
textLabel.text = String(row)
return pickerValues[row]
}
let pickerValues = ["Choice 1", "Choice 2", "Choice 3","Choice 4"]
If the goal is to change a label every time the user turns the "wheel" of the picker view, implement the delegate method pickerView(_:didSelectRow:inComponent:).
I'm a newbie with IOS development so please keep this in mind with my question. I'm working on an app that will show an initial array. Based on the selection of the array, the second pickerview (shown in the next view controller) will use a dictionary and the selected option from the first pickerview to populate the second pickerview with a list of subtopics. The console is showing that all of the data is passing correctly through the process, however the data is not populating within the second pickerview. Can someone take a look at my code and tell me where I'm going wrong?
import UIKit
import Foundation
class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
#IBOutlet weak var pickerView: UIPickerView!
#IBAction func SubjectSelected(_ sender: UIButton, forEvent event: UIEvent) {
SubjectHandler = subSubjects[SelectedSubject]!
print(SubjectHandler)
print(Subjects)
}
//Create instances of the selected subject & the subject handler (in case SelectedSubject is not empty)
var SelectedSubject: String = ""
var SubjectHandler: Array<String> = []
//Define primary values for both subjects and subSubjects//
let Subjects: Array = ["Macroeconomics", "Microeconomics", "Financial Economics", "Game Theory", "Econometrics", "Law Economics", "Public Sector Economics", "International Economics", "General Statistics"]
let subSubjects = [
"Macroeconomics":
["GDP", "Accounting Methods", "Labor Market", "DMP Job Search Model", "Keynesian Economics", "Sticky-Price Model", "Elasitcity", "Supply and Demand"],
"Microeconomics":
["Elasticity", "Consumer Theory", "Preference Curves", "Competitive Models", "Scarcity"],
"Financial Economics":
["Interest", "Dividends Returns", "Return & Expected Return"],
"Game Theory":
["Nash Equilibrium", "Dominant Strategies", "Iterated Games", "Backwards Induction", "Extensive Form Games"],
"Econometrics":
["Capital Asset Pricing Model", "Regressional Analysis", "Modeling Rules", "Central Limit Theorem", "Probablitiy & Distribution","Heteroscedasticity", "Weighted Least Squares", "Sampling Distributions"],
"Law Economics":
["Externalities", "Damages Calculations", "Property Rights Ownership", "Claims", "Ownership Principles"],
"Public Sector Economics": ["Valuations", "Tax Income Calculations", "Budget Analysis"], "International Economics": ["Taxing Methods", "Importing and Exporting", "Currency Exchange Rates", "Tarrifs", "GDP", "Product Purchase Parity"],
"General Statistics":
["Z-Scores", "Summary Statistics", "One-Tailed Hypothesis Testing", "Two-Tailed Hypothesis Testing", "Confidence Intervals", "Upper and Lower Bounds"]
]
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
pickerView.delegate = self
pickerView.dataSource = self
if pickerView.tag == 2 {
pickerView.reloadAllComponents()
}
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
if pickerView.tag == 1 {
return Subjects.count
}
else {
return SubjectHandler.count
}
}
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
if pickerView.tag == 1 {
return Subjects[row]
}
else {
return SubjectHandler[row]
}
}
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
SelectedSubject = Subjects[row]
}
}
As you have said, you use a separate viewController object at the second screen. When it gets loaded it will have an empty SubjectHandler array.
You sould pass the array between viewControllers. See this tutorial
I am currently working on a small project and i have a viewController that has 4 textFields which 3 work ok. They take String objects. However, the 4th textField is supposed to bring up a UIPickerView with 4 selectable items.
So far this is what i have in my controller that implements this:
#IBOutlet var pickerTextfield: UITextField!
#IBOutlet var itemPicker: UIPickerView! = UIPickerView()
The pickerTextfield is the UITextField object that is the 4th field.
The itemPicker is an unlinked UIPickerView that i want to create programatically.
Right below these properties, i have an array of items for the UIPickerView object:
var seasonalItems = ["Spring", "Summer", "Fall", "Winter"]
In my viewDidLoad method i have this as follow:
itemPicker.hidden = true;
pickerTextfield.text = seasonalItems[0]
pickerTextfield.delegate = self
And the rest of the implementation:
// Below these lines is the implementation of the Picker
func numberOfComponentsInPickerView(pickerView: UIPickerView!) -> Int{
return 1
}
// returns the # of rows in each component..
func pickerView(pickerView: UIPickerView!, numberOfRowsInComponent component: Int) -> Int{
return seasonalItems.count
}
func pickerView(pickerView: UIPickerView!, titleForRow row: Int, forComponent component: Int) -> String! {
return seasonalItems[row]
}
func pickerView(pickerView: UIPickerView!, didSelectRow row: Int, inComponent component: Int)
{
pickerTextfield.text = seasonalItems[row]
itemPicker.hidden = true;
}
func textFieldShouldBeginEditing(textField: UITextField) -> Bool {
itemPicker.hidden = false
return false
}
So the end result from this is when i tap the pickerTextfield object in the app, it shows the first item of the array (Spring) but in text within the UITextField object but it does not show the UIPickerView object with the other selectable items where i could select one and then hide it when selected.
My question is, where or what am i doing wrong here? i been trying to figure this out on my own but i do not seem to get good clear examples with Swift and storyboards. I much rather not drag a UIPickerView in the storyboard but rather the way i attempted to implement. Thanks
You can give UIPickerView as inputView for your TextField in which you want to show picker view.
You also do not need to initially hide picker view in this case.
pickerTextfield.inputView = itemPicker
When you use UIPickerView as inputView of any UITextField then when you tap on the TextField instead of default keypad PickerView will show.