AndroidUI設(shè)計及開發(fā)底部菜單

-.z.\【AndroidUI設(shè)計與開發(fā)】第09期：底部菜單欄（四）Fragment+PopupWindow仿QQ空間最新版底部菜單欄分類：AndroidUI設(shè)計與開發(fā)2013-06-0417:431996人閱讀\o"舉報"舉報FragmentPopupWindowAndroid底部菜單欄高仿QQ空間請注明出處：/yangyu20121224/article/details/9023451

在今天的這篇文章當中，我依然會以實戰(zhàn)加理論結(jié)合的方式教大家如何設(shè)計出自己覺得很炫的UI界面。好的，話不多說，進入正題。今天的這篇文章主要是以仿QQ空間的底部菜單欄效果為主，實現(xiàn)的效果有：<1>實現(xiàn)了點擊按鈕時的切換圖片效果；<2>實現(xiàn)了點擊按鈕時的切換界面效果；<3>實現(xiàn)了點擊中間圓形按鈕時彈出菜單以及按鈕圖片切換效果；<4>實現(xiàn)了點擊空白處和返回鍵按鈕來關(guān)閉彈出菜單。有個地方需要注意的是，彈出菜單欄后，點擊里面的選項按鈕會導(dǎo)致中間的圓形按鈕切換為普通狀態(tài)，這是因為在實際的項目中，點擊菜單選項按鈕之后會進入別的界面，所以也就不存在點擊了之后圓形的按鈕切換為普通的狀態(tài)效果了，所以這里也不需要太在意。為了實現(xiàn)效果，這里只適配了480*800hdpi的屏幕大小。一、效果圖有圖才有真相二、項目結(jié)構(gòu)圖三、代碼詳細編寫1、主布局界面，activity_main.*ml：[html]viewplaincopyprint"<SPAN

style="FONT-SIZE:

12p*"><RelativeLayout

*mlns:android="schemas.android./apk/res/android"

*mlns:tools="schemas.android./tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<FrameLayout

android:id="+id/frame_content"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_above="+id/frameLayout1"

android:layout_alignParentLeft="true"

android:layout_alignParentRight="true"

android:layout_alignParentTop="true"

android:background="*ffffff"

>

</FrameLayout>

<FrameLayout

android:id="+id/frameLayout1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:background="drawable/toolbar_bg_normal"

>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_marginTop="1dp"

android:gravity="center_horizontal"

>

<FrameLayout

android:id="+id/layout_friendfeed"

android:layout_width="fill_parent"

android:layout_height="48dp"

android:layout_weight="1"

android:background="drawable/tab_btn_background">

<ImageView

android:id="+id/image_friendfeed"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="top|center"

android:layout_marginTop="1.0dip"

android:src="drawable/tab_friendfeed_btn"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|center"

android:layout_marginBottom="6.0dip"

android:te*t="動態(tài)"

android:te*tColor="*ffffff"

android:te*tSize="10sp"

/>

</FrameLayout>

<FrameLayout

android:id="+id/layout_myfeed"

android:layout_width="fill_parent"

android:layout_height="48dp"

android:layout_weight="1"

android:background="drawable/tab_btn_background">

<ImageView

android:id="+id/image_myfeed"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="top|center"

android:layout_marginTop="1.0dip"

android:src="drawable/tab_myfeed_btn"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|center"

android:layout_marginBottom="6.0dip"

android:te*t="與我想關(guān)"

android:te*tColor="*ffffff"

android:te*tSize="10sp"

/>

</FrameLayout>

<FrameLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

>

</FrameLayout>

<FrameLayout

android:id="+id/layout_home"

android:layout_width="fill_parent"

android:layout_height="48dp"

android:layout_weight="1"

android:background="drawable/tab_btn_background">

<ImageView

android:id="+id/image_home"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="top|center"

android:layout_marginTop="1.0dip"

android:src="drawable/tab_home_btn"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|center"

android:layout_marginBottom="6.0dip"

android:te*t="我的空間"

android:te*tColor="*ffffff"

android:te*tSize="10sp"

/>

</FrameLayout>

<FrameLayout

android:id="+id/layout_more"

android:layout_width="fill_parent"

android:layout_height="48dp"

android:layout_weight="1"

android:background="drawable/tab_btn_background">

<ImageView

android:id="+id/image_more"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="top|center"

android:layout_marginTop="1.0dip"

android:src="drawable/tab_more_btn"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|center"

android:layout_marginBottom="6.0dip"

android:te*t="更多"

android:te*tColor="*ffffff"

android:te*tSize="10sp"

/>

</FrameLayout>

</LinearLayout>

