PopupMenuDemo【popupMenu的簡單使用】

時間 2019-11-06

標籤 popupmenudemo popupMenu的簡單使用简体版

原文原文鏈接

前言

本文主要將PopUpMenu和ToolbarDemo【Toolbar做爲頂部導航欄的簡單使用】進行搭配使用，實現toolbar的溢出菜單的另一種展示。java

效果圖

代碼分析

請閱讀參考資料。android

使用步驟

1、項目組織結構圖

注意事項：git

一、導入類文件後須要change包名以及從新import R文件路徑github

二、 Values目錄下的文件（strings.xml、dimens.xml、colors.xml等），若是項目中存在，則複製裏面的內容，不要整個覆蓋app

2、導入步驟

（1）將toolbar基礎代碼導入到項目中，參考《ToolbarDemo【Toolbar做爲頂部導航欄的簡單使用】》

（2）將nav_more_h.png複製到項目中

（3）在res/menu目錄中添加toolbar_one_menu.xml文件

<?xml version="1.0" encoding="utf-8"?>
<!-- 基礎的toolbar（右側只有一個圖標的樣式） -->
<!--app:showAsAction="ifRoom/never/always"，ifRoom表示只要在app bar存在可用空間，就能夠顯示，never表示一直顯示在溢出菜單（overflowwindow）裏面 -->
<!--always：始終把這個放到項目中app bar。可是谷歌建議避免這麼使用，除非它很是關鍵，使它始終顯示在操做欄。設置多個始終顯示在app bar可能會致使它們在應用欄其餘UI重疊。-->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_more"
        android:icon="@drawable/nav_more_h"
        android:title="更多"
        app:showAsAction="always"/>

</menu>

（4）添加popupMenu相關的圖片資源的menu文件以及樣式設置

一、將圖片資源添加到項目中ide

二、將popup_menu.xml添加到項目中佈局

<?xml version="1.0" encoding="utf-8"?>
<!-- 基礎的toolbar的menu -->
<!--app:showAsAction="ifRoom/never/always"，ifRoom表示只要在app bar存在可用空間，就能夠顯示，never表示一直顯示在溢出菜單（overflowwindow）裏面 -->
<!--always：始終把這個放到項目中app bar。可是谷歌建議避免這麼使用，除非它很是關鍵，使它始終顯示在操做欄。設置多個始終顯示在app bar可能會致使它們在應用欄其餘UI重疊。-->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_share"
        android:icon="@drawable/nav_menu_share"
        android:title="分享"
        app:showAsAction="never"
        />

    <item
        android:id="@+id/action_publish"
        android:icon="@drawable/nav_menu_fabu"
        android:title="發佈"
        app:showAsAction="never" />

</menu>

三、在styles.xml文件中添加如下代碼【注意：popupMenu的文本樣式使用的文本顏色和大小值跟toolbar通用】學習

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!-- 添加這一句， 便可改變toolbar右側更多圖標的顏色-->
        <item name="android:textColorSecondary">@color/nav_menu_text_color</item>
        <!-- popupMenu的樣式 -->
        <item name="android:popupMenuStyle">@style/popupmenu_bg_style</item>
        <item name="textAppearanceSmallPopupMenu">@style/popupmenu_text_style</item>
        <item name="textAppearanceLargePopupMenu">@style/popupmenu_text_style</item>
    </style>

    <!-- toolbar標題的顏色和大小值設置 -->
    <style name="nav_toolbar_title_style">
        <item name="android:textColor">@color/nav_text_color</item>
        <item name="android:textSize">@dimen/nav_title_text_size</item>
    </style>
    <!-- toolbar的menu（非popup樣式）的顏色和大小值設置 -->
    <style name="nav_toolbar_menu_style">
        <item name="android:actionMenuTextColor">@color/nav_menu_text_color</item>
        <item name="android:textSize">@dimen/nav_menu_text_size</item>
    </style>

    <!-- toolbar彈出的popup菜單的顏色和大小值設置 -->
    <style name="nav_toolbar_popup_style">
        <item name="android:colorBackground">@color/nav_popup_bg_color</item>
        <item name="android:textColor">@color/nav_popup_text_color</item>
        <item name="android:textSize">@dimen/nav_popup_text_size</item>
        <!--將overlapAnchor屬性設置成false就能夠在toolbar下方顯示-->
        <item name="overlapAnchor">false</item>
    </style>

    <!-- popupMenu的背景色 -->
    <style name="popupmenu_bg_style" >
        <item name="android:popupBackground">@drawable/popup_menu_bg</item>
    </style>
    <!-- popupMenu的文本樣式 -->
    <style name="popupmenu_text_style">
        <item name="android:textColor">@color/nav_popup_text_color</item>
        <item name="android:textSize">@dimen/nav_popup_text_size</item>
    </style>

</resources>

3、使用方法

（1）在activity佈局文件中引用nav_toolbar_base.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:orientation="vertical"
    android:background="#F4F4F4">

    <include layout="@layout/nav_toolbar_base"/>

</LinearLayout>

（2）在Activity中寫法以下this

package com.why.project.popupmenudemo;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.view.menu.MenuPopupHelper;
import android.support.v7.widget.PopupMenu;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

import java.lang.reflect.Field;

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;

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

        initToolBar();//初始化toolbar
    }

    private void initToolBar() {
        mToolbar = findViewById(R.id.toolbar_base);
        mToolbar.setTitle("");//這樣設置的話，自帶的標題就不會顯示
        //設置自定義的標題（居中）
        TextView toolBarTitle = mToolbar.findViewById(R.id.toolbarTitle);
        toolBarTitle.setText("標題");
        setSupportActionBar(mToolbar);//因爲toolbar只是一個普通控件，咱們將ToolBar設置爲ActionBar
        //設置導航圖標要在setSupportActionBar方法以後
        //mToolbar.setNavigationIcon(null);//設置爲空的話，就會不顯示左側的圖標
        //對NavigationIcon添加點擊
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

        //添加menu 菜單點擊事件
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.action_more:
                        //showPopupMenu(item.getActionView());//這樣寫報錯： java.lang.IllegalStateException: MenuPopupHelper cannot be used without an anchor
 showPopupMenu(findViewById(R.id.action_more)); break;
                }
                return true;
            }
        });

    }

    @Override
    public boolean onCreatePanelMenu(int featureId, Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar_one_menu, menu);//toolbar添加menu菜單
        return true;
    }

    @SuppressLint("RestrictedApi") private void showPopupMenu(View ancherView){ //建立彈出式菜單對象（最低版本11）
        PopupMenu popupMenu = new PopupMenu(this, ancherView);//第二個參數是綁定的那個view //獲取菜單填充器
        MenuInflater inflater = popupMenu.getMenuInflater(); //填充菜單
 inflater.inflate(R.menu.popup_menu, popupMenu.getMenu()); //使用反射，強制顯示菜單圖標
        try { Field field = popupMenu.getClass().getDeclaredField("mPopup"); field.setAccessible(true); MenuPopupHelper mPopup = (MenuPopupHelper) field.get(popupMenu); mPopup.setForceShowIcon(true); } catch (Exception e) { } //綁定菜單項的點擊事件
        popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()) { case R.id.action_share: Toast.makeText(MainActivity.this, "分享", Toast.LENGTH_SHORT).show(); break; case R.id.action_publish: Toast.makeText(MainActivity.this, "發佈", Toast.LENGTH_SHORT).show(); break; } return true; } }); //顯示(這一行代碼不要忘記了)
 popupMenu.show(); }
}