2. A Screen Full of Controls
• What to learn:
– Image view
– Text field
– Slider
– Segmented control
– Switch
– action sheet
– Alert
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 2
3. Controls
• Active
• Static
• Passive
– most of the available controls can be used in all
three modes.
– All iOS controls are subclasses of UIControl.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 3
4. Differences of Controls on iOS
• Because of the multitouch interface, all iOS
controls can trigger multiple actions depending
on how they are touched.
• You could have one action fire when the user
presses down on a button and a separate action
fire when the finger is lifted off the button.
• You could have a single control call multiple
action methods on a single event.
• iOS devices do not have a physical keyboard.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 4
5. Image View
• Drag an image view onto the view in the nib
editor.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 5
6. Image View
• Resizing the Image View
– resize the image view to match the size of its
contents. select Editor ➤ Size to Fit Content.
• Alignment
– Editor ➤ Align ➤ Horizontal/Vertical Center in
Container
• Draw a outline
– Editor ➤ Canvas ➤ Show Bounds Rectangles
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 6
7. Image View Attributes
• Attributes
– The Mode Attribute
– Tag
– Interaction Checkboxes
– The Alpha Value
– Background
– Drawing Checkboxes
– Stretching
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 7
8. Image View Attributes
1) The Mode menu defines how the view will
display its content.
– choosing any option that causes the image to
scale will potentially add processing overhead, so
it’s best to avoid those and size images correctly
before importing them.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 8
9. Image View Attributes
2) Tags provide an easy, language-independent
way of identifying objects on your interface.
3) Interaction Checkboxes:
– User Interaction Enabled: specifies whether the
user can do anything at all with this object
– Multiple Touch: determines whether this control is
capable of receiving multitouch events.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 9
10. Image View Attributes
4) Alpha defines how transparent your image
is—how much of what’s beneath it shows
through.
– It’s defined as a floating-point number between
0.0 and 1.0, where 0.0 is fully transparent and 1.0
is completely opaque.
5) Background determines the color of the
background for the view.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 10
11. Image View Attributes
6) Drawing Checkboxes:
– Opaque: tells iOS that nothing behind this view
ever needs to be drawn no matter what.
– Hidden: hides an object.
– Clears Graphics Context: draws the entire area
covered by the object in transparent black before
it actually draws the object.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 11
12. Image View Attributes
6) Drawing Checkboxes(cont.):
– Clip Subviews: If checked, only the portions of
subviews that lie within the bounds of the parent
will be drawn. If unchecked, subviews will be
drawn completely, even if they lie outside the
bounds of the parent.
– Autoresize Subviews tells iOS to resize any
subviews if this view is resized.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 12
13. Image View Attributes
7) Stretching
– The four floating-point values set here let you
declare which portion of the rectangle is
stretchable by specifying a point at the upper-left
corner of the view and the size of the stretchable
area, all in the form of a number between 0.0 and
1.0, representing a portion of the overall view size
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 13
14. Text Fields
• Grab 2 text fields & 2 labels from the library into
the View.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 14
15. Text Field Inspector Settings
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 15
16. Text Field Inspector Settings
• Text
• Placeholder
• font
• font color
• Background and Disabled.
• Border Style
• Clear Button & Clear when editing begins
checkbox
• Adjust to Fit checkbox
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 16
19. Closing the Keyboard
• In header file:
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 19
20. Closing the Keyboard
• In implementation file(before @end):
• From connections inspector Drag from the
circle next to Did End On Exit to the
textFieldDoneEditing: method.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 20
21. Touching the Background to Close the
Keyboard
• In header file:
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 21
22. Touching the Background to Close the
Keyboard
• In implementation file(before @end):
• Go to identity inspector: change class into
UIControl
• Connect the view’s Touch Down event to the
backgroundTap: action
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 22
23. Slider
• A slider lets you choose a number in a given
range.
• Minimum, Maximum and Current values.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 23
24. Slider Actions and Outlets
• Slider Action: Set the Type to UISlider.
• Label outlet.
• Slider Action method:
• Set current value:
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 24
25. Segmented Control & Switches
• Segmented Control used to
show & hide objects.
• Switches are small controls
that can have only two states:
on and off.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 25
26. Segmented Control & Switches
• Add a segmented control & 2 switches.
• Create Outlets (rightSwitch, leftSwitch)and
one action(switchChanged) for the two
switches.
– set the Type of its sender to UISwitch.
• Create an action(toggleControls) for the
segmented control.
– set the Type of its sender to UISegmentedControl.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 26
28. Segmented Control & Switches
• Add a button directly on top
of the two switches.
– create an outlet
(doSomethingButton) & an
action (buttonPressed).
• Check the buttons Hidden
checkbox.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 28
29. Segmented Control & Switches
• segmented control action:
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 29
30. Action Sheet and Alert
• Action sheets are used to force the user to
make a choice between two or more items.
• Alerts force users to respond before they are
allowed to continue using the application
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 30
31. Action Sheet and Alert
• Action sheet action:
– Then add a method after the buttonPressed: method
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 31
33. viewDidLoad Method
• viewDidLoad helps to modify any of the
objects that were created in nib file.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 33
35. viewDidLoad Method
• The former code sets the background image
for the button.
• It specifies that, while being touched, the
button should change from using the white
image to the blue image. This short method
introduces two new concepts: control states
and stretchable images.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 35
36. Control States
• Every iOS control has four possible control states:
– Normal: is the default state. It’s the state that controls are
in when not in any of the other states.
– Highlighted: is the state a control is in when it’s currently
being used.
– Disabled: when they have been turned off, which can be
done by unchecking the Enabled checkbox in Interface
Builder or setting the control’s enabled property to NO.
– Selected: It is usually used to indicate that the control is
turned on or selected. Selected is similar to highlighted,
but a control can continue to be selected when the user is
no longer directly using that control.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 36
37. Stretchable Images
• A stretchable image is a resizable image that
knows how to resize itself intelligently so that
it maintains the correct appearance.
– Edge insets are the parts of an image, measured
in pixels, that should not be resized.
Eng. Abdulrazzaq Alnajjar iabdulrazzaq@outlook.com 37