android布局采用include 统一管理布局

最新推荐文章于 2024-12-15 00:23:56 发布

原创最新推荐文章于 2024-12-15 00:23:56 发布 · 785 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

android 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何在Android开发中通过include标签来实现布局的重用，提高代码复用率。作者展示了如何创建和使用顶部标题栏、底部导航栏的布局，并强调了include标签需要设置android:layout_width和android:layout_height属性才能生效。文章提供了最终效果图和项目下载链接。

通常的在一个项目中会有顶部标题栏和底部导航栏。而且这些东西在很多个界面都有使用。

我们采用include 来进行布局的重用。

include标签常用于将布局中的公共部分提取出来供其他layout共用，以实现布局模块化。

<include />标签可以使用单独的layout属性，前提是必须给其设置 android:layout_width 和 android:layout_height 两个属性。否则没效果。

Activity需要的布局文件：

<RelativeLayout xmlns: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" >

    <!--
        我的QQ :	2622596982
    
	邮箱:		android_lzd@163.com  
	
	QQ 交流群 ： 277599214
	
	tips :	欢饮各位朋友多多提意见,小弟不胜感激

    -->


    <!-- 这里是顶部标题栏的布局(只需要修改 include_top_title 布局中的内容就可以了，在这里不需要做任何的变动) -->

    <include
        android:id="@+id/il_top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        layout="@layout/include_top_title" />

    <!-- 这里是底部导航栏栏的布局(只需要修改 include_bottom_navigation 布局中的内容就可以了，在这里不需要做任何的变动) -->

    <include
        android:id="@+id/il_bottom"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        layout="@layout/include_bottom_navigation" />

    <!-- 中间部分要展示的内容，只需要把要在该区域展示的界面布局include进来就可以了，例如：layout="@layout/include_bottom_navigation" (不管是自定义的还是系统自带的,只需要这么一句话就可以了) -->

    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/il_bottom"
        android:layout_below="@id/il_top"
        layout="@layout/include_bottom_navigation" />

</RelativeLayout>

定义一个顶部标题栏的布局：

<RelativeLayout xmlns: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/darker_gray"
    android:paddingBottom="8dp"
    android:paddingTop="8dp" >

    <ImageView
        android:id="@+id/iv_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="8dp"
        android:background="@drawable/back" />

    <ImageView
        android:id="@+id/iv_go"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="8dp"
        android:background="@drawable/go"/>

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="这里是标题" />

</RelativeLayout>

然后我们在 activity 的布局文件中把该顶部标题栏的布局include进来就行了：

<RelativeLayout xmlns: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" >

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

</RelativeLayout>

效果图如下：

最后顺便将底部导航栏和中间内容显示区域也封装了吧。

底部导航栏：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/background_dark"
    android:orientation="horizontal" >

    <ImageView
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/home" />

    <ImageView
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/home" />

    <ImageView
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/home" />

    <ImageView
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/home" />

</LinearLayout>

最终的效果图如下：