【Android UI設計與開發】第09期：底部菜單欄（四）Fragment+PopupWindow仿QQ空間最新版底部菜單欄

轉載出處：http://blog.csdn.net/yangyu20121224/article/details/9023451       

轉載，請自覺註明！

  

     在今天的這篇文章當中，我依然會以實戰加理論結合的方式教大家如何設計出自己覺得很炫的UI界面。好的，話不多說，進入正題。今天的這篇文章主要是以仿QQ空間的底部菜單欄效果爲主，實現的效果有：

<1>實現了點擊按鈕時的切換圖片效果；

<2>實現了點擊按鈕時的切換界面效果；

<3>實現了點擊中間圓形按鈕時彈出菜單以及按鈕圖片切換效果；

<4>實現了點擊空白處和返回鍵按鈕來關閉彈出菜單。

          有個地方需要注意的是，彈出菜單欄後，點擊裏面的選項按鈕會導致中間的圓形按鈕切換爲普通狀態，這是因爲在實際的項目中，點擊菜單選項按鈕之後會進入別的界面，所以也就不存在點擊了之後圓形的按鈕切換爲普通的狀態效果了，所以這裏也不需要太在意。爲了實現效果，這裏只適配了480x800 hdpi的屏幕大小。

一、效果圖

 

有圖纔有真相

二、項目結構圖

三、代碼詳細編寫

1、主佈局界面，activity_main.xml：

<span style="font-size:12px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/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" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:layout_marginBottom="6.0dip"
                    android:text="動態"
                    android:textColor="#ffffff"
                    android:textSize="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" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:layout_marginBottom="6.0dip"
                    android:text="與我想關"
                    android:textColor="#ffffff"
                    android:textSize="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" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:layout_marginBottom="6.0dip"
                    android:text="我的空間"
                    android:textColor="#ffffff"
                    android:textSize="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" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:layout_marginBottom="6.0dip"
                    android:text="更多"
                    android:textColor="#ffffff"
                    android:textSize="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>

         我覺得這個佈局界面是整個項目當中實現起來最複雜的地方，但是把思路理清楚了之後又覺得其實也沒有那麼複雜，詳細說一下我實現的步驟：

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

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

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

       <4> 裏面嵌套了LinearLayout，使用它是爲了能夠使用layout_weight屬性，可以用來更好的擺放按鈕，還可以實現自適應屏幕的效果（關於自適應屏幕的內容後面會有專題詳細講解）

       <5> 最後裏面又嵌套了一個FrameLayout，使用它可以很方便的實現圖標在上文字在下的效果，最主要的原因是使用它可以很容易的再添加一個消息提醒的小圖片（實際的開發中會用到，此項目中沒有用到）

2、彈出菜單的佈局界面，popwindow_layout.xml：

<span style="font-size:12px;"><?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="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" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5.0dip"
                    android:shadowColor="#ff000000"
                    android:shadowDx="1.0"
                    android:shadowDy="1.0"
                    android:shadowRadius="1.0"
                    android:text="說說"
                    android:textColor="#ffffffff"
                    android:textSize="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" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5.0dip"
                    android:shadowColor="#ff000000"
                    android:shadowDx="1.0"
                    android:shadowDy="1.0"
                    android:shadowRadius="1.0"
                    android:text="語音"
                    android:textColor="#ffffffff"
                    android:textSize="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" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5.0dip"
                    android:shadowColor="#ff000000"
                    android:shadowDx="1.0"
                    android:shadowDy="1.0"
                    android:shadowRadius="1.0"
                    android:text="照片"
                    android:textColor="#ffffffff"
                    android:textSize="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" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5.0dip"
                    android:shadowColor="#ff000000"
                    android:shadowDx="1.0"
                    android:shadowDy="1.0"
                    android:shadowRadius="1.0"
                    android:text="視頻"
                    android:textColor="#ffffffff"
                    android:textSize="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" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5.0dip"
                    android:shadowColor="#ff000000"
                    android:shadowDx="1.0"
                    android:shadowDy="1.0"
                    android:shadowRadius="1.0"
                    android:text="簽到"
                    android:textColor="#ffffffff"
                    android:textSize="13.0dip" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

</RelativeLayout></span>

3、其中一個Fragment佈局頁面，fragment_1.xml：

<span style="font-size:12px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:src="@drawable/xianjian01" >
    </ImageView>

</LinearLayout></span>

4、自定義按鈕的資源文件，由於比較簡單，就列出其中一個，tab_friendfeed_btn.xml：

