Make a simple user interface

Make a simple user interface

In this lesson, let's develop an XML layout file that contains a text field, an input box , and a button . In the next lesson, we'll teach you how to jump to another activity when you press a button.

Here's a quick explanation of the Android interface's composition . The Androidapp interface is built using View and viewgroup . View is often our common UI widget, such as button buttons, text control TextView , and so on, while ViewGroup is a view container that restricts how the view in this container is arranged, such as The GridView is the sort of grid type, andthe ListView is a list that is arranged from the top down.

Android, in the development of the interface, you can use XML files to define the interface UI and UI hierarchy, and so on.

The layout of Android is actually belong to a certain class of viewgroup, then this lesson, we will use the linear layout linearlayout.

A picture that shows the relationship between view and ViewGroup

Create a new layout file

Inside 1.Android Studio, under the res/layout folder, open the activity_main.xml file.

At the beginning of the project creation, the blankactivity template automatically creates this XML layout file, which automatically generates a Relativelayout relative layout with a TextView text control that displays a line of text, "helloworld! ”

2. In the preview panel, right preview section, click this button in the upper right corner of the preview panel to hide the preview.

In Android Studio, when you open a layout file, the preview screen is displayed the first time, which is called WYSIWYG (what you see is whatyou get). When you click on one of the elements in the preview, the edit panel automatically navigates to the corresponding code location. In this lesson, we are primarily working with XML code directly to develop our layout files.

3. Delete TextView elements

4. Change Relativelayout to LinearLayout element

5. Add an attribute to the LinearLayout element, Android:orientation, and set to "horizontal".

6. Delete LinearLayout's padding and Tools:context properties

Last modified to this:res/layout/activity_main.xml

1 <linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" 2     xmlns:tools= "/http/ Schemas.android.com/tools "3     android:layout_width=" match_parent "4     android:layout_height=" Match_parent "5     android:orientation= "Horizontal" >6 </LinearLayout>

　　

LinearLayout is a layout that arranges the view elements in a horizontal or vertical order, and can be set in the direction of the android:orientation by this property. Each child element is displayed in this layout in the order that one after the other.

The other two properties, Android:layoutwidth and android:layoutheight, represent the width and height of this layout, respectively.

Since this linearlayout is the layout of a root view above this interface, we usually set the section and height to "match_parent". This value means as much as possible to enlarge the current layout so that he fills his parent layout. Of course, this linearlayout is already the layout of the root view, so this place is directly covered with the entire screen.

For more information on layout properties, refer to here.

Add a text input box

When adding a text input box edittext, you have to set some specific properties.

1.activity_main.xml file, inside the <LinearLayout> element, define a <EditText> element, and then set an id attribute with a value of @+id/edit_message.
2. Set the Layout_width and Layout_height properties with a value of wrap_content.
3. Set the Hint property, the value is a string object, the name is Edit_message.

The code reference is as follows:

1 <edittext android:id= "@+id/edit_message" 2     android:layout_width= "wrap_content" 3     android:layout_ Height= "Wrap_content" 4     android:hint= "@string/edit_message"/>

Let's take a look together, the text input box EditText A total of the following properties:

　　android:id


This property specifies a specific ID for this element, which should be unique within the current layout file. With this ID set, we can easily find the element in the code, reference the element, and do some manipulation. (This will see a specific usage in the next lesson).

When you need to reference any object in the XML file, you need to use the @ symbol. Usually followed by the @ symbol, is the resource type, followed by a slash "/", and then the resource name, such as the above "Edit_message".

The "+" in front of the resource type only needs to be written when you need to define a new resource ID. When you compile the app, the SDK tool will recognize these new resource IDs and create them into one by one corresponding R.java (Gen/r.java) files. When this ID is defined in this way, there is no need to add "+" when referencing the resource ID elsewhere. Therefore, only in the new definition of an ID need to use this "+", referring to other resources, such as string,layout, etc., do not need to write this "+".

　　android:layout_widthAndandroid:layout_height

"Wrap_content" means that the size of the view element, consistent with the size required by his content, will be resized in real time based on demand. If "Match_parent" is set here, the EditText will fill the entire screen directly, because this value indicates that the entire parent layout linearlayout.

　　android:hint

This value indicates what kind of suggestive text to display when the text input box is empty. You can see that this is not directly behind this hint with a string, such as "Enter Name here," such as hard-coded, but "@string/edit_message", which represents a reference to a resource file within the definition of a string value. Google will recommend the use of this reference resources, more flexible, and if the habit, in some complex projects, to a certain extent, to improve the quality of the code. There will be an error when the reference is finished here. Don't worry, just take it slow.

