Chapter 3 UI cornerstone-UI layout (1), ui cornerstone

Chapter 3 UI cornerstone-UI layout (1), ui cornerstone
Chapter 3 UI cornerstone-UI Layout

In the previous chapter, we learned common Android components and some UI programming technologies. On this basis, we can effectively organize these components to form a beautiful and Reasonable interface.

In this chapter, we will first detail several la s of the UI in Android. These la s can effectively combine components. Then it explains how to apply styles and themes in Android development. Through styles and themes, You Can predefine a series of attribute values so that the entire application can form a unified display style.

3.1 basic unit of the user interface-View

In the Android SDK,View (View)Class isView class. View represents a piece of space that can be drawn from the user interface components. Each View occupies a rectangular area on the screen. In this area, this View object is responsible for drawing and event processing. Each View has a canvas for drawing, which can be expanded at will. You can also customize the View in game development, so that the canvas function can better meet our development needs. InAndroid SDK DevelopmentAny custom View only needs to be rewritten.OnDraw() Method to display the interface. Custom View can be a complex 3D implementation or a very simple text form.

Next, let's take an example of adding a border for an image to see how the View works.

First, we define a MyImageView inherited from ImageView:

// Import omitted Public class MyImageView extends ImageView {   Private int color; Private int borderwidth; Public Canvas canvas = new Canvas (); Public int status = 0;   Public MyImageView (Context context ){ Super (context ); } Public MyImageView (Context context, AttributeSet attrs, Int defStyle ){ Super (context, attrs, defStyle ); } Public MyImageView (Context context, AttributeSet attrs ){ Super (context, attrs ); } // Set the color Public void setColour (int color ){ This. color = color; }   // Set the Border Width Public void setBorderWidth (int width ){ Borderwidth = width; } @ Override Protected void onDraw (Canvas canvas ){ Super. onDraw (canvas ); This. canvas = canvas; // Draw a border Rect rec = canvas. getClipBounds (); Rec. bottom --; Rec. right --; Paint paint = new Paint (); // Set the border color Paint. setColor (color ); Paint. setStyle (Paint. Style. STROKE ); // Set the Border Width Paint. setStrokeWidth (borderwidth ); Canvas. drawRect (rec, paint ); } }

 

Then, add MyImageView to the layout file.

<? Xml version = "1.0" encoding = "UTF-8"?> <RelativeLayout Xmlns: android = "http://schemas.android.com/apk/res/android" Android: orientation = "vertical" Android: layout_width = "match_parent" Android: layout_height = "match_parent"> <Com. chapter2.MyImageView Android: id = "@ + id/my_image" Android: layout_centerHorizontal = "true" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: background = "@ drawable/ball"/> </RelativeLayout>

 

Then, define MyImageView in Activity and set the Border Width and color for it.

MyImageView image = (MyImageView) findViewById (R. id. my_image ); Image. setBorderWidth (5 ); Image. setColour (Color. WHITE );

 

Run the program. Let's take a look, as shown in 3-1.

Figure 3-1 Add a border for the image

 

We can see that we have added a border for this image.

In this example, we have customized a View inherited from ImageView and rewrittenOnDraw() Method, inOnDraw() Method re-draws the interface. We will introduce the use of Canvas and painting in subsequent chapters.

 

Experience Sharing: When writing layout files, we need to add the following to the first line: xmlns:android="http://schemas.android.com/apk/res/android" This is the namespace of xml. With it, when you need to enter the content, you can press and hold the "alt" and "/" keys. At this time, it will prompt you which options can be input next. In addition, it can help you determine the syntax and give the corresponding prompt when you make an error.