Android training-Build a simple user interface

This article translated from: http://developer.android.com/training/basics/firstapp/building-ui.html

The graphical user interface of Android applications is built using the view and viewgroup object layers. Generally, view objects are some small UI windows, such as buttons and text fields. The viewgroup object is an invisible view container, which defines the layout of the Child view, such as in a grid or a vertical list.

Android provides an XML vocabulary that corresponds to the Child classes of view and viewgroup. Therefore, you can use the UI element hierarchy tree to define your UI in XML.

Figure 1. viewgroup object branch and its contained view object

In this course, you will include a text field and button layout in XML. In the following course, you will respond to the button-pressing event and send the content in the text field to another activity.

Tip:There are several reasons for declaring the layout in XML, rather than in the code at runtime. In particular, you can create different la s for different screen sizes. For example, you can create two la S and tell the system that the layout is "small" and that is "large.

Create a linear Layout

Open the Res/layout directoryActivity_main.xmlFile.

Note: In eclipse, when you open a layout file, you first see the graphic layout editor. This is an editor that uses WYSIWYG to help you build a layout. In this lesson, you will directly use XML to work. Therefore, click at the bottom of the screenActivity_main.xmlLabel to open the XML editor.

The activity_main.xml file in the project created using the blankactivity template contains a relativelayout Root View and a textview subview.

First, delete the <textview> element and change the <relativelayout> element to <linearlayout>. Add the Android: Orientation attribute to the element and set its value to "horizontal", for example:

<? XML version = "1.0" encoding = "UTF-8"?>

<Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android"

Xmlns: Tools = "http://schemas.android.com/tools"

Android: layout_width = "match_parent"

Android: layout_height = "match_parent"

Android: Orientation = "horizontal">

</Linearlayout>

Linearlayout is a window group (a subclass of viewgroup). The child view can be vertical or horizontal. The layout direction is specified using the Android: Orientation attribute. Each child element in linearlayout is displayed on the screen in the XML sequence.

To specify their dimensions, two other attributes are required: Android: layout_width and Android: layout_height.

Because linearlayout is the root view in the layout, you can set the width and height to "match_parent" to fill the layout in the entire screen area available for the application. This value declares that the view in the container should inherit the width and height of the container so that the sub-view can match the width and height of its parent view.

Add a text field

Add an <edittext> element to the <linearlayout> element to create an editable text field.

Like every view object, you must define some XML attributes to specify the attributes of the edittext object. The following content should be declared inside the <linearlayout> element:

<Edittext Android: Id = "@ + ID/edit_message"

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: hint = "@ string/edit_message"/>

The following describes these attributes:

Android: ID

This attribute provides a unique identifier for the view. You can use this identifier in the application code to reference the view object, such as reading and maintaining the object.

When referencing any resource object from XML, the @ symbol must be used. @ The resource type followed by the symbol (ID in this attribute), followed by "/", and then the Resource Name (eidt_message ).

You must add the "+" sign before the resource type only when you define the resource ID for the first time. When you compile the application, the SDK tool will use this ID name to create a new resource ID in the project's GEN/R. Java file to reference the edittext element. Once the resource ID is declared in this way, other references to this Id do not need to use the "+. "+" Is required only when a new resource ID is specified, and no specific resource, such as a string or layout, needs to be specified.

Android: layout_width and Android: layout_height

You should specify the "wrap_content" value for the width and height of the view, instead of the specific width and height, so that the view can have the same size as its content. If the value "match_parent" is used, the edittext element fills the screen, because it will be consistent with the linearlayout size of its parent element.

Android: hint

This attribute defines the default string displayed when the text field is empty. The "@ string/edit_message" value references a string resource defined in another file, rather than hard encoding of the string. Because it references a specific resource (not an identifier), it does not need "+. However, you will see a compilation error because you have not defined string resources. You can fix this error using the string defined below.

