Android development of the basic control and four kinds of layout details _android

Controls in Android are used in the same way as controls in iOS, and are event-driven. Adding an event to a control also has the way of an interface callback and a delegate proxy. Today's blog summarizes the basic controls and layouts used in Android. When it comes to layout, Android and iOS are still quite different, with frame absolute layout and AutoLayout relative layout in iOS. And in the Android layout is more rich, today's blog will introduce four kinds of commonly used layout methods. First summarize the controls, and then do a basic way to develop the environment or use the Mac under the Android Studio. Start today's topic, although the Android control and layout can be dragged and implemented, today in order to more detailed understanding of the control and layout, we use the form of pure code to implement and introduce.

First, the common basic control

1.TextView

Looking at the TextView in Android, I couldn't help thinking about the Uilabel in iOS development. Literally, TextView is a text view, just for displaying text. In iOS is called the label, that is Uilabel. To display TextView in the activity, we need to add the corresponding control tag in the corresponding layout file, the Layout.xml file corresponding to the activity. These XML tags can determine the position, size, color, and so on of the control. Below is a textview shown in the activity. The layout code is as follows:

<textview
android:id= "@+id/name_text_view"
android:layout_width= "match_parent"
android:layout_ height= "Wrap_content"
android:gravity= "center"
android:textsize= "sp"
android:textcolor= "#beea"
android:text= "My name is Zeluli"/>

Tag <TextView/> means that we want to add a TextView to the activity, and you can set some properties in the tag.

(1). The Android:id property represents the ID of the TextView, the unique indication of TextView, in which we can get the control through the Findviewbyid () method in the Java code. The unique ID for the above control is Name_text_view.

(2). The Android:layout_width property represents the width of the control, and the value of the property is match_parent, which means that the control has the same width as the parent view.

(3). The Android:layout_height property represents the height of the control, and the value of the property is wrap_content, which means that the height of the control changes depending on the height of the content.

(4). The Android:gravity property represents the alignment of the text in the TextView, and there are several ways in which we select Center and center display.

(5). The Android:textsize property represents the model of the text in the TextView, which is the size of the text.

(6). The Android:textcolor property sets the color of the text in the TextView, and the value of the property is a color value of 16.

(7). The Android:text property is the value that is used to set the TextView display.

How do we get the above control in the Java class, which is the activity, and the code below is to use the Findviewbyid () method to get the above control by ID, get the value in TextView, and set the value in TextView. The specific code is as follows.

TextView Mytextview = (TextView) Findviewbyid (R.id.name_text_view);
String MyText = Mytextview.gettext (). toString ();

After setting up the properties above, you will see the following effects in the activity:

2.Button

The buttons on Android are called Button, while in iOS it's called UIButton. The use of the two is very similar. or similar to the above, we need to add a button to the layout.xml of the activity's corresponding layout file, as shown in the following XML code. <Button/> tag is the Button, where the attributes and property values do not too much to repeat, the above has been mentioned.

<button
android:id= "@+id/click_button"
android:layout_width= "match_parent"
android:layout_ height= "Wrap_content"
android:text= "dot Me"/>

In the activity class also uses the Findviewbyid to obtain this button through the ID, after obtains the button we need to bind the button to hit the event. That is, click on the button to do things, below gives two ways, one is the form of block, one is the form of the principal agent.

(1). Interface callback in the form of binding fixed-point hit event

Button button = (button) Findviewbyid (R.id.click_button);
Button.setonclicklistener (New View.onclicklistener () {
@Override public
void OnClick (View v) {
// Click on the button to do things
}
});

(2) Principal-agent

Button.setonclicklistener (this);
Methods to override delegate callbacks
/**
* Called when a view has been clicked.
*
* @param v The view that is clicked.
*/
@Override public
void OnClick (View v) {
switch (V.getid ()) {case
R.id.click_button:
// Click on the button to do things break
;
Default: Break
;
}
}

The above steps will add a button underneath the TextView, and the effect looks like this

3.EditText

Next, add an input box for the activity, and the type and label of the input boxes in Android are edittext. The input box in iOS is Uitextfield, in fact, the two are similar in use, the function is to receive user input data. Below is the way in which the XML is laid out.

