Use of percent layouts

Today I have time to tinker with this thing and share it with you.

In the official package, there are two layouts for the percentages, as follows:

is Percentframelayout and Percentrelativelayout, let's talk about the use of these two percent layouts today.

1. Adding dependent libraries

This demo is done using Android Studio, so add the following line directly to the Gradle file.

compile ‘com.android.support:percent:23.1.0‘

2. Using in the layout file

<android.support.percent.percentrelativelayout xmlns: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 "> <view android:id=" @+id/top_left "android:layout_width=" 0DP "android:layout_he ight= "0DP" android:layout_alignparenttop= "true" android:background= "#ff44aacc" App:layout_heightperce Nt= "20%" app:layout_widthpercent= "70%"/> <view android:id= "@+id/top_right" Android:layout_w Idth= "0DP" android:layout_height= "0DP" android:layout_alignparenttop= "true" android:layout_torightof= "@+id/top_left" android:background= "#ffe40000" app:layout_heightpercent= "20%" app:layout_widthpercent = "30%"/> <view android:id= "@+id/bottom" android:layout_width= "Match_parent" Android:layout_ height= "0DP" Android:layout_below= "@+id/top_left" android:background= "#ff00ff22" app:layout_heightpercent= "80%"/></android.support . percent. Percentrelativelayout>

First, using a percent layout, our root layout has to be a percent layout.android.support.percent.Percentrelativelayout, we have added three view in the layout, each view shows a different color. When using the percent layout,Layout_widthAndLayout_heightThe value of the property does not work. We do this by usingapp: layout_heightpercent="20%"and App: layout_widthpercent="70%"Two properties to set the size of a control.

The above code in a total of three view, the width of the first view of the screen width of 70%, height of the screen height of 20%, the second view on the right side of the first view, its width of the screen width of 30%, height of the screen height of 20%, the third view and so on, then it is as follows:

Isn't it simple? In percent layout, except for the width we can be expressed as percentages, margin we can also be expressed as a percentage, such as the following properties:

App:layout_marginStartPercentapp:layout_marginEndPercentapp:layout_marginTopPercentapp:layout_ Marginbottompercent

We can set the margin property of the view to a percentage. In addition to these properties can be set to a percentage, there is a notable attribute, calledLayout_aspectratio, which is called the aspect ratio of the screen, let's look at the following layout file:

<?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    " Android:background= "#ff00ff22"    android:layout_width= "match_parent"    android:layout_height= "match_parent ">    <!--not using Aspectratio---    <view        android:id=" @+id/view1 "        android:background = "#ff44aacc"        android:layout_width= "100DP"        android:layout_height= "200DP"/>    <!--using Aspectratio here--    <view        android:layout_below= "@id/view1"        android:background= "#ffe40000"        android:layout_width= "100DP"        android:layout_torightof= "@id/view1"        android:layout_ Alignparenttop= "true"        android:layout_height= "0DP"        app:layout_aspectratio= "100%"/></ Android.support.percent.percentrelativelayout>

Look again:

The first view we set its width to 100DP, the height is set to 200DP, the second view we set its width to 100DP, but the height is set to 0DP, and also set the Layout_aspectratio property, the value of this property is 100% , which means that the aspect ratio of view is 1:1, so we see the above effect, if we set it to 50%, the aspect ratio is 0.5:1, then the effect we see is this:

Well, finally, let's look at a demo of the Percentframelayout layout:

The code is as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><android.support.percent.percentframelayout xmlns:android= "/http Schemas.android.com/apk/res/android "xmlns:app=" Http://schemas.android.com/apk/res-auto "android:id=" @+id/frame_ Layout "android:layout_width=" match_parent "android:layout_height=" Match_parent "> <imageview Android : id= "@+id/child1" android:layout_width= "0DP" android:layout_height= "0DP" app:layout_heightpercent= "10 0% "app:layout_widthpercent=" 100% "android:contentdescription=" Image "android:src=" @drawable/image052 "/> <textview android:id=" @+id/child2 "android:layout_width=" Wrap_content "Android:layout_h  eight= "Wrap_content" android:text= "Child 2" android:textsize= "24SP" android:layout_gravity= "Top|left" /> <textview android:textsize= "24sp" android:id= "@+id/child3" android:layout_width= "Wrap_co Ntent "android:layout_height="Wrap_content "android:text=" Child 3 "android:layout_gravity=" Top|right "/></android.support.percent.pe Rcentframelayout>

As follows:

Use of percent layouts