1. Overview 1.1 What UI elements are? 1.2 How to add UI elements? 1.3 Delegates 1.4 Delegates(cont.) 2. Employing Basic UI Elements 2.1 UITextField 2.2 UIButton 2.3 UILabel 2.4 UIImageView 2.5 UITextView 2.6 UISwitch 2.7 UISlider 2.8 UIAlertView 3. Working with Containers 3.1 UIScrollView 3.2 UIScrollView 4. Example 2 4.1 UITableView 4.2 UIPickerView 5. Exercise 2 5.1 Contact App

1. Nikmesoft Ltd
Basic UI Elements
Linh NGUYEN
Lecture 2

2. Nikmesoft Ltd
Contents
Overview1
Employing Basic UI Elements2
Working with Containers3
Example 24
Exercise 25
2

3. Nikmesoft Ltd
Basic UI Elements
Overview
3

4. Nikmesoft Ltd
Overview
 What UI elements are?
 UI elements are visual elements that we can see in our
applications. Some of these elements respond to user
interactions such as buttons, text fields and others are
informative such as images, labels.
 How to add UI elements?
 We can add UI elements both in code and with the help of
interface builder. Depending on the need we can use either
one of them.
4

5. Nikmesoft Ltd
Overview
5
UI
Elements Properties
Delegates

6. Nikmesoft Ltd
Overview
 Delegates
 Let's assume an object A calls object B to perform an action,
once the action is complete object A should know that B has
completed the task and take necessary action. This is achieved
with the help of delegates.
6

7. Nikmesoft Ltd
Overview
 Delegates(cont.)
 The key concepts in the above example are:
• A is delegate object of B
• B will have a reference of A
• A will implement the delegate methods of B.
• B will notify A through the delegate methods.
7

8. Nikmesoft Ltd
Overview
 Delegates(cont.)
8

9. Nikmesoft Ltd
Overview
 Delegates(cont.)
9

10. Nikmesoft Ltd
Basic UI Elements
Employing Basic UI Elements
10

11. Nikmesoft Ltd
Employing Basic UI Elements
 UITextField
 A text field is an UI element that enables the app to get user
input
 Important Properties
• Placeholder text which is shown when there is no user input
• Normal text
• Auto correction type
• Key board type
• Return key type
• Clear button mode
• Alignment
11

12. Nikmesoft Ltd
Employing Basic UI Elements
 UITextField
 Delegates
• - (void)textFieldDidBeginEditing:(UITextField *)textField
• - (void)textFieldDidEndEditing:(UITextField *)textField
12

13. Nikmesoft Ltd
Employing Basic UI Elements
 UITextField
 Input Types
• UIKeyboardTypeASCIICapable
• UIKeyboardTypeURL
• UIKeyboardTypeNumberPad
• UIKeyboardTypePhonePad
• UIKeyboardTypeNamePhonePad
• UIKeyboardTypeEmailAddress
• UIKeyboardTypeDecimalPad
• UIKeyboardTypeTwitter
13

14. Nikmesoft Ltd
Employing Basic UI Elements
 UITextField
 Create a text field by codes
14

15. Nikmesoft Ltd
Employing Basic UI Elements
 UIButton
 Buttons are used for handling user actions. It intercepts the
touch events and sends message to the target object.
 Important properties
• State Config
• Image
• TitleLabel
15

16. Nikmesoft Ltd
Employing Basic UI Elements
 UIButton
 Button types
• UIButtonTypeCustom
• UIButtonTypeRoundedRect
• UIButtonTypeDetailDisclosure
• UIButtonTypeInfoLight
• UIButtonTypeInfoDark
• UIButtonTypeContactAdd
16

17. Nikmesoft Ltd
Employing Basic UI Elements
 UIButton
 Important methods
17

18. Nikmesoft Ltd
Employing Basic UI Elements
 UILabel
 Labels are used for displaying static content which consists of a
single line or multiple lines.
 Important properties
• textAlignment
• textColor
• text
• numberOflines
• lineBreakMode
18

19. Nikmesoft Ltd
Employing Basic UI Elements
 UILabel
 Create a Label by code
19

20. Nikmesoft Ltd
Employing Basic UI Elements
 UIImageView
 Image view is used for displaying a single image or animated
sequence of images.
 Important properties
• image
• highlightedImage
• contentModes
• animationImages
• animationRepeatCount
20

