[仿南航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>

效果