Android仿UC底部菜单栏实现原理与代码

相关的链接：
android 底部菜单栏实现

最近刚看完viewpager，就想到做这样一个demo，当然也参考了高手们的实例里边的网格菜单，开始我打算用自定义的imgbtn，但是发现放在pager选项卡中不好排版，所以最好选了gridview，简单实用

一、先主界面xml
activity_main.xml

<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="match_parent"
android:background="@drawable/bg"
tools:context=".mainactivity" >
<button
android:id="@+id/btn_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignparenttop="true"
android:layout_centerhorizontal="true"
android:text="show/hide menu" />
<linearlayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/btn_menu"
android:gravity="center"
android:orientation="horizontal" >
<com.example.mymenu.myimgbtn
android:id="@+id/main_btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_weight="1" />
<com.example.mymenu.myimgbtn
android:id="@+id/main_btn2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_weight="1" />
<com.example.mymenu.myimgbtn
android:id="@+id/main_btn3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_weight="1" />
<com.example.mymenu.myimgbtn
android:id="@+id/main_btn4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_weight="1" />
</linearlayout>
<relativelayout
android:id="@+id/layout_menu"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignparentbottom="true" >
<linearlayout
android:id="@+id/menu"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#dd000000"
android:gravity="center" >
<textview
android:id="@+id/tv_main"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="常用"
android:textcolor="#ffffffff" />
<textview
android:id="@+id/tv_utils"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="工具"
android:textcolor="#ffffffff" />
<textview
android:id="@+id/tv_set"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="设置"
android:textcolor="#ffffffff" />
</linearlayout>
<linearlayout
android:id="@+id/layout_anim"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/menu"
android:background="#eeff8c00" >
<imageview
android:id="@+id/iv_cursor"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaletype="matrix"
android:src="@drawable/img_cursor" />
</linearlayout>
<android.support.v4.view.viewpager
android:id="@+id/mypager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/layout_anim"
android:flipinterval="30"
android:persistentdrawingcache="animation" />
</relativelayout>
</relativelayout>

viewpager中的三个选项卡xml
view_main.xml,view_set.xml,view_utils.xml

<?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:background="#77ff0000"
android:orientation="vertical" >
<gridview
android:id="@+id/mygridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numcolumns="4"
android:layout_margin="10dp"
android:horizontalspacing="20dp"
android:gravity="center"
android:verticalspacing="20dp"
></gridview>
</linearlayout>

这是选项卡一view_main.xml，后面的两个和这个一样，就不发了
最后就是还有一个girdview的适配器xml

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent" >
<imageview
android:id="@+id/imgbtn_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerhorizontal="true"
/>
<textview
android:id="@+id/imgbtn_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/imgbtn_img"
android:layout_centerhorizontal="true"
android:text="text"
android:textcolor="#ff0000ff"
android:textsize="10sp" />
</relativelayout>

xml布局部分就这么多了