TextField

Step 1: add text field and label

Grab a text field from the Object Library, drag it into the View and align it
with the right margin. Next grab a label from the library, and then drag that
over so it is aligned with the left margin of the view and vertically with the
text field you just placed.
Double-click the label you just dropped, change it to read String instead of
Label and press the Enter key to commit your changes.

Step 2: add second text field and label

Repeat previous step and add text field with a label Number.
1. Step 3: resize text fields and labels
Expand the size of the bottom text field to the left, so it is snug up against
the right side of the label. Because the bottom label is longer, we start with
it to have both text fields the same size. Now, expand the top text field in
the same way, so that it matches the bottom one in size.

2.
Now let's right-aligne labels.
 ○ Click the top label, hold down the Shift key, and click the second
label to select both.
○ If the Attributes Inspector is not visible, press
Option+Command+4 to bring it up, make sure the Label section
is expanded.
○ Use the Alignment control in the inspector to make the content of
these labels right-justified.

○ Make a constraint to make sure these two fields are always the same
width by selecting at the bottom of the screen Pin | Widths Equally.
○ Make sure that string width is equal to number width; if not reverse
items
○ If there are still some layout problems

○
you can fix tem on your own or use Resolve Auto Layout Issues | Add
Missing Constraints
○
and next Resolve Auto Layout Issues | Update Frames.
 3. Step 4: inspecting text field attributes
Spend a few minutes inspecting text field attributes in the Attributes
inspector (Option+Command+4). Working with it
○ Type in the text Type in a string as the placeholder for string text field.
○ Change default value in the Return Key pop-up. The Return key is the
key on the lower right of the virtual keyboard, and its label changes based
on what we’re doing: it coud be Search for web browser, Next for a form or
Done for independent fields. To keep it different from default, let's change it
to Done.
 ○ Type in the text Type in a number as the placeholder for number
text field.
○ From the Keyboard pop-up menu select Number Pad (since we want
the user to enter only numbers, not letters).

○ For both text fields check the Opaque check box and uncheck Clears
Graphics Context and Clip Subviews.
By selecting Opaque, we inform the system that nothing behind a view ever
needs to be drawn, so it does not need to waste processing time.
When Clears Graphics Context is checked the system will draw the entire
area covered by the object in transparent black before it actually draws the
object. Again, for performance reasons it should be turned off.
Clip Subviews is an interesting option. If your view contains subviews, and
those subviews are not completely contained within the bounds of its parent
view, this check box determines how the subviews will be drawn. If Clip
Subviews is checked, only the portions of subviews that lie within the
bounds of the parent will be drawn. If Clip Subviews is unchecked, subviews
will be drawn completely, even if they lie outside the bounds of the parent.
Again, for performance reasons it should be unchecked because calculating
the clipping area and displaying only part of the subviews is a costly
operation while in most cases a subview won’t lie outside the bounds of its
superview so checking this field would result a CPU wast of time.
4. Step 5: add an outlets
At this point we should be familiar with outetd because we did them in the
previous part of this tutorial. Make sure ViewController.m is showing in the
Assistant Editor. As we did it before, Control-drag from the top text field in
the view over to the ViewController.m file, right below the @interface
line. We should see a gray pop-up that reads Insert Outlet, Action, or Outlet
Collection.
5.
Release the mouse button, type textFieldString into the Name field and
then accpt by hit Return or click the Connect button.

6.
Repeate the same process for the second text field, creating and
connecting it to a property called textFieldNumber.
7. Step 6: closing the keyboard for string field
When the user taps the Done button on the keyboard, a Did End On
Exit event will be generated. This is a right time to tell the text field to
give up control so that the keyboard will go away.
To bind some event with an action, we can proceed as for the Previous
button in previous part of this tutorial (see Step 3: designing the user
interface (add first button) at First application). On the other hand,
this is a good chance to show other method so let's do it.
Add the following action method at the bottom of ViewController.m
8.
- (IBAction)textFieldStringEditDone:(UITextField *)sender {

[sender resignFirstResponder];
 }

9.
The first responder is the control with which the user is currently interacting.
In the above method we tell our control to resign as a first responder so to
the previous control the user worked with will take this role. When a text
field yields first responder status, the keyboard associated with it goes away.
Select Main.storyboard in the Project Navigator, single-click the top text
field, and press Option+Command+6 to bring up the connections inspector.

10.
Press Control button and drag from the circle next to Did End On Exit to the
yellow View Controller icon in the storyboard, in the bar that’s just above the
view you’ve been configuring, and let go.
11.
A small pop-up menu will appear containing the name of a single action, the
one we just added. Click the textFieldStringEditDone: action to select it.

12.
You can also do this by dragging to the textFieldStringEditDone: method
in the assistant view.
 13.
