Build a simple user interface

Build a simple user interface

Android graphical user interfaces (interfaces) are built by using a hierarchical structure consisting of views and viewgroup objects. View objects are some common UI components, such as buttons, text boxes, and viewgroup objects are some invisible view containers. They define how to place sub-views, for example, in a table or vertical list.

 

Android provides an XML vocabulary, which is consistent with the subclass of view and viewgroup. In this way, you can use the hierarchy of interface elements in XML to define your interface.

Figure 1 illustrates how to branch a viewgroup object and contain other view objects in the layout.

 

In this lesson, you will create an XML layout that contains a development area and a button. In subsequent courses, after the button is pressed, you will respond and send the content of the development area to other activities.

 

Create a linear layout (linear layout)

In your project folderRes/layout,Open fragment_main.xml

Note: In eclipse, when you open a layout file, you will first be presented with a view layout editor. This is an editor that helps you build la s with WYSIWYG tools. In this lesson, you will use XML to work directly. In this way, clickFragment_main.xmlTag card to open an XML editor.

 

When you create this project, you select the blank activity template, which containsFragment_main.xmlThis file,RelativelayoutIs Its Root View and contains a textview subview.

 

Step 1: Delete<Textview> element and change<Relativelayout>The element is <linearlayout>. This is, addAndroid: OrientationAnd set the value to "horizontal ". The result is as follows:

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

LinearlayoutIs a view group (a subclass of A viewgroup). It places its subviews in either vertical or horizontal directions.Android: Orientation attribute to specify the direction. The order in which each linearlayout subview appears on the screen is the same as that in XML.

 

The other two attributes,Android: layout_widthAndAndroid: layout_height, which is required for all views to indicate their sizes.

 

BecauseLinearlayoutIs the Root View of the layout. When its width and height are set to "match_parent", it will fill the entire available screen area of the application. This value defines how views expand their width and height to match the width and height of their parent controls.

 

For more information about layout attributes, see the layout guide.

 

Add a partition

To create a user-editable partition<Linearlayout>. Add<Edittext> element.

Like each view, you must define a fixed XML Attribute to specify the attributes of the edittext object. The following shows how you<Linearlayout>Define it in the element:

EditText android:id="@+id/edit_message"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:hint="@string/edit_message" />

About these attributes:

Android: ID

It provides a unique identifier for this view. With this identifier, You can reference this object in your code, such as reading and operating this object (you will see it in the next chapter)

When you apply resource objects from XML, the symbol "@" is required. Then follow the resource type (here is the ID type), a diagonal line, then followed by a Resource Name (here is called edit_message)

The "plus sign" before the resource type is required only when you first define the resource ID. When you compile your program, the SDK tool uses the ID name to create a resource ID

 

Build a simple user interface