Android Support Library percent layout

<span id="Label3"></p><p><p>Before I wrote a screen adaptation of the article Android screen adaptation best practices, which refers to a similar percentage of the layout of things, but the shortcomings of the method is obvious, will add a lot of useless data, causing the APK package to become larger.</p></p><p><p>and Google's support library, added a called percent library, the library in the directory, if not, please use the SDK Manager update to the latest</p></p><p><p></p></p><p><p>Before using it, let's take a look at what classes this library has</p></p><p><p></p></p><p><p>There is a subclass of framelayout layout and relativelayout layout, in addition to a helper class, this helper class is the completion of the percentage of the measurement work, there is an interface percentlayoutparams, If we want to implement the percent layout ourselves, we need to implement this interface.</p></p><p><p>Let's see what Google has released. custom properties</p></p><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-pi"><span class="hljs-pi"><?xml version= "1.0" encoding= "utf-8"?></span></span><span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">resources</span>></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">declare-styleable</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"percentlayout_layout"</span>></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"layout_widthpercent"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"fraction"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"layout_heightpercent"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"fraction"</span>/> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"layout_marginpercent"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"fraction" </span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"layout_marginleftpercent"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"fraction"</span>/> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"layout_margintoppercent"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"fraction"</span>/ ></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"layout_marginrightpercent"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"fraction "</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"layout_marginbottompercent"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"fraction"</span>/ ></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"layout_marginstartpercent"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"fraction"</span> /></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"layout_marginendpercent"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"fraction" </span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">declare-styleable</span>></span></span><span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">Resources</span>></span></span></code></pre><p><p>See these attributes should be able to directly understand the meaning of these properties, its property value type is fraction, that is, decimal, percent. The main attributes are the width, the height is the percentage, and the percentage of the margin, where the difference between Android MarginLeft and Marginstart refers to the difference between Android MarginLeft and marginstart, extract the key content as Follows.</p></p> <blockquote> <blockquote> <p>When writing layout layouts, we find that there are several more similar properties:<br>Marginstart marginleft<br>Marginend marginright</p> <p>What are the differences between these attributes? According to the API note, we learned that Marginstart refers to the distance between the control and the view portion of the beginning, marginleft refers to the distance between the control and the left view, Marginend and Marginright.</p> <p>In general, The view begins with the left side, but some languages are now written in the Right-to-left order, such as arabic, after Android 4.2, Google introduced RTL layouts in android, which is better supported by the Right-to-left text Layout. For better compatibility with RTL layouts, Google recommends using Marginstart and marginend instead of marginleft and marginright, so that the app can maintain a consistent user experience on both a normal screen and a screen that displays text from right to Left.</p> </blockquote> </blockquote><p><p>Having learned this, we started using Percentrelativelayout</p></p><p><p>Add library file dependencies before use</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs bash"> <span class="hljs-string">‘com.android.support:percent:22.2.0‘</span></code></pre></pre><p><p>Start writing the layout file, the effect we want to achieve<br></p></p><p><p>That is, the left red part of the width of the screen 30%, the height of screen 90%, the right width of screen 70%, the height of the screen 45%. We typically use linearlayout's weight to achieve this effect before we use the percent layout, but using weight will increase the nesting of the layouts and will be over-drawn. So what does the percent layout look like, without nesting the layout and setting the height width percentage.</p></p><pre class="prettyprint"><code class=" hljs avrasm"><android<span class="hljs-preprocessor"><span class="hljs-preprocessor">.</span> support</span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Percent</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Percentrelativelayout</span></span>Xmlns:android=<span class="hljs-string"><span class="hljs-string">"http://schemas.android.com/apk/res/android"</span></span>xmlns:app=<span class="hljs-string"><span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span></span>Android:layout_width=<span class="hljs-string"><span class="hljs-string">"match_parent"</span></span>android:layout_height=<span class="hljs-string"><span class="hljs-string">"match_parent"</span></span>> <view android:id=<span class="hljs-string"><span class="hljs-string">"@+id/left"</span></span>Android:layout_width=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>android:layout_height=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>Android:layout_alignparentbottom=<span class="hljs-string"><span class="hljs-string">"true"</span></span>Android:background=<span class="hljs-string"><span class="hljs-string">"#ff0000"</span></span>App:layout_heightpercent=<span class="hljs-string"><span class="hljs-string">"100%"</span></span>App:layout_marginbottompercent=<span class="hljs-string"><span class="hljs-string">"10%"</span></span>App:layout_widthpercent=<span class="hljs-string"><span class="hljs-string">"30%"</span></span>/> <view android:id=<span class="hljs-string"><span class="hljs-string">"@+id/right_top"</span></span>Android:layout_width=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>android:layout_height=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>android:layout_alignparentright=<span class="hljs-string"><span class="hljs-string">"true"</span></span>Android:background=<span class="hljs-string"><span class="hljs-string">"#00ff00"</span></span>App:layout_heightpercent=<span class="hljs-string"><span class="hljs-string">"45%"</span></span>App:layout_widthpercent=<span class="hljs-string"><span class="hljs-string">"70%"</span></span>/> <view android:id=<span class="hljs-string"><span class="hljs-string">"@+id/right_bttom"</span></span>Android:layout_width=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>android:layout_height=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>android:layout_alignparentright=<span class="hljs-string"><span class="hljs-string">"true"</span></span>Android:layout_alignparentbottom=<span class="hljs-string"><span class="hljs-string">"true"</span></span>Android:background=<span class="hljs-string"><span class="hljs-string">"#ffff00"</span></span>App:layout_heightpercent=<span class="hljs-string"><span class="hljs-string">"45%"</span></span>App:layout_marginbottompercent=<span class="hljs-string"><span class="hljs-string">"10%"</span></span>App:layout_widthpercent=<span class="hljs-string"><span class="hljs-string">"70%"</span></span>/></android<span class="hljs-preprocessor"><span class="hljs-preprocessor">.</span> support</span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Percent</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Percentrelativelayout</span></span>></code></pre><p><p>We want to set the left layout width of 30%, using app:layout_widthpercent= "30%", the height of 90%, in order to demonstrate the use of another property, here does not directly set the height of 90%, but set the height of 100%, the bottom margin is 10%, that is</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs avrasm"><span class="hljs-label">android:</span>layout_alignParentBottom=<span class="hljs-string">"true"</span><span class="hljs-label">app:</span>layout_heightPercent=<span class="hljs-string">"100%"</span><span class="hljs-label">app:</span>layout_marginBottomPercent=<span class="hljs-string">"10%"</span></code></pre></pre><p><p>similarly, write two layouts to the Right.</p></p><p><p>As you can see from the beginning of the article, this library provides only two percent layouts for us, and the more common linear layouts do not provide a corresponding percentage Layout. so, we would like to be able to implement one ourselves, the answer is yes, by observing the existing two percent layout of the code, we need to inherit the original layout, that is, linearlayout, write the corresponding construction method call the parent class. Declares a Percentlayouthelper object to assist with Percent-complete measurements, as well as rewriting the onmeasure and OnLayout methods, and a<br>The Percentlayouthelper.percentlayoutparams interface is implemented to inherit the original layout of the Layoutparams layoutparams.</p></p><p><p>Then we create a new class called Percentlinearlayout that inherits linearlayout, implements its construction method, and declares a final percentlayouthelper Object.</p></p><pre class="prettyprint"><code class=" hljs java"><span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-class"><span class="hljs-class"> <span class="hljs-keyword">class</span> <span class="hljs-title">percentlinearlayout</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">linearlayout</span> {</span></span> <span class="hljs-keyword"><span class="hljs-keyword">Private</span></span> <span class="hljs-keyword"><span class="hljs-keyword">Final</span></span>Percentlayouthelper Mhelper =<span class="hljs-keyword"><span class="hljs-keyword">New</span></span>Percentlayouthelper (<span class="hljs-keyword"><span class="hljs-keyword"></span> this</span>);<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-title"><span class="hljs-title">Percentlinearlayout</span></span>(context Context) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>(context); }<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-title"><span class="hljs-title">Percentlinearlayout</span></span>(context context, AttributeSet Attrs) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>(context, attrs); }<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-title"><span class="hljs-title">Percentlinearlayout</span></span>(context context, AttributeSet attrs,<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Defstyleattr) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>(context, attrs, defstyleattr); }}</code></pre><p><p>Imitation of the existing two percent layout to implement the internal class layoutparams, this step directly copy code modification can, Remember must inherit from Android.widget.LinearLayout.LayoutParams.</p></p><pre class="prettyprint"><code class=" hljs java"> <span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-keyword"><span class="hljs-keyword">Static</span></span> <span class="hljs-class"><span class="hljs-class"> <span class="hljs-keyword">class</span> <span class="hljs-title">layoutparams</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">android</span>. <span class="hljs-title">widget</span>. <span class="hljs-title">linearlayout</span>. <span class="hljs-title">Layoutparams</span> <span class="hljs-keyword">Implements</span> <span class="hljs-title">Percentlayouthelper</span>. <span class="hljs-title">Percentlayoutparams</span> {</span></span> <span class="hljs-keyword"><span class="hljs-keyword">Private</span></span>Percentlayouthelper.percentlayoutinfo mpercentlayoutinfo;<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-title"><span class="hljs-title">Layoutparams</span></span>(Context c, AttributeSet Attrs) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>(c, attrs);<span class="hljs-keyword"><span class="hljs-keyword"></span> this</span>. Mpercentlayoutinfo = Percentlayouthelper.getpercentlayoutinfo (c, attrs); }<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-title"><span class="hljs-title">Layoutparams</span></span>(<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Width<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Height) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>(width, height); }<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-title"><span class="hljs-title">Layoutparams</span></span>(android.view.ViewGroup.LayoutParams Source) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>(source); }<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-title"><span class="hljs-title">Layoutparams</span></span>(marginlayoutparams Source) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>(source); }<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span>Percentlayouthelper.percentlayoutinfo<span class="hljs-title"><span class="hljs-title">Getpercentlayoutinfo</span></span>() {<span class="hljs-keyword"><span class="hljs-keyword">return</span></span> <span class="hljs-keyword"><span class="hljs-keyword"></span> this</span>. mpercentlayoutinfo; }<span class="hljs-keyword"><span class="hljs-keyword">protected</span></span> <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> <span class="hljs-title"><span class="hljs-title">setbaseattributes</span></span>(TypedArray a,<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>widthattr,<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Heightattr) {percentlayouthelper.fetchwidthandheight (<span class="hljs-keyword"><span class="hljs-keyword"></span> this</span>, a, widthattr, heightattr); } }</code></pre><p><p>also, Rewrite a method generatelayoutparams that generates layoutparams to return our inner class.</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs java"> <span class="hljs-annotation">@Override</span> <span class="hljs-keyword">public</span><span class="hljs-title">generateLayoutParams</span>(AttributeSet attrs) { <span class="hljs-keyword">return</span><span class="hljs-keyword">new</span> PercentLinearLayout.LayoutParams(<span class="hljs-keyword">this</span>.getContext(), attrs); }</code></pre></pre><p><p>Then Re-onlayout and onmeasure method, This step does not need to implement, directly copy the Code.</p></p><pre class="prettyprint"><code class=" hljs java"> <span class="hljs-keyword"><span class="hljs-keyword">protected</span></span> <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> <span class="hljs-title"><span class="hljs-title">onmeasure</span></span>(<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>widthmeasurespec,<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>HEIGHTMEASURESPEC) {<span class="hljs-keyword"><span class="hljs-keyword"></span> this</span>. Mhelper.adjustchildren (widthmeasurespec, heightmeasurespec);<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>. onmeasure (widthmeasurespec, heightmeasurespec);<span class="hljs-keyword"><span class="hljs-keyword">if</span></span>(<span class="hljs-keyword"><span class="hljs-keyword"></span> this</span>. Mhelper.handlemeasuredstatetoosmall ()) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>. onmeasure (widthmeasurespec, heightmeasurespec); } }<span class="hljs-keyword"><span class="hljs-keyword">protected</span></span> <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> <span class="hljs-title"><span class="hljs-title">OnLayout</span></span>(<span class="hljs-keyword"><span class="hljs-keyword">Boolean</span></span>Changed<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Left<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Top<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Right<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Bottom) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>. onlayout (changed, left, top, right, bottom);<span class="hljs-keyword"><span class="hljs-keyword"></span> this</span>. Mhelper.restoreoriginalparams (); }</code></pre><p><p>In this way, a percent linear layout is completed, which we use Under. Complete the following effects and feel free to play with the Graffiti.</p></p><p><p></p></p><p><p>Mainly red, from top to bottom, height is the parent Container's 20%,30%,30%, the width is the parent Container's 30%,50%,40, The third is the right layout, the right margin is the parent container of 20%, and the top margin is the parent container of 10%, see the code more directly</p></p><pre class="prettyprint"><code class=" hljs avrasm"><android<span class="hljs-preprocessor"><span class="hljs-preprocessor">.</span> support</span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Percent</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Percentrelativelayout</span></span>Xmlns:android=<span class="hljs-string"><span class="hljs-string">"http://schemas.android.com/apk/res/android"</span></span>xmlns:app=<span class="hljs-string"><span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span></span>Android:layout_width=<span class="hljs-string"><span class="hljs-string">"match_parent"</span></span>android:layout_height=<span class="hljs-string"><span class="hljs-string">"match_parent"</span></span>> <view android:layout_width=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>android:layout_height=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>Android:background=<span class="hljs-string"><span class="hljs-string">"#00ff00"</span></span>App:layout_heightpercent=<span class="hljs-string"><span class="hljs-string">"30%"</span></span>App:layout_widthpercent=<span class="hljs-string"><span class="hljs-string">"50%"</span></span>></View> &LT;CN<span class="hljs-preprocessor"><span class="hljs-preprocessor">. edu</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Zafu</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Percentlayout</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Percentlinearlayout</span></span>Android:layout_width=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>android:layout_height=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>App:layout_heightpercent=<span class="hljs-string"><span class="hljs-string">"50%"</span></span>App:layout_widthpercent=<span class="hljs-string"><span class="hljs-string">"100%"</span></span>Android:background=<span class="hljs-string"><span class="hljs-string">"#ff0000"</span></span>Android:layout_alignparentbottom=<span class="hljs-string"><span class="hljs-string">"true"</span></span>App:layout_marginbottompercent=<span class="hljs-string"><span class="hljs-string">"10%"</span></span>android:orientation=<span class="hljs-string"><span class="hljs-string">"vertical"</span></span>> <view android:layout_width=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>android:layout_height=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>Android:background=<span class="hljs-string"><span class="hljs-string">"#ff0ff0"</span></span>App:layout_heightpercent=<span class="hljs-string"><span class="hljs-string">"20%"</span></span>App:layout_widthpercent=<span class="hljs-string"><span class="hljs-string">"30%"</span></span>/> <view android:layout_width=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>android:layout_height=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>Android:background=<span class="hljs-string"><span class="hljs-string">"#dedff0"</span></span>App:layout_heightpercent=<span class="hljs-string"><span class="hljs-string">"30%"</span></span>App:layout_widthpercent=<span class="hljs-string"><span class="hljs-string">"50%"</span></span>App:layout_margintoppercent=<span class="hljs-string"><span class="hljs-string">"10%"</span></span>App:layout_marginleftpercent=<span class="hljs-string"><span class="hljs-string">"10%"</span></span>/> <view android:layout_width=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>android:layout_height=<span class="hljs-string"><span class="hljs-string">"0dp"</span></span>Android:background=<span class="hljs-string"><span class="hljs-string">"#1254f0"</span></span>android:layout_gravity=<span class="hljs-string"><span class="hljs-string">"right"</span></span>App:layout_heightpercent=<span class="hljs-string"><span class="hljs-string">"30%"</span></span>App:layout_widthpercent=<span class="hljs-string"><span class="hljs-string">"40%"</span></span>App:layout_margintoppercent=<span class="hljs-string"><span class="hljs-string">"10%"</span></span>App:layout_marginrightpercent=<span class="hljs-string"><span class="hljs-string">"20%"</span></span>/> &LT;/CN<span class="hljs-preprocessor"><span class="hljs-preprocessor">. edu</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Zafu</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Percentlayout</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Percentlinearlayout</span></span>></android<span class="hljs-preprocessor"><span class="hljs-preprocessor">.</span> support</span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Percent</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Percentrelativelayout</span></span>></code></pre><p><p>how, is not easy to achieve a percentage layout, more content self-mining, the following source code<br>http://download.csdn.net/detail/sbsujjbcy/8853673</p></p> <p style="font-size:12px;"><p style="font-size:12px;">Copyright Notice: This article for Bo Master original article, without Bo Master permission not Reproduced.</p></p> <p><p>Android Support Library percent layout</p></p></span>