About the proportional layout of screen adaptation

For occasions such as tablets, their screen ratios are mainly 16:10 and 16:9.

But the screen size is different, the resolution is different, even the same size has multiple resolutions,

At this time, no matter whether you use dp or px, relative layout or linear layout, the effect will not be achieved.

But the proportional layout works well in this case.

 

First look at implementing proportional layout using custom controls:

Google has implemented PercentRelativeLayout and PercentFrameLayout in proportional layout,

The rest have to be implemented by yourself, such as PercentTextView, etc.

 

The code of the class implemented by Google has PercentRelativeLayout.java, PercentFrameLayout.java, PercentLayoutHelper.java and attrs.xml under the SDK path

Let's first look at the attributes in attrs.xml

<declare-styleable name="PercentLayout_Layout">
        <attr name="layout_widthPercent" format="fraction"/>

        <attr name="layout_heightPercent" format="fraction"/>

        <attr name="layout_marginPercent" format="fraction"/>
        <attr name="layout_marginLeftPercent" format="fraction"/>
        <attr name="layout_marginTopPercent" format="fraction"/>
        <attr name="layout_marginRightPercent" format="fraction"/>
        <attr name="layout_marginBottomPercent" format="fraction"/>
        <attr name="layout_marginStartPercent" format="fraction"/>
        <attr name="layout_marginEndPercent" format="fraction"/>
        <attr name="layout_aspectRatio" format="fraction" />
</declare-styleable>

For example the parent wiew uses PercentRelativeLayout

Child views can use these properties, and custom views can be nested, for example

<android.support.percent.PercentRelativeLayout
        android:id="@+id/titlebar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="6.75%"
        app:layout_widthPercent="100%"
        android:background="@drawable/titlebar" >

        <android.support.percent.PercentTextView
            android:id="@+id/texttitle"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_heightPercent="77.7777778%"
            app:layout_marginLeftPercent="0.39%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="15.390625%"
            android:background="@drawable/titletextbk"
            android:gravity="center"
            android:textColor="@android:color/white"
            android:textSize="26px" />

        <ImageView
            android:id="@+id/listmode"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_heightPercent="81.4814815%"
            app:layout_marginLeftPercent="19.14%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="5.15625%"
            android:background="@drawable/listpage"
            android:clickable="true"
            android:focusable="true"
            android:onClick="listmodeOnClick" />
......

The layout_aspectRatio property does not allow the layout to maintain the original scaling, but enforces a specified ratio

When you need a proportional textview, you need to customize it

Inheriting TextView, mainly overriding the setTextSize() method and calling it in the constructor

The above is a proportional layout for the layout

When using the proportional layout for the layout, I encountered the problem that the proportional layout cannot be scaled under the ScrollView, so I had to remove the ScrollView

 

Next, let's talk about the proportional layout in the code:

The idea is to get the ratio of the screen resolution to the standard (eg 1280)

public  class Useful {
    String TAG = "Util";
    private static float ratio = 1f;
    
    private static int getWidthPix(Activity activity) {
        DisplayMetrics displayMetrics = new DisplayMetrics();
        activity.getWindowManager().getDefaultDisplay()
                .getMetrics(displayMetrics);
        int widthPixels = displayMetrics.widthPixels;
        return widthPixels;
    }
    /**
     * Get the resolution ratio, to be executed after initRatio is executed
     * @param context
     * @return 
     * / 
    public  static  float getRatio () {
         return ratio;
    }

    public static void initRatio(Activity activity) {
        float nowWidthPix = getWidthPix(activity);
        Log.e("aaa","nowWidthPix:"+ nowWidthPix);
        ratio = nowWidthPix/1280;
        
    }

Because the activity must be passed in, initRatio is executed in the OnCreate method of MainActivity at the very beginning.

Then use getRatio where you need to get the ratio

Next, control the size and position of the control in the code, use px, and multiply or divide by ratio to achieve the effect of proportional layout (Note: some pictures need to be calculated by ratio^2)

 

Combining the above two types of methods can solve most of the needs of proportional layout