Android的Toolbar(含溢位選單設定[彈出選單的使用])的使用PopMenu的樣式
阿新 • • 發佈:2019-02-10
工作內容:
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.Toolbarandroid: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【需新增到appTheme中】如下: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>
<!-- 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; }
效果圖: