Android user interface-custom components (M components) (1)

Based on the basic functions of Layout View and viewgroup, Android provides an advanced and powerful customization mode for creating its own UI. First, the platform contains various preset view and viewgroup subclasses-widgets and layout. You can use them to construct your own UI.

Some widgets that can be used include button, textview, edittext, listview, checkbox, radiobutton, gallery, spinner, autocompletetextview, imageswitcher, and textswitcher.

The available layout s include linearlayout, framelayout, relativelayout, and other layout S. For more examples, see "common layout objects ". Http://developer.android.com/guide/topics/ui/layout-objects.html

If you want to create a widget or layout without any preset widgets, you can create your own view subclass. If you only need to make small adjustments to the existing widgets or layout, simply inherit the widgets or layout and override their methods.

Create your own view subclass to precisely control the appearance and functions of screen elements. The following are examples of using custom view objects to implement this control idea:

1. Create a fully customized rendering view type, such as a volume control button rendered using a 2D image similar to Analog Electronic Control.

2. A group of view components are combined into a new single component to create a ComboBox (a combination of a drop-down list and text input fields) and a dual-panel selector (left and right lists, items in the list panel on the right are associated with a project in the list panel on the left) and other components.

3. Override the rendering method of an edittext component on the screen.

4. Capture events like buttons and process them (such as games) in some custom methods ).

Basic Method

The following is a basic overview of creating a custom view component:

1. The custom View class should inherit an existing View class or its subclass;

2. Override the methods of the parent class in the subclass. The parent class method to be overwritten starts with 'on', for example, ondraw (), onmeasure (), and onkeydown, this is similar to the on... Event.

3. Use the new extension class. Once completed, the new extension class can be used to replace the basic view object.

Tip: extension classes can be defined as internal classes that use their acticity. This is helpful for controlling access to them. Of course, you can create a new Public View class so that it can be used within the application scope.

Fully customized components

Fully customized components can be used to create graphical components for your desired display effect. It can be a graphical VU instrument that looks like an old analog instrument, or a long lyrics view with a beating ball moving along the lyrics to sing along the karaoke machine, in both cases, no matter how the built-in components are organized, they cannot meet the requirements.

Fortunately, you can use any method you like to create the appearance and behavior of a component, the only limit is your imagination, screen size, and available processing capabilities (because applications may eventually run on devices that are weaker than desktop workstation processing capabilities ).

Follow these steps to create a fully customized component:

1. Undoubtedly, the most common view that can be extended is the view class. Therefore, the view class is inherited to create its own new components;

2. provides a constructor that can obtain attributes and parameters from XML, and can also use its own attributes and parameters (such as the color and range of the VU meter, pointer width and damping );

3. Create possible event listeners, attribute accessors, modifiers, and behavior as accurate as possible in the component;

4. Override the onmeasure () callback method. If you want the component to display something, overwrite the ondraw () callback. Although they all have default behaviors, the ondraw () callback does nothing by default, and the onmeasure () method sets the component size to 100x100 by default;

5. overwrite other requirements... Method.

Extends ondraw () and onmeasure ()

The ondraw () method places any things that can be implemented on a canvas object, such as 2D graphics, standard or custom components, Styles of text, or anything else that can be imagined.

Note: 3D images cannot be used for the View class. To use 3D graphics, you must inherit the surfaceview class instead of the View class and draw images in an independent thread.

The onmeasure () method is a bit complicated. It is a key part of rendering constraints between components and their containers. Override onmeasure () to accurately and efficiently report the size of the part included in the component. Due to requirements from the parent container restrictions, the measurement of the size is complicated. Once the size of the component is calculated, the setmeasuredimension () method must be called to save the width and height of the measurement. If the setmeasuredimension () method fails to be called in the onmeasure () method, this result will be an exception value during measurement.

In the upper layer, the steps to implement the onmeasure () method are as follows:

1. the overwrite onmensure () method (widthmeasurespec and heightmeasurespec parameters both represent the size integers) must be called using the measurement specifications of the parent container's width and height ), these two parameters should be used as constraints for generating component width and height. The complete description of these types of constraints can be found in the view. onmeasure (INT, INT) method of the View class description.

2. The onmeasure () method of the component should calculate the size (width and height) required for rendering the component ). The component should be kept within the input specification range as far as possible, although it can be selected beyond the specification range (in this case, the parent container can choose to do the following: crop, scroll, throw an exception, or require the onmeasure () method to try again with different size specifications ).

3. Once the width and height of the component are calculated, you must call the setmeasureddimension (INT width, int height) method to save the calculation result. Otherwise, an exception is thrown.

The following table lists other standard methods for framework to call the View class:

Category	Method	Description
Creation	Constructors	There are two types of constructor calls: 1. Create a view object in the Code; 2. Fill the view object with the layout file. The second type should be resolved and any attribute definitions in the application layout file.
	Onfinishinflate ()	This method is called after the view object and all its sub-objects are filled with XML.
Layout	Onmeasure (INT, INT)	This method is called to determine the size requirements of the view object and all its sub-objects.
	Onlayout (Boolean, Int, INT)	This method is called when the view object assigns dimensions and positions to all its sub-objects.
	Onsizechanged (INT, Int, Int, INT)	This method is called when the size of the view object changes.
Drawing	Ondraw (canvas)	This method is called when the view object renders its content.
Event	Onkeydown (INT, keyevent)	This method is called when a key press event occurs.
	Onkeyup (INT, keyevent)	This method is called when a key bounce event occurs.
	Ontrackballevent (motionevent)	This method is called when a scroll event occurs.
	Ontouchevent (motionevent)	This method is called when a touch screen event occurs.
Focus	Onfocuschanged (Boolean, Int, rect)	This method is called when the view object gets or loses focus.
	Onwindowfocuschanged (Boolean)	This method is called when the window containing the view object gets or loses the focus.
Attaching	Onattachedtowindow ()	This method is called when the view object is bound to a window.
	Ondetachedfromwindow ()	This method is called when the view object is separated from its window.
	Onwindowvisibilitychanged (INT)	This method is called when the visibility of the window containing the view object changes.

Example of custom View

An example of a custom view object is provided in API demos: customview. The custom view is defined in the labelview class.

The labelview example shows different features of many custom components:

1.
Inherit fully customized components of the View class;

2. parameterized view object construction with view filling parameters (parameters defined in XML. Some fill parameters are passed through the parent class of the view, and some custom attributes defined for the labelview object;

3. Standard public-type methods you want to see, such as settext (), settextsize (), settextcolor (), and so on;

4. An override onmeasure () method that determines and sets the rendering size of the component. (Note: In the labelview class, the actual work is done by a private measurewidth () method .)

5. An override ondraw () method that draws labels on the provided canvas.

In the custom_view_1.xml example, you can see some labelview custom view usage. In fact, we can see the combination of Android: namespace parameters and custom app: namespace. These apps: parameters are custom attributes recognized by the labelview class and used for work. These parameters are defined in the styleable internal class of the example R resource definition class.