ScrollView
UIScrollView allows us to add the content in it which can be more than the bounds of our screen. Let suppose we only 15 Labels fit in our screen than using scroll view we can add and see more than it will fit in the View bounds.
Lets start working on the demo of ScrollView. So, create a new Xcode Single View Project and name is SampleScrollView.
Open your Storyboard and from your Utility area and Scroll View and Drag it inside your ViewController. Also change the color of the Scroll View this will help us know that where are the bounds of our Scroll View.
Now create a Outlet of our ScrollView and name it scrollView. And in the ViewDidLoad Method write code as shown below.
- (void)viewDidLoad
{
[super viewDidLoad];
CGFloat y = 5;
for (int i = 0; i < 20; i++) {
UILabel *lblNumber = [[UILabel alloc]initWithFrame:CGRectMake(10, y, 150,
50)];
lblNumber.text = [NSString stringWithFormat:@"This is label %d", i+1];
[self.scrollView addSubview:lblNumber];
y += lblNumber.bounds.size.height + 10;
}
CGSize bounds = self.scrollView.bounds.size;
bounds.height = y;
self.scrollView.contentSize = bounds;
}
Your screen would be now looking like in screenshot below.
Remember some important points of the viewDidLoad part. We defined the CGFloat y =5 as initial valye of the UIScrollView where our label would be placed and than as the loop would increment the y would be incremented as the height of the Label. In our loop which is from 0 to 19 we would add label in each iteration. And in the end when loop is finished we get the original size of our scroll view in bounds variable and change its height is in our y variable. And in the end we set the bounds of our scroll View as our bounds variable. If we don’t set the bounds of our scroll view than our scroll view will not scroll.
TextField
TextFields, as the name suggests are used to take input from user. So, lets do a little demo for TextField. Create a new SingleView Application. Name it TextViewSample and after creating it move to your Storyboard. Change the background color of your View , it will just help us to differ from the area of TextView and our View. After that drag TextField from Utility Area to your View. Keep your Text View upper side of your screen so that it doesn’t hides inside the virtual keyboard.
Now run your app and you will see whenever you touch inside your TextField , virtual keyboard is shown but you will notice that you are not able to hide keyboard. Why? Well one simple answer is we have to implement the delegate method of TextField in our class to hide it.
So , in your interface part of your ViewController define like shown below.
-(BOOL)textFieldShouldReturn:(UITextField *)textField{
[self.txtSample resignFirstResponder];
return YES;
}
But even after this when you run the app your virtual keyboard will still be there. Its because your textField still don’t know about its delegate is so add one more line to your viewDidLoad for that.
self.txtSample.delegate = self;
And now your keyboard will hide when you tap out.
Now lets a label below your TextField and remove text from that Label. Create outlet of your created Label and name it lblText. And than in your textFieldShouldReturn before returning YES line add the line as shown below.
self.lblText.text = self.txtSample.text;
Now whenever you press return your label is updating its text property by getting the text property of your textFeild.
PickerView
UIPicker is used when you want the user to select something form given option. Like you want the user to select country. In Xcode we don’t have dropdown so we can say UIPickerView in place of dropdown. As far as implementation of the UIPickerView is concern it is more like what we do for TableView. Lets start working on its demo. I will not explain it in detail as the process is almost same as TableView so try to follow the steps we discussed
in TableView Tutorial.
Create a new project name it PickerViewSample. In your new Storyboard find UIPickerView from Utility area and drag it in middle of your View.
Change the background color of the Picker View. Create its outlet property so that we can work with it.
In your Interface mention this
""
Above line show that you will implement PickerView Delegate and datasource method.
Now you have to mention the delegate and datasource of the PickerView. Till now we have done this by code but we can do the same thing via storyboard too. So select your Picker View and hold control button and drag the arrow to lower part of your view controller where you see the rounder yellow button. A popup would appear in which we will have datasource and delegate option so select it and repeat the process for selecting the other options.
Also drag a UILabel on the top of screen and remove its text and make its outlet property as lblSelected.
We also need a data array of the picker datasource so define and NSArray property named playerList. Now below code show how your private interface should look at this point.
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIPickerView *pickerView;
@property (nonatomic,strong) NSArray *playerList;
@property (weak, nonatomic) IBOutlet UILabel *lblSelected;
@end
We need some data for our playerList Array which we have to show in the pickerView. So, as playerList is a property so in its getter method i will check if its empty that allocate it with Array data.
if(!_playerList) _playerList = @[@"Hafeez",@"Ahmed Shahzad",@"Younis
Khan",@"Misbah",@"Azhar Ali",@"Sarfaraz",@"Junaid Khan",@"Saeed
Ajmal",@"Abdur Rehman",@"Umer Gul",@"Muhammad Irfan"];
return _playerList;
}
Now just like Table View we have four delegate methods to implementl which are numberOfComponentsInPickerView, pickerView numberOfRowsInComponent, didSelectRowinComponent and viewForRowcomponent view. I am leaving TableView concepts to understand the code below yourself.
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
return 1;
}
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:
(NSInteger)component{
return [self.playerList count];
}
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row
inComponent:(NSInteger)component{
self.lblSelected.text = self.playerList[row];
}
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row
forComponent:(NSInteger)component reusingView:(UIView *)view{
UILabel* lab;
if (view)
lab = (UILabel*)view; // reuse it
else
lab = [UILabel new];
lab.text = self.playerList[row];
lab.backgroundColor = [UIColor clearColor];
[lab sizeToFit];
return lab;
}
And now when you run the app you would see whatever value you pick from pickerView is shown in our label.