【Android UI設計與開發】6.底部菜單欄（三）使用Fragment+PopupWindow仿QQ空間最新版底部菜單欄

直接看栗子吧，效果基本實現，界面微調和彈窗的優化，去作的話會很耗時說，暫時就醬紫了。上傳效果動態圖太大了，直接手機截圖的效果圖以下：

 

至於代碼的實現主要就是自定義的菜單欄，和用 PopupWindow 實現彈窗了。仔細看代碼很好懂的。

1.主界面佈局代碼以下：

<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="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/frameMenu"
        android:layout_alignParentTop="true" >
    </FrameLayout>

    <FrameLayout
        android:id="@+id/frameMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/skin_tabbar_bg"
            android:orientation="horizontal" >

            <!-- 動態 -->

            <FrameLayout
                android:id="@+id/layout_at"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/image_at"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:src="@drawable/skin_tabbar_icon_auth_select" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:text="@string/skin_tabbar_icon_auth"
                    android:textColor="@android:color/black"
                    android:textSize="12sp" />
            </FrameLayout>

            <!-- 與我相關 -->

            <FrameLayout
                android:id="@+id/layout_auth"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/image_auth"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:src="@drawable/skin_tabbar_icon_at_select" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:text="@string/skin_tabbar_icon_at"
                    android:textColor="@android:color/black"
                    android:textSize="12sp" />
            </FrameLayout>

            <!-- 留白 -->

            <FrameLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >
            </FrameLayout>

            <!-- 個人空間 -->

            <FrameLayout
                android:id="@+id/layout_space"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/image_space"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:src="@drawable/skin_tabbar_icon_space_select" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:text="@string/skin_tabbar_icon_space"
                    android:textColor="@android:color/black"
                    android:textSize="12sp" />
            </FrameLayout>

            <!-- 玩吧 -->

            <FrameLayout
                android:id="@+id/layout_more"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/image_more"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:src="@drawable/skin_tabbar_icon_more_select" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:text="@string/skin_tabbar_icon_more"
                    android:textColor="@android:color/black"
                    android:textSize="12sp" />
            </FrameLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:background="@android:color/black" >
        </LinearLayout>
    </FrameLayout>

    <!-- 中間按鈕背景 -->

    <ImageView
        android:id="@+id/toggle_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignTop="@+id/frameMenu"
        android:layout_centerInParent="true"
        android:src="@drawable/skin_tabbar_btn" />

    <!-- 中間按鈕 -->

    <ImageView
        android:id="@+id/plus_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignTop="@+id/frameMenu"
        android:layout_centerInParent="true"
        android:src="@drawable/skin_tabbar_icon_select" />

</RelativeLayout>

activity_main.xml

2.彈窗佈局，就是幾個圖標的顯示，比較簡單的，能夠看代碼

3.而後就是主界面邏輯代碼了，菜單欄按鈕事件控制頁面的顯示，能夠圖標的選中狀態，已經彈窗的實現，代碼以下：