Repeat this procedure with the second text field.
14. Step 7: closing the keyboard for number field
Unfortunately not all keyboard layouts feature a Return button. To
solve this problem we will implement most natural approach: if the
user tap anywhere in the view where there’s no active control the
keyboard will go away.
Add the following action method at the bottom of ViewController.m
15.
 - (IBAction)tapOnBackground:(id)sender {

[self.textFieldString resignFirstResponder];

[self.textFieldNumber resignFirstResponder];

16.
Next we should change the underlying class of the view property inherited
by our view controller from UIViewController. Now this property points to
an instance of UIView that acts as a container for all the items in our user
interface. If we change the class of the object that view points to and set it
as UIControl, the view will behave like controls object (for example button).
It is safe to do this, because UIControl is a subclass of UIView.
Press Option+Command+3 to bring up the Identity Inspector.

17.
and change the class to UIControl. Next press Option+Command+6 to bring
up the Connections Inspector. As we did it for text fields, drag from the
Touch Down event to the View Controller icon, and choose the
tapOnBackground: action.

Slider And Label

Step 1: add slider and label
The idea is as follow: slider changes it's value from 0 to 255. Every
value selected by slider is then transformed to binary 8-bit
representation and displayed with the label's help.
Select a slider from the Object Library and put it in our view. Press
Option+Command+4 to bring up the Attributes Inspector. Use the
inspector to set the Minimum value to 0, the Maximum value to 255,
and the Current value to 0. Set the Events Continuous Update check
box if not checked.
Next select a label and place it next to the slider. Change the label's
text to 00000000. This is the largest value that the slider can hold,
and we can use that to determine the correct width of the slider.

Step 2: add any necessary constraints

Pleas fell free to reposition your items indisde view and add / change /
remove any constraints you want.
Step 3: add outlets and actions
Add to ViewController.m

○ an outlet labelForSlider;
○ an outlet slider;
○ an action sliderChange.

Step 4: ensure correct initial values for slider and corresponding label
Change in ViewController.m

- (void)viewDidLoad {

[super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

self.labelForSlider.text = @"00000000";
 self.slider.value = 0;

Step 5: modify action method

Modify in ViewController.m

- (IBAction)sliderChange:(UISlider *)sender {

int decimalValue = (int)lroundf(sender.value);

self.labelForSlider.text = [self decimalToBinaryAsString: decimalValue];

Function decimalToBinaryAsString should transform integer from

interval [0,255] to binary 8-bit number and return it as string.
Implementation of this method is left as an excercise. For now we can
use dummy implementation as below

- (NSString *)decimalToBinaryAsString:(int)decimalValue{

return [NSString stringWithFormat:@"%d", decimalValue];

}
Segment Control
Step 1: add segmented control and label
Drag a Segmented Control and Labelfrom the Object Library and place
it on the view.

1. Step 2: change segmented control and label properties

Press Option+Command+4 to open the Attributes Inspector and change
Segments property to 4.
Double-click the word First on the segmented control and change the title
from First to Binary. After doing that, repeat the process with the Second
segment, renaming it Octal, rename third as Decimal and las one as
Hexadecimal. Fnally drag the control back into its centered position. If you,
like me, jave some problems with double-clicking an Attributes Inspector
would be helpful with properties Segment (where you can choose the
segment you want to edit) and Title.
 2.

Double-click the label and change its title to Binary.

3. Step 3: add any necessary constraints
Pleas fell free to reposition your items indisde view and add / change /
remove any constraints you want.
4. Step 4: add an outlet and an action
Control-drag from the newly added label somewhere to the
@interface section in ViewController.m and create a property caled
labelNumeralSystem.
With the same method add an outlet for segmented control named
segmentedControl.
Control-drag from the segmented control to the Assistant Editor, right
above the @end declaration. Insert this way a new action method
called segmentedControlChanges and set the Type of its sender
parameter to UISegmentedControl.
5. Step 5: make some code changes
Add the following code to segmentedControlChanges function
6.
- (IBAction)segmentedControlChanges:(UISegmentedControl *)sender {
 self.labelNumeralSystem.text = [sender
titleForSegmentAtIndex:sender.selectedSegmentIndex];

7.
Modify and add code to viewDidLoad function
8.
- (void)viewDidLoad {

[super viewDidLoad];

self.slider.value = 0;

self.labelForSlider.text = [self decimalToBinaryAsString:

self.slider.value];

[self.segmentedControl setSelectedSegmentIndex:0];

self.labelNumeralSystem.text = [self.segmentedControl
titleForSegmentAtIndex:self.segmentedControl.selectedSegmentIndex];

Button and Switches

Step 1: add switches, labels and button
Grab two switches from the library and place it on the view. Next add
two labels and one button.
Step 2: change items properties
Change the button text to Reset.

Step 3: add any necessary constraints

If you want to do it fast, you can try to use Add Missing Constraints
from Editor | Resolve Auto Layouts Issues menu. Results are more or
less correct and can help to find best set of your own constraints.

Step 4: add an outlet and an action

Create

○ property (outlet) labelForUpperSwitch related to label next to

upper switch,
○ property (outlet) labelForLowerSwitch related to label next to
lower switch,
○ property (outlet collection) switchCollection related to both
upper and lower switch,
○ property (outlet collection) labelForSwitchCollection related
to both upper and lower label.
Create action

○ switchUpperChange related to upper switch,

○ switchLowerChange related to lower switch,
○ buttonSwitchResetPress related to reset button.

Step 5: make some code changes

Modify and add code to ViewController.m
- (IBAction)switchUpperChange:(UISwitch *)sender {

[self changeLabel:self.labelForUpperSwitch forSwitch:sender];

- (IBAction)switchLowerChange:(UISwitch *)sender {

[self changeLabel:self.labelForLowerSwitch forSwitch:sender];

- (IBAction)buttonSwitchResetPress:(UIButton *)sender {

[self switchResetToDefaut];

- (void)switchResetToDefaut{

for (UISwitch *switchUI in self.switchCollection) {

[switchUI setOn: NO animated:YES];

}
 for (UILabel *label in self.labelForSwitchCollection){

label.text = @"Off";

- (void)changeLabel:(UILabel *) label forSwitch:(UISwitch *) switchUI{

label.text = switchUI.isOn?@"On":@"Off";

}
 - (void)viewDidLoad {

[super viewDidLoad];

self.slider.value = 0;

self.labelForSlider.text = [self decimalToBinaryAsString:

self.slider.value];

[self.segmentedControl setSelectedSegmentIndex:0];

self.labelNumeralSystem.text = [self.segmentedControl
titleForSegmentAtIndex:self.segmentedControl.selectedSegmentIndex];

[self switchResetToDefaut];

Run the Application.