One of the details of Fish Eye Index control--Custom indexer _5, andriod development

Preface: Only hard Practice 72 change, can smile to 81 difficult, in the play so, life is likewise. ———— Six young children

Related articles:

1, "Fish Eye Index Control One of the detailed--Custom indexer"
2, "Fish Eye Index control of the second--fast indexing implementation"

Some students, want to more me out of the knowledge of the custom control, I will conform to the public opinion, in summing up other knowledge at the same time, mixed with some of the custom control of the blog to everyone.

Let's take a look at the final effect of this series:

As you can see from this effect diagram, we will cover the following areas of knowledge through this series:
The implementation of the rightmost indexer control (this article) relates the indexer to the ListView and implements the automatic indexing in this effect graph, there is a bug: When the mouse selects a letter in the indexer, the indicator is selected (the letter turns yellow) but not the one selected by the mouse. This bug should be related to the use of the simulator, the real phone does not exist in the problem.

This article first discusses how the indexer control is customized. The final effect of this article is as follows:

First, the framework to build this part, we start with a frame, the index bar to build, first look at the effect of the picture:

1, Custom View--indexsidebar

First, create a project Blogsidebar
Then create a class that derives from view: Indexsidebar

public class Indexsidebar extends View {public

    indexsidebar, AttributeSet attrs) {
        super ( context, attrs);
    }
    
    

Very simply, add a constructor. This control is then added to the myactivity layout file: (main.xml)

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android=
"http://schemas.android.com/apk" /res/android "
                android:orientation=" vertical "
                android:layout_width=" fill_parent "
                android:layout_" height= "Fill_parent"
                android:background= "#ffffff" >

    <com.example.blogsidebar.indexsidebar
            Android:id= "@+id/index_slide_bar"
            android:layout_width= "23DP"
            android:layout_height= "Match_parent"
            android:layout_alignparentright= "true"
            android:layout_marginright= "10DP"
            android:layout_ margintop= "10DP"
            android:layout_marginbottom= "10DP"
            android:background= "@drawable/index_letter_bg" >
</RelativeLayout>     

In XML, we arrange the indexsidebar to the right, the width is 23DP, the height is match_parent, and the margin is 10DP;
It is important to note that we have set up a background image for Indexsidebar (index_letter_bg.9.png):

If you run it now, the result will be the following, except for the stretching background, the rest is blank:

This is because, for a custom view, the background can be added through XML, but the content is drawn by the OnDraw function itself. Since we have not rewritten the OnDraw function, of course the position is blank except for the background.
2, in the view of the word at the bottom of the article, there will be a little more than nine diagram definition of the display area of the explanation, but focused on the point: * * For custom controls, the control's entire area can be drawn, not restricted by the point nine diagram display area. * * Here we need to understand that for a custom control, all areas in the control are drawn. For the display area qualification for Point nine graphs, only the system controls work.
Let's talk about how to do this: draw a small circle at the top and text below.
Let's look at the complete code first, and then we'll go into detail:

