您的位置:首页 > 移动开发 > Android开发

Android的Toolbar(含溢出菜单设置[弹出菜单的使用])的使用PopMenu的样式

2017-03-23 11:18 423 查看
工作内容:

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;
}

效果图:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: