Android Layout optimization

Categories:android

In the Android development, our commonly used layout way mainly has LinearLayout, relativelayout, Framelayout and so on, through these layouts we can realize various interfaces. At the same time, how to use these layouts to organize UI controls correctly and efficiently is one of the main prerequisites for building a good Android app. This article mainly revolves around the Android layout optimization to discuss in the daily development we use the common layout to need to pay attention to some aspects, simultaneously introduced an SDK to bring the UI performance detection Tool Hierarchyviewer.

Layout principles

With some of the usual, effective layout principles, we can create a highly loaded and reusable UI. In simple terms, the principles to be followed in the Android UI layout include the following:

Use Relativelayout as much as possible, do not use absolute layout absolutelayout;

Extracting reusable components and using < include/> tags;

Use < Viewstub/> tags to load some of the less commonly used layouts;

Use < Merge/> tags to reduce nesting levels of layouts;

Because of the high degree of fragmentation of Android, there is also a wide range of screen sizes, the use of relativelayout can make us build a more adaptable layout, the construction of the UI layout for multiple screen adaptation effect, by specifying the relative position between UI controls, so that in different screen The layout on the screen can be basically consistent. Of course, not all cases have to use relative layout, according to the specific circumstances to choose and other layout way to achieve the optimal layout.

1, < include the use of/>

In actual development, we often encounter some common UI components, such as the navigation bar with the return button, if you set this part of the layout for each XML file, one is a repetitive workload, and if there is a change, then every XML file has to be modified. Fortunately, Android provides us with < include/> tags, as the name suggests, by which we can extract the shared components into an XML file and then import the shared layout using < include/> tags, so that The two issues mentioned above have been solved. For example, as mentioned above, create a new XML layout file as a shared layout for top navigation.

XML common_navitationbar.xml

<relativelayout mlns:android=
"http://schemas.android.com/apk/res/ Android "
    xmlns:tools=" Http://schemas.android.com/tools "
    android:layout_width=" Match_parent
    " android:layout_height= "Wrap_content"
    android:background= "@android: Color/white"
    android:padding= "10dip" >

    <button
        android:layout_width= "wrap_content"
        android:layout_height= "Wrap_content"
        Android:layout_alignparentleft= "true"
        android:text= "back"
        android:textcolor= "@android: Color/black"/ >
    
    <textview
        android:layout_width= "wrap_content"
        android:layout_height= "Wrap_content"
        android:layout_centerinparent= "true"
        android:text= "Title"
        android:textcolor= "@android: color/ Black "/>

</RelativeLayout>

Then we import the shared layout through < include/> in the layout XML that needs to be introduced into the navigation bar.

XML main.xml
<relativelayout mlns:android=
"http://schemas.android.com/apk/res/android"
    xmlns: tools= "Http://schemas.android.com/tools"
    android:layout_width= "match_parent"
    android:layout_height= " Match_parent ">
    
    <include 
        android:layout_alignparenttop=" true "
        layout=" @layout/common_ Navitationbar "/>
    
</RelativeLayout>