Android布局优化--include 、merge、ViewStub

include用法:

      把通用的视图提取到一个单独的layout文件中,使用<include>标签在需要使用的其他layout布局文件中加载进来,例子:App导航栏等。对相同视图内容进行统一的控制管理,提高布局重用性。

1、抽取布局(标题栏):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="@color/colorPrimary"
    android:gravity="center"
    android:orientation="vertical">

    <View
        android:id="@+id/v_top"
        android:layout_width="match_parent"
        android:layout_height="0dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/height_title"
        android:gravity="center_vertical"
        >

        <ImageView
            android:id="@+id/tv_left"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:paddingRight="@dimen/margin_5"
            android:paddingLeft="@dimen/margin_10"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:src="@drawable/base_action_bar_back_bg_selector"
            />

        <TextView
            android:id="@+id/tv_title"
            style="@style/style_text_large"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_margin="2dp"
            android:textColor="@color/base_color_text_white"
            />

        <TextView
            android:id="@+id/tv_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:paddingTop="@dimen/margin_5"
            android:paddingBottom="@dimen/margin_5"
            android:paddingLeft="@dimen/margin_5"
            android:paddingRight="@dimen/margin_5"
            android:gravity="center"
            android:layout_marginRight="@dimen/margin_16"
            android:layout_centerVertical="true"
            android:textColor="@color/base_color_text_white"
            android:textSize="@dimen/text_size_medium" />

    </RelativeLayout>

</LinearLayout>

2、使用<include>标签加载

<include layout="@layout/include_navi"
    android:id="@+id/include2" />

merge用法

  merge标签存在的意义是帮助include标签排除多余的一层ViewGroup容器,减少view hierarchy的结构,提升UI渲染的性能。

1、创建标题栏

<merge 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">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:id="@+id/toolbar1"
        android:layout_height="wrap_content"
        app:elevation="0dp">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text=""
                android:textColor="#FFFFFF"
                android:textSize="20sp" />
        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>
</merge>

2、使用<include>标签加载

<include layout="@layout/layout_navbar_back"/>

ViewStub的用法

       ViewStub用来加载布局文件。ViewStub是一个不可见的View类,用于在运行时按需懒加载资源,只有在代码中调用了viewStub.inflate()或者viewStub.setVisible(View.visible)方法时才内容才变得可见。这里需要注意的一点是,当ViewStub被inflate到parent时,ViewStub就被remove掉了,即当前view hierarchy中不再存在ViewStub,而是使用对应的layout视图代替。

1、创建布局otherinfo.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content" >

    <EditText
        android:id="@+id/weichat_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:hint="请输入微信号" />

</LinearLayout>

2、加载主界面布局

<LinearLayout xmlns: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"
    android:background="@android:color/holo_blue_light"
    android:orientation="vertical" >

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="40dp"
        android:hint="请输入用户名" />

    <ViewStub
        android:id="@+id/viewstub"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout="@layout/otherinfo" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="show"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:text="显示" />

</LinearLayout>

3、ViewStub的使用

public void show(View view){
        ViewStub stub = ((ViewStub) findViewById(R.id.viewstub));
        if(stub!=null){
            View stubView = stub.inflate();
            EditText address = (EditText) stubView.findViewById(R.id.address_id);  
            EditText wechatId = (EditText) stubView.findViewById(R.id.weichat_id);  
        }
    }
发布了20 篇原创文章 · 获赞 1 · 访问量 2814

猜你喜欢

转载自blog.csdn.net/baidu_27603429/article/details/89842295