<span style="font-size:12px;"><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/toolbar_friendfeed_pressed" android:state_selected="true"/>
    <item android:drawable="@drawable/toolbar_friendfeed_normal"/>

</selector></span>

5、主Activity界面，MainActivity.java：

<span style="font-size:12px;">package com.yangyu.mycustomtab03;

import android.content.Context;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import android.widget.PopupWindow.OnDismissListener;

public class MainActivity extends FragmentActivity implements OnClickListener{
    //定義Fragment頁面
    private FragmentPage1 fragmentPage1;
    private FragmentPage2 fragmentPage2;
    private FragmentPage3 fragmentPage3;
    private FragmentPage4 fragmentPage4;

    //定義佈局對象
    private FrameLayout friendfeedFl,myfeedFl,homeFl,moreFl;

    //定義圖片組件對象
    private ImageView friendfeedIv,myfeedIv,homeIv,moreIv;

    //定義按鈕圖片組件
    private ImageView toggleImageView,plusImageView;

    //定義PopupWindow
    private PopupWindow popWindow;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();

        initData();

        //初始化默認爲選中點擊了“動態”按鈕
        clickFriendfeedBtn();
    }

    /**
     * 初始化組件
     */
    private void initView(){
        //實例化佈局對象
        friendfeedFl = (FrameLayout)findViewById(R.id.layout_friendfeed);
        myfeedFl = (FrameLayout)findViewById(R.id.layout_myfeed);
        homeFl = (FrameLayout)findViewById(R.id.layout_home);
        moreFl = (FrameLayout)findViewById(R.id.layout_more);

        //實例化圖片組件對象
        friendfeedIv = (ImageView)findViewById(R.id.image_friendfeed);
        myfeedIv = (ImageView)findViewById(R.id.image_myfeed);
        homeIv = (ImageView)findViewById(R.id.image_home);
        moreIv = (ImageView)findViewById(R.id.image_more);

        //實例化按鈕圖片組件
        toggleImageView = (ImageView)findViewById(R.id.toggle_btn);
        plusImageView = (ImageView)findViewById(R.id.plus_btn);
    }

    /**
     * 初始化數據
     */
    private void initData(){
        //給佈局對象設置監聽
        friendfeedFl.setOnClickListener(this);
        myfeedFl.setOnClickListener(this);
        homeFl.setOnClickListener(this);
        moreFl.setOnClickListener(this);

        //給按鈕圖片設置監聽
        toggleImageView.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        //點擊動態按鈕
        case R.id.layout_friendfeed:
            clickFriendfeedBtn();
            break;
        //點擊與我相關按鈕
        case R.id.layout_myfeed:
            clickMyfeedBtn();
            break;
        //點擊我的空間按鈕
        case R.id.layout_home:
            clickHomeBtn();
            break;
        //點擊更多按鈕
        case R.id.layout_more:
            clickMoreBtn();
            break;
        //點擊中間按鈕
        case R.id.toggle_btn:
            clickToggleBtn();
            break;
        }
    }

    /**
     * 顯示PopupWindow彈出菜單
     */
    private void showPopupWindow(View parent){
        if (popWindow == null) {
            LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View view = layoutInflater.inflate(R.layout.popwindow_layout,null);
            // 創建一個PopuWidow對象
            popWindow = new PopupWindow(view,LinearLayout.LayoutParams.FILL_PARENT, 200);
        }
        // 使其聚集 ，要想監聽菜單裏控件的事件就必須要調用此方法
        popWindow.setFocusable(true);
        // 設置允許在外點擊消失
        popWindow.setOutsideTouchable(true);
        // 設置背景，這個是爲了點擊“返回Back”也能使其消失，並且並不會影響你的背景
        popWindow.setBackgroundDrawable(new BitmapDrawable());
        //設置菜單顯示的位置
        popWindow.showAsDropDown(parent, Gravity.CENTER, 0);

        //監聽菜單的關閉事件
        popWindow.setOnDismissListener(new OnDismissListener() {
            @Override
            public void onDismiss() {
                //改變顯示的按鈕圖片爲正常狀態
                changeButtonImage();
            }
        });

        //監聽觸屏事件
        popWindow.setTouchInterceptor(new OnTouchListener() {
            public boolean onTouch(View view, MotionEvent event) {
                //改變顯示的按鈕圖片爲正常狀態
                changeButtonImage();

                return false;
            }
        });
    }

    /**
     * 點擊了“動態”按鈕
     */
    private void clickFriendfeedBtn(){
        //實例化Fragment頁面
        fragmentPage1 = new FragmentPage1();
        //得到Fragment事務管理器
        FragmentTransaction fragmentTransaction = this.getSupportFragmentManager().beginTransaction();
        //替換當前的頁面
        fragmentTransaction.replace(R.id.frame_content, fragmentPage1);
        //事務管理提交
        fragmentTransaction.commit();

        friendfeedFl.setSelected(true);
        friendfeedIv.setSelected(true);

        myfeedFl.setSelected(false);
        myfeedIv.setSelected(false);

        homeFl.setSelected(false);
        homeIv.setSelected(false);

        moreFl.setSelected(false);
        moreIv.setSelected(false);
    }

    /**
     * 點擊了“與我相關”按鈕
     */
    private void clickMyfeedBtn(){
        // 實例化Fragment頁面
        fragmentPage2 = new FragmentPage2();
        // 得到Fragment事務管理器
        FragmentTransaction fragmentTransaction = this.getSupportFragmentManager().beginTransaction();
        // 替換當前的頁面
        fragmentTransaction.replace(R.id.frame_content, fragmentPage2);
        // 事務管理提交
        fragmentTransaction.commit();

        friendfeedFl.setSelected(false);
        friendfeedIv.setSelected(false);

        myfeedFl.setSelected(true);
        myfeedIv.setSelected(true);

        homeFl.setSelected(false);
        homeIv.setSelected(false);

        moreFl.setSelected(false);
        moreIv.setSelected(false);
    }

    /**
     * 點擊了“我的空間”按鈕
     */
    private void clickHomeBtn(){
        // 實例化Fragment頁面
        fragmentPage3 = new FragmentPage3();
        // 得到Fragment事務管理器
        FragmentTransaction fragmentTransaction = this.getSupportFragmentManager().beginTransaction();
        // 替換當前的頁面
        fragmentTransaction.replace(R.id.frame_content, fragmentPage3);
        // 事務管理提交
        fragmentTransaction.commit();

        friendfeedFl.setSelected(false);
        friendfeedIv.setSelected(false);

        myfeedFl.setSelected(false);
        myfeedIv.setSelected(false);

        homeFl.setSelected(true);
        homeIv.setSelected(true);

        moreFl.setSelected(false);
        moreIv.setSelected(false);
    }

    /**
     * 點擊了“更多”按鈕
     */
    private void clickMoreBtn(){
        // 實例化Fragment頁面
        fragmentPage4 = new FragmentPage4();
        // 得到Fragment事務管理器
        FragmentTransaction fragmentTransaction = this.getSupportFragmentManager().beginTransaction();
        // 替換當前的頁面
        fragmentTransaction.replace(R.id.frame_content, fragmentPage4);
        // 事務管理提交
        fragmentTransaction.commit();

        friendfeedFl.setSelected(false);
        friendfeedIv.setSelected(false);

        myfeedFl.setSelected(false);
        myfeedIv.setSelected(false);

        homeFl.setSelected(false);
        homeIv.setSelected(false);

        moreFl.setSelected(true);
        moreIv.setSelected(true);
    }

    /**
     * 點擊了中間按鈕
     */
    private void clickToggleBtn(){
        showPopupWindow(toggleImageView);
        //改變按鈕顯示的圖片爲按下時的狀態
        plusImageView.setImageResource(R.drawable.toolbar_plusback);
        toggleImageView.setImageResource(R.drawable.toolbar_btn_pressed);
    }

    /**
     * 改變顯示的按鈕圖片爲正常狀態
     */
    private void changeButtonImage(){
        plusImageView.setImageResource(R.drawable.toolbar_plus);
        toggleImageView.setImageResource(R.drawable.toolbar_btn_normal);
    }

}</span><span style="font-size:18px;">
</span>

6、Fragment其中一個頁面，FragmentPage1.java：

package com.yangyu.mycustomtab03;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentPage1 extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_1, null);
    }
}

        到這裏整個項目就基本上講完了，大家還可以爲此項目繼續完善下去，實現點擊菜單選項後實現的效果以及頂部標題欄的實現。對於這個項目，博主還有一個地方不明白，就是針對此項目，在彈出菜單後，有什麼好的簡單一點的方法將背景置爲灰色？我也試了一些方法，但是效果都不是特別的理想，希望讀者有什麼想法可以給博主留言，大家可以互相交流學習一下。

源碼下載地址