Measurement and rendering of Android view

<span id="Label3"></p><p><p>truth, self-feeling, My level is really a piece of slag, a lot of things only stay in the know and use the stage, but also want to study the principle and the bottom of the realization, but a see code on the crazy, and then can't see down,</p></p><p><p>said that they are not anxious is a lie, I do not believe that the previous two days bought this "Android elite biography", The lakes and rivers are said this is a primary transition to intermediate good advanced book, so ready to look, just looked at the two days, today</p></p><p><p>See the view of the measurement and drawing, there are custom view (not finished), Learn what to write a blog, is a summary of their own learning and record it, You can also urge themselves, if there is a wrong place to speak or</p></p><p><p>There is ambiguity in the place, welcome everybody spit The groove criticize me!</p></p><p><p>　　<span style="color: #00ccff"><strong>Text Start (manual Applause)</strong></span></p></p><p><p><span style="color: #00ccff"><strong>　　<span style="font-size: 18px; color: #ff0000">Measurement of View:</span></strong></span></p></p><p><p>The first thing you need to know is the View's <span style="color: #ff0000">three measurement modes</span> :</p></p><p><p>　　<span style="color: #ff0000">1, exactly</span>: Accurate value mode, When we specify the Layout_width and Layout_height properties of the view, such as Layout_width= "100dp" or designated as Match_ parent, the System</p></p><p><p>This mode is used when making Measurements.</p></p><p><p>　　<span style="color: #ff0000">2, at_most: <span style="color: #000000">Maximum mode, When we specify the Layout_width and Layout_height properties of the view as wrap_content, that is, the view changes depending on the size of the content, or ViewGroup with the View's </span></span></p></p><p><p><span style="color: #ff0000"><span style="color: #000000">Change in size, This is the mode at which the system is being measured.</span></span></p></p><p><p><span style="color: #ff0000"><span style="color: #000000">　　<span style="color: #ff0000">3, UNSPECIFIED: <span style="color: #000000">This property does not specify its size, generally in the custom view will be used (this mode is not very understanding, ask for Advice)</span></span></span></span></p></p><p><p><span style="color: #ff0000"><span style="color: #000000"><span style="color: #ff0000"><span style="color: #000000">When the view is measured, the Onmeasure () method needs to be rewritten, and the view default <span style="color: #ff0000"><span style="color: #000000"><span style="color: #ff0000"><span style="color: #000000">onmeasure ()</span></span></span></span> method only supports exactly mode, that is, specifying a specific value, so you must override it when customizing the view</span></span></span></span></p></p><p><p><span style="color: #ff0000"><span style="color: #000000"><span style="color: #ff0000"><span style="color: #000000"><span style="color: #ff0000"><span style="color: #000000"><span style="color: #ff0000"><span style="color: #000000">Onmeasure (), Leave a question here: <span style="color: #ff0000">when will the measure method be called for measurement? </span></span></span></span></span></span></span></span></span></p></p><p><p></p></p><pre><pre><span style="color: #000000">@Override </span> <span style="color: #0000ff">protected</span> <span style="color: #0000ff">void</span> onmeasure (<span style="color: #0000ff">int</span><span style="color: #0000ff">int</span> <span style="color: #000000"> HEIGHTMEASURESPEC) { super.onmeasure (widthmeasurespec, heightmeasurespec); }</span></pre></pre><p><p></p></p><p><p>After rewriting point <span style="color: #000000">super.onmeasure (widthmeasurespec, heightmeasurespec); go inside and look at the source code and discover that the system will eventually call this method:</span></p></p><p><p></p></p><pre><pre>Setmeasureddimension (<span style="color: #0000ff">int</span> widthmeasurespec,<span style="color: #0000ff">int</span> heightmeasurespec);</pre></pre><p><p></p></p><p><p>The function of this method is to set the width and height of the view setting in, so we finally rewrite the Onmeasure () method is this way, the method of the two in the parameter Widthmeasurespec and <span style="color: #000000">heightmeasurespec</span></p></p><p><p>is the width and height we set when we reference this view in xml, and we need to judge by these two values to determine what measurement mode the system is Measuring.</p></p><pre><pre><span style="color: #000000">@Override </span> <span style="color: #0000ff">protected</span> <span style="color: #0000ff">void</span> onmeasure (<span style="color: #0000ff">int</span><span style="color: #0000ff">int</span> <span style="color: #000000"> heightmeasurespec) { setmeasureddimension (measurewidth ( widthmeasurespec), measureheight (heightmeasurespec)); }</span></pre></pre><p><p>The previous article has been talking about the system measurement mode, then how can we <span style="color: #ff0000">get to the system measurement mode</span> ? Obtaining a measurement mode also requires a specific measurement size</p></p><pre><pre><span style="color: #0000ff">int</span> specmode =<span style="color: #000000"> Measurespec.getmode (widthmeasurespec);</span> <span style="color: #0000ff">int</span> specsize = measurespec.getsize (widthmeasurespec);</pre></pre><p><p><span style="color: #000000">explain measurewidth (widthmeasurespec) separately, because height and width are the Same. </span></p></p><p><p></p></p><pre> <span style="color: #0000ff"><span style="color: #0000ff">Private</span></span> <span style="color: #0000ff"><span style="color: #0000ff">int</span></span>Measurewidth (<span style="color: #0000ff"><span style="color: #0000ff">int</span></span><span style="color: #000000"><span style="color: #000000">WIDTHMEASURESPEC) { </span></span><span style="color: #0000ff"><span style="color: #0000ff">int</span></span>Widthresult =<span style="color: #800080"><span style="color: #800080">0</span></span><span style="color: #000000"><span style="color: #000000">; </span></span><span style="color: #0000ff"><span style="color: #0000ff">int</span></span>Specmode =<span style="color: #000000"><span style="color: #000000">Measurespec.getmode (widthmeasurespec); </span></span><span style="color: #0000ff"><span style="color: #0000ff">int</span></span>Specsize =<span style="color: #000000"><span style="color: #000000">measurespec.getsize (widthmeasurespec); </span></span><span style="color: #0000ff"><span style="color: #0000ff">if</span></span>(specmode = =<span style="color: #000000"><span style="color: #000000">measurespec.exactly) {widthresult</span></span>=<span style="color: #000000"><span style="color: #000000">specsize; }</span></span><span style="color: #0000ff"><span style="color: #0000ff">Else</span></span><span style="color: #000000"><span style="color: #000000">{widthresult</span></span>=<span style="color: #800080"><span style="color: #800080"></span> -</span><span style="color: #000000"><span style="color: #000000">; </span></span><span style="color: #0000ff"><span style="color: #0000ff">if</span></span>(specmode = =<span style="color: #000000"><span style="color: #000000">Measurespec.at_most) {widthresult</span></span>=<span style="color: #000000"><span style="color: #000000">Math.min (widthresult,specsize); } } </span></span><span style="color: #0000ff"><span style="color: #0000ff">return</span></span><span style="color: #000000"><span style="color: #000000">widthresult; }</span></span></pre><p><p></p></p><p><p>This part of the understanding to contact the previous 3 measurement mode, if it is in the <span style="color: #ff0000">exactly if <span style="color: #00ccff">(specmode = = Measurespec.exactly)</span> </span> this mode, We have set the specific values in the xml, so the last value returned is Specsize</p></p><p><p>If the <span style="color: #ff0000"> <span style="color: #000000">two measurement modes are at_most and <span style="color: #ff0000"><span style="color: #000000"><span style="color: #ff0000">UNSPECIFIED</span></span></span> , we need to give the view a default size, because if the default size is not given, the system does not know the size of the view, so the view or default is full of the parent Layout. The default size here is</span> </span></p></p><p><p><span style="color: #ff0000"><span style="color: #000000">You will find that else there is an if, <span style="color: #ff0000">at_most</span> This mode is also judged, this is because in this mode, the view does not need the default size, the view is based on the size of the content of the Change.</span></span></p></p><p><p><span style="color: #ff0000"><span style="color: #000000">finally, the XML is quoted and the effect shows:</span></span></p></p><p><p></p></p><pre><?xml version=<span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #800000"><span style="color: #800000">1.0</span></span><span style="color: #800000"><span style="color: #800000">"</span></span>encoding=<span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #800000"><span style="color: #800000">Utf-8</span></span><span style="color: #800000"><span style="color: #800000">"</span></span>? ><relativelayout xmlns:android=<span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #800000"><span style="color: #800000">http://schemas.android.com/apk/res/android</span></span><span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #000000"><span style="color: #000000">Xmlns:tools</span></span>=<span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #800000"><span style="color: #800000">Http://schemas.android.com/tools</span></span><span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #000000"><span style="color: #000000">Android:id</span></span>=<span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #800000"><span style="color: #800000">@+id/activity_main</span></span><span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #000000"><span style="color: #000000">Android:layout_width</span></span>=<span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #800000"><span style="color: #800000">match_parent</span></span><span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #000000"><span style="color: #000000">Android:layout_height</span></span>=<span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #800000"><span style="color: #800000">match_parent</span></span><span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #000000"><span style="color: #000000">Tools:context</span></span>=<span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #800000"><span style="color: #800000">com.funny.myapplication.MainActivity</span></span><span style="color: #800000"><span style="color: #800000">"</span></span>> <<span style="color: #000000"><span style="color: #000000">Com.funny.myapplication.StudyView android:layout_width</span></span>=<span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #800000"><span style="color: #800000">wrap_content</span></span><span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #000000"><span style="color: #000000">Android:layout_height</span></span>=<span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #800000"><span style="color: #800000">wrap_content</span></span><span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #000000"><span style="color: #000000">Android:text</span></span>=<span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #800000"><span style="color: #800000">View</span></span><span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #000000"><span style="color: #000000">android:textsize</span></span>=<span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #800000"><span style="color: #800000">20SP</span></span><span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #000000"><span style="color: #000000">Android:background</span></span>=<span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #800000"><span style="color: #800000">#ccf</span></span><span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #000000"><span style="color: #000000">android:gravity</span></span>=<span style="color: #800000"><span style="color: #800000">"</span></span><span style="color: #800000"><span style="color: #800000">Center</span></span><span style="color: #800000"><span style="color: #800000">"</span></span>/></relativelayout></pre><p><p></p></p><p><p>(1)<span style="color: #000000">android:layout_width=<span style="color: #800000">"<span style="color: #800000">wrap_content<span style="color: #800000">"</span> </span> </span> </span></p></p><p><p></p></p><p><p>(2)<span style="color: #000000">android:layout_width=<span style="color: #800000">"<span style="color: #800000">match_parent<span style="color: #800000">"</span> </span> </span> </span></p></p><p><p><span style="color: #000000"><span style="color: #800000"><span style="color: #800000"><span style="color: #800000"></span></span></span></span></p></p><p><p>(3)<span style="color: #000000">android:layout_width=<span style="color: #800000">"<span style="color: #800000">400px<span style="color: #800000">"</span> </span> </span> </span></p></p><p><p><span style="color: #000000"><span style="color: #800000"><span style="color: #800000"><span style="color: #800000"></span></span></span></span></p></p><p><p></p></p><p><p><span style="color: #ff0000"><span style="color: #000000">　　<span style="color: #ff0000; font-size: 18px"><strong>Drawing of View:</strong></span></span></span></p></p><p><p>Painting the view requires overriding the OnDraw () method, and the OnDraw () method will have a <span style="color: #ff0000">canvas</span>that can be used to interpret the parameter as an artboard and we will eventually use this artboard to DRAW.</p></p><p><p>With an artboard, you need a paintbrush to paint, of Course.</p></p><pre><span style="color: #000000"><span style="color: #000000">@Override</span></span><span style="color: #0000ff"><span style="color: #0000ff">protected</span></span> <span style="color: #0000ff"><span style="color: #0000ff">void</span></span><span style="color: #000000"><span style="color: #000000">onDraw (canvas canvas) {Paint paint1</span></span>=<span style="color: #0000ff"><span style="color: #0000ff">New</span></span><span style="color: #000000"><span style="color: #000000">Paint (); Paint1.setcolor (getresources (). GetColor (r.color.coloraccent)); Paint1.setstyle (Paint.Style.FILL); Paint Paint2</span></span>=<span style="color: #0000ff"><span style="color: #0000ff">New</span></span><span style="color: #000000"><span style="color: #000000">Paint (); Paint2.setcolor (getresources (). GetColor (r.color.colorprimary));　　　　　Paint2.setstyle (Paint.Style.FILL); <span style="color: #339966">//start Drawing</span> canvas.drawoval (</span></span><span style="color: #800080"><span style="color: #800080">0</span></span>,<span style="color: #800080"><span style="color: #800080">0</span></span><span style="color: #000000"><span style="color: #000000">, Getmeasuredwidth (), getmeasuredheight (), paint1); Canvas.drawoval (</span></span><span style="color: #800080"><span style="color: #800080">0</span></span>,<span style="color: #800080"><span style="color: #800080">0</span></span>, Getmeasuredwidth ()-<span style="color: #800080"><span style="color: #800080">Ten</span></span>, Getmeasuredheight ()-<span style="color: #800080"><span style="color: #800080">Ten</span></span><span style="color: #000000"><span style="color: #000000">, paint2);<br>　　　　　<span style="color: #339966">//pan 30 pixels</span> canvas.translate (</span></span><span style="color: #800080"><span style="color: #800080"></span> -</span>,<span style="color: #800080"><span style="color: #800080">0</span></span><span style="color: #000000"><span style="color: #000000"> ); Super.ondraw (canvas); Canvas.restore (); }</span></span></pre><p><p>Next the function of this code, the first instance of the two brush, and set the color and style of the brush, and then began to draw, here we draw two nested ellipses,</p></p><p><p><span style="color: #ff0000">Canvas.drawoval (0,0,getmeasuredwidth (), getmeasuredheight (), paint1); <span style="color: #000000"> <span style="font-size: 14px">This method requires 5 entry parameters, which are the left, top, right, and bottom coordinates of the view relative to the parent layout, and the last is the brush to be drawn. </span></span></span></p></p><p><p>The system provides us with a number of drawxxx methods:</p></p><pre><pre><span style="color: #000000"></span></pre></pre><p><p>Effect Show:</p></p><p><p></p></p><p><p><span style="color: #ff0000"><span style="color: #000000"><span style="color: #ff0000; font-size: 18px"><strong>Measurement of Viewgroup:</strong></span></span></span></p></p><p><p><span style="color: #000000"><strong>　　</strong>We know that the ViewGroup management sub-view, then the size of the viewgroup, in addition to setting the specified size, is determined by the sub-view,<span style="color: #000000">viewgroup</span> in the measurement will traverse all the child view, call</span></p></p><p><p><span style="color: #000000">Sub-view of the measure method to obtain each sub-view of the measurement results, so that the article began to leave the question solved, meaning not unexpectedly ~ about the ViewGroup drawing, generally if not specified</span></p></p><p><p><span style="color: #000000">The background color of the <span style="color: #000000">viewgroup</span> ,<span style="color: #000000">viewgroup</span> 's OnDraw () method is not called, but <span style="color: #000000">ViewGroup</span> uses the Dispatchdraw () method to draw its child view, The process also iterates through all the Sub-view</span></p></p><p><p><span style="color: #000000">and invokes the drawing method of the child view to complete the Drawing.</span></p></p><p><p></p></p><p><p><span style="color: #000000">The above is my view of the measurement and drawing of all the understanding, may appear in many people is still in the initial stage, no how to relate to the source code, but still hope to help some people, for my own is a little progress, if you have anything</span></p></p><p><p><span style="color: #000000">Good understanding, Welcome message ha ~ ~ ~ sauce! oh, bye!</span></p></p><p><p></p></p><p><p>Measurement and rendering of Android view</p></p></span>