21. Nikmesoft Ltd
Employing Basic UI Elements
 UIImageView
 Important methods
21

22. Nikmesoft Ltd
Employing Basic UI Elements
 UITextView
 Text View is used displaying multi line of scrollable text which is
optionally editable.
 Important properties
• editable
• text
• textAlignment
• textColor
22

23. Nikmesoft Ltd
Employing Basic UI Elements
 UITextView
 Important delegate methods
23

24. Nikmesoft Ltd
Employing Basic UI Elements
 UISwitch
 Switches are used to toggle between on and off states.
 Important properties
• onImage
• offImage
• on
24

25. Nikmesoft Ltd
Employing Basic UI Elements
 UISwitch
 Create a switch by code
25

26. Nikmesoft Ltd
Employing Basic UI Elements
 UISlider
 Sliders are used to choose a single value from a range of values.
 Important properties
• Continuous (If YES, the slider sends update events continuously to the
associated target’s action method. If NO, the slider only sends an action
event when the user releases the slider’s thumb control to set the final
value.)
• maximumValue
• minimumValue
• value
26

27. Nikmesoft Ltd
Employing Basic UI Elements
 UISlider
 Create a slider by code
27

28. Nikmesoft Ltd
Employing Basic UI Elements
 UIAlertView
 Alerts are used to give important information to user. Only after
selecting the option in the alert view we can proceed further
using the app.
 Important properties
• alertViewStyle(http://mobile.tutsplus.com/tutorials/iphone/ios-5-sdk-
uialertview-text-input-and-validation/)
• cancelButtonIndex
• message
• numberOfButtons
• title
28

29. Nikmesoft Ltd
Employing Basic UI Elements
 UIAlertView
 Important methods
29

30. Nikmesoft Ltd
Employing Basic UI Elements
 UIAlertView
 Create an alert view by code
30

31. Nikmesoft Ltd
Employing Basic UI Elements
 UIAlertView
 Important delegate methods
31

32. Nikmesoft Ltd
Basic UI Elements
Working with Containers
32

33. Nikmesoft Ltd
Employing Basic UI Elements
 UIScrollView
 Scroll View is used for displaying content more than the size of
the screen. It can contain all of the other UI elements like image
views, labels, text views and even another scroll view itself.
 Important properties
• contentSize
• contentInset
• contentOffset
• delegate
33

34. Nikmesoft Ltd
Employing Basic UI Elements
 UIScrollView
 Important properties
• ContentInset
34

35. Nikmesoft Ltd
Employing Basic UI Elements
 UIScrollView
 Important methods
35

36. Nikmesoft Ltd
Employing Basic UI Elements
 UIScrollView
 Create a scroll view by code
36

37. Nikmesoft Ltd
Example 2.1
37

38. Nikmesoft Ltd
Employing Basic UI Elements
 UITableView
 It is used for displaying a vertically scrollable view which consists
of number of cells (generally reusable cells). It has special
features like headers, footers, rows and section.
 Important properties
• delegate
• dataSource
• rowHeight
• sectionFooterHeight
• sectionHeaderHeight
38

39. Nikmesoft Ltd
Employing Basic UI Elements
 UITableView
 Important properties(cont.)
• separatorColor
• tableHeaderView
• tableFooterView
• Style(Plain or Group)
39

40. Nikmesoft Ltd
Employing Basic UI Elements
 UITableView
 Important data source methods
40

41. Nikmesoft Ltd
Employing Basic UI Elements
 UITableView
 Important delegate methods
41

42. Nikmesoft Ltd
Example 2.2
42

43. Nikmesoft Ltd
Example 2.2
43

44. Nikmesoft Ltd
Employing Basic UI Elements
 UIPickerView
 Pickers consist of a rotating scrollable view which is used for
picking a value from the list of items.
 Important properties
• delegate
• dataSource
44

45. Nikmesoft Ltd
Employing Basic UI Elements
 UIPickerView
 Important data source methods
45

46. Nikmesoft Ltd
Employing Basic UI Elements
 UIPickerView
 Important delegate methods
46

47. Nikmesoft Ltd
Exercise 2
47
 Contact App
 TableView with XIB custom cell
 Section by first character of Last Name
 Bold font for Last Name
 Index (http://www.iphonedevcentral.com/indexed-uitableview-tutorial/)

48. Nikmesoft Ltd
48