Android Graphic System details 3: Shape Drawable and jiugongge

Shape Drawable
When you want to dynamically draw a 2-dimensional image, the ShapeDrawable object may be your right choice. With ShapeDrawable, you can draw the original shape and apply it to any style at will.

 

 

ShapeDrawable is a Drawable derived class, so you can use it wherever you want to use Drawable-for example, it may be a View background, which is set through setBackgroundDrawable. of course, you can also draw your shape as your own custom View and add it to your Layout as you like. because ShapeDrawable has its own draw () method, you can create a subclass of View and then in View. draw this ShapeDrawable in the onDraw () method. the following is a simple View derived class, which only draws the ShapeDrawable as a View:

 

[Java] public class CustomDrawableView extends View {
Private ShapeDrawable mDrawable;
 
Public CustomDrawableView (Context context ){
Super (context );
 
Int x = 10;
Int y = 10;
Int width = 300;
Int height = 50;
 
MDrawable = new ShapeDrawable (new OvalShape ());
MDrawable. getPaint (). setColor (0xff74AC23 );
MDrawable. setBounds (x, y, x + width, y + height );
}
 
Protected void onDraw (Canvas canvas ){
MDrawable. draw (canvas );
}
}
Public class CustomDrawableView extends View {
Private ShapeDrawable mDrawable;

Public CustomDrawableView (Context context ){
Super (context );

Int x = 10;
Int y = 10;
Int width = 300;
Int height = 50;

MDrawable = new ShapeDrawable (new OvalShape ());
MDrawable. getPaint (). setColor (0xff74AC23 );
MDrawable. setBounds (x, y, x + width, y + height );
}

Protected void onDraw (Canvas canvas ){
MDrawable. draw (canvas );
}
}

In the constructor, A ShapeDrawable is defined using OvalShape. then, it sets the border of color and shape. if you do not set the border, the shape will not be drawn. If you do not set the color, it will be painted in black.

 

Using custom View, you can draw anything. In the above example, we can use a program to paint freely in an Activity:

[Java] CustomDrawableView mCustomDrawableView;
 
Protected void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
MCustomDrawableView = new CustomDrawableView (this );
 
SetContentView (mCustomDrawableView );
}
CustomDrawableView mCustomDrawableView;

Protected void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
MCustomDrawableView = new CustomDrawableView (this );

SetContentView (mCustomDrawableView );
}

 

If you want to draw the custom drawable in XMLlayout instead of the Activity, the CustomDrawableView class must overwrite the View (Context, AttributeSet) constructor, this method is called when initializing a View from XML. then add a CustomDrawable element to XML, as shown in the following code:

[Html] <com. example. shapedrawable. CustomDrawableView
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
/>
<Com. example. shapedrawable. CustomDrawableView
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
/>

ShapeDrawable class (like android. graphics. other drawable types in the Drawable package) allow you to use public methods to define various attributes of drawable. some attributes you want to adjust may have alpha transparency, color consideration, jitter, opacity and color.

 

You can also use XML to define the original drawable shape. For more information, see the ShapeDrawables section in the Drawable resource documentation.

NinePatch
A NinePatchDrawable image is a drag-and-drop bitmap. When it is used as the View background, Android automatically scales its size to adapt to the View content. one example is that the standard button uses NinePatch as its own background-extensions and stores them in the res/drawable/folder of your project.

 

The border is used to define the tensile and static areas of the image. you can draw one (or more) One-pixel black line on the upper and left borders to indicate a scalable area (other borders must be completely transparent or white ). you can set any number of scalable segments: their relative sizes remain unchanged, so the maximum segments are always the largest.

 

You can also draw a line between the right border and the bottom border to define an optional printable segment of an image (in fact, it is called a fill line segment ). if a View object sets NinePatch as the background and then specifies its own text, it will stretch itself so that all the text is exactly within the region specified by the right and bottom line segments. if the filled line segment does not exist, Android uses the left and top line segments to define this printable area.

The left and top line segments define which pixels of the image can be copied during stretching; the bottom and right line segments define the areas where the image content should be placed, the locations of these regions are relative.

 

 

The following is an example of defining a button using the NinePatch file:

 

This NinePatch defines an area that can be stretched with the left line segment and the right and bottom line segments define the area that can be drawn. in the first figure, the gray dotted line shows the area to be copied during stretching, and the red box shows the area where the View content should be. if the content is not suitable for this area, the image will be stretched until it can fit.

 

The 9-patch tool provides a very handy way to create your NinePatch image, which has a WYSIWYG image editor. if the stretched area you define has the risk of generating pixel re-writing, it may even issue a warning.

 

XML example

 

The following is an example of layoutXML to demonstrate how to add a NinePatch image to a pair of buttons. (The NinePatch image is saved as res/drawable/my_button_background.9.png)

[Html] <Button id = "@ + id/tiny"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: layout_alignParentTop = "true"
Android: layout_centerInParent = "true"
Android: text = "Tiny"
Android: textSize = "8sp"
Android: background = "@ drawable/my_button_background"/>
 
<Button id = "@ + id/big"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: layout_alignParentBottom = "true"
Android: layout_centerInParent = "true"
Android: text = "Biiiiiiig text! "
Android: textSize = "30sp"
Android: background = "@ drawable/my_button_background"/>
<Button id = "@ + id/tiny"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: layout_alignParentTop = "true"
Android: layout_centerInParent = "true"
Android: text = "Tiny"
Android: textSize = "8sp"
Android: background = "@ drawable/my_button_background"/>

<Button id = "@ + id/big"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: layout_alignParentBottom = "true"
Android: layout_centerInParent = "true"
Android: text = "Biiiiiiig text! "
Android: textSize = "30sp"
Android: background = "@ drawable/my_button_background"/>

 

 

Note that the width and height values are set to "wrap_content" so that the button can exactly contain text.

It is two buttons drawn from the NinePatch image shown in XML and. Pay attention to how the width and height of the button change with the text, and how the background image is stretched to adapt to it.

 

 



From the column of nkmnkm