Android,安卓,toolbar,menu顯示位置

工作內容：

Toolbar(含溢出菜單設置[彈出菜單的使用])的使用
Toolbar的使用前提：設置主題

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

使用步驟：

【主要步驟是設置的彈出菜單的style，需在toolbar中的app:popupTheme = “@style/…”和appTheme中的Android:”actionOverflowMenuStyle = “@style/…“”中使用】

1.activity_main.xml中添加Toolbar如下

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/toolbar"
    android:background="@color/darkturquoise" //設置Toolbar的背景色
    app:titleTextColor="@color/white"     //設置標題顏色
    app:navigationIcon="@drawable/back"       //設置左邊按鈕圖標
    app:popupTheme="@style/OverflowMenuStyle" //設置彈出菜單的風格
    >

2.設置彈出菜單的風格【需添加到appTheme中,之後再添加到Toolbar的app:popupTheme中[如上代碼]】

<!--溢出[彈出]菜單樣式 parent相當於繼承【可以不要parent】-->
<style name="OverflowMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
    <!-- 是否覆蓋錨點，默認爲true，即蓋住Toolbar -->
    <item name="overlapAnchor">false</item>
    <item name="android:dropDownWidth">wrap_content</item>
    <item name="android:paddingRight">5dp</item>
    <!-- 彈出層背景顏色 -->
    <item name="android:popupBackground">@color/darkturquoise</item>
    <!-- 彈出層垂直方向上的偏移，即在豎直方向上距離Toolbar的距離，值爲負則會蓋住Toolbar -->
    <item name="android:dropDownVerticalOffset">5dp</item>
    <!-- 彈出層水平方向上的偏移，即距離屏幕左邊的距離，負值會導致右邊出現空隙 -->
    <item name="android:dropDownHorizontalOffset">0dp</item>
    <!-- 設置彈出菜單文字顏色 -->
    <item name="android:textColor">@color/white</item>
</style>

【需添加到appTheme中】如下：

<!-- 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="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
</style>

3.在res目錄下創建”Android resource directory”，類型選擇爲”menu”,名字可以使用默認名字“menu”

在新建的menu目錄下創建“Menu resource file”,命名爲“toolbar”

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <!-- 同級的item有幾個則在toolbar右邊顯示幾個 -->
    <!--
        id:之後設置點擊事件的時候找到當前菜單項的唯一標識
        title:必填項，Toolbar欄的menu標題
        [如果存在icon，則顯示icon圖標，不顯示文字]
        [如果不存在icon,則顯示文字]
        app:showAsAction = "ifRoom" ：顯示爲一個行爲
        android:showAsAction="ifRoom":icon失效顯示圖標爲“3個豎立的點”
    -->
    <item android:id="@+id/toolbar_r_img"
        android:title="分享"
        android:icon="@drawable/list_item"
        app:showAsAction="ifRoom"
        >
        <!-- item包含menu表示該menu是item下的子菜單 -->
        <menu>
            <!-- 將group中的菜單項放於一個組裏面 -->
            <group>
                <item android:id="@+id/toolbar_r_1"
                    android:title="登錄"
                    android:icon="@drawable/list_item"
                    app:showAsAction="ifRoom"
                    />
                <item android:id="@+id/toolbar_r_2"
                    android:title="註冊"
                    android:icon="@drawable/list_item"
                    app:showAsAction="ifRoom"
                    />
                <item android:id="@+id/toolbar_r_3"
                    android:title="設置"
                    android:icon="@drawable/list_item"
                    app:showAsAction="ifRoom"
                    />
            </group>
        </menu>
    </item>
    <!--<item android:title="學習"-->
        <!--android:id="@+id/item_learn"-->
        <!--android:icon="@drawable/list_item"-->
        <!--app:showAsAction="ifRoom"-->
        <!--/>-->
</menu>

4.java中設置Toolbar

//設置標題欄Toolbar
private void setToolbar() {
    toolbar.setTitle("鳳凰衛士");   //設置標題
    toolbar.setSubtitle("新浪消息");    //設置副標題
    toolbar.setSubtitleTextColor(Color.WHITE);  //設置副標題字體顏色
    setSupportActionBar(toolbar);   //必須使用
    //添加左邊圖標點擊事件
    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            finish();
        }
    });
    //添加menu項點擊事件
    toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            switch (item.getItemId()) {
                case R.id.toolbar_r_img:
                    Log.e("Test---->","點擊了右邊圖標");
                    break;
                case R.id.toolbar_r_1:
                    Log.e("Test---->","點擊了彈出菜單1");
                    break;
                case R.id.toolbar_r_2:
                    Log.e("Test---->","點擊了彈出菜單2");
                    break;
                case R.id.toolbar_r_3:
                    Log.e("Test---->","點擊了彈出菜單3");
                    break;
            }
            return true;    //返回爲true
        }
    });
}
//設置menu（右邊圖標）
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.toolbar, menu); //解析menu佈局文件到menu
    return true;
}

效果圖:

    <script type="text/javascript">
        $(function () {
            $('pre.prettyprint code').each(function () {
                var lines = $(this).text().split('\n').length;
                var $numbering = $('<ul/>').addClass('pre-numbering').hide();
                $(this).addClass('has-numbering').parent().append($numbering);
                for (i = 1; i <= lines; i++) {
                    $numbering.append($('<li/>').text(i));
                };
                $numbering.fadeIn(1700);
            });
        });
    </script>