前言
光说不练终究是假把式,所以我打算仿着南航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>
效果
作者:起风的早晨