</FrameLayout>

<ImageView

android:id="+id/toggle_btn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:src="drawable/toolbar_btn_normal"

/>

<ImageView

android:id="+id/plus_btn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignTop="+id/frameLayout1"

android:layout_centerHorizontal="true"

android:layout_marginTop="6dip"

android:src="drawable/toolbar_plus"

/>

</RelativeLayout></SPAN>

<RelativeLayout*mlns:android="schemas.android./apk/res/android"*mlns:tools="schemas.android./tools"android:layout_width="fill_parent"android:layout_height="fill_parent"><FrameLayoutandroid:id="+id/frame_content"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="+id/frameLayout1"android:layout_alignParentLeft="true"android:layout_alignParentRight="true"android:layout_alignParentTop="true"android:background="*ffffff"></FrameLayout><FrameLayoutandroid:id="+id/frameLayout1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_alignParentLeft="true"android:background="drawable/toolbar_bg_normal"><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_marginTop="1dp"android:gravity="center_horizontal"><FrameLayoutandroid:id="+id/layout_friendfeed"android:layout_width="fill_parent"android:layout_height="48dp"android:layout_weight="1"android:background="drawable/tab_btn_background"><ImageViewandroid:id="+id/image_friendfeed"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="top|center"android:layout_marginTop="1.0dip"android:src="drawable/tab_friendfeed_btn"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|center"android:layout_marginBottom="6.0dip"android:te*t="動態(tài)"android:te*tColor="*ffffff"android:te*tSize="10sp"/></FrameLayout><FrameLayoutandroid:id="+id/layout_myfeed"android:layout_width="fill_parent"android:layout_height="48dp"android:layout_weight="1"android:background="drawable/tab_btn_background"><ImageViewandroid:id="+id/image_myfeed"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="top|center"android:layout_marginTop="1.0dip"android:src="drawable/tab_myfeed_btn"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|center"android:layout_marginBottom="6.0dip"android:te*t="與我想關(guān)"android:te*tColor="*ffffff"android:te*tSize="10sp"/></FrameLayout><FrameLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"></FrameLayout><FrameLayoutandroid:id="+id/layout_home"android:layout_width="fill_parent"android:layout_height="48dp"android:layout_weight="1"android:background="drawable/tab_btn_background"><ImageViewandroid:id="+id/image_home"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="top|center"android:layout_marginTop="1.0dip"android:src="drawable/tab_home_btn"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|center"android:layout_marginBottom="6.0dip"android:te*t="我的空間"android:te*tColor="*ffffff"android:te*tSize="10sp"/></FrameLayout><FrameLayoutandroid:id="+id/layout_more"android:layout_width="fill_parent"android:layout_height="48dp"android:layout_weight="1"android:background="drawable/tab_btn_background"><ImageViewandroid:id="+id/image_more"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="top|center"android:layout_marginTop="1.0dip"android:src="drawable/tab_more_btn"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|center"android:layout_marginBottom="6.0dip"android:te*t="更多"android:te*tColor="*ffffff"android:te*tSize="10sp"/></FrameLayout></LinearLayout></FrameLayout><ImageViewandroid:id="+id/toggle_btn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:src="drawable/toolbar_btn_normal"/><ImageViewandroid:id="+id/plus_btn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignTop="+id/frameLayout1"android:layout_centerHorizontal="true"android:layout_marginTop="6dip"android:src="drawable/toolbar_plus"/></RelativeLayout>我覺得這個布局界面是整個項目當中實現(xiàn)起來最復(fù)雜的地方，但是把思路理清楚了之后又覺得其實也沒有則復(fù)雜，詳細說一下我實現(xiàn)的步驟：

<1>最外層使用的是RelativeLayout，主要是為了容易擺放底部菜單欄的位置；

<2>然后是一個FrameLayout，主要用來存放顯示Fragment的容，這里的ID取名為frame_content是用來替換Fragment對象的，在后面的代碼中會用到；

<3>最下面的底部菜單欄中外層使用了FrameLayout，之所以使用FrameLayout是為了讓底部菜單欄中間的按鈕也可以擺放進來，實現(xiàn)一種疊加的效果；

<4>里面嵌套了LinearLayout，使用它是為了能夠使用layout_weight屬性，可以用來更好的擺放按鈕，還可以實現(xiàn)自適應(yīng)屏幕的效果（關(guān)于自適應(yīng)屏幕的容后面會有專題詳細講解）

