|
|
Cyril Sermon (@admin) |
Creating User Interfaces
It’s vital to create compelling and intuitive User Interfaces for your applications. Ensuring that they are as stylish and easy to use as they are functional should be a primary design consideration.
To quote Stephen Fry on the importance of style as part of substance in the design of digital devices:
As if a device can function if it has no style. As if a device can be called stylish that does not function superbly. … yes, beauty matters. Boy, does it matter. It is not surface, it is not an extra, it is the thing itself.
— Stephen Fry, The Guardian (October 27, 2007)
Increasing screen sizes, display resolutions, and mobile processor power has seen mobile appli-cations become increasingly visual. While the diminutive screens pose a challenge for creating complex visual interfaces, the ubiquity of mobiles makes it a challenge worth accepting.
In this chapter, you’ll learn the basic Android UI elements and discover how to use Views, View Groups, and layouts to create functional and intuitive User Interfaces for your Activities.
After being introduced to some of the controls available from the Android SDK, you’ll learn how to extend and customize them. Using View Groups, you’ll see how to combine Views to create atomic, reusable UI elements made up of interacting subcontrols. You’ll also learn how to create your own Views to implement creative new ways to display data and interact with users.
The individual elements of an Android User Interface are arranged on screen using a variety of layout managers derived from ViewGroup. Correctly using layouts is essential for creating good interfaces; this chapter introduces several native layout classes and demonstrates how to use them and how to create your own.
Android’s application and context menu systems use a new approach, optimized for modern touch-screen devices. As part of an examination of the Android UI model, this chapter ends with a look at how to create and use Activity and context menus.
User Interface design, human–computer interaction, and usability are huge topics that aren’t covered in great depth in this book. Nonetheless, it’s important that you get them right when creating your User Interfaces.
Android introduces some new terminology for familiar programming metaphors that will be explored in detail in the following sections:
❑Views Views are the basic User Interface class for visual interface elements (commonly known as controls or widgets). All User Interface controls, and the layout classes, are derived from Views.
❑ViewGroups View Groups are extensions of the View class that can contain multiple child Views. By extending the ViewGroup class, you can create compound controls that are made up of interconnected child Views. The ViewGroup class is also extended to provide the layout man-agers, such as LinearLayout, that help you compose User Interfaces.
❑Activities Activities, described in detail in the previous chapter, represent the window or screen being displayed to the user. Activities are the Android equivalent of a Form. To display a User Interface, you assign a View or layout to an Activity.
Android provides several common UI controls, widgets, and layout managers.
For most graphical applications, it’s likely that you’ll need to extend and modify these standard controls — or create composite or entirely new controls — to provide your own functionality.
As described above, all visual components in Android descend from the View class and are referred to generically as Views. You’ll often see Views referred to as controls or widgets — terms you’re probably familiar with if you’ve done any GUI development.
The ViewGroup class is an extension of View designed to contain multiple Views. Generally, View Groups are either used to construct atomic reusable components (widgets) or to manage the layout of child Views. View Groups that perform the latter function are generally referred to as layouts.
Because all visual elements derive from Views, many of the terms above are interchangeable. By con-vention, a control usually refers to an extension of Views that implements relatively simple functionality, while a widget generally refers to both compound controls and more complex extensions of Views.
The conventional naming model is shown in Figure 4-1. In practice, you will likely see both widget and control used interchangeably with View.
<span class="image-uploading">
</span>You’ve already been introduced to a layout and two widgets — the LinearLayout, a ListView, and a TextView — when you created the To-Do List example in Chapter 2.
In the following sections, you’ll learn how to put together increasingly complex UIs, starting with the Views available in the SDK, before learning how to extend them, build your own compound controls, and create your own custom Views from scratch.
A new Activity starts with a temptingly empty screen onto which you place your User Interface. To set the User Interface, call setContentView, passing in the View instance (typically a layout) to display. Because empty screens aren’t particularly inspiring, you will almost always use setContentView to assign an Activity’s User Interface when overriding its onCreate handler.
The setContentView method accepts either a layout resource ID (as described in Chapter 3) or a single View instance. This lets you define your User Interface either in code or using the preferred technique of external layout resources.
Using layout resources decouples your presentation layer from the application logic, providing the flexibility to change the presentation without changing code. This makes it possible to specify differ-ent layouts optimized for different hardware configurations, even changing them at run time based on hardware changes (such as screen orientation).
The following code snippet shows how to set the User Interface for an Activity using an external layout resource. You can get references to the Views used within a layout with the findViewById method. This example assumes that main.xml exists in the project’s res/layout folder.
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
TextView myTextView = (TextView)findViewById(R.id.myTextView);
}If you prefer the more traditional approach, you can specify the User Interface in code. The following snippet shows how to assign a new TextView as the User Interface:
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
TextView myTextView = new TextView(this);
setContentView(myTextView);
myTextView.setText(“Hello, Android”);
}The setContentView method accepts a single View instance; as a result, you have to group multiple controls to ensure that you can reference a layout using a single View or View Group.
Android supplies a toolbox of standard Views to help you create simple interfaces. By using these con-trols (and modifying or extending them as necessary), you can simplify your development and provide consistency between applications.
The following list highlights some of the more familiar toolbox controls:
❑TextView A standard read only text label. It supports multiline display, string formatting, and automatic word wrapping.
❑EditText An editable text entry box. It accepts multiline entry and word wrapping.
❑ListView A View Group that creates and manages a group of Views used to display the items in a List. The standard ListView displays the string value of an array of objects using a Text View for each item.
❑Spinner Composite control that displays a TextView and an associated ListView that lets you select an item from a list to display in the textbox. It’s made from a Text View displaying the current selection, combined with a button that displays a selection dialog when pressed.
❑Button Standard push-button
❑CheckBox Two-state button represented with a checked or unchecked box
❑RadioButton Two-state grouped buttons. Presents the user with a number of binary options of which only one can be selected at a time.
This is only a selection of the widgets available. Android also supports several more advanced View implementations including date-time pickers, auto-complete input boxes, maps, galleries, and tab sheets. For a more comprehensive list of the available widgets, head to
http://code.google.com/android/reference/view-gallery.html.
It’s only a matter of time before you, as an innovative developer, encounter a situation in which none of the built-in controls meets your needs. Later in this chapter, you’ll learn how to extend and combine the existing controls and how to design and create entirely new widgets from scratch.