Android Development Self-Study Notes (iii): app layout on _android

Hello, everyone, this article mainly describes how to begin to develop a beautiful, emotional, people love the android application, we know that there are many in the market layout is extremely exquisite, visually let people fondle admiringly application, if we start to develop, how should we do?

In mobile internet companies have such a number of departments –ux/ue and Ui,ux some also known as UE is to do user experience is the initials of users experience, these people are generally graduated from the Academy of Fine Arts design, we said that those exquisite procedures are often by their hands to design the effect of the first picture , and then to the UI, also known as the GUI that is graphic User interface or directly called the art of people will be the effect of the image of the real picture to give us cock silk code in the development of agriculture to achieve, the leadership of the audit after the art with the code farming, code farming and art communication how to cut Art is responsible for the high fidelity pixel picture, the amount ~ ~ Seemingly pull far, we today to introduce how to the art of the high fidelity to send over to our development, this is today's introduction of the content, page layout.

We can compare the Android interface to a page in a Web browser for the time being, where multiple interfaces are similar to a Web site with multiple pages, so Android apps do not have a front-end, back-end separation, Android's interface layout needs to be done by our Code farmers (formerly Web Development, is also by the code farming, but with the Web front-end separate, more and more Web services are separated from the front and back, a few yards of farmers specializing in the background, and then by a few yards of farmers responsible for the front-end, so write code more single-minded, The coupling is lower, so it appears that today's Web front-end this new career, I believe that in the near future mobile application development will also be separated, this is not only Android, including iOS.

The most common and most consistent page layout for Android development is: The XML file that defines the page layout in the Android Project project, defined in the subdirectory layout in the Res directory. Android defines interface elements hierarchically:

The View object encapsulates the most basic interface elements, such as buttons (button), input box (textfileds), and so on; ViewGroup is the container for view (Container), Common linearlayout, relativelayout, etc. , which means that each view object must be subordinate to a viewgroup, and viewgroup can contain the child viewgroup. The image below is a screenshot of the official website, which explains the relationship well.

It is important to note that ViewGroup is not visible in the layout, ViewGroup is just a good definition of what it contains (view or a viewgroup) layout, such as grid layout or linear layout.

This section focuses on adding a simple search page to the first use of the HelloWorld program to get a basic introduction to the Android page layout.

We create a new file named Search.xml under res/layout/and click OK:

Add ViewGroup
When we're done, we'll consider choosing a viewgroup, the simplest and most commonly used linear layout linearlayout:

<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 viewgroup, a subclass of ViewGroup in code that stipulates that all of its page elements are either vertically aligned or horizontally aligned.

The Android:orientation property is the alignment direction, where we select horizontal horizontal alignment. All page elements defined in this linearlayout will be lined up horizontally.

Android:layout_width/height because this linearlayout is already the topmost layout, we specify Layout_width and layout_height to match the topmost layout (because it does not exist, My understanding is that it matches the size of the device screen, so its value is match_parent.

Add EditText
Search Box We can choose to edittext this view to implement, so we linearlayout this node to add the sub-node EditText, the contents are as follows:

 <edittext android:id= "@+id/edit_message"
 android:layout_width= "Wrap_content"
 Wrap_content "
 android:hint=" @string/edit_message "/>

Android:id This representation defines a globally unique ID for this view element, and the value of our property is strange, and the ' @ ' symbol denotes a reference, followed by an ID that indicates a reference ID, and if we want to refer to a view in the layout (for example, relative layout), Relative to the position of a view, use the ' @ ' sign with the ID, and if you are defining the ID for the first time you need to add ' + ', where I'll set an ID value of edit_message.

And the same layout_width and layout_height that specify the size of this view, we assign a value of wrap_content, which means adapting to its own content, if you use Match_ as you just defined the LinearLayout Parent then this edittext will be as big as linearlayout.

Android:hint is the prompt, this only appears when your input box is empty, I think we all have experience in this area, its value also appears a ' @ ' and followed by string, then indicates that the reference is a string.

Define string Content

Since we do not define hint string, the preview interface prompts a warning, so next we need to define this string, open res/values/strings.xml, and add this string value as follows:

<?xml version= "1.0" encoding= "Utf-8"?>
<resources>
 <string name= "App_name" >helloworld </string>
 <string name= "Edit_message" > Please enter text </string>
 <string name= "Btn_message" > Search </string>
</resources>

This time my preview has changed and the warning disappears:

Add button

Just when I defined a string, I defined a string named "Search", so we went back to the previous layout file and added a button view, so we also added a button node under LinearLayout, which reads as follows:

 <button
 android:layout_width= "wrap_content"
 android:layout_height= "Wrap_content"
 @string/btn_message "/>

Android:text for the text displayed on this button, the same string is referenced here, and the effect is as follows:

Now that our page layout is complete, we will then bind it to our HelloWorld program, open the previous myactivity Java file, and modify the activity-bound page as Search.xml, as follows:

The public class MyActivity extends activity {
 /**
 * called the "when" is the "activity" is the.
 * *
 @Override public
 void OnCreate (Bundle savedinstancestate) {
 super.oncreate (savedinstancestate);
 Setcontentview (R.layout.search);
 }

Running programs
with the code modified, let's try to show how it feels on the Android real machine.

The

does not look particularly beautiful, as we set the size of the two view Edidtext and button to be wrap_content, which is adaptive only according to the length of the view itself, and the next one we will optimize the problem.