<edittext
android:id= "@+id/edit_text"
android:layout_width= "match_parent"
android:layout_height = "Wrap_content"
android:hint= "placehoder:type something Here"
android:maxlines= ""/>

There are two more attributes in the top edittext tag than before:

(1). Android:hint property is a string, in fact, is used to placeholder the string, the function is to prompt the user what the input box is, in the development of iOS is called placeholder.

(2). Android:maclines is used to set the maximum number of rows for the input box.

Getting the EditText object in the activity is also through the ID, and the bottom code is to get the EditText object instantiated by ID and get the text to be displayed on the toast.

EditText Myedittext = (edittext) Findviewbyid (r.id.edit_text);
String Inputtext = Myedittext.gettext (). toString ();
Toast.maketext (Mainactivity.this, Inputtext, Toast.length_short). Show ();

The input box looks like this:

4.AlterDialog (Warning box)

Toast is used to display hints, and alterdialog is a warning box that can have some controls, such as buttons. Alterdialog is actually Alterview in iOS (added Uialtercontroller after iOS8). The following code is the code that initializes the Alterdialog and displays it, and the code below is placed in the method that is triggered by the click button.

(1) Alterdialog is created by Alterdialog Builder, which is specified at the time of creation and is displayed on that activity.

(2) by Settitle method to Alterdialog set the title, through the Setmessage to Alterdialog set content.

(3) Setcancelable () method, where we set the time false, indicates that the pop-up alterdialog in the user clicks the return key is not gone, and the value defaults to true.

(4) The Setpositivebutton () method is set to click the "OK" button when the event, Setnegativebutton is set to click the "Cancel" button event. Display the click of the event through toast.

