工作内容:
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;
}
效果圖: