工作内容:
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中[如上代码]】
特别提示:可以在一下style中添加以下代码:设置menu列表项的分割线style
<item name="android:dropDownListViewStyle">@style/PopupMenuListView</item>
定义列表项分割线风格如下
<style name="PopupMenuListView" parent="@android:style/Widget.Holo.ListView.DropDown">
<item name="android:divider">@color/gray_99</item><!--menu列表项分割线的颜色--><item name="android:dividerHeight">1px</item><!--menu列表项分割线的高度-->
</style>
<!--溢出[弹出]菜单样式 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; }
效果图: