码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2015-01-09 19:27:45      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:

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

我们采用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>


最终的效果图如下:

技术分享


最后附上下载地址:

点我下载








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

标签:

原文地址:http://blog.csdn.net/escdelete/article/details/42556681

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!