Android 0 Basics Section 16th: Android User Interface Development overview

Believe that through the previous 15 period of learning, the Android development environment has been basically mastered, if there is still a problem, welcome to the Android 0 basic introductory Technology Discussion group communication, from the beginning of this period formally to step into the Android development path.

One aspect of Android app development is the development of the user interface. Android provides a very rich range of user interface components, which enables developers to develop their UI very easily and develop a very good user interface.

I. Interface UI ELEMENTS Introduction

Android apps are programs that run on a mobile phone system, and the first impression that a program gives users is the user interface. Next, learn about the interface UI elements of Android from the following areas.

1.1 Views Component View

In Android, the view class is the most basic UI class, and basically all of the advanced UI components are inherited from the view class. Most of the UI components for Android apps are placed in the Android.widget package and its child packages, Android.view packages, and their child packages, and you can see that all the UI components of the Android app inherit the view class. The view class is the basic unit of the user interface representation on the Android platform, and some subclasses of view are collectively referred to as widgets (tools), providing a complete implementation of UI objects such as text input boxes and buttons.

A view, which occupies a rectangular area on the screen, is responsible for rendering the rectangular area (such as turning the rectangular area into another color), or for handling events that occur in the rectangular area, such as a user click event, and can set whether the area is visible, whether it can get focus, and so on.

1.2 Views Container Components ViewGroup

The view class has a very important subclass ViewGroup, which is an extension of view that can hold multiple view, and through the ViewGroup class you can create a composite control that consists of a linked child View.

Represents the component hierarchy of the Android graphical user interface.

As you can see, multiple view components (views) can be stored in a single view container (ViewGroup), which can be stored in another container with other view components, but one interface file must have only one container as the root node.

All of Android's UI components are built on view, ViewGroup, and Android uses the "combo" design pattern to design the view and ViewGroup. For a graphical user interface of an Android application, ViewGroup as a container for other components, while ViewGroup contains the ViewGroup component in addition to the normal view component.

1.3 Layout component Layouts

Android has a lot of interface components, in order to better manage the components in the user interface, Android provides layout components to manage. The graphical user interface of Android apps has good platform independence by using layout components.

There are currently six main layouts in Android, as follows:

? LinearLayout (Linear layout):

The child elements (which can be controls or layouts) are sequentially arranged in a horizontal or vertical order, followed by each element after the previous one.

? Relativelayout (relative layout):

Based on the position relationship between child elements, the layout is the most flexible and most commonly used layout in the five layouts of the Android system, which is very suitable for some complicated interface design.

? Tablelayout (table layout):

Controls are managed in rows and columns, each of which behaves as a TableRow object, or a view control.

? Framelayout (frame layout):

Place all child elements in the upper-left corner of the entire interface, followed by child elements that directly overwrite the preceding child elements.

? Absolutelayout (Absolute layout):

All child elements are fixed by setting the Android:layout_x and Android:layout_y properties, and the coordinate position of the child elements.

? GridLayout (Grid layout):

Is the new layout manager for Android 4.0, which divides the entire container into rows and columns, each of which can be placed in one component, or a component that spans multiple columns and multiple rows.

The above layout class diagrams are as follows:

The content of the layout component will be studied in detail in subsequent courses, and there is no explanation here.

1.4 Layout Parameters Layoutparams

Layoutparams is the base class used to set the layout of the view, and the basic Layoutparams class is simply used to describe the width and height of the view.

The layout classes provided by Android are Layoutparams subclasses, and the subclasses of Layoutparams mainly include:

? Abslistview.layoutparams

? Absolutelayout.layoutparams

? Framelayout.layoutparams

? Linearlayout.layoutparams

? Radiogroup.layoutparams

? Relativelayout.layoutparams

? Tablelayout.layoutparams

? Tablerow.layoutparams

? Viewgroup.marginlayoutparams

? Windowmanager.layoutparams

Commonly used are relativelayout.layoutparams, Linearlayout.layoutparams, Viewgroup.marginlayoutparams. will continue to learn in the follow-up, not to repeat here.

Ii. Common Properties and methods of UI interface

The view class is the base class for all UI components and contains XML properties and methods that all components can use, followed by a holistic study, as shown in the following table.

ViewGroup inherits the view class, and of course it can be used as a normal view, but ViewGroup is mostly used as a container class. But since ViewGroup is an abstract class, it is often used in practice to use viewgroup subclasses as containers, such as various layout managers.

The ViewGroup container controls the distribution of its subcomponents dependent on Viewgroup.layoutparams, ViewGroup. Marginlayoutparams two internal classes. Some XML attributes are provided in both inner classes, and the ViewGroup in the container can specify these XML attributes.

The two XML attributes supported by Viewgroup.layoutparams are as follows:

? Android:layout_width: Specifies the layout width of the component.

? Android:layout_height: Specifies the layout height of the component.

With respect to the above two properties, the property values are generally the following 3 attribute values first.

? Fill_parent:

Specifies the height, width, and width of the child component, which is the same as the height of the parent container component (in fact, the padding gap is subtracted).

? Match_parent:

The property value is exactly the same as fill_parent, and this attribute value is recommended to replace Fill_parent starting with Android 2.2.

? Wrap_content:

Specifies that the size of the subassembly is exactly what it can wrap.

In addition to these 3 attribute values, you can also specify a specific width-height pixel value, such as 80DP. Where DP is a unit of dimension.

Before you formally learn about Android components, come together to learn a few basic concepts.

? Px:

Pixel (pixels), 1px represents a physical pixel point on the screen. PX units are not recommended, as the same 100px images may differ in actual size displayed on different phones. The occasional use of PX is when you need to draw a 1-pixel table line or a hatched line, with other units such as DP will appear blurred.

? Dp:

Device independent pixels (density-independent pixel), an abstract unit based on screen density. On a 160-point monitor, 1dp=1px, but as the screen density changes, the conversion of the DP to PX changes, and the conversion formula is dips= (pixs*160)/densitydpi.

? Dip

Device-independent pixels, exactly the same as DP, but with different names. Dip was used in earlier versions of Android, and DP was later recommended for unification with SP.

? Sp:

Proportional pixels (scale-independent pixel), which primarily handles the size of the font, can be scaled based on the user's font size preference. 1sp=1dp=0.00625 inches When the text size is "normal", and 1sp1dp=0.00625 inches when the text size is "large" or "oversized".

? In

inches, standard length units, 1 inches = 2.54 centimeters (approx.).

? Mm:

MM, standard length unit.

? Pt:

Pound (point), standard length unit, 1pt=1/72 inch = 0.035 cm.

? Ppi:

Number of pixels per inch (pixel per inch), the higher the value, the more delicate the screen.

? Dpi:

How many dots per inch (dot per inch), the higher the value, the finer the picture.

Android screen sizes vary, depending on their pixel density, are mainly divided into several specifications, as shown in the table below.

The viewgroup.marginlayoutparams is used to control the margins around the subassembly (margin, which is the padding around the component), and the XML attributes it supports are shown in the following table.

Iii. Creating a UI interface

As noted earlier, Android recommends using XML layout files to define the user interface instead of using Java code to develop the user interface, and all components provide two ways to control the behavior of the component.

? The XML layout file is controlled by XML attributes.

? Control in Java program code by invoking a method.

In fact, regardless of the way they are used, they control the nature of the Android user interface behavior exactly the same. Most of the time, the XML attribute that controls the UI component has a corresponding method. The creation of UI interface is divided into the following three kinds of situations.

3.1 Using an XML layout file

In fact, when creating an HelloWorld application, this method is used by Android, which is not only simple and clear, but also separates the application's view control logic from the Java code and puts it into the XML file to control it, thus better embodying the MVC principle.

After we have defined an XML layout file in the Android app's App/src/main/res/layout directory (R.java automatically ingest the layout resource), the Java code can display the view in activity in the following ways:

Setcontentview (r.layout. resource file name);

When you add more than one UI component to a layout file, you can specify the Android:id property for that UI component, which represents the unique identity of the component. Next, if you want to access the specified UI component in Java code, you can access it by using the following code:

