9.Android Development Notes: Layout Control (four) percentage layout

2.4 percentage layout

2.4.1 PercentFrameLayout

Three kinds of layout described earlier are from the Android version 1.0 has supported, has been used up to now, it can be said to meet the needs of most interface design scene. But careful you will find that only LinearLayoutsupport the use of layout_weightproperty to achieve the specified control function in proportion to the size of the other two layouts are not supported. For example, if you want RelativeLayoutto achieve the effect so that bisects the width of the layout of two buttons, it is more difficult.

To this end, Android introduces a new layout way to solve this problem - the percentage layout. In this arrangement, we can no longer use wrap_content, match_parent other ways to specify the size of the control, but allows direct control specified percentage share in the layout, so you can easily split the layout and even the layout of any proportional division the effect of .

The procedures Reference: Portal

Android Percentage distribution team will be defined in the support libraries them, we just need to add a dependency percentage layout library in build.gradle project, we can guarantee a percentage of the system layout compatibility across all versions of the Android.

1. Open the app / build.gradle file, add the following to the closure of dependencies:

implementation "androidx.percentlayout:percentlayout:1.0.0"

gradle file since the last synchronization later changed, need to be synchronized in order to make the project work again. Here only you need to click Sync Now you can, and then gradle will begin to synchronize the introduction of our new layout added percentage library into the project.

1. app/main/res/layout-->右键, new ->Layout Resource File：

Root element selection: PercentFrameLayout

​

1. New xmlns:app

  xmlns:app="http://schemas.android.com/apk/res-auto

As the percentage of built-in system layout is not among the SDK, you need to write out the full package path. Then you must also define a namespace app, so you can use custom attributes percentage layout.

Note that these attributes are not code hinting, you have to enter

1. Complete code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentFrameLayout
    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">

    <Button
        android:id="@+id/button1"
        android:text="Button 1"

        android:layout_gravity="left|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />
    <Button
        android:id="@+id/button2"
        android:text="Button 2"

        android:layout_gravity="right|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />
    <Button
        android:id="@+id/button3"
        android:text="Button 3"

        android:layout_gravity="left|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />
    <Button
        android:id="@+id/button4"
        android:text="Button 4"

        android:layout_gravity="right|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />


</androidx.percentlayout.widget.PercentFrameLayout>

2.4.2 PercentReletiveLayout

The main attributes are as follows, do not pay attention to these attributes code hinting, it has to enter:

And add your own xmlns: app = "http://schemas.android.com/apk/res-auto"

layout_widthPercent
layout_heightPercent
layout_marginPercent
layout_marginLeftPercent
layout_marginTopPercent
layout_marginRightPercent
layout_marginBottomPercent
layout_marginStartPercent
layout_marginEndPercent
layout_aspectRatio

Example:

<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.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"
    >
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FF4081"
        app:layout_heightPercent="100%"
        app:layout_marginPercent="4%"
        app:layout_widthPercent="10%"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView"
        android:background="#80FF4081"
        app:layout_heightPercent="80%"
        app:layout_marginPercent="4%"
        app:layout_widthPercent="10%"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView1"
        android:background="#60FF4081"
        app:layout_heightPercent="60%"
        app:layout_marginPercent="4%"
        app:layout_widthPercent="10%"/>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView2"
        android:background="#40FF4081"
        app:layout_heightPercent="40%"
        app:layout_marginPercent="4%"
        app:layout_widthPercent="10%"/>

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView3"
        android:background="#20FF4081"
        app:layout_heightPercent="20%"
        app:layout_marginPercent="4%"
        app:layout_widthPercent="10%"/>

</androidx.percentlayout.widget.PercentRelativeLayout>