前言
光说不练终究是假把式,所以我打算仿着南航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>