Teach you about the MVC pattern of Android

Many of Android's introductory books, which are introduced as soon as the layout is finished, introduce the components one at a time, and then start writing the components using the example. Every time when the small partners may have some doubt: should be chewed out a "Java programming thought" first to learn Java knowledge? When you use these components, how do you organize them better?

In real life, Android and IOS have made the application level more simple to use, but also with rich documents to match it, so there is no need to worry about how to work. And the author I want to let you through this series of articles of attention and learning below two points, the author will also be in the selection of examples of many involved in these aspects of knowledge.

Programming ideas. Just as learning English, but not necessarily can write good English articles. Find the ability to learn. is to find a solution by knowing how to find the key point of the problem.

MVC is the most basic design pattern in software engineering and is the basis for well-organized code, as is the case with Android and IOS, so in the next three articles, we'll explain how to make a simple calculator application using the MVC pattern, let's go!

This tall (laugh) Calculator interface is as follows, this time completes the interface section first.

First, the interface restore preparation

First, open Eclipse, create an Android project, and name it: Calculator (pictured below)

At this point, the default is to open the Mainactivity.java and activity_main.xml two files, activity_main.xml for the interface layout file, Mainactivity.java for the program entry file (this time without writing).
At the same time, we open res > values > Styles.xml files, and the relationship between Activity_main.xml and Styles.xml is equivalent to HTML and CSS.

We know that Android has linearlayout,relativelayout and other layout elements, this time we first use LinearLayout to complete the layout of the interface.

:) First of all, let me give you the teaching assistant for this series: Google great God.

LinearLayout (linear layout), the definition given by the great God is:
A view group (layout) that arranges the child view elements one after the other in either horizontal or vertical direction.

From the previous article we know that the View class controls its visual rendering by two classes of attributes, so LinearLayout has its own properties, and the child elements in it can use linearlayout.layoutparams defined attributes, so how do you find these attributes? Ask our great God, of course.

LinearLayout class Reference

From the Summary XML Attributes, you can know the information profile of these attributes, and click on each attribute, which is described in detail below.

Several common properties:
1,android:orientation? By setting the value to "horizontal" or "vertical", the child elements are arranged horizontally or vertically.
2,android:gravity? Sets the position of its content (text, view) within the element, separating multiple values with a "|" Number (top,bottom,left,right,center,center_vertical,center_ Horizontal).
3,android:baselinealigned? The baseline, set to false, that is uniformly aligned, is primarily used to set up a view element with different gravity to display text. It's not going to start here.

That? What are the attributes of linearlayout.layoutparams, as we find from the great God

1,android:layout_gravity sets the child element to its position relative to the parent element, setting the value as android:gravity. Some people might wonder, what's the difference between these two attributes?
The simple point is that android:gravity is applied to what it contains (the content can be text or a child view), while the android:layout_gravity applies to itself.

(It also points out a problem that you might encounter in a linear layout: Android:layout_gravity Set value invalidation.) For example, in the LinearLayout setting the Android:orientation = "vertical", set a TextView layout_grivity = "Top" or "layout_grivity". is ineffective. Similarly, setting the element's left or right in android:orientation = "Horizontal" will be the same. Why is that? Left to the small partners to think about, in fact, this setting is reasonable. ）

2,android:layout_weight The Great God also has lazy time, here unexpectedly did not explain. The great God put it in another place to introduce. Css-like elastic box, set the value of-webkit-flex, equivalent to display weight. The situation will be many, the question of space can only be left behind in the article to explain. This interface makes use of layout_weight strategy is: Each element takes "big space", then each weight is 1, thus the average.

Would you please look at the introduction of a linear layout? LinearLayout Linear layout

In the preparation section, I did not list all the attributes directly to introduce. But rather to show how to think and find solutions. For the article did not expand the section, you can check, cultivate the habit of reading the document:)

Second, the production of the interface

In front of a lot of nonsense, since the linear layout, the interface directly with a TextView + 4 linearlayout vertical arrangement to do the layout. The following figure:

Just as the CSS written in HTML is "dirty" writing, then we should be "high" point, the style of separation in the Styles.xml, Activity_main.xml in the @style/{classname through the way to leave our anchor point can be.
Here, Eclipse prompts you for a number of errors in the XML because we haven't set up the corresponding resource names in the Styles.xml. Also prompts a modification suggestion, say the character hard code into TextView, also can ignore.

Now go to Styles.xml, set up the corresponding "class name", (note: Here first set Apptheme to: Android:Theme.NoTitleBar)

After the "class name" is created, 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 Strings.xml does.

Here we set the color values we used, including the buttons and the text.

Continue to write our styles.xml files, and through Layout_weight setup, we will TextView and 4 linearlayout split the screen space. and add the appropriate style to our TextView, and the linearlayout that is ready to place the button is set to the horizontal arrangement:

At this point, go to Activity_main.xml and select graphical Layout tab at the bottom of the XML edit box to preview the restored interface. As we had expected, TextView accounted for 1/5 of the space.

OK, we can start writing our button, we'll use the button element to implement the buttons, use the style of the btn_operand named operand, use the Btn_operate name operator, and Btn_operate will inherit the Btn_operand style. Then reset the background and text colors as if you were using CSS.

Preview the interface. Just like we thought.

The rest is left to the small partners to continue to complete the:)?? In the small partners to try to make the interface time, 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 ability of the individual, in the article will appear wrong, welcome everyone to correct, thank you for your support! Time reason, did not reply in time the message also first say sorry!

Something：

The next article will start with Java code, conditional students please prepare a "Java programming idea", machinery industry press, the Internet should have a lot of PDFs, of course, will not let you chew it, too waste of time. Because in the process of writing code, more or less will involve Java things, I will point out the need to look at the part, so that the basic Java knowledge to learn. In addition, at the request of the small partners, I will find a place to provide the written code download. On the other, "Java programming thought" is really a good book, as a reference or study, you can consider preparing a copy.

This article by Tencent Isux Copyright, reprint, please specify the source