Here you will find that the resource name referenced here is the same as the ID of the edittext that we define, but there is no conflict, hint. This is actually because the resource type is different, the above definition is the ID, and the following is a string. When the resource type is different, naming the same is not a relationship.

Add a string resource

In general, the resource folder for your Android project has such a resource file res/value/strings.xml that is dedicated to storing strings. Add a new string named "Edit_message" here and set the value to "Enter information".

1.AndroidStudio inside, find Res/values directory, open Strings.xml.

2. Add a row with a string called "Edit_message" and a value of "input information".

3. Add a row with a string called "Button_send" and a value of "send". Next we'll make a button, so add the text on the button in advance.

4. Remove the string "Hello World".

In the end, Strings.xml should be like this:

1 <resources>2     <string name= "App_name" >my application</string>3 4     <string name= "Edit_ Message ">enter a message</string>5     <string name=" Button_send ">send</string>6     < String Name= "Action_settings" >settings</string>7 </resources>

For text in the user interface, use the string resource as much as possible. When you use resources to process, you can only modify the content of this resource, you can change all references to this resource, this will make the app in the future have a good maintainability. Moreover, this kind of manipulation of the string is also beneficial to the localization development of the app, that is, automatically compatible with multiple sets of languages. For more information on localization development, refer to here.

Add button

1. In Android Studio, select the Res/layout directory and edit the Activity_main.xml file.
2. In the LinearLayout element, define a button element and place it behind the edittext element.
3. Set the width and height of this button is "wrap_content", so that the size of the button will be set on the button on the size of the text automatically adjusted.
4. Define the Android:text property of the button, and the value is the string resource of "Button_send" you defined above.

Now this linearlayout should be like this:

1 <linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" 2     xmlns:tools= "/http/ Schemas.android.com/tools "3     android:layout_width=" match_parent "4     android:layout_height=" Match_parent "5     android:orientation= "Horizontal" > 6       <edittext android:id= "@+id/edit_message" 7         android:layout_ Width= "Wrap_content" 8         android:layout_height= "wrap_content" 9         android:hint= "@string/edit_message"/>10       <button11         android:layout_width= "wrap_content"         android:layout_height= "Wrap_content         " android:text= "@string/button_send"/>14 </LinearLayout>

tip: The button above does not have the id attribute set, because in the code we don't use it for the time being.

In the preview can be seen, input boxes and buttons, according to their own content size, adjusted to a certain size.

It looks like the button is normal, but the width of the input box, when the user input more and more of the time, we set it really appropriate? In fact, the better setting is to let the width of the input box in addition to the button all the horizontal space is taken out, the button to the right. this teaches you a linear layout of commonly used properties, android:layout_weight .

Weight is a simple number that represents the horizontal or vertical ratio of the view in the current linear layout (depending on the direction of the LinearLayout). It's kind of like a drink recipe, like "2 servings of soda, 1 servings of syrup," meaning two-thirds of the drink is soda, and one-third is syrup. For example, there are two view, the first view setting weight is 2, the second is set to 1, then the total weight 3, the first view will occupy 2/3, the second is only 1/3, this time, if you add a view in, set weight is 1, Then the first one accounted for 1/2, the back two accounted for 1/4, because at this time the total amount of weight into 4.

And here, only one set of weight means that the view can stretch itself as much as possible, taking up all the spare parts.

Fills the input box with the screen

In order for the EditText to fill the rest of the space, you need to do this:

1. In the Activity_main.xml file, add an attribute Layout_weight value of 1 to EditText.

2. Then, modify the EditText's Layout_width property value to 0DP.

At this point, the Res/layout/activity_main.xml file should be:

    <edittext android:id= "@+id/edit_message"        android:layout_weight= "1"        android:layout_width= "0DP"        android:layout_height= "Wrap_content"        android:hint= "@string/edit_message"/>

When you set the weight, the width is finally set to 0DP instead of theother values. Because if you set up such as "wrap_content", the system will be based on the parameters to calculate the view width corresponding to this value, and because of the setting of weight, here the calculated width is not valid, must be recalculated according to weight value again, This leads to a waste of performance.

When set up, the preview image is as follows:

At this point, the entire layout file res/layout/activity_main.xml should look like this:

<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>

Run the App

• 1.AndroidStudio, click the Run button directly.
• 2. Command-line mode

Ant debugadb Install bin/myfirstapp-debug.apk

The next section tells you how to click on the button to upload the contents of the text box to another interface.

Make a simple user interface