beginning ios6 development ch04 more user interface fun

37
User Interface 1 [email protected] Eng. Abdulrazzaq Alnajjar

Upload: abdulrazzaq-alnajjar

Post on 22-Nov-2014

640 views

Category:

Education


0 download

DESCRIPTION

Beginning iOS6 Development CH04 More User Interface Fun

TRANSCRIPT

Page 1: Beginning iOS6 Development CH04 More User Interface Fun

User Interface

[email protected]. Abdulrazzaq Alnajjar

Page 2: Beginning iOS6 Development CH04 More User Interface Fun

A Screen Full of Controls

• What to learn:

– Image view

– Text field

– Slider

– Segmented control

– Switch

– action sheet

– Alert

[email protected]. Abdulrazzaq Alnajjar

Page 3: Beginning iOS6 Development CH04 More User Interface Fun

Controls

• Active

• Static

• Passive

– most of the available controls can be used in all three modes.

– All iOS controls are subclasses of UIControl.

[email protected] 3Eng. Abdulrazzaq Alnajjar

Page 4: Beginning iOS6 Development CH04 More User Interface Fun

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.

[email protected] 4Eng. Abdulrazzaq Alnajjar

Page 5: Beginning iOS6 Development CH04 More User Interface Fun

Image View

• Drag an image view onto the view in the nib editor.

[email protected] 5Eng. Abdulrazzaq Alnajjar

Page 6: Beginning iOS6 Development CH04 More User Interface Fun

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

[email protected] 6Eng. Abdulrazzaq Alnajjar

Page 7: Beginning iOS6 Development CH04 More User Interface Fun

Image View Attributes

• Attributes

– The Mode Attribute

– Tag

– Interaction Checkboxes

– The Alpha Value

– Background

– Drawing Checkboxes

– Stretching

[email protected] 7Eng. Abdulrazzaq Alnajjar

Page 8: Beginning iOS6 Development CH04 More User Interface Fun

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.

[email protected] 8Eng. Abdulrazzaq Alnajjar

Page 9: Beginning iOS6 Development CH04 More User Interface Fun

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.

[email protected] 9Eng. Abdulrazzaq Alnajjar

Page 10: Beginning iOS6 Development CH04 More User Interface Fun

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.

[email protected] 10Eng. Abdulrazzaq Alnajjar

Page 11: Beginning iOS6 Development CH04 More User Interface Fun

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.

[email protected] 11Eng. Abdulrazzaq Alnajjar

Page 12: Beginning iOS6 Development CH04 More User Interface Fun

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.

[email protected] 12Eng. Abdulrazzaq Alnajjar

Page 13: Beginning iOS6 Development CH04 More User Interface Fun

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

[email protected] 13Eng. Abdulrazzaq Alnajjar

Page 14: Beginning iOS6 Development CH04 More User Interface Fun

Text Fields

• Grab 2 text fields & 2 labels from the library into the View.

[email protected] 14Eng. Abdulrazzaq Alnajjar

Page 15: Beginning iOS6 Development CH04 More User Interface Fun

Text Field Inspector Settings

[email protected] 15Eng. Abdulrazzaq Alnajjar

Page 16: Beginning iOS6 Development CH04 More User Interface Fun

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

[email protected] 16Eng. Abdulrazzaq Alnajjar

Page 17: Beginning iOS6 Development CH04 More User Interface Fun

Text Field Inspector Settings

• Keyboard:– Capitalization

– Correction

– Keyboard

– Appearance

– Return Key

– Auto-enable Return Key checkbox

– Secure checkbox

• Control: Enabled checkbox

[email protected] 17Eng. Abdulrazzaq Alnajjar

Page 18: Beginning iOS6 Development CH04 More User Interface Fun

Creating and Connecting Outlets

• s

[email protected] 18Eng. Abdulrazzaq Alnajjar

Page 19: Beginning iOS6 Development CH04 More User Interface Fun

Closing the Keyboard

• In header file:

[email protected] 19Eng. Abdulrazzaq Alnajjar

Page 20: Beginning iOS6 Development CH04 More User Interface Fun

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.

[email protected] 20Eng. Abdulrazzaq Alnajjar

Page 21: Beginning iOS6 Development CH04 More User Interface Fun

Touching the Background to Close the Keyboard

• In header file:

[email protected] 21Eng. Abdulrazzaq Alnajjar

Page 22: Beginning iOS6 Development CH04 More User Interface Fun

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

[email protected] 22Eng. Abdulrazzaq Alnajjar

Page 23: Beginning iOS6 Development CH04 More User Interface Fun

Slider

• A slider lets you choose a number in a given range.

• Minimum, Maximum and Current values.

[email protected] 23Eng. Abdulrazzaq Alnajjar

Page 24: Beginning iOS6 Development CH04 More User Interface Fun

Slider Actions and Outlets

• Slider Action: Set the Type to UISlider.

• Label outlet.

• Slider Action method:

• Set current value:

[email protected]. Abdulrazzaq Alnajjar

Page 25: Beginning iOS6 Development CH04 More User Interface Fun

Segmented Control & Switches

• Segmented Control used to show & hide objects.

• Switches are small controls that can have only two states: on and off.

[email protected] 25Eng. Abdulrazzaq Alnajjar

Page 26: Beginning iOS6 Development CH04 More User Interface Fun

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.

[email protected] 26Eng. Abdulrazzaq Alnajjar

Page 27: Beginning iOS6 Development CH04 More User Interface Fun

Segmented Control & Switches

• Switch Actions:

[email protected] 27Eng. Abdulrazzaq Alnajjar

Page 28: Beginning iOS6 Development CH04 More User Interface Fun

Segmented Control & Switches

[email protected] 28

• 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

Page 29: Beginning iOS6 Development CH04 More User Interface Fun

Segmented Control & Switches

• segmented control action:

[email protected] 29Eng. Abdulrazzaq Alnajjar

Page 30: Beginning iOS6 Development CH04 More User Interface Fun

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

[email protected] 30Eng. Abdulrazzaq Alnajjar

Page 31: Beginning iOS6 Development CH04 More User Interface Fun

Action Sheet and Alert

• Action sheet action:

– Then add a method after the buttonPressed: method

[email protected] 31Eng. Abdulrazzaq Alnajjar

Page 32: Beginning iOS6 Development CH04 More User Interface Fun

[email protected] 32Eng. Abdulrazzaq Alnajjar

Page 33: Beginning iOS6 Development CH04 More User Interface Fun

viewDidLoad Method

• viewDidLoad helps to modify any of the objects that were created in nib file.

[email protected] 33Eng. Abdulrazzaq Alnajjar

Page 34: Beginning iOS6 Development CH04 More User Interface Fun

viewDidLoad Method

[email protected] 34Eng. Abdulrazzaq Alnajjar

Page 35: Beginning iOS6 Development CH04 More User Interface Fun

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.

[email protected] 35Eng. Abdulrazzaq Alnajjar

Page 36: Beginning iOS6 Development CH04 More User Interface Fun

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.

[email protected] 36Eng. Abdulrazzaq Alnajjar

Page 37: Beginning iOS6 Development CH04 More User Interface Fun

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.

[email protected] 37Eng. Abdulrazzaq Alnajjar