<5>最后里面又嵌套了一個FrameLayout，使用它可以很方便的實現(xiàn)圖標在上文字在下的效果，最主要的原因是使用它可以很容易的再添加一個消息提醒的小圖片（實際的開發(fā)中會用到，此項目中沒有用到）2、彈出菜單的布局界面，popwindow_layout.*ml：[html]viewplaincopyprint"<SPAN

style="FONT-SIZE:

12p*"><"*ml

version="1.0"

encoding="utf-8"">

<RelativeLayout

*mlns:android="schemas.android./apk/res/android"

*mlns:tools="schemas.android./tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:background="drawable/popwindow_bg"

android:orientation="vertical"

tools:ignore="UselessParent"

>

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="15dp"

android:orientation="horizontal"

>

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:layout_weight="1"

android:orientation="vertical"

>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="1.0dip"

android:src="drawable/popwindow_write_btn"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5.0dip"

android:shadowColor="*ff000000"

android:shadowD*="1.0"

android:shadowDy="1.0"

android:shadowRadius="1.0"

android:te*t="說說"

android:te*tColor="*ffffffff"

android:te*tSize="13.0dip"

/>

</LinearLayout>

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:layout_weight="1"

android:orientation="vertical"

>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="1.0dip"

android:src="drawable/popwindow_voice_btn"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5.0dip"

android:shadowColor="*ff000000"

android:shadowD*="1.0"

android:shadowDy="1.0"

android:shadowRadius="1.0"

android:te*t="語音"

android:te*tColor="*ffffffff"

android:te*tSize="13.0dip"

/>

</LinearLayout>

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:layout_weight="1"

android:orientation="vertical"

>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="1.0dip"

android:src="drawable/popwindow_camera_btn"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5.0dip"

android:shadowColor="*ff000000"

android:shadowD*="1.0"

android:shadowDy="1.0"

android:shadowRadius="1.0"

android:te*t="照片"

android:te*tColor="*ffffffff"

android:te*tSize="13.0dip"

/>

</LinearLayout>

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:layout_weight="1"

android:orientation="vertical"

>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="1.0dip"

android:src="drawable/popwindow_picture_btn"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5.0dip"

android:shadowColor="*ff000000"

android:shadowD*="1.0"

android:shadowDy="1.0"

android:shadowRadius="1.0"

android:te*t="視頻"

android:te*tColor="*ffffffff"

android:te*tSize="13.0dip"

/>

</LinearLayout>

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:layout_weight="1"

android:orientation="vertical"

>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="1.0dip"

android:src="drawable/popwindow_sign_btn"

/>

<Te*tView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5.0dip"

android:shadowColor="*ff000000"

android:shadowD*="1.0"

android:shadowDy="1.0"

android:shadowRadius="1.0"

android:te*t="簽到"

android:te*tColor="*ffffffff"

android:te*tSize="13.0dip"

/>

</LinearLayout>

</LinearLayout>

</LinearLayout>

</RelativeLayout></SPAN>

<"*mlversion="1.0"encoding="utf-8""><RelativeLayout*mlns:android="schemas.android./apk/res/android"*mlns:tools="schemas.android./tools"android:layout_width="fill_parent"android:layout_height="fill_parent"><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:background="drawable/popwindow_bg"android:orientation="vertical"tools:ignore="UselessParent"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="15dp"android:orientation="horizontal"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="1.0dip"android:src="drawable/popwindow_write_btn"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5.0dip"android:shadowColor="*ff000000"android:shadowD*="1.0"android:shadowDy="1.0"android:shadowRadius="1.0"android:te*t="說說"android:te*tColor="*ffffffff"android:te*tSize="13.0dip"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="1.0dip"android:src="drawable/popwindow_voice_btn"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5.0dip"android:shadowColor="*ff000000"android:shadowD*="1.0"android:shadowDy="1.0"android:shadowRadius="1.0"android:te*t="語音"android:te*tColor="*ffffffff"android:te*tSize="13.0dip"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="1.0dip"android:src="drawable/popwindow_camera_btn"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5.0dip"android:shadowColor="*ff000000"android:shadowD*="1.0"android:shadowDy="1.0"android:shadowRadius="1.0"android:te*t="照片"android:te*tColor="*ffffffff"android:te*tSize="13.0dip"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="1.0dip"android:src="drawable/popwindow_picture_btn"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5.0dip"android:shadowColor="*ff000000"android:shadowD*="1.0"android:shadowDy="1.0"android:shadowRadius="1.0"android:te*t="視頻"android:te*tColor="*ffffffff"android:te*tSize="13.0dip"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="1.0dip"android:src="drawable/popwindow_sign_btn"/><Te*tViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="5.0dip"android:shadowColor="*ff000000"android:shadowD*="1.0"android:shadowDy="1.0"