package com.yanis.yc_ui_qzone;

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.util.DisplayMetrics;
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 FragmentAt fragmentAt;
    private FragmentAuth fragmentAuth;
    private FragmentSpace fragmentSpace;
    private FragmentMore fragmentMore;
    // 定義佈局對象
    private FrameLayout atFl, authFl, spaceFl, moreFl;

    // 定義圖片組件對象
    private ImageView atIv, authIv, spaceIv, moreIv;

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

    // 定義PopupWindow
    private PopupWindow popWindow;
    // 獲取手機屏幕分辨率的類
    private DisplayMetrics dm;

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

        initView();

        initData();

        // 初始化默認爲選中點擊了「動態」按鈕
        clickAtBtn();
    }

    /**
     * 初始化組件
     */
    private void initView() {
        // 實例化佈局對象
        atFl = (FrameLayout) findViewById(R.id.layout_at);
        authFl = (FrameLayout) findViewById(R.id.layout_auth);
        spaceFl = (FrameLayout) findViewById(R.id.layout_space);
        moreFl = (FrameLayout) findViewById(R.id.layout_more);

        // 實例化圖片組件對象
        atIv = (ImageView) findViewById(R.id.image_at);
        authIv = (ImageView) findViewById(R.id.image_space);
        spaceIv = (ImageView) findViewById(R.id.image_space);
        moreIv = (ImageView) findViewById(R.id.image_more);

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

    }

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

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

    /**
     * 點擊事件
     */
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        // 點擊動態按鈕
        case R.id.layout_at:
            clickAtBtn();
            break;
        // 點擊與我相關按鈕
        case R.id.layout_auth:
            clickAuthBtn();
            break;
        // 點擊個人空間按鈕
        case R.id.layout_space:
            clickSpaceBtn();
            break;
        // 點擊更多按鈕
        case R.id.layout_more:
            clickMoreBtn();
            break;
        // 點擊中間按鈕
        case R.id.toggle_btn:
            clickToggleBtn();
            break;
        }
    }

    /**
     * 點擊了「動態」按鈕
     */
    private void clickAtBtn() {
        // 實例化Fragment頁面
        fragmentAt = new FragmentAt();
        // 獲得Fragment事務管理器
        FragmentTransaction fragmentTransaction = this
                .getSupportFragmentManager().beginTransaction();
        // 替換當前的頁面
        fragmentTransaction.replace(R.id.frame_content, fragmentAt);
        // 事務管理提交
        fragmentTransaction.commit();
        // 改變選中狀態
        atFl.setSelected(true);
        atIv.setSelected(true);

        authFl.setSelected(false);
        authIv.setSelected(false);

        spaceFl.setSelected(false);
        spaceIv.setSelected(false);

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

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

        atFl.setSelected(false);
        atIv.setSelected(false);

        authFl.setSelected(true);
        authIv.setSelected(true);

        spaceFl.setSelected(false);
        spaceIv.setSelected(false);

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

    /**
     * 點擊了「個人空間」按鈕
     */
    private void clickSpaceBtn() {
        // 實例化Fragment頁面
        fragmentSpace = new FragmentSpace();
        // 獲得Fragment事務管理器
        FragmentTransaction fragmentTransaction = this
                .getSupportFragmentManager().beginTransaction();
        // 替換當前的頁面
        fragmentTransaction.replace(R.id.frame_content, fragmentSpace);
        // 事務管理提交
        fragmentTransaction.commit();

        atFl.setSelected(false);
        atIv.setSelected(false);

        authFl.setSelected(false);
        authIv.setSelected(false);

        spaceFl.setSelected(true);
        spaceIv.setSelected(true);

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

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

        atFl.setSelected(false);
        atIv.setSelected(false);

        authFl.setSelected(false);
        authIv.setSelected(false);

        spaceFl.setSelected(false);
        spaceIv.setSelected(false);

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

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

    /**
     * 改變顯示的按鈕圖片爲正常狀態
     */
    private void changeButtonImage() {
        plusImageView.setSelected(false);
    }

    /**
     * 顯示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);
            dm = new DisplayMetrics();
            getWindowManager().getDefaultDisplay().getMetrics(dm);
            // 建立一個PopuWidow對象
            popWindow = new PopupWindow(view, dm.widthPixels, LinearLayout.LayoutParams.WRAP_CONTENT); 
        }
        // 使其彙集 ，要想監聽菜單裏控件的事件就必需要調用此方法
        popWindow.setFocusable(true);
        // 設置容許在外點擊消失
        popWindow.setOutsideTouchable(true);
        // 設置背景，這個是爲了點擊「返回Back」也能使其消失，而且並不會影響你的背景
        popWindow.setBackgroundDrawable(new BitmapDrawable());
        // PopupWindow的顯示及位置設置
        // popWindow.showAtLocation(parent, Gravity.FILL, 0, 0);
        popWindow.showAsDropDown(parent, 0,0);

        popWindow.setOnDismissListener(new OnDismissListener() {
            @Override
            public void onDismiss() {
                // 改變顯示的按鈕圖片爲正常狀態
                changeButtonImage();
            }
        });

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

MainActivity

4.其餘的請看源代碼吧 o(∩_∩)o

 

源代碼地址：https://github.com/YeXiaoChao/Yc_ui_fragment_qzone