Percent layout (translation, experience) solve layout problems, another experience

Reprint please indicate the source: Wang 亟亟 's way of Daniel

We used to use traditional relativelayout,linearlayout, Framelayout. And some of the newer ones, such as collapsingtoolbarlayout, have been used in the project more or less, and have known the percentage layout earlier, percent but have never thought of going to see, to experiment with the relevant content, Just think about it today and write an article about him (looks like the first article of the week)

Amway's own Integration library: Https://github.com/ddwhan0123/Useful-Open-Source-Android, come on Fork,star!!!

Not much nonsense, first paste the effect of the experiment: (looks more like the traditional look, don't be impatient, look down)

Before the specific code, the first explanation, after all, is the official control, examples do not need to add too much, so that people understand more important

This article is mainly about Relativelayout's evolutionary version, and then, by the mention of PercentRelativeLayout a customPercentLinearLayout

It is easy to understand that one is the relative layout of percentages, and one is the linear layout of percentages. (For the next example, we took the official percentrelativelayout to do a series of demos)

Question one, how to quote?

<android. Support. Percent. PercentrelativelayoutXmlns:android="Http://schemas.android.com/apk/res/android"xmlns:app="Http://schemas.android.com/apk/res-auto"Android:layout_width="Match_parent"android:layout_height="Match_parent"> <imageview app:layout_widthpercent="50%"App:layout_heightpercent="50%"App:layout_margintoppercent="25%"App:layout_marginleftpercent="25%"/> </android. Support. Percent. Percentframelayout>

Just like a normal relativelayout control, you lose it, and the specific percentage behavior is manipulated in the child control. At first glance it is clear that the difference from the usual configuration is that layout_width or layout_height to control the size of the space instead of using app:layout_widthpercent= "50%" and App:layout_ Heightpercent= "50%" such a label to control the size, the size of the specific value is determined by the%, of course, the ratio here depends on the container parent control's% size.

So since there's a new label, let's introduce

The length and width of the above have been explained here, adding that if the percentage set value is too small and you still set the layout_width/height="Wrap_content", his size will become"Wrap_content"Sizeapp:Layout_widthpercentapp:layout_heightpercent//The following are some of the spacing settings, similar to relativelayout just use% as the size, the other is no differentapp:Layout_marginpercentapp:Layout_marginleftpercentapp:Layout_margintoppercentapp:Layout_marginrightpercentapp:Layout_marginbottompercentapp:Layout_marginstartpercentapp:layout_marginendpercent//If you want your controls to be in a certain proportion of the form such as -:9You can set the following, which will make the picture proportional -:9(1.78:1) app:layout_aspectratio="178%"

Details can be seen: https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html

OK, we have to simply read the source code, and then post the example codes on the call!

The whole class itself is not too much code, it is 100 lines, it is easy to read, Go

publicclass PercentRelativeLayout extends RelativeLayout

He was inherited from Relativelayout, as he had expected.

At the beginning of the article the official has introduced to

If a layout wants to support percentage based dimensions and use this helper class, its layoutparams subclass must Impleme NT this interface.

So Percentrelativelayout's series of implementations are PercentLayoutHelper related to

privatefinalnew PercentLayoutHelper(this);

At the beginning of the source code, an instance of this helper is obtained for invocation.

//Return to default layout parameters @Override    protectedLayoutparamsGeneratedefaultlayoutparams() {return NewLayoutparams (Layoutparams.match_parent, layoutparams.match_parent); }//Generate layout parameters    @Override     PublicLayoutparamsGeneratelayoutparams(AttributeSet attrs) {return NewLayoutparams (GetContext (), attrs); }//size operation, one layer at a pass    @Override    protected void onmeasure(intWidthmeasurespec,intHeightmeasurespec) {Mhelper.adjustchildren (Widthmeasurespec, Heightmeasurespec);Super. Onmeasure (Widthmeasurespec, Heightmeasurespec);if(Mhelper.handlemeasuredstatetoosmall ()) {Super. Onmeasure (Widthmeasurespec, Heightmeasurespec); }    }//Position operation, are mhelper to the corresponding implementation    @Override    protected void OnLayout(BooleanChangedintLeftintTopintRightintBottom) {Super. OnLayout (changed, left, top, right, bottom);    Mhelper.restoreoriginalparams (); }

The inner class is used to do layout implementation for percentrelativelayout, because the principle of multiple implementations of single inheritance can only build a layoutparams as a percentrelativelayout implementation.

   Public Static  class layoutparams extends relativelayout. Layoutparams Implements Percentlayouthelper. Percentlayoutparams {                    PrivatePercentlayouthelper.percentlayoutinfo Mpercentlayoutinfo; Public Layoutparams(Context C, AttributeSet attrs) {Super(c, Attrs);        Mpercentlayoutinfo = Percentlayouthelper.getpercentlayoutinfo (c, attrs); } Public Layoutparams(intWidthintHeight) {Super(width, height); } Public Layoutparams(Viewgroup.layoutparams Source) {Super(source); } Public Layoutparams(Marginlayoutparams Source) {Super(source); }@Override         PublicPercentlayouthelper.percentlayoutinfoGetpercentlayoutinfo() {if(Mpercentlayoutinfo = =NULL) {Mpercentlayoutinfo =NewPercentlayouthelper.percentlayoutinfo (); }returnMpercentlayoutinfo; }@Override        protected void setbaseattributes(TypedArray A,intWidthattr,intheightattr) {Percentlayouthelper.fetchwidthandheight ( This, A, widthattr, heightattr); }    }

Let's put the XML implemented again

<?xml version= "1.0" encoding= "Utf-8"?><android.support.percent.percentrelativelayout  xmlns:android  = "http://schemas.android.com/apk/res/ Android " xmlns:app  ="/http " Schemas.android.com/apk/res-auto " xmlns:tools  =     "Http://schemas.android.com/tools"  android:layout_width  = "match_parent"  android:layout_height  = "match_parent"  tools:context  =" wjj.com.percentdemo.MainActivity " >     <imageview  android:id
      = "@+id/a1"  android:layout_width  = "0DP"  android:layout_height  =" 0DP " android:layout_alignparenttop  =" true " android:background  =" @ Drawable/a1 " app:layout_heightpercent  =" 30% "  app:layout_widthpercent  = "70%" />< /span>    <imageview  android:id
      = "@+id/a3"  android:layout_width  = "0DP"  android:layout_height  =" 0DP " android:layout_below  =" @id /a1 " android:background  =" @drawable/a3 "  app:layout_heightpercent  = "28%"  Span class= "Hljs-attribute" >app:layout_widthpercent  = "60%" />     <imageview  android:id
      = "@+id/a2"  android:layout_width  = "0DP"  android:layout_height  =" 0DP " android:layout_below  =" @id /a1 " android:layout_torightof  =" @+id/a3 "         android:background  = "@drawable/a2"  app:layout_heightpercent  = "28%"  app:layout_widthpercent  =/>     <imageview  android:id
      = "@+id/a4"  android:layout_width  = "wrap_content"  android:layout_height  =" wrap_content " android:layout_alignparentright  = "true"  android:layout_alignparenttop  =" true " android:background  =" @ Drawable/a4 " app:layout_heightpercent  =" 25% "  app:layout_widthpercent  = "25%" />< /span>  <imageview  android: Layout_below  = "@id/a2"  android:layout_width< /span>= "wrap_content"  android:layout_height  = "wrap_content"  android:background  = "@drawable/a5"  app:layout_heightpercent  = "35%"  android:layout_centerhorizontal  = "true"  app:layout_widthpercent  =       "35%"  android:layout_alignparentbottom  = "true" / </android.support.percent.PercentRelativeLayout>

Add here:

The minimum version of Android 2.1 is 7 (now 4.0 or less)? One more step back, 4.3 or less? )

Source Address: Https://github.com/ddwhan0123/BlogSample/tree/master/PercentDemo

: Https://github.com/ddwhan0123/BlogSample/blob/master/PercentDemo/PercentDemo.zip?raw=true

Percentlinearlayout, this class, on-line key to not know the author, here also declared under 0,0

Percent layout (translation, experience) solve layout problems, another experience