Front-end Android Primer (3) –MVC mode (top)

Many of the introductory books on Android, which are described in the previous layout, describe the components one by one, and then begin writing examples of component usage. Often at this time the small partners may have some questions: whether should chew a "Java programming idea" to learn Java knowledge? These components are used, but how do you organize them better?

As a matter of fact, Android and IOS have packaged the application hierarchy in a relatively simple and easy-to-use way, with rich documentation to match, so don't worry about using it. In fact, I would like to let you through this series of articles more attention and study the following two points, I will be in the selection of examples more involved in these aspects of knowledge.

• The idea of programming. Just as learning English, it is not necessarily possible to write good English articles.
• Find the ability to learn. Know how to find the key point of the problem and then find a way to solve it.

MVC is the most basic design pattern in software engineering and the Foundation for Good organization Code, as well as Android and IOS, so in the next three articles, we'll show you how to make a simple calculator application with the MVC pattern, let's go!

This big on (laughs) Calculator interface is as follows, this time completes the interface part first.

One, the interface restore preparation

First, open Eclipse, create an Android project, and name it: Calculator (for example)

At this point, the Mainactivity.java and activity_main.xml two files will be opened by default, Activity_main.xml for the interface layout file, Mainactivity.java for the program entrance file (not written this time).
Also, we open the res > values > Styles.xml file, and the relationship between Activity_main.xml and Styles.xml is equivalent to HTML and CSS.

We know that there are linearlayout,relativelayout and other layout elements in Android, this time we will use LinearLayout to complete the layout of the interface.

First, wait for me to take out this series of teaching assistants: Google great God

LinearLayout (linear layout), the definition given by the great God is:
Combines the child view elements in a single arrangement (layout), one by one, in a horizontal or vertical direction.

From the previous article we know that the View class is controlled by a class of two properties, so LinearLayout has its own properties, while the child elements in it can use the properties defined by Linearlayout.layoutparams, how do you find these properties? Of course to ask our great God.

LinearLayout class Reference

Information about these properties can be found in the XML Attributes of Summary, which is described in detail below, with each attribute clicked.

Several common properties:
1,android:orientation the child elements to be arranged horizontally or vertically by setting a value of "horizontal" or "vertical".
2,android:gravity sets the position of its contents (text, view) within the element, separating multiple values by the "|" Number (top,bottom,left,right,center,center_vertical,center_ Horizontal).
The 3,android:baselinealigned is set to "false" to a uniformly aligned baseline, which is primarily used to set the view element for different gravity of the text that can be displayed. It's not going to unfold.

What are the attributes of that linearlayout.layoutparams, as we find from the great God:

Linearlayout.layoutparams class Reference

From the previous article, I know xxx. The attributes defined by Layoutparams are used on elements within the layout.

1,android:layout_gravity lets the child element set its position relative to the parent element, which is set to the same value as android:gravity. Maybe someone will question, what is the difference between these two attributes?
Simply understand that android:gravity is applied to the content that it contains (the content can be text or a sub-view), while Android:layout_gravity is used on its own.

(Here's a question that you might encounter in a linear layout: android:layout_gravity-value invalidation.) For example, in a linearlayout set android:orientation = "Vertical", set a TextView layout_grivity = "Top" or layout_grivity = "Botto M "is invalid. Similarly, the "left" or "right" of the set element in android:orientation = "Horizontal" will be the same. Why is that? It is left to the small partners to think, in fact, it is reasonable to think of such a setting. ）

2,android:layout_weight The Great God also has lazy time, here unexpectedly did not explain. The great God put it in another place introduced. Css-like elastic box, set the value of-webkit-flex, equivalent to display weight. The situation will be many, the length question can only stay in the later article to explain. The strategy for using Layout_weight in this interface is that each element takes up "enough space" and then weighs 1 each, which means it is averaged.

Please take a look again. Introduction to Linear layout, LinearLayout linear layout

In the Prepare section, I did not directly list all the properties to introduce. But rather to show how to think and find solutions to the process. For the article did not expand the part, you can go to check, cultivate the habit of reading documents

Second, the production of the interface

The front is much more nonsense, since the linear layout, the interface directly with a TextView + 4 linearlayout vertical arrangement to do the layout. Such as:

Just as the CSS is written in HTML is "dirty" writing, then we should "high" point, the style of separation written in Styles.xml, Activity_main.xml in the way through @style/{classname} to leave our anchor point can be.
Here, ECLIPSE will hint that there are some errors in the XML because we have not set the corresponding resource name in the Styles.xml, regardless. will also prompt a modification suggestion, said the character hard-coded into the TextView, also can ignore.

At this point go to styles.xml, establish the corresponding "class name" (Note: here first set the Apptheme to: Android:Theme.NoTitleBar)

Once the class name is established, we can write the <body> style, which is set to vertical arrangement.
We will also create a resource file to set the color value, just as the Strings.xml function does.

Here we set the color values we will use, including the color of buttons and text.

Continue to write our Styles.xml file, through the Layout_weight settings, we will TextView and 4 LinearLayout split the space between the screen. and add the appropriate style for our TextView, while the linearlayout for placing the button is set to horizontal:

You can preview the restored interface by going to activity_main.xml and selecting the Graphical Layout tab at the bottom of the XML edit box. As we expected, TextView accounted for 1/5 of the space.

OK, we can start writing our button, we will implement the button element, the style of naming the operand with Btn_operand, the style of naming the operator with Btn_operate, and Btn_operate will inherit the Btn_operand style, Then re-set the background and text color, which is the same as using CSS.

Preview the interface. As we have imagined.

The rest is left to the small partners to continue to complete the time when the small partners try to make the interface, I will prepare the next article as soon as possible, we have any comments can leave a message to me. In addition, in view of the limited personal ability, in the article will be wrong, welcome everyone's correction, thank you for your support! Time reason, did not reply to the message in a timely manner first said sorry!

Something:

The next article will begin to involve Java code, a conditional classmate please prepare a "Java programming ideas", mechanical industry press, online should have a lot of pdf, of course, will not let you chew it, too wasted time. Because in the process of writing code, more or less involved in Java things, I will point out the need to see that part, thus the basic Java knowledge. Also, at the request of the small partners, I will find a place to write code to download. Off topic, "Java programming thought" is indeed a good book, as a reference or study, you can consider to prepare a copy.

Front-end Android Primer (3) –MVC mode (top)