Android仿UC底部菜單欄實現(xiàn)原理與代碼
更新時間:2013年01月11日 17:48:05 作者:
最近剛看完ViewPager,開始我打算用自定義的imgBtn,但是發(fā)現(xiàn)放在pager選項卡中不好排版,所以最好選了GridView,接下來介紹底部菜單欄實現(xiàn)
相關(guān)的鏈接:
Android 底部菜單欄實現(xiàn)
最近剛看完ViewPager,就想到做這樣一個Demo,當(dāng)然也參考了高手們的實例里邊的網(wǎng)格菜單,開始我打算用自定義的imgBtn,但是發(fā)現(xiàn)放在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="設(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中的三個選項卡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,后面的兩個和這個一樣,就不發(fā)了
最后就是還有一個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布局部分就這么多了
Android 底部菜單欄實現(xiàn)
最近剛看完ViewPager,就想到做這樣一個Demo,當(dāng)然也參考了高手們的實例里邊的網(wǎng)格菜單,開始我打算用自定義的imgBtn,但是發(fā)現(xiàn)放在pager選項卡中不好排版,所以最好選了GridView,簡單實用
一、先主界面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中的三個選項卡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>
這是選項卡一view_main.xml,后面的兩個和這個一樣,就不發(fā)了
最后就是還有一個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>
xml布局部分就這么多了
您可能感興趣的文章:
相關(guān)文章
android開發(fā)之方形圓角listview代碼分享
我寫這篇文章受到了kiritor的專欄發(fā)表的博文Android UI控件之ListView實現(xiàn)圓角效果的啟發(fā)。2013-06-06Android TagCloudView云標(biāo)簽的使用方法
這篇文章主要為大家詳細(xì)介紹了Android TagCloudView云標(biāo)簽的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-05-05Android AIDL——進(jìn)程通信機(jī)制詳解
這篇文章主要介紹了Android AIDL——進(jìn)程通信機(jī)制詳解的相關(guān)資料,并附簡單實例,和實現(xiàn)效果圖,需要的朋友可以參考下2016-10-10深入解讀Android的內(nèi)部進(jìn)程通信接口AIDL
這篇文章主要介紹了Android的內(nèi)部進(jìn)程通信接口AIDL,重點講解了進(jìn)程間的通信與AIDL內(nèi)存使用方面的parcelable接口的實現(xiàn),需要的朋友可以參考下2016-04-04Android 雙進(jìn)程守護(hù)的實現(xiàn)代碼
這篇文章主要介紹了Android 雙進(jìn)程守護(hù)的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08Android RecyclerView顯示Item布局不一致解決辦法
這篇文章主要介紹了Android RecyclerView顯示Item布局不一致解決辦法的相關(guān)資料,需要的朋友可以參考下2017-07-07仿墨跡天氣在Android App中實現(xiàn)自定義zip皮膚更換
這篇文章主要介紹了仿墨跡天氣在Android App中實現(xiàn)自定義zip皮膚更換的方法,即讓用戶可以自行通過自制或者下載的zip皮膚包進(jìn)行換膚,需要的朋友可以參考下2016-02-02