[iOS] Basic UI Elements
4 likes869 views
The document is about basic UI elements in application development, detailing various components such as text fields, buttons, labels, and containers like scroll views and table views. It explains how to add UI elements programmatically or using interface builder, along with important properties, methods, and delegate concepts relevant to each element. Additionally, it provides information on creating custom views and utilizes examples and exercises to reinforce learning.
[iOS] Basic UI Elements
- 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
- 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
- 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
- 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
- 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