lecture 2 - Mobile apps design.pdf

CSIT242Mobile Application Development LECTURE 2 – USER INTERFACE DESIGN. VIEWS. CONTROLLERS. 1 CSIT242 – SIM 2024 Lecture Plan 1. User Interface Design 2. Android Views and Layouts 3. Event Listeners, Event Handlers 4. iOS Views and Storyboards 5. Outlets, Actions 2 CSIT242 – SIM 2024 Android – User...

CSIT242Mobile Application Development LECTURE 2 – USER INTERFACE DESIGN. VIEWS. CONTROLLERS. 1 CSIT242 – SIM 2024 Lecture Plan 1. User Interface Design 2. Android Views and Layouts 3. Event Listeners, Event Handlers 4. iOS Views and Storyboards 5. Outlets, Actions 2 CSIT242 – SIM 2024 Android – User Interface overview App's user interface is everything that the user can see and interact with. All user interface elements in an Android app are built using View and ViewGroup (composite view) objects. All UI components are subclasses of Android View class, or ViewGroup. ViewGroups are also called container views. A View is an object that draws something on the screen that the user can interact with. A ViewGroup is an object (invisible container) that holds other View (and ViewGroup) objects in order to define the position of the views in the interface. 3 CSIT242 – SIM 2024 Android – User Interface overview The user interface for each component of the app is defined using a hierarchy of View and ViewGroup objects, as shown. Each view group is an invisible container that organizes child views (that may be input controls or other widgets that draw some part of the UI). Source: https://developer.android.com/guide/topics/ui/declaring-layout 4 CSIT242 – SIM 2024 Android – User Interface overview A layout (special type of View called ViewGroup) is container view that defines the structure for a user interface in the app, such as in an activity. All elements in the layout are built using a hierarchy of View and ViewGroup objects. Android provides a variety of pre-build UI components (or widgets), both View and ViewGroup subclasses, that offer common input controls Button, CheckBox, TextView, ProgressBar, RadioButtons … Android provides a collection of structured layout objects - various layout models (such as constraint, linear or relative layout). Android also provides other UI modules for special interfaces such as dialogs, notifications, and menus. 5 CSIT242 – SIM 2024 Android – Layouts A layout as a visual structure for a user interface can be declared in two ways: XML Layout - Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses. Android studio’s Layout Editor can be used for building XML layout using drag-and-drop interface. Instantiate layout elements at runtime - The application can create View and ViewGroup objects (and manipulate their properties) programmatically. Using Android's XML vocabulary, allows quick design of UI layouts and the screen elements they contain (in the same way web pages in HTML — with a series of nested elements are created). 6 CSIT242 – SIM 2024 Android – User Interface Layout Each layout file must contain exactly one root element, which must be a View or ViewGroup object. Once the root element is defined, additional layout objects or widgets as child elements can be add to gradually build a View hierarchy that defines the layout (tree structure). 7 CSIT242 – SIM 2024 Android – User Interface Layout Android studio allows creation of alternative layout resources to optimize the UI design for certain screen sizes: Open your default layout and then click the arrow beside the file tab. In the drop-down list, click to create a suggested qualifier such as Create Landscape Qualifier or click Create Resource Qualifier. If you selected Create Resource Qualifier, in the Select Resource Directory select a screen qualifiers and click OK. 8 CSIT242 – SIM 2024 Android – Layouts When the application is compiled, each XML layout file is compiled into a View resource. The layout resource from the application code should be loaded in the Activity.onCreate() method implementation. It can be done by calling setContentView() method, and passing the reference to the layout resource in the form of: R.layout.layout_file_name For example, if your XML layout is saved as activity_main.xml, you would load it for your Activity like: protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } 9 CSIT242 – SIM 2024 Android – Layout Attributes Every View and ViewGroup object supports their own variety of XML attributes. Some attributes are specific to a View object (for example, TextView supports the textSize attribute), but these attributes are also inherited by any View objects that may extend this class. ID - Any View object may have an integer ID associated with it, to uniquely identify the View within the tree. android:id="@+id/my_button" Layout Parameters - XML layout attributes named layout_something define layout parameters for the View that are appropriate for the ViewGroup in which it resides. 10 CSIT242 – SIM 2024 Android – Layout Parameters Every ViewGroup class implements a nested class that extends ViewGroup.LayoutParams. This subclass contains property types that define the size and position for each child view, as appropriate for the view group. Source: https://developer.android.com/guide/topics/ui/declaring-layout 11 CSIT242 – SIM 2024 Android – Layout Parameters All view groups include a width and height (layout_width and layout_height), and each view is required to define them. Many LayoutParams also include optional margins and borders. Width and height can be specified with exact measurements or more often, can be used one of these constants: wrap_content tells the view to size itself to the dimensions required by its content. match_parent (named fill_parent before API Level 8) tells the view to become as big as its parent view group will allow. 12 CSIT242 – SIM 2024 Android – Layout Position The geometry of a view is that of a rectangle. A view has a location, expressed as a pair of left and top coordinates, and two dimensions, expressed as a width and a height. The unit for location and dimensions is the pixel. It is possible to retrieve the location of a view by invoking the methods getLeft() and getTop(). getLeft() returns the left, or X, coordinate of the rectangle representing the view. getTop() returns the top, or Y, coordinate of the rectangle representing the view. 13 CSIT242 – SIM 2024 Android – Common Layouts Each subclass of the ViewGroup class provides a unique way to display the views nested within it. Common layout types that are built into the Android platform are: Linear Layout, Relative Layout, Web View. Source: https://developer.android.com/guide/topics/ui/declaring-layout In Android 7 and later, the recommended layout is Constraint Layout. Although you can nest one or more layouts within another layout to achieve your UI design, you should strive to keep your layout hierarchy as shallow as possible. Your layout draws faster if it has fewer nested layouts (a wide view hierarchy is better than a deep view hierarchy). 14 CSIT242 – SIM 2024 Android – Linear Layout LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. The layout direction can be specified 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 (the height of the tallest child, plus padding). A LinearLayout supports assigning a weight to individual children (layout_weight attribute). This attribute assigns an ”importance” value to view in terms of how much space it should occupy on the screen. A LinearLayout respects margins between children and the gravity (right, center, or left alignment) of each child. 15 CSIT242 – SIM 2024 Android – 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). The two elements can be aligned by right border, or make one below another, centered in the screen, centered left, and so on. 16 CSIT242 – SIM 2024 Android – Constraint Layout ConstraintLayout is a view group introduced in Android 7 (Android Studio 2.3). ConstraintLayout allows the positioning and behaviour of the views in a layout to be defined by simple constraint settings assigned to each child view. It gives instructions for how each view (in relation to Layout and other views) should be displayed. The flexibility of this layout allows complex layouts to be quickly and easily created without the necessity to nest other layout types inside each other resulting in improved layout performance. ConstraintLayout is tightly integrated into the Android Studio Layout Editor tool (design editor’s blueprint tool). 17 CSIT242 – SIM 2024 Android – Dynamic Layouts When the content for the layout is dynamic or not pre-determined, can be used a layout that subclasses AdapterView to populate the layout with views at runtime. A subclass of the AdapterView class uses an Adapter to bind data to its layout. The Adapter behaves as a middleman between the data source and the AdapterView layout—the Adapter retrieves the data (from a source such as an array or a database query) and converts each entry into a view that can be added into the AdapterView layout. Common layouts backed by an adapter include: Source: https://developer.android.com/guide/topics/ui/declaring-layout 18 CSIT242 – SIM 2024 Android – Input Controls Input controls are the interactive components in the app's user interface. buttons, text fields, seek bars, checkboxes, zoom buttons, toggle buttons, and many more. Adding an input control to the UI is as simple as adding an XML element to your XML layout. Or the control can be drag-and-drop on the design window. Source: https://www.tutorialspoint.com/android/android_user_interface_controls.htm 19 CSIT242 – SIM 2024 Android – Common Controls 20 Control Type Description Button A push-button that can be pressed, or clicked, by the user to perform an action. Text field An editable text field or present text to the user. Checkbox An on/off switch that can be toggled by the user. Usually used for a group of selectable options that are not mutually exclusive. Radio button Similar to checkboxes, but used for cases where only one option can be selected in the group. Toggle button An on/off button - changing a setting between two states. Spinner A drop-down list that allows users to select one value from a set. Pickers For example: DatePicker or TimePicker. CSIT242 – SIM 2024 Android – Custom Components Android offers a sophisticated and powerful componentized model for building your UI, based on the fundamental layout classes: View and ViewGroup, but also allows creation of custom components. Basic approach to Custom components - extend an existing View class, then override some of the methods from the superclass and use your new extension class. Fully customized components can be used to create graphical components that appear however you wish. Perhaps a graphical VU meter that looks like an old analog gauge, or a sing-a-long text view where a bouncing ball moves along the words so you can sing along with a karaoke machine. 21 CSIT242 – SIM 2024 Android – Input Events Events in Android can take a variety of different forms, but are usually generated in response to an external action. The most common form of events involve some form of interaction with the touch screen. Such events fall into the category of input events. The Android framework maintains an event queue into which events are placed as they occur - first-in, first-out (FIFO) basis. In order to be able to capture the user interaction with the UI the view must have in place an event listener. In order to handle the event that it has been passed, the view must have in place an callback method. 22 CSIT242 – SIM 2024 Android – Event Listeners and CallBack Methods The Android View class, from which all user interface components are derived, contains a range of event listener interfaces, each of which contains an abstract declaration for a callback method. In order to be able to respond to an event of a particular type, a view must register the appropriate event listener and implement the corresponding callback method. For instance, when a View (such as a Button) is touched, the onTouchEvent() method is called on that object. 23 CSIT242 – SIM 2024 android:onClick Resource In Android is available a shortcut for calling a callback method for capturing click events (user “clicks” on a button view in the user interface). For example, if there is a button view named button1 with the requirement that when the user touches the button, a method called buttonClick() declared in the activity class is called, can be done by adding a single line to the declaration of the button view in the XML file. 24 CSIT242 – SIM 2024 Android – Event Listeners and CallBack Methods synchronize means happen one by one in order An event listener is an interface in the View class that contains a single callback method. event listener is asynchronize These methods are called by the Android framework when the View to which the listener has been registered is triggered by user interaction with the item in the UI. Common event listeners with associated callback methods: onClickListener – Used to detect click style events whereby the user touches and then releases an area of the device display occupied by a view. Corresponds to the onClick() callback method which is passed a reference to the view that received the event as an argument. onLongClickListener – Used to detect when the user maintains the touch over a view for an extended period. Corresponds to the onLongClick() callback method which is passed as an argument the view that received the event. 25 CSIT242 – SIM 2024 Android – Event Listeners and CallBack Methods onTouchListener – Used to detect any form of contact with the touch screen including individual or multiple touches and gesture motions. Corresponding with the onTouch() callback. The callback method is passed as arguments the view that received the event and a MotionEvent object. onCreateContextMenuListener – Listens for the creation of a context menu as the result of a long click. Corresponds to the onCreateContextMenu() callback method. The this is for menu callback is passed the menu, the view that received the event and a menu context object. you are texting message to your friend then you get a notification then you will lose focus of the text. eg. text cursor onFocusChangeListener – Detects when focus moves away from the current view as the result of interaction with a track-ball or navigation key. Corresponds to the onFocusChange() callback method which is passed the view that received the event and a Boolean value to indicate whether focus was gained or lost. onKeyListener – Used to detect when a key on a device is pressed while a view has focus. Corresponds to the onKey() callback method. Passed as arguments are the view that received the event, the KeyCode of the physical key that was pressed and a KeyEvent object. 26 CSIT242 – SIM 2024 Android – Event Listeners and CallBack Methods 27 CSIT242 – SIM 2024 Android – Event Listeners and CallBack Methods Regarding the previous example When a long click is detected, the onLongClick() callback method will display “Long button click” on the text view. But the callback method also returns a value of true to indicate that it has consumed the event. In this case the the onClick listener code will not be called. If the return value is false, it will indicated to the Android framework that the event was not consumed by the method and was eligible to be passed on to the next registered listener on the view. In that case the the onClick listener code (as next registered listener on the view) will be called. 28 CSIT242 – SIM 2024 Android – Event Handlers When we are building a custom component from View, we'll be able to define several callback methods used as default event handlers. onKeyDown(int, KeyEvent) - Called when a new key event occurs. onKeyUp(int, KeyEvent) - Called when a key up event occurs. onTrackballEvent(MotionEvent) - Called when a trackball motion event occurs. onTouchEvent(MotionEvent) - Called when a touch screen motion event occurs. onFocusChanged(boolean, int, Rect) - Called when the view gains or loses focus. Also, there are some other methods which are not part of the View class and can directly impact the way of handling events Activity.dispatchTouchEvent(MotionEvent) - This allows Activity to intercept all touch events before they are dispatched to the window. ViewGroup.onInterceptTouchEvent(MotionEvent) - This allows a ViewGroup to watch events as they are dispatched to child Views. ViewParent.requestDisallowInterceptTouchEvent(boolean) - This allows a parent View to indicate that it should not intercept touch events with onInterceptTouchEvent(MotionEvent). 29 CSIT242 – SIM 2024 Android – Handling State Change Any configuration change (such as rotating the orientation of the device’s screen) that impacts the appearance of an activity will cause the activity to be destroyed and recreated. The app can react to those changes by taking appropriate actions. Activity state: Persistent state - data that needs to be saved to a database, content provider or file, Dynamic state - the appearance of the user interface (such as text entered into a text field but not yet committed to the app’s data model). The Activity and Fragment classes contain a methods that can handle the state change and preserve the dynamic state: onConfigurationChanged() – Called when a configuration change occurs for which the activity has indicated it is not to be restarted. onRestoreInstanceState(Bundle savedInstanceState) – This method is called immediately after a call to the onStart() method in the event that the activity is restarting from a previous invocation in which state was saved. onSaveInstanceState(Bundle outState) – Called before an activity is destroyed so that the current dynamic state (usually relating to the user interface) can be saved. 30 CSIT242 – SIM 2024 Resources Android Studio 4.1 Essentials - Java Edition, Neil Smyth, Payload Media Inc., 2020. iOS 12 App Development Essentials, Neil Smyth, Payload Media, Inc., 2018. Programming iOS 14: Dive Deep into Views, View Controllers, and Frameworks, Matt Neuburg, O'Reilly Media Inc., 2020. https://developer.android.com/guide/topics/ui/declaring-layout.html https://developer.android.com/guide/topics/ui/ui-events.html https://developer.apple.com/library/content/referencelibrary/GettingStarted/DevelopiOSApp sSwift/index.html https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xco de_Overview/UsingInterfaceBuilder.html 52 CSIT242 – SIM 2024