快捷導(dǎo)航

Android仿UC底部菜單欄實(shí)現(xiàn)原理與代碼

更新時(shí)間：2013年01月11日 17:48:05 作者：

最近剛看完ViewPager,開始我打算用自定義的imgBtn，但是發(fā)現(xiàn)放在pager選項(xiàng)卡中不好排版，所以最好選了GridView,接下來介紹底部菜單欄實(shí)現(xiàn)

相關(guān)的鏈接：
Android 底部菜單欄實(shí)現(xiàn)

最近剛看完ViewPager，就想到做這樣一個(gè)Demo，當(dāng)然也參考了高手們的實(shí)例里邊的網(wǎng)格菜單，開始我打算用自定義的imgBtn，但是發(fā)現(xiàn)放在pager選項(xiàng)卡中不好排版，所以最好選了GridView，簡(jiǎn)單實(shí)用

一、先主界面xml
activity_main.xml

復(fù)制代碼代碼如下:

 
<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="設(shè)置" 
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中的三個(gè)選項(xiàng)卡xml
view_main.xml,view_set.xml,view_utils.xml

復(fù)制代碼代碼如下:

 
<?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> 

這是選項(xiàng)卡一view_main.xml，后面的兩個(gè)和這個(gè)一樣，就不發(fā)了
最后就是還有一個(gè)GirdView的適配器xml

復(fù)制代碼代碼如下:

 
<?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> 