Note: The string resource uses the same name as the element ID attribute: edit_message. However, the scope of referenced resources is always limited by the resource type (such as ID or string), so using the same name will not cause a conflict.

Add string Resources

When you need to add text in the user interface, you should always specify each string as a resource. You can use a single location to manage all string resources related to UI text, which makes it easier to search for and update text. By providing an optional external definition of each string resource, you can implement application localization in different languages.

By default, your android project contains a string resource file: Res/values/strings. xml. Open the file and delete the <string> element named "hello_world", and add a new <string> element named "edit_message, and set its value to "enter a message"

In this file, add a "send" string to the button, called "button_send"

The strings. xml file is as follows:

<? XML version = "1.0" encoding = "UTF-8"?>

<Resources>

<String name = "app_name"> my first app </string>

<String name = "edit_message"> enter a message </string>

<String name = "button_send"> send </string>

<String name = "menu_settings"> Settings </string>

<String name = "title_activity_main"> mainactivity </string>

</Resources>

Add button

After the <edittext> element, add a <button> element to the layout:

<Button

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: text = "@ string/button_send"/>

Its height and width are set to "wrap_content", so the button will only be as large as the text filled in the button. This button does not need the Android: Id attribute, because it is not referenced in the activity code.

Adapt the input box to the screen width

In the current layout design, the size of edittext and button is as large as its content, as shown in Figure 2:

Figure 2. The edittext and button widths are set to "wrap_content ".

This style is good for buttons, but the text field is not very good, because users may enter longer characters. Therefore, it is better to fill the text field with unused width. You can use the weight attribute (Android: layout_weight) in the internal elements of linearlayout to do this.

This weight value is a number that specifies the amount of space remaining in the layout that each view should consume. This value is relative to the amount consumed by Sister views. This is a bit like a recipe for a drink: 2 servings of sofa and 1 coffee. This means that 2/3 of the amount of the drink is mona1. For example, if the weight of one view is 2, the weight of the other view is 1, and their sum is 3, the first view will consume 2/3 of the remaining space, the second view consumes the remaining parts. If you add the third view and set the weight to 1, the first view (the view with the weight of 2) will get 1/2 of the remaining space, the remaining space is 1/4 of each or.

The default weight of all views is 0. Therefore, if you specify any value greater than 0 for only one view, after all views are allocated to the space they need, the remaining space will be allocated to the view with a weight greater than 0. Therefore, if you want to fill the edittext element with the remaining space in your layout, you need to set the weight to 1 and not set the weight for the button.

<Edittext

Android: layout_weight = "1"

.../>

When specifying the weight, you should set the editetext width to 0 (0dp) to improve the layout efficiency ). Setting the width to 0 improves the layout performance. Because "wrap_content" is used as the width, the system also needs to calculate the width unrelated to weight calculation.

<Edittext

Android: layout_weight = "1"

Android: layout_width = "0dp"

.../>

Figure 3. The result of setting the weight for edittext is displayed.

Figure 3. edittext is given all the weights of the layout, so it fills in all the remaining space in linearlayout.

The following is a complete layout file:

<? XML version = "1.0" encoding = "UTF-8"?>

<Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android"

Xmlns: Tools = "http://schemas.android.com/tools"

Android: layout_width = "match_parent"

Android: layout_height = "match_parent"

Android: Orientation = "horizontal">

<Edittext Android: Id = "@ + ID/edit_message"

Android: layout_weight = "1"

Android: layout_width = "0dp"

Android: layout_height = "wrap_content"

Android: hint = "@ string/edit_message"/>

<Button

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: text = "@ string/button_send"/>

</Linearlayout>

This layout is applied to the default activity class generated by the SDK tool during project creation. Now you can run this application to see the result:

1. In eclipse, click the run button in the toolbar;

2. In the command line window, enter the root directory of your android project and execute the following command:

ant debug

adb install bin/MyFirstApp-debug.apk