Android Support library percentage Layout

Android Support library percentage Layout

I have previously written an article on screen adaptation: Android screen adaptation best practices, which mentioned something similar to the percentage layout. However, this method has obvious disadvantages and adds a lot of useless data, this causes the apk package to become larger.

Google added a percent library in the support library, which is under the directory. If not, use sdk manager to update it to the latest version.

Before using it, let's take a look at the classes in this library.

Obviously, there is a subclass of the FrameLayout layout and a subclass of the RelativeLayout layout. In addition, there is a Helper class, which mainly measures the percentage and has an interface PercentLayoutParams, if we want to implement a percentage layout, we need to implement this interface.

Let's take a look at what custom attributes Google has published to the outside world.

     
                                                                              
  
  data-snippet-id=ext.2b933a51f6e8f083ce7880e2e69c69ee data-snippet-saved=false data-codota-status=done>
  
      
                                                                               
   
  

You can see the meaning of these attributes. The property value type is fraction, that is, decimal number and percentage. The main attributes include width, height as a percentage, and margin as a percentage. For the differences between Android MarginLeft and MarginStart, see the differences between Android MarginLeft and MarginStart. The extracted key content is as follows.

When writing layout, we will find that there are several similar attributes:
MarginStart MarginLeft
MarginEnd MarginRight

What are the differences between these attributes? According to the api comment, we know that MarginStart refers to the gap between the control and the View part starting with the control, and MarginLeft refers to the gap between the control and the View part on the left. The same applies to MarginEnd and MarginRight.

Generally, the start part of the View is left, but some languages are still written from right to left, for example, Arabic. After Android 4.2, google introduced the RTL layout in Android, better support for display from right to left text layout, in order to better be compatible with the RTL layout, google recommends MarginStart and MarginEnd to replace MarginLeft and MarginRight, so that the application can maintain a consistent user experience on the normal screen and on the screen from right to left.

After learning about this, we started to use PercentRelativeLayout.

Dependency on files added to the warehouse before use

    compile 'com.android.support:percent:22.2.0'

Start to write layout files, what we want to achieve

That is, the width of the red part on the left accounts for 30% of the screen, the height accounts for 90% of the screen, the width on the right accounts for 70% of the screen, and the height accounts for 45% of the screen. Before using the percentage layout, we generally use the weight of LinearLayout to achieve this effect. However, using weight will increase the nesting of the layout and overdraw the layout. Then, you can set the percentage of height and width without nesting.

    
     
  
    data-snippet-id=ext.e0cc7ff062800ed30b465316e1f4ce45 data-snippet-saved=false data-codota-status=done>
       
        
         
      
     
    
  
 

We want to set the layout width on the left to 30%, with app: layout_widthPercent = "30%" and height to 90%. to demonstrate the use of another property, we do not directly set the height to 90% here, instead, set the height to 100% and the bottom margin to 10%, that is

android:layout_alignParentBottom=trueapp:layout_heightPercent=100%app:layout_marginBottomPercent=10%

Write the two la s on the right.

As we can see at the beginning of this article, this library only provides two percentage la s for us. The common Linear la s do not provide the corresponding percentage la S. Therefore, if we want to implement one by ourselves, the answer is yes. By observing the existing two percentage layout code, we need to inherit the original layout, that is, LinearLayout, compile the corresponding constructor to call the parent class. Declare a PercentLayoutHelper object to assist in percentage measurement. In addition, you need to override the onMeasure and onLayout methods, and
The PercentLayoutHelper. PercentLayoutParams interface is implemented to inherit the LayoutParams of the original layout.

Then we will create a class named PercentLinearLayout that inherits LinearLayout, implement its construction method, and declare a final PercentLayoutHelper object.

public class PercentLinearLayout extends LinearLayout {    private final PercentLayoutHelper mHelper = new PercentLayoutHelper(this);    public PercentLinearLayout(Context context) {        super(context);    }    public PercentLinearLayout(Context context, AttributeSet attrs) {        super(context, attrs);    }    public PercentLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }}

Copy the existing two percentage LayoutParams to implement the internal class LayoutParams. Copy the code and modify it. Remember to inherit from android. widget. LinearLayout. LayoutParams.

   public static class LayoutParams extends android.widget.LinearLayout.LayoutParams implements PercentLayoutHelper.PercentLayoutParams {        private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;        public LayoutParams(Context c, AttributeSet attrs) {            super(c, attrs);            this.mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);        }        public LayoutParams(int width, int height) {            super(width, height);        }        public LayoutParams(android.view.ViewGroup.LayoutParams source) {            super(source);        }        public LayoutParams(MarginLayoutParams source) {            super(source);        }        public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo() {            return this.mPercentLayoutInfo;        }        protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr) {            PercentLayoutHelper.fetchWidthAndHeight(this, a, widthAttr, heightAttr);        }    }

In addition, we need to rewrite the generateLayoutParams method to generate LayoutParams and return our internal classes.

    @Override    public LayoutParams generateLayoutParams(AttributeSet attrs) {        return new PercentLinearLayout.LayoutParams(this.getContext(), attrs);    }

Then, repeat the onLayout and onMeasure methods. You do not need to implement this step by yourself. simply copy the code.

   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        this.mHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        if(this.mHelper.handleMeasuredStateTooSmall()) {            super.onMeasure(widthMeasureSpec, heightMeasureSpec);        }    }    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {        super.onLayout(changed, left, top, right, bottom);        this.mHelper.restoreOriginalParams();    }

In this way, the linear percentage layout is completed. Complete the following effects and draw graffiti freely.

It is mainly in red. From top to bottom, the height is 20%, 30%, and 30% of the parent container respectively. The width is 30%, 50%, and 40 of the parent container respectively. The third is placed on the right, the right side is 20% of the parent container, and the top margin is 10% of the parent container.

    
         
          
           
        
    
   
  
  data-snippet-id=ext.f12d75ada346cbb7c643acc2ed243bba data-snippet-saved=false data-codota-status=done>