Android learning route (4) Build a simple UI

Android learning route (4) Build a simple UI

The Android Application's graphical user interface is constructed usingViewAndViewGroupHierarchical nesting of objects.ViewObjects are usually UI parts, such as buttons or text fields, andViewGroupIt is a container used to define how its sub-layout is arranged. It is usually invisible, such as a grid or a vertical list.

Android provides the correspondence between XML words and View or ViewGroup subclass, so that you can define your UI through hierarchical nesting of XML elements.

Another Layout

Using XML to declare the UI is more useful than declaring in runtime code. It can be seen in many places, especially when you create different la s for different screens. For example, you create two la S and tell the system that one is for a small screen and the other is for a large screen. For more information, see Supporting Different Devices.

Figure 1. The illustration shows how the ViewGroup object is distributed and contains other View objects.

In this course, you will use XML to create a layout containing text field and a button. In the next course, you will learn how to respond to the button click event. When you press the button, the text in the text field will be sent to another Activity.

Create a linear Layout

Open in the res/layout directoryfragment_main.xmlFile.

Tip:In Eclipse, when you open a layout file, the layout Graph Editor is displayed first. This is an editor that uses WYSIWYG to help you edit the interface. In this course, you will learn how to work with XML directly, so clickFragment_main.xmlTab to open the editor.

The selected BlankActivity template containsfragment_main.xmlFile, the content of the file isRelativeLayoutRoot layout and oneTextViewSub-layout.

First, delete And Change element . Then addandroid:orientationAnd set its value"horizontal". As shown below:

LinearLayoutIs a view group (Subclass of ViewGroup), Its sub-layout will be horizontally or vertically linear layout, throughandroid:orientationAttribute.LinearLayoutThe sub-layout will be displayed on the screen according to the sequence in the XML file.

The other two attributes,android:layout_widthAndandroid:layout_heightYou must set all views to specify the width and height of the layout.

BecauseLinearLayoutIs the root layout, you need to set its height"match_parent"To make it visible throughout the screen. This value declares that the layout will extend its width or height to adapt to its parent layout.

For more information, see the Layout wizard.

Add a Text Field

To create a user-editable text field, you must Add in tag Element.

Just like allViewObject, you must define some XML attributes to specifyEditTextObject Attributes. The following shows you how Element to define it:

Resource object

A resource object is a simple and unique integer name associated with an application resource, such as a bitmap, layout, and string.

Every resource is stored ingen/R.javaFile. You use the object names of the R class to reference your resources. For exampleandroid:hintWhen the attribute specifies a string type value. You can also useandroid:idProperty to create a resource ID at will, so that you can reference this view in other code.

The SDK tool generates the R. java file every time you compile the application. Do not manually modify the content of this file.

For more information, see Providing Resources.

About these attributes:

android:id

It provides a unique identifier for this view. You can reference it directly in the application code, such as reading and operating this object (you will learn it in the next course ).

When you want to refer to other objects in the XML file, you need to use (@). It follows the resource type (id in this example), a slash, and the resource name.

+ This symbol must be added only when you define a resource ID for the first time. When you compile your application, the SDK tool creates the corresponding resource ID in the gen/R. java file using this ID name to correspond to the EditText element. Once the resource ID is defined in this way, the + number is not required for other IDs to reference. View the text on the right to learn more resource objects.

android:layout_widthAnd android:layout_height

You can use "wrap_content" to specify the view Size Based on the content,This parameter is used instead of directly specifying the view size. If you want to use "Match_parent", then EditTextThe element will fill the screen, and should be based on the parent Layout LinearLayoutTo adapt to the size. For more information, see the Layouts wizard. android:hint

This attribute is used to specify the content displayed when the text field is empty. Best use "@string/edit_message"Instead of assigning values directly in the code.

Tip:This character type has the same name as the element ID. However, their types are different, so the same name will not conflict.

Add a String resource

When you need to display text in the UI, you must set each string as a resource. String resources allow you to manage all the text on the UI in one place, making text update easier. This method enables localization (internationalization) for different languages when you provide string definitions for different languages ).

By default, your project contains a string resource file.res/values/strings.xml. Add a string named"edit_message"And set its value to "Enter a message ". (You can delete "hello_world)

In this file, add a "Send" string for the button you are about to add.

strings.xmlIt should be like the following:

   
       
    
     My First App
        
    
     Enter a message
        
    
     Send
        
    
     Settings
        
    
     MainActivity
    
   

Add a Button

AddElement to layout, followed Element:

Set its height"wrap_content"In this way, only the text in the button is displayed at a higher height than the desired height. It does not needandroid:idAttribute, because it will not be referenced elsewhere.

Fill the input box with the entire screen width

2. Two parts in the current layoutEditTextAndButtonThey only have the necessary size to adapt to their content.

Figure 2.EditTextAndButtonSet the property of a part"wrap_content".

In this way, the button can be displayed well, but the text field is different, because the user may enter longer text. Therefore, it is better to make the free part of the text field fully occupied by the screen. In LinearLayout, you can useandroid:layout_weightAttribute.

Weight is a value used to specify the space occupied by each view, which is relative to other la s at the same level. This work is a bit like the amount of ingredients in the drink formula: "2 portions of vodka, 1 portion of coffee liqueur" means 2/3 of the drinks are vodka. For example, if the weight of a view is 2 and the weight of another view is 1, the sum is 3, then the first view fills 2/3 of the remaining space, and the remaining parts of the second view. If you add a third view and give it a weight of 1, the first layout (weight 2) now occupies half of the remaining space, and the remaining two are each 1/4.

The default weight of all views is 0. Therefore, if you specify that the weight of only one view is greater than 0, it will occupy the remaining space of all other views. Therefore, to fill the remaining space with EditText, you only need to set its weight to 1, and then the button does not set the weight value.

When you specify the weight value, you should change the EditText width to 0dp to improve the layout efficiency. The reason for setting the width to 0 DP is that it calculates the width based on other views and fills the remaining space."wrap_content"It is useless to calculate the width through the system.

Figure 3 shows the effect of setting weights for EditText.

Figure 3.EditTextThe part is filled with all the weights.LinearLayout.

The complete code is as follows:

This layout is referenced by the Activity generated by the SDK tool when you create a project, so you can run this application to see the result:

• In Eclipse, click on the toolbar.
• Or, in the command line, change the directory to the project root directory and then execute:

  ant debugadb install bin/MyFirstApp-debug.apk