public static string[] B = {"#", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "
S "," T "," U "," V "," W "," X "," Y "," Z "};
Private list<string> indexcontent = new arraylist<> ();
Private Paint Paint = new Paint ();
    Public Indexsidebar (context, AttributeSet attrs) {Super (context, attrs);
Initindex ();
    private void Initindex () {for (String str:b) {indexcontent.add (str);

    } Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas); int height = getheight ();//get corresponding height int width = getwidth (); Get the corresponding width int singleheight = height/(indexcontent.size () + 1);//Get the height of each letter/Draw Circle Paint.setcolor (Color.pars
    EColor ("#fa7829"));
    Paint.setstyle (Paint.Style.FILL);
    Canvas.drawcircle (width/2.0f, SINGLEHEIGHT/2, SINGLEHEIGHT/4, paint);


    Paint.reset ();
   Write for (int i = 0; i < indexcontent.size (); i++) {Paint.setcolor (Color.parsecolor ("#888888"));     Paint.settypeface (Typeface.default_bold);
        Paint.setantialias (TRUE);
		Paint.settextsize (22);

        Paint.settextalign (Paint.Align.CENTER);

        The x source relative coordinates are set to the middle position float xpos = WIDTH/2;
        To point the position of the middle line, calculate the baseline position paint.fontmetricsint FM = Paint.getfontmetricsint ();
        int center = singleheight * (i+1) + SINGLEHEIGHT/2;
        int baseline = center + (fm.bottom-fm.top)/2-fm.bottom;

        Canvas.drawtext (Indexcontent.get (i), xpos, Baseline, paint); Paint.reset ()//Reset Brush}}

This code looks particularly long, but it is only divided into three parts:
(1) Initialization we set some common variables as member variables and initialize them with the following code:

public static string[] B = {"#", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", " S "," T "," U "," V ",
" W "," X "," Y "," Z "};
Private list<string> indexcontent = new arraylist<> ();
Private Paint Paint = new Paint ();
Public Indexsidebar (context, AttributeSet attrs) {
    Super (context, attrs);
    Initindex ();
}


private void Initindex () {for
    (String str:b) {
        indexcontent.add (str);
    }
}

This code, in fact, is to initialize two variables, one is paint, one is a list of indexed characters indexcontent; When initializing the list indexcontent, we first define an array of characters string[] B, Initializes the indexcontent by array B.
(2) Draw a circle after initialization, directly into the rewrite OnDraw function, in the layout of the drawing. First, let's take a look at how the circle is painted.
As we said above, any position of the control can be drawn. But what is the location of the control? The position of the control is the location of the control after we have passed the XML layout, and for Indexsidebar, its part is drawn as shown in the Red box area on the right side of the image:

First look at the Indexsidebar on the right:
The red box, the box rectangle is the location of our control, the entire rectangle can be plotted. In the OnDraw function, the display width of the control can be obtained by getwidth (), and the display height of the control can be obtained by getheight. Since we want to evenly display all the characters to be displayed, we divide the total height getheight (), because the circle has a total of indexcontent.size () + 1 characters, so the height of each character is:

int singleheight = GetHeight ()/(Indexcontent.size () +1);

Then look at the circle on the left to enlarge the image, as you can see from the diagram:
The radius of the circle is One-fourth of the height of a single character, and the position of the center point of the Circle is in the position of x = GetWidth ()/2, y = Singleheight/2 singleheight. To combine the above explanations, let's take a look at the circle-Drawing code:

protected void OnDraw (Canvas Canvas) {
   super.ondraw (Canvas);

   int height = getheight ()//get corresponding height
   int width = getwidth ();//get corresponding width
   int singleheight = height/(indexcontent.siz E () + 1);//Get the height of each letter

   /Draw Circle
   Paint.setcolor (Color.parsecolor ("#fa7829"));
   Paint.setstyle (Paint.Style.FILL);
   Canvas.drawcircle (width/2.0f, SINGLEHEIGHT/2, SINGLEHEIGHT/4, paint);
   Paint.reset ();
}

First, get the height of a single character singleheight:

int height = getheight ()//get corresponding height
int width = getwidth ();//get corresponding width
int singleheight = height/(indexcontent.siz E () + 1)//Get the height of each letter

Then draw the circle:

Paint.setcolor (Color.parsecolor ("#fa7829"));
Paint.setstyle (Paint.Style.FILL);
Canvas.drawcircle (width/2.0f, SINGLEHEIGHT/2, SINGLEHEIGHT/4, paint);
Paint.reset ();

We have the center of the circle, after the radius, it is easy to draw a circle, if there is no understanding of the circle function students, you can refer to the "Android Graphics (i): Overview and Basic geometry Drawing"
(3), writing in the text of the problem of the most critical two points: first: Find the current to draw which character, second: Find the baseline position of this character. About DrawText is based on baseline to draw the problem, if the students do not understand, please go to the "Android Graphics (v): DrawText () detailed"

As we have said before, we will getheight the total height () according to the number of characters, each character occupies a height of singleheight;
As shown in the figure above, we assume that we want to get the baseline position of character C.
First, we're going to get the total height of all the characters before C, that is, the number of all the characters prior to, that is, four. So the position of the C character is singleheight * 4; But note that this starting position is not where we start to draw the characters, we only know that each character occupies a space of singleheight, But we don't know where the single character Fu Jin is starting to draw in Singleheight. But the only thing we can be sure of is that each character is centered in the singleheight. That's right, we can get to the middle line of the character C:

Centerline = Singleheight *4 + singleheight/2;

That is, the starting height of the character C Singleheight *4 plus half the singleheight height is the position of the middle line of the character C.
In the Android Graphics (e): DrawText (), we've said that the formula for getting the baseline from the middle line is:

Baseline = centerline + (fontmetrics.bottom-fontmetrics.top)/2-fontmetrics.bottom;

So the middle line of the character C comes out:

Centerline = Singleheight *4 + singleheight/2;
Baseline = centerline + (fontmetrics.bottom-fontmetrics.top)/2-fontmetrics.bottom;

Okay, now we're looking at the code for writing:

Write for
(int i = 0; i < indexcontent.size (); i++) {
    Paint.setcolor (Color.parsecolor ("#888888"));
    Paint.settypeface (typeface.default_bold);
    Paint.setantialias (true);
    Paint.settextsize ();

    The X coordinate equals the middle-half of the string width.
    float xpos = width/2-Paint.measuretext (Indexcontent.get (i))/2;

    To point the position of the middle line, calculate the baseline position
    paint.fontmetricsint FM = Paint.getfontmetricsint ();
    int center  = singleheight * (i+1) + SINGLEHEIGHT/2;
    int baseline = center + (fm.bottom-fm.top)/2-fm.bottom;
    Canvas.drawtext (Indexcontent.get (i), xpos, Baseline, paint);

    Paint.reset ()//Reset Brush
}

This piece of code is the first part of the set brush:

Paint.setcolor (Color.parsecolor ("#888888"));
Paint.settypeface (typeface.default_bold);
Paint.setantialias (true);
Paint.settextsize ();
Paint.settextalign (Paint.Align.CENTER);

The x source relative coordinates are set to the middle position
float xpos = WIDTH/2;

In this code, the most important thing is to pay attention to these two sentences:

Paint.settextalign (Paint.Align.CENTER);
The X source drawing coordinates are set to the middle position
float xpos = WIDTH/2;

According to the Android Graphics (e): DrawText () detailed, the relative position is set to the middle of the middle of the control, and the text is drawn in the middle of the control. Can not understand the classmate, please visit this article, here will not repeat it again.
The next step is to calculate the baseline position:

Paint.fontmetricsint fm = Paint.getfontmetricsint ();
int center  = singleheight * (i+1) + SINGLEHEIGHT/2;
int baseline = center + (fm.bottom-fm.top)/2-fm.bottom;

These are the principles we've talked about before, we get the position of Center center, and then we use the middle line to find the baseline position.
Finally, draw the current character:

Canvas.drawtext (Indexcontent.get (i), xpos, Baseline, paint);

All right, here we have all the characters on the Indexsidebar. Here we are to capture the click event, when the user clicks on a character, to draw the character to the selected state.
Second, advanced Step 1, selected state capture first look at the effect of the map:

You can see from the effect diagram that when you select a letter, we do two things:
Highlight the circle of vertices to highlight the selected letter (1) and get the currently selected letter first, we want to get the currently selected letter, so rewrite ontouchevent () to get the selected letter based on the position of the current user's finger, code as follows:

private int mchoose =-1;
public boolean ontouchevent (Motionevent event) {
    final float y = event.gety ()//click y
	-coordinate//click y-coordinate proportion of total height * The length of the b array equals the number of clicks in B.
    int pos = (int) (Y/getheight () * (Indexcontent.size () +1));
    Because the total character contains the topmost circle, the position of the true character in the indexcontent should be reduced by a mchoose = Pos-1 in the current mchoose position
    ;

    Switch (event.getaction ()) {case
        motionevent.action_cancel: Case
        motionevent.action_up:{
            mchoose =-1;
        } break
        ;
        Default: Break
        ;
    }
	Force redraw
    Invalidate ();
    return true;
}

First define a member variable to identify the index of the currently selected letter:
The initial value is set to-1, indicating that no value is selected.

private int mchoose =-1;

The current finger position is then used to calculate which letter is currently selected:

Final float y = event.gety ()//click y
-coordinate//Click the proportion of the total height of the y-coordinate *b the length of the array is equal to the number of clicks B.
int pos = (int) (Y/getheight () * (Indexcontent.size () +1));
Because the total character contains the topmost circle, the position of the true character in the indexcontent should be reduced by a mchoose = pos-1 on the current POS position
;

In this code, we use Event.gety () to get the position of the user's current finger.
And then we're going to calculate the formula for the current letter position:
We know that the height of a single character is: Singleheight = getheight/(indexcontent.size () + 1);
The current finger selected character location should be int pos = y/singleheight;
So when you put Singleheight's formula into int pos = Y/singleheight, you'll get:
int pos = (int) (Y/getheight () * (Indexcontent.size () +1));
It is important to note here that the POS represents the position in all characters, including the first character circle. So to get the index of characters in indexcontent, we need to subtract 1 on the basis of POS;
Then when the finger is raised, uncheck

Switch (event.getaction ()) {case
    motionevent.action_cancel: Case
    motionevent.action_up:{
        mchoose =-1;
    } Break
    ;
    Default: Break
    ;
}
Force redraw
invalidate ();

When the user's finger is raised, the mchoose is set to-1, indicating that no value is currently selected.
Finally, force redraw, forcing the current control to be refreshed.
Intercepting messages

return true;

Finally in return, be sure to return true! or you will find that only when the click will go to Ontouchevent () after the Action_move and action_up will not go to ontouchevent ().
In Ontouchevent, if return true indicates that the current event has been consumed by the control, it is no longer passed to its parent control. If return false, the current event is not consumed and continues to be passed to the parent control.
However, because for Action_down events, if the current event does not return true, which means that the current control does not consume Action_down events, subsequent action_move and ACTION_UP will not be passed back to the control again. About Ontouchevent and onintercepttouchevent knowledge is more complicated, we can go to search related articles carefully study, follow-up I will also out of this article.
(2), drawing, draw the selected state after getting the current selected characters of the index, you need to paint, according to the current selection of characters to set the position of the selected character color:
The complete OnDraw code is as follows:

protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas);
    Gets focus to change the background color. int height = getheight ();//get corresponding height int width = getwidth ();
        Get the corresponding width int singleheight = height/(indexcontent.size () + 1);//Get the height of each letter/draw a circle if ( -1 = mchoose) {
    Paint.setcolor (Color.parsecolor ("#888888"));
    }else {Paint.setcolor (Color.parsecolor ("#fa7829"));
    } paint.setstyle (Paint.Style.FILL);
    Paint.setantialias (TRUE);
    Canvas.drawcircle (width/2.0f, SINGLEHEIGHT/2, SINGLEHEIGHT/4, paint);


    Paint.reset (); Write for (int i = 0; i < indexcontent.size (); i++) {if (i = = Mchoose) {Paint.setcolor (COLOR.PA
        Rsecolor ("#fa7829"));
        }else {Paint.setcolor (Color.parsecolor ("#888888"));
        } paint.settypeface (Typeface.default_bold);
        Paint.setantialias (TRUE);
        Paint.settextsize (22);

        Paint.settextalign (Paint.Align.CENTER); x source relative coordinate set to middle position float xpos= WIDTH/2;
        To point the position of the middle line, calculate the baseline position paint.fontmetricsint FM = Paint.getfontmetricsint ();
        int center = Singleheight * (i + 1) + SINGLEHEIGHT/2;
        int baseline = center + (fm.bottom-fm.top)/2-fm.bottom;

        Canvas.drawtext (Indexcontent.get (i), xpos, Baseline, paint); Paint.reset ()//Reset Brush}}

Here we do a change in two places:
(1), when drawing a circle

Circle
if ( -1 = mchoose) {
    Paint.setcolor (Color.parsecolor ("#888888"));
} else {
    Paint.setcolor (Color.parsecolor ("#fa7829"));
}
Paint.setstyle (Paint.Style.FILL);
Paint.setantialias (true);
Canvas.drawcircle (width/2.0f, SINGLEHEIGHT/2, SINGLEHEIGHT/4, paint);

When you draw a circle, you set the fill color of the circle according to whether the current mchoose equals-1, that is, whether there are selected characters.
(2) When writing
When writing, depending on whether the index of the characters currently being drawn is a selected word Fusso the color of the text, the code is as follows:

    for (int i = 0; i < indexcontent.size (); i++) {
        if (i = = mchoose) {
            Paint.setcolor (Color.parsecolor ("#fa7829") ;
        } else {
            Paint.setcolor (Color.parsecolor ("#888888"));
        }
        Paint.settypeface (typeface.default_bold);
        Paint.setantialias (true);
        Paint.settextsize ();
        Paint.settextalign (Paint.Align.CENTER);

		.....
}

Here, the code to set the font color of the selected fonts is over. Let's take a look at how to do this by using an amplifier to display the base when a character is selected.
2, use the amplifier we first look at the effect bar:

As you can see from the effect diagram, here we're going to achieve two effects:
When we select a letter, we use an amplifier to display it. When we let go of our fingers, the amplifier disappears. In fact, the realization method is very simple, the amplifier is actually a textview, when we select a letter, set it to this textview;
As you know, Indexsidebar is derived from view, which means that it is only one control, not derived from ViewGroup. So the textview of the amplifier must not be placed in the Indexsidebar to draw. So it must be placed in the main layout to layout the amplifier corresponding to the TextView.
So the main layout at this time the code should be: (Main.xml)

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android= "http://schemas.android.com/apk/res/"
                Android "android:orientation=" vertical "android:layout_width=" fill_parent " android:layout_height= "Fill_parent" android:background= "#ffffff" > <com.example.blogsidebar.ind Exsidebar android:id= "@+id/index_slide_bar" android:layout_width= "23DP" android:layout
            _height= "Match_parent" android:layout_alignparentright= "true" android:layout_marginright= "10DP" android:layout_margintop= "10DP" android:layout_marginbottom= "10DP" android:background= "@ Drawable/index_letter_bg "/> <textview android:id=" @+id/index_slide_dialog "Android:lay" Out_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_toleftof= "@+id/index_" Slide_bar "Android:background= "@drawable/list_lable_screen" android:gravity= "center" android:textcolor= "#ff5e00" Android:textsize= "30DP" android:visibility= "invisible" android:layout_marginright= "6DP"/&gt
; </RelativeLayout>

There is nothing to notice here, it is to give the amplifier a background:

Nothing else to say. Now let's look at the code
Indexsidebar
Let's take a look at the fully added code first:

/**
 * Set amplifier
 * @param TV TextView
 /public
void Setindicatortv (TextView TV) {
    MINDICATORTV = TV;
} Public

Boolean ontouchevent (Motionevent event) {

    final float y = event.gety ()//click y-coordinate
    int pos = (int) (Y/ge Theight () * (Indexcontent.size () +1));
    Mchoose = pos-1;

    String Text = Indexcontent.get (mchoose);
    if (null!= MINDICATORTV) {
        mindicatortv.setvisibility (VISIBLE);
        Mindicatortv.settext (text);
	Switch (event.getaction ()) {case
        motionevent.action_cancel: Case
        motionevent.action_up:{
            mchoose =- 1;
            if (null!= MINDICATORTV) {
                mindicatortv.setvisibility (GONE);
            }
        }
        break;
        Default: Break
        ;
    }
    return true;
}

The code here is divided into three parts: set the amplifier corresponding to the TextView, set the selected characters, the finger left to hide the amplifier
We know that the amplifier's textview must be transmitted from the outside, so we set a function to receive the textview corresponding to the amplifier:

public void Setindicatortv (TextView TV) {
    MINDICATORTV = TV;
}

Then, when the finger selects a character, we need to set it to the amplifier:

String Text = Indexcontent.get (mchoose);
if (null!= MINDICATORTV) {
    mindicatortv.setvisibility (VISIBLE);
    Mindicatortv.settext (text);

Finally, when the finger leaves, you need to hide the amplifier:

Switch (event.getaction ()) {case
    motionevent.action_cancel: Case
    motionevent.action_up:{
        mchoose =-1;
        if (null!= MINDICATORTV) {
            mindicatortv.setvisibility (GONE);
        }
    }
    break;
    Default: Break
    ;
}

Finally, set the amplifier's corresponding textview in the myactivity:

public void OnCreate (Bundle savedinstancestate) {
    super.oncreate (savedinstancestate);
    Setcontentview (r.layout.main);

    Mindexsidebar = (Indexsidebar) Findviewbyid (R.id.index_slide_bar);
    Mindexblockdialog = (TextView) Findviewbyid (r.id.index_slide_dialog);
    MINDEXSIDEBAR.SETINDICATORTV (Mindexblockdialog);
}

Here's how to set up and use the amplifier, so let's talk about how to show the selected characters to the user.
3, selected character exposure as we write a control, we have to encapsulate it better, and we need to expose users to the user for the results they care about when they use this control.
The exposed approach is generally implemented using interfaces, so we define a static interface in Indexsidebar:

public static interface chooselistner{
    void onchoosed (int pos,string text);

/**
 * Set Listener
 * @param listener
 *
/public void Setchoosedlistener (Chooselistner listener) {
    Mlistener = listener;
}

Here, we define an interface and define a function Setchoosedlistener that lets the user pass in the instance of the listener.
Then, in Ontouchevent, when a user clicks on a character, it needs to use mlistener.onchoosed (Mchoose,text), and the selected character is outgoing.
So at this point the complete ontouchevent code is as follows:

public boolean ontouchevent (Motionevent event) {

    final float y = event.gety ()//click y-coordinate
    int pos = (int) (Y/getheig HT () * (Indexcontent.size () +1));
    Mchoose = pos-1;

    String Text = Indexcontent.get (mchoose);
    if (null!= MINDICATORTV) {
        mindicatortv.setvisibility (VISIBLE);
        Mindicatortv.settext (text);
    if (null!= mlistener) {
        mlistener.onchoosed (mchoose,text);
    }

    Switch (event.getaction ()) {case
        motionevent.action_cancel: Case
        motionevent.action_up:{
            mchoose =- 1;
            if (null!= MINDICATORTV) {
                mindicatortv.setvisibility (GONE);
            }
        }
        break;
        Default: Break
        ;
    }

    Invalidate ();
    Be sure to return true, because only after the down event has been intercepted will other events be uploaded to the control again,
    //or else it will never be passed to this control for returns
    true;
}

Finally, the listener is used in the mainactivity:

public void OnCreate (Bundle savedinstancestate) {
    super.oncreate (savedinstancestate);
    Setcontentview (r.layout.main);

    Mindexsidebar = (Indexsidebar) Findviewbyid (R.id.index_slide_bar);
    Mindexblockdialog = (TextView) Findviewbyid (r.id.index_slide_dialog);
    MINDEXSIDEBAR.SETINDICATORTV (mindexblockdialog);
    Mindexsidebar.setchoosedlistener (New Indexsidebar.chooselistner () {
        @Override public
        void onchoosed (int pos , String text) {
            log.e ("Qijian", "POS:" +pos+ "  choosed:" + text);}}
    );

The results are as follows:

OK, this article is over, here to tell you the embryonic form of rapid indexing, at the bottom of this article to give you a little talk about the nine Gongra extension area and display area knowledge.
The source code at the bottom of the article gives three, extension: nine Gongra extension area and display area long ago There have been written an article "Nine Sudoku", before looking at the following content, we need to look at this article, the least should know what nine Sudoku is, the picture of four weeks of black spots is how to add to the. We'll talk about the four-point effect around here.
Let's take Indexsidebar's background picture as an example:

Marks the two dotted lines of A and B (here are two points), the fill line, and mark a indicates the source of the color used to fill the stretch position when stretched horizontally. Similarly, Mark B indicates that when stretched vertically, the color of the stretch is also obtained from Mark B.
Mark C and Mark D are a little hard to understand, and they represent where the content is displayed.
such as Mark C:

The position that the red box identifies is the display area of the content in portrait position.
The display area means the area where the content is displayed. If this is the background of a TextView control, the text in the TextView can only be displayed in the area identified by C, and the area above and below the C region cannot display text.
What is the display area when stretched? The following figure:

This diagram shows the results of longitudinal stretching, after stretching vertically, we identified three areas with 1,2,3, where area 1 is not stretched, the upper part of the red box, area 3 identifies the part of the red box when it is not stretched, and area 2 indicates the display area of the C Black block in the. 9 figure.
For horizontal stretching:

Only the extruded area of the middle black block can be used to display content, and area A and area B cannot display the content. Similarly, if this is the background of a TextView control, then the text is displayed in the Black box area.
So the question is, what is the display area for images that are stretched horizontally and stretched vertically at the same time?
Of course, the intersection between the horizontal display area and the portrait display area.
* * But note that the display area of Point nine diagram is useful for system controls and is not valid for custom controls .... Because, we use the drawing function to give the diagram, the whole area can be painted, we want to draw where, there is no limit. **

If this article helps you, remember to pay attention.

SOURCE Download Address: http://download.csdn.net/detail/harvic880925/9390218

Please respect the original copyright, reproduced please indicate the source: http://blog.csdn.net/harvic880925/article/details/50458830 Thank you