[仿南航app开发日记1]开篇-总体布局分析

前言

光说不练终究是假把式，所以我打算仿着南航app来开发一下并在博客上写下开发日记，首先看一下app的样子

布局分析

首先最上面是一个ActionBar，先不管，先看下面

主页面应该是一个垂直方向的LinearLayout：
1. 显示广告的banner
2. 一个GridLayout布局
3. 一个ListView用来显示新闻
4. 底部菜单栏
然后今天先写底部菜单栏吧，整个菜单栏是一个RelativeLayout,然后里面嵌套一个水平方向的LinearLayout，每一个菜单都是一个垂直方向的LinearLayout：

从上图中可以看到，中间的菜单比其他的菜单要往上面突起一点，也就说超过了父容器LinearLayout的高度，这个属性可以在最外层的RelativeLayout中设置一个属性android:clipChildren属性，不然子child是不能超出父容器的，但我在网上看到别人说需要在布局的根节点设置这个属性，不然无效，可是我这里在根节点设置无效,不知道什么原因，还望知道的给我说说，好了，现在上布局的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!--显示banner-->
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="164dp">
    </android.support.v4.view.ViewPager>
    <!--显示功能-->
    <GridLayout
        android:id="@+id/myGrid"
        android:layout_width="match_parent"
        android:layout_height="177dp">

    </GridLayout>

    <!--显示新闻-->
    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">

    </ListView>
    <!--底部菜单栏-->
    <!--clipChildren属性必须在这里设置为false，在根节点设置无效-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:clipChildren="false"
        android:layout_height="70dp">
        <LinearLayout
            android:layout_alignParentBottom="true"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:gravity="center"
            android:background="@color/tabColor"
            android:orientation="horizontal">
            <!--我的资料-->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="25dp"
                    android:src="@drawable/pic_tab_home"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@android:color/white"
                    android:text="@string/tab_home"/>
            </LinearLayout>
            <!--我的课表-->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="25dp"
                    android:src="@drawable/pic_tab_doctor"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/tab_doctor"
                    android:textColor="@android:color/white"/>
            </LinearLayout>
            <!--中间小加号-->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:layout_gravity="bottom"
                android:layout_marginTop="-18dp"
                android:paddingTop="5dp"
                android:background="@drawable/home_shape"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="57dp"
                    android:scaleType="fitCenter"
                    android:src="@drawable/home_on"/>

            </LinearLayout>
            <!--我的通知-->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="25dp"
                    android:src="@drawable/pic_tab_project"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/tab_project"
                    android:textColor="@android:color/white"/>
            </LinearLayout>
            <!--扫一扫-->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="25dp"
                    android:src="@drawable/pic_tab_personal"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/tab_person"
                    android:textColor="@android:color/white"/>
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

因为突出来的那个菜单（LinearLayout）是圆角的，所以要写个shape,如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="150dp"/>
    <solid android:color="@color/tabColor"/>
</shape>

效果