Ui 5
Download as PPTX, PDF0 likes757 views
The document discusses user interface (UI) elements and controls in Android and iOS. It provides overviews of common UI elements like buttons, text fields, and layouts in both platforms. For Android specifically, it covers view objects, XML layouts, and getting input from controls. For iOS, it discusses the UIControl class, configuring controls, auto layout, and content for different controls like text fields and buttons.
Ui 5
- 1. UI Smartphone Programming (CPE 490/590) Michael T. Shrove
- 2. ANDROID
- 3. User Interface (UI) Overview • All user interface elements in an Android app are built using View and ViewGroup objects. • A View is an object that draws something on the screen that the user can interact with. • A ViewGroup is an object that holds other View (and ViewGroup) objects in order to define the layout of the interface. • Android provides a collection of both View and ViewGroup subclasses that offer you common input controls (such as buttons and text fields) and various layout models (such as a linear or relative layout).
- 4. User Interface (UI) Layout • The user interface for each component of your app is defined using a hierarchy of View and ViewGroup objects. • Each view group is an invisible container that organizes child views, while the child views may be input controls or other widgets that draw some part of the UI.
- 5. UI Layout • To declare your layout, you can instantiate View objects in code and start building a tree, but the easiest and most effective way to define your layout is with an XML file. • XML offers a human-readable structure for the layout, similar to HTML. • The name of an XML element for a view is respective to the Android class it represents. • So a <TextView> element creates a TextView widget in your UI, and a <LinearLayout> element creates a LinearLayout view group.
- 6. Example
- 7. Layouts (ViewGroups) • A layout defines the visual structure for a user interface, such as the UI for an activity or app widget. You can declare a layout in two ways: • Declare UI elements in XML: Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses, such as those for widgets and layouts. • Instantiate layout elements at runtime: Your application can create View and ViewGroup objects (and manipulate their properties) programmatically.
- 8. Write the XML • Using Android's XML vocabulary, you can quickly design UI layouts and the screen elements they contain, in the same way you create web pages in HTML — with a series of nested elements. • Each layout file must contain EXACTLY one root element, which must be a View or ViewGroup object. • Once you've defined the root element, you can add additional layout objects or widgets as child elements to gradually build a View hierarchy that defines your layout. • After you've declared your layout in XML, save the file with the .xml extension, in your Android project's res/layout/ directory, so it will properly compile.
- 9. Example
- 10. Load XML Resource • When you compile your application, each XML layout file is compiled into a View resource. • You should load the layout resource from your application code, in your Activity.onCreate() callback implementation. • Do so by calling setContentView(), passing it the reference to your layout resource in the form of: R.layout.layout_file_name • The onCreate() callback method in your Activity is called by the Android framework when your Activity is launched
- 14. Linear Layout • A layout that organizes its children into a single horizontal or vertical row. • It creates a scrollbar if the length of the window exceeds the length of the screen. • You can specify the layout direction with the android:orientation attribute. • All children of a LinearLayout are stacked one after the other, so a vertical list will only have one child per row, no matter how wide they are, and a horizontal list will only be one row high.
- 15. Ex. of LinearLayout Orientation Horizontal Orientation Vertical Orientation
- 16. Code Example
- 17. Relative Layout • RelativeLayout is a view group that displays child views in relative positions. • The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center). • A RelativeLayout is a very powerful utility for designing a user interface because it can eliminate nested view groups and keep your layout hierarchy flat, which improves performance.
- 18. Positing Views in Relative Layout • RelativeLayout lets child views specify their position relative to the parent view or to each other (specified by ID). • So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on. • By default, all child views are drawn at the top-left of the layout, so you must define the position of each view using the various layout properties available from RelativeLayout.LayoutParams.
- 19. Layout Properties Attribute Description layout_alignParentTop If true, makes the top edge of this view match the top edge of the parent. layout_alignParentLeft If true, makes the left edge of this view match the left edge of the parent. layout_alignLeft Makes the left edge of this view match the left edge of the given anchor view ID. layout_alignRight Makes the right edge of this view match the right edge of the given anchor view ID. Layout_below Positions the top edge of this view below the given anchor view ID. layout_centerHorizontal If true, centers this child horizontally within its parent.
- 20. Code Example
- 21. WebView • If you want to deliver a web application (or just a web page) as a part of a client application, you can do it using WebView. • The WebView class is an extension of Android's View class that allows you to display web pages as a part of your activity layout. • It does not include any features of a fully developed web browser, such as navigation controls or an address bar. • All that WebView does, by default, is show a web page.
- 22. Adding a WebView • To add a WebView to your Application, simply include the <WebView> element in your activity layout. • For example, here's a layout file in which the WebView fills the screen:
- 23. Load a webpage • To load a web page in the WebView, use loadUrl(). For example: • Before this will work, however, your application must have access to the Internet. • To get Internet access, request the INTERNET permission in your manifest file. For example:
- 24. Input Controls • Input controls are the interactive components in your app's user interface. • Android provides a wide variety of controls you can use in your UI, such as: buttons, text fields, seek bars, checkboxes, zoom buttons, toggle buttons, and many more. • Adding an input control to your UI is as simple as adding an XML element to your XML layout.
- 25. Common Controls
- 26. Button • A button consists of text or an icon (or both text and an icon) that communicates what action occurs when the user touches it. • Depending on whether you want a button with text, an icon, or both, you can create the button in your layout in three ways: • With text using button class • With icon using imagebutton class • With text and icon using button class with android:drawableLeft attribute (1) (2) (3)
- 28. Responding to Click Events • When the user clicks a button, the Button object receives an on-click event. • To define the click event handler for a button, add the android:onClick attribute to the <Button> element in your XML layout. • The value for this attribute must be the name of the method you want to call in response to a click event.
- 29. Example
- 30. Using an OnClickListener • You can also declare the click event handler programmatically rather than in an XML layout. • To declare the event handler programmatically, create an View.OnClickListener object and assign it to the button by calling setOnClickListener(View.OnClickListener). For example:
- 31. TextField (EditText) • A text field allows the user to type text into your app. • It can be either single line or multi-line. • Touching a text field places the cursor and automatically displays the keyboard. • In addition to typing, text fields allow for a variety of other activities, such as text selection (cut, copy, paste) and data look-up via auto-completion. • You can add a text field to you layout with the EditText object. You should usually do so in your XML layout with a <EditText> element.
- 32. Getting Text from EditText activity_main.xml MainActivity.java
- 33. IOS
- 34. About Controls • A control is a communication tool between a user and an app. • Controls convey a particular action or intention to the app through user interaction, and can be used to manipulate content, provide user input, navigate within an app, or execute other pre-defined actions. • Controls are simple, straightforward, and familiar to users because the appear throughout many iOS apps. • The UIControl class is the base class for all controls on iOS, and defines the functionality that is common to all controls
- 35. About Controls • Purpose: Controls allow users to: • Interact with an app • Manipulate or edit app content • Convey user intent to the app in a straightforward way • Implementation: Controls are implemented in the UIControl class and discussed in UIControl Class Reference. • Configuration: Configure controls in Interface Builder, in the Control section of the Attributes Inspector. A few configurations cannot be made through the Attributes Inspector, so you must make them programmatically. You can set other configurations programmatically, too, if you prefer.
- 36. Content of Controls • Each subclass of UIControl has different content or values that you can set. • To learn about setting content for a particular control, read its corresponding chapter: • Buttons • Date Pickers • Page Controls • Segmented Controls • Text Fields • Sliders • Steppers • Switches
- 37. Behavior of Controls • A control state describes the current interactive state of a control: normal, selected, enabled, or highlighted. • A control can have more than one state at a time, and you can change a control’s state at any point. • For a full listing of control states, see UIControlState. • The fastest way to configure the initial state of a control is by using the Attributes Inspector:
- 38. Control Events • A control event represents various physical gestures that users can make on controls, such as lifting a finger from a control, dragging a finger into a control, and touching down within a text field. • For a full listing of control events, see UIControlEvents.
- 39. Target Action Mechanism • The target-action mechanism is a model for configuring a control to send an action message to a target object after a specific control event. • For example, when a user interacts with a slider, it generates a UIControlEventValueChanged control event. • You could use this event to update a label’s text to the current value of the slider. • In this case, the sender is the slider, the control event is Value Changed, the action is updating the label’s text, and the target is the controller file containing the label as an IBOutlet.
- 40. Target-Action Mechanism • To create a relationship between the slider, the control event, the target, and the action, you can do one of two things: 1. Call the addTarget:action:forControlEvents: method within your target file:
- 41. Target-Action Mechanism 2. Use the Connections Inspector in Interface Builder to Control-drag the slider’s Value Changed event to the action method in the target file.
- 42. Target-Action Mechanism 3. Control-click the slider in Interface Builder, and drag its Value Changed event to the target object in your Storyboard. Select the appropriate action from the list of actions available for the target.
- 43. AutoLayout • Auto Layout is a system that lets you lay out your app’s user interface by creating a mathematical description of the relationships between the elements. • You define these relationships in terms of constraints either on individual elements, or between sets of elements. • Using Auto Layout, you can create a dynamic and versatile interface that responds appropriately to changes in screen size, device orientation, and localization. https://developer.apple.com/library/ios/documentation/UserExperience/Con ceptual/AutolayoutPG/Introduction/Introduction.html
- 44. AutoLayout • Auto Layout is built into Interface Builder in Xcode 5 • Auto Layout is enabled by default when you create a new project. • The typical workflow for creating user interfaces starts by using Interface Builder to create, reposition, resize, and customize your views and controls. • When you are satisfied with the positions and settings, you’re ready to start adding Auto Layout constraints so that your interface can react to changes in orientation, size, and localization.
- 45. Using AutoLayout • The auto layout system allows you to define layout constraints for user interface elements, such as views and controls. • Constraints represent relationships between user interface elements. • You can create auto layout constraints by selecting the appropriate element or group of elements and selecting an option from the menu in the bottom right corner of Xcode’s Interface Builder.
- 46. Using AutoLayout with Controls • Auto layout contains two menus of constraints: pin and align. • The Pin menu allows you to specify constraints that define some relationship based on a particular value or range of values. • Some apply to the control itself (width) while others define relationships between elements (horizontal spacing).
- 48. Buttons • Buttons let a user initiate behavior with a tap. • You communicate a button’s function through a textual label or with an image. • Your app changes button appearance based upon user touch interactions, using highlighting, changes in the label or image, color, and state to indicate the button action dynamically.
- 49. Button • Purpose: Buttons allow users to: • Initiate behavior with a tap • Initiate an action in the app with a single simple gesture • Implementation: Buttons are implemented in the UIButton class and discussed in the UIButton Class Reference. • Configuration: Configure buttons in Interface Builder, in the Button section of the Attributes Inspector. A few configurations cannot be made through the Attributes Inspector, so you must make them programmatically. You can set other configurations programmatically, too, if you prefer.
- 51. TextFields • Text fields allows the user to input a single line of text into an app. • You typically use text fields to gather small amounts of text from the user and perform some immediate action, such as a search operation, based on that text. https://developer.apple.com/library/prerelease/ios/documentation/UserExperien ce/Conceptual/UIKitUICatalog/UITextField.html#//apple_ref/doc/uid/TP4001285 7-UITextField-SW1
- 52. TextField • Purpose: Text fields allow users to: • Enter text as input to an app • Implementation: Text fields are implemented in the UITextField class and discussed in the UITextField Class Reference. • Configuration: Configure text fields in Interface Builder, in the Text Field section of the Attributes Inspector. • A few configurations cannot be made through the Attributes Inspector, so you must make them programmatically. • You can set other configurations programmatically, too, if you prefer.
- 54. Content of TextFields • Set the content of the text field using the Text (text) field. • You can select whether you want plain or attributed text. • The placeholder appears in place whenever a text field has no characters (before a user begins typing, or if the user deletes everything in the text field).
- 55. EXAMPLES