Alertdialog.builder Alterdialog = new Alertdialog.builder (mainactivity.this);
Alterdialog.settitle ("cue box");
Alterdialog.setmessage ("hint content");
Alterdialog.setcancelable (false);
Alterdialog.setpositivebutton ("OK", new Dialoginterface.onclicklistener () {
@Override public
void OnClick ( Dialoginterface dialog, int which) {
toast.maketext (mainactivity.this, "OK", Toast.length_short). Show (();
}
) ;
Alterdialog.setnegativebutton ("Cancel", new Dialoginterface.onclicklistener () {
@Override public
void OnClick (dialoginterface dialog, int which) {
Toast.maketext (mainactivity.this, "Cancel", Toast.length_short). Show ();
}
);
Alterdialog.show ();

The following is the effect of the above Alterdialog display.

5.ProgressBar (progress bar)

Progress bar, is usually downloaded things common to indicate the download progress of the control. ProgressBar is similar to the Uiprogressview in iOS and is very similar in usage. First you need to set the layout and style for ProgressBar in the XML file for the activity. Below is the layout and style of the ProgressBar.

<progressbar
android:id= "@+id/my_progress_bar"
android:layout_width= "Match_parent"
android: layout_height= "Wrap_content"
style= "android:attr/progressbarstylehorizontal"
android:max= ""/>

We can set the maximum progress of ProgressBar by Android:max, and style can set different styles for ProgressBar. ProgressBar has a variety of styles, you can choose different styles based on different scenes, and below is an optional style.

After the ProgressBar is configured in the XML, it can be acquired by ID in the code and a series of operations are performed on the ProgressBar. The code below is also placed in the button's click event, and the progress bar is increased by 10 per click, until the ProgressBar becomes invisible when the maximum value is added. becomes invisible, then the progress is set to 0.

ProgressBar MyProgressBar = (ProgressBar) Findviewbyid (R.id.my_progress_bar);
Myprogressbar.setprogress (myprogressbar.getprogress () +);
if (myprogressbar.getprogress () = = Myprogressbar.getmax ()) {
myprogressbar.setvisibility (view.gone);
Myprogressbar.setprogress ();
} else {
myprogressbar.setvisibility (view.visible);
}

6.ProgressDialog (Progress Tip box)

ProgressDialog plainly is to add progress on the Alterdialog, progressdialog do not need to configure in the XML, directly in the code to generate. Below is the progressdialog that is added in the delegate-agent method of the button click, and the ProgressDialog is displayed when the button is clicked.

/**
* Called when a view has been clicked.
*
* @param v The view that is clicked.
*/
@Override public
void OnClick (View v) {
switch (V.getid ()) {case
R.id.click_button:
ProgressDialog Myprogressdialog = new ProgressDialog (mainactivity.this);
Myprogressdialog.settitle ("ProgressDialog");
Myprogressdialog.setmessage ("Loading ...");
Myprogressdialog.setcancelable (true);
Myprogressdialog.show ();
break;
Default: Break
;
}
}

The operation effect is as follows:

Two or four large layout mode

There are five major layouts in some places, because there is an absolute layout (absolutelayout) that controls the position of the control by its coordinates and height, and this layout has been deprecated in Android development, so it is no longer covered today. The layout to be introduced today is linear layout (linearlayout), relative layout (relativelayout), frame layout (framelayout), table layout (tablelayout). The first two are commonly used, so today we will focus on the discussion of LinearLayout.

Speaking of the layout in Android, I'd like to compare the layout in iOS development. It can be said that there are two basic types of iOS layout, one is absolute layout, the other is relative layout. The absolute layout is to determine the position and size of the control by setting the coordinate origin and the height of the control by frame (x, y, width, height). Because of this layout, once the frame is set, the position and size of the control are fixed, so it becomes an absolute layout.

Another type of iOS layout is the relative layout, in iOS development can use AutoLayout + Sizeclass to determine the location and size of the control. We can control the size and position of controls by adding different constraints to the controls (wide, high, up and down, centered, vertically horizontally), and so on. This approach is more flexible when it comes to screen adaptation and is often used in iOS development. About the loudness layout in iOS development you can add constraints to controls through the VFL (visual format language), or you can add constraints by storyboard visually.

The way iOS is laid out is to talk about this, and then back to the way Android is laid out. In several layouts of Android development, you are not allowed to specify the coordinates of the control, which means you are not allowed to specify the position of the control, because a particular layout has its own way of calculating the coordinates of the control. But in different layout ways you need to specify the height of the control. Next is a detailed introduction to the layout of Android development.

1. LinearLayout (Linear layout)

Speaking of LinearLayout, I'd like to say a bit about streaming layouts. In fact, LinearLayout is a flow layout, the flow layout has a feature, that is, the next control's coordinate origin is determined by the previous control, you can arrange your control in horizontal or vertical direction. If your control is vertically arranged, you can assign a horizontal center to the control (which may be abstract and described below by an instance). Next, we will introduce linearlayout through a series of examples.

(1) There is a picture below, we want to achieve the layout below, if the use of linearlayout to achieve how to do it.

(2) First we analyze the layout of the way, each block to split, analysis, and then through the linearlayout to combine together. We split the above layout, name the linearlayout used, and specify how the child views are laid out (V-vertical, H-level), and see the following figure. At the bottom we used a horizontal layout of the LINEARLAYOUT1, and on the LinearLayout01, there are two LinearLayout11 and LinearLayout12 that are equal to the height of the parent view, and the layout of the child controls is arranged vertically. In LinearLayout12, there are two sub linear layouts LinearLayout121 and LinearLayout122, which are arranged vertically on top of the parent layout, and the width is equal to the parent layout.

(3) above said so much, then look at the above layout of the specific implementation of it, the layout of the hierarchy chart as shown below

The implementation of XML is as follows, in the implementation you can set the horizontal (horizontal) linear arrangement or the vertical (vertical) linear arrangement by the Android:orientation property. About the PT and other such units, the next blog will give you a detailed introduction.

<relativelayout 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: paddingleft= "@dimen/activity_horizontal_margin" android:paddingright= "@dimen/activity_horizontal_margin" Android :p addingtop= "@dimen/activity_vertical_margin" android:paddingbottom= "@dimen/activity_vertical_margin" tools: context= "Com.example.lizelu.userinterfacedemo.MainActivity" > <linearlayout android:layout_width= "Match_
Parent "android:layout_height=" Match_parent > <!--vertical linear layout way--> <linearlayout android:layout_width= "PT" android:layout_height= "Match_parent" android:background= "#ff" android:orientation= "vertical" > </ linearlayout> <linearlayout android:layout_width= "match_parent" android:layout_height= "Match_parent" Android
: orientation= "Vertical" > <linearlayout android:layout_width= "match_parent" android:layout_height= "PT" Android:background= "#ff" android:orientation= "Horizontal" > </LinearLayout> <linearlayout android:layout_width= "Match_parent" android:layout_height= "Match_parent" android:background= "#ff" android:orientation= "Horizontal" > </ linearlayout> </LinearLayout> </LinearLayout> </RelativeLayout>

(4) The alignment of the vertical layout control (left, Center, right). A vertically-oriented control in which we can specify alignment alignment horizontally. To illustrate the problem, I would like to draw a picture to explain this seemingly simple problem. We can specify the method by the Android:layout_gravity property of the control. In vertical layout, vertical alignment (top, center, bottom) does not work because the vertical position is already determined by the vertical linear layout, so the layout_gravity does not work.

The principle is here first, and then it's implemented, and we'll add the lower child controls to the LinearLayout11 layout. Each child control specifies a horizontal alignment, as shown in the following code:

<button
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:layout _gravity= "left"
android:text= "AA"/>
<button
android:layout_width= "Wrap_content"
android: layout_height= "Wrap_content"
android:layout_gravity= "center"
android:text= "BB"/>
<button
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:text= "CC"
android:layout_gravity= "right"/>

After adding code, the effect is as follows:

(5) The alignment of horizontal layout controls (top, Center, Bottom). If the controls are arranged horizontally, then we can assign them a vertical alignment, top, center, and bottom. is also specified by the Android:layout_gravity property. To illustrate the principle, I would like to use a picture to express:

The principle is finished, followed by the above routines, we in the above layout and alignment, on the LinearLayout121 to add three of the above layout button. The specific code looks like this:

<button
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:layout _gravity= "Top"
android:text= "AA"/>
<button
android:layout_width= "Wrap_content"
android: layout_height= "Wrap_content"
android:text= "BB"
android:layout_gravity= "center"/>
<button
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:layout_ gravity= "Bottom"
android:text= "cc"/>

The next step is to run the result:

(6) A property that has to be mentioned in a linear layout is android:layout_weight, which allows you to specify the size of the control in proportional form. What we're going to do next is add three buttons in the horizontal direction to the LinearLayout122. Using the Android:layout_weight property, it is easy to implement, because the principle is relatively simple, do not draw schematic, below is the specific XML implementation:

<button
android:layout_width= "PT"
android:layout_height= "wrap_content"
android:layout_weight= ""
android:text= "Hello"/>
<button
android:layout_width= "PT" android:layout_height= "
wrap_" Content "
android:layout_weight=" "
android:text=" Android "/>
<button
android:layout_ Width= "PT"
android:layout_height= "wrap_content"
android:layout_weight= ""
android:text= "IOS"/ >

The actual effect is as follows:

Linear layouts come here first, because linear layouts are often used in Android development, so there's a lot more to be introduced. There are many other uses for linear layouts, which are described in detail when used in a blog post.

2.RelativeLayout (relative layout)

The above also said a relative layout, the nature of the relative layout is status quo. That is, the relative layout can determine the location of other new controls based on the controls that have been fixed. Relative to the layout is still quite a lot of, next we will be an example to introduce the relativelayout.

First we look at the effect we want to achieve, the idea is that we first based on the center of the parent view to determine the location of the Center_button, and then by the location of center and parent to determine the location of other buttons, this is the relative layout.

In the relative layout, you can set the properties as shown below, or quite a lot. In this blog will not do one by one, its usage is similar. As shown in the following illustration:

The XML code to achieve the above effect is as follows, and the relative layout is relatively simple to use and understand.

<relativelayout 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 "Tools:context" = "Com.example.lizelu.userinterfacedemo.MainActivity" > <button android:id= "@+id/button_center" Android: Layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_centerinparent= "true" Android: text= "center"/> <button android:id= "@+id/button_above" android:layout_width= "Wrap_content" Android:layout_ height= "Wrap_content" android:layout_above= "@+id/button_center" android:layout_centerinparent= "true" Android:text = "Above"/> <button android:id= "@+id/button_below" android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_below= "@+id/button_center" android:layout_centerinparent= "true" android:text= "below "/> <button android:id=" @+id/button_left "android:layout_width=" wrap_content "android:layout_height=" Wrap_ ContenT "android:layout_toleftof=" @+id/button_center "android:layout_centervertical=" true "android:text=" left "/> <
Button android:id= "@+id/button_right" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:layout_torightof= "@+id/button_center" android:layout_centervertical= "true" android:text= "right"/> < /relativelayout>

3. Frame Layout (framelayout)

When it comes to frame layout, it is simpler and easier to understand, and the frame layout is not very useful, but his existence still has his necessity. Frame in framelayout and frame in iOS is not a concept, in iOS frame you can specify any coordinates, and this coordinate point is relative to the parent view. The coordinate origin of the frame in the framelayout is the upper-left corner of the screen, the position is fixed, you only need to specify the size of the control. The next step is to get the framelayout through an example.

The following is an effect of using framelayout to see that each area, except for the size and color, is located in the upper-left corner. This is also the characteristics of framelayout, the following is a screenshot of the operation effect:

The XML that implements the layout above is as follows:

<relativelayout 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: paddingleft= "@dimen/activity_horizontal_margin" android:paddingright= "@dimen/activity_horizontal_margin" Android :p addingtop= "@dimen/activity_vertical_margin" android:paddingbottom= "@dimen/activity_vertical_margin" tools: context= "Com.example.lizelu.userinterfacedemo.MainActivity" > <framelayout android:layout_width= "PT" Android : layout_height= "PT" android:background= "#ff" > <framelayout android:layout_width= "pt" android:layout_height= " PT "android:background=" #ff "> </FrameLayout> <framelayout android:layout_width=" PT "Android:layout_ Height= "PT" android:background= "#ff" > </FrameLayout> <framelayout android:layout_width= "PT" Android:
Layout_height= "PT" android:background= "#ffff" > </FrameLayout> <framelayout android:layout_width= "PT" Android:laYout_height= "PT" android:background= "#" > </FrameLayout> </FrameLayout> </RelativeLayout> 

4. Table layout (tablelayout)

If you have access to the Web front end of things, although the common time Div + CSS, but the Web front-end is also a table layout. The table layout in Android development is similar to the concept of table layouts in the Web front-end, which is to do the layout by drawing table tables. In a table layout, the entire page is equivalent to a large table, and the control is placed in each cell. Next we use the table layout to draw a table and feel the table layout. Next we will use the table layout to implement a more classic "login" page, below is a simple picture to achieve the effect of the map:

It is easy to see from the above diagram that the above is a table structure. There are 3 rows and two columns in the table, the login button takes up an entire row, and the rest of the controls take up one column. The above layout is quite simple, frankly speaking, and then complex layout is also from the simple. Below is the XML code that implements the layout above.

 <tablelayout android:layout_width=" match_parent "android:layout_height=" Match_ Parent "android:stretchcolumns=" > <TableRow> <textview android:layout_width= "Wrap_content" Android: layout_height= "wrap_content" android:text= "username:"/> <edittext android:layout_width= "Match_parent" Android: layout_height= "wrap_content" android:hint= "Please enter user name"/> </TableRow> <TableRow> <textview android: Layout_width= "Wrap_content" android:layout_height= "wrap_content" android:text= "Password:"/> <EditText android: Layout_width= "Match_parent" android:layout_height= "wrap_content" android:hint= "Please enter the password" android:inputtype= " Textpassword "/> </TableRow> <TableRow> <button android:layout_height=" Wrap_content "Android: Layout_width= "wrap_content" android:text= "Login" android:layout_span= ""/> </TableRow> </TableLayout> 

Where the android:stretchcolumns= "1" attribute means that the first column (the number of columns starting from zero) is stretched to achieve the purpose of the video screen. So the input box you see is filled with the entire screen behind it. This property android:layout_span= "2" in the login button, indicating that the login button spans two columns. The results of the above layout XML run are as follows:

To this 4 kinds of layout method has been introduced, in fact, the complex layout is also from the simple beginning. A complex layout page may be used in all four of these layouts. From simple to complex this requires a process, the foundation of the meeting, then is how to use the foundation to construct more complex layout.

The above content is small series to introduce the Android development of the basic control and four kinds of layout of the full content of the way, I hope to help you!