Findviewbyld (r.id.android.id attribute value);

Once you have the specified UI component in your Java program, you can then control the appearance behavior of each UI component through code, including binding the event listener for the UI component, and so on.

3.2 Using Java code

While Android recommends using XML layout files to control the UI interface, Android allows developers to control the UI interface entirely in Java code if the developer wishes. If you want to control the UI interface in your code, all UI components are created with the new keyword and then added to the UI interface in the appropriate way.

In order to better learn this piece of content, in the HelloWorld project in the App/src/main/java/mainactivity.java file code changes, the specific control code is as follows:

 Public classMainactivityextendsappcompatactivity {@Overrideprotected voidonCreate (Bundle savedinstancestate) {Super. OnCreate (savedinstancestate); //Setcontentview (R.layout.activity_main); //Create a linear layoutLinearLayout layout =NewLinearLayout ( This);       Layout.setorientation (linearlayout.vertical); //Create a textview that shows Hello world!TextView show =NewTextView ( This); Show.settext (Hello World!); //Add a TextView to the layout containerLayout.addview (show); //set the activity display layoutSetcontentview (layout); }  }  

From the code of the program above, it can be seen that the UI components used in the program are created by the new keyword, and then the program uses the LinearLayout container to accommodate these UI components, which makes up the graphical user interface.

As you can see from the program code above, you need to pass in a This parameter when creating the UI component, because the context represents the API to access global information for the Android app environment. Having the UI component hold a context parameter allows these UI components to obtain global information about the Android application environment through the context parameter. The context itself is an abstract class, and the activity and service of the Android application inherit the context, so activity and service can be used directly as context. About this piece of content may now not understand, but it doesn't matter, after the follow-up learning to understand.

The same functionality can be achieved through both XML layout and Java code, but it is not recommended to use this approach in development because it is very cumbersome to implement programs through Java code and is much simpler to use with XML layout code.

3.3 Mixing XML layout files with Java code

As mentioned earlier, the full use of Java code to control the UI interface is not only cumbersome, but also not conducive to decoupling, while the full use of XML layout files to control the UI interface, although convenient, convenient, but inevitably lose flexibility. Therefore, there may be times when you need to mix XML layout files and code to control the UI interface.

When mixing XML layout files and code to control the UI interface, it is customary to place components with small changes and fixed behavior in an XML layout file, while those that are more varied and more complex in behavior control are managed by Java code.

There is no introduction here, and in subsequent courses you will be exposed to this mixed-use approach to control the UI interface.

Come here today, the next issue begins the UI component learning. If you have questions welcome message together to explore, also welcome to join the Android 0 Basic introductory Technology discussion group, grow together!

Past period Summary share:

Android 0 Basics Introduction 1th: Android's past life

Android 0 Basics Section 2nd: Android system Architecture and application components those things

Android 0 Basics Section 3rd: Bring you up to talk about Android development environment

Android 0 Basics 4th: Installing and configuring the JDK correctly Ko fu the first trick

Android 0 Basics 5th: Use ADT bundles to easily meet the goddess

Android 0 Basics 6th: Configuration Optimization SDK Manager, official dating goddess

Android 0 Basics 7th: Take care of Android simulator and start the Sweet journey

Android 0 Basics 8th: HelloWorld, the starting point for my first trip

Android 0 Basics 9th: Android app, no code can be developed

Android 0 Basics Section 10th: Development IDE Big upgrade, finally ushered in Android Studio

Android 0 Basics Introductory Section 11th: Simple steps to take you to fly, run Android Studio project

Android 0 Basics 12th: Get familiar with the Android studio interface and start selling

Android 0 Basics 13th: Android Studio Configuration optimization to create a development tool

Android 0 Basics 14th: Using high-speed genymotion, stepping into the rocket era

Android 0 Basics Section 15th: Mastering the Android Studio project structure, sailing

This article copyright for the public Share talent show (Shareexpert)--Xin 鱻 all, if reproduced please note source, hereby declare!

Android 0 Basics Section 16th: Android User Interface Development overview