先看看效果图:
image.png
image.png
image.png
- 首先设置
styles.xml
,设置为NoActionBar。
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar" />
</resources>
- 在
activity_main.xml
声明一个Toolbar控件并返回id
。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/tl_head"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@color/blue_light"
app:navigationIcon="@mipmap/ic_back" />
<TextView
android:id="@+id/tv_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="该页面演示溢出菜单功能"
android:textColor="@color/black"
android:textSize="17sp" />
</LinearLayout>
- 在
res
目录下新建一个menu
文件夹,并新建menu_overflow.xml
,代码如下。
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" >
<item
android:id="@+id/menu_refresh"
android:orderInCategory="1"
android:icon="@mipmap/ic_refresh"
app:showAsAction="ifRoom"
android:title="刷新"/>
<item
android:id="@+id/menu_about"
android:orderInCategory="8"
android:icon="@mipmap/ic_about"
app:showAsAction="never"
android:title="关于"/>
<item
android:id="@+id/menu_quit"
android:orderInCategory="9"
android:icon="@mipmap/ic_quit"
app:showAsAction="never"
android:title="退出"/>
</menu>
- 接下来写Java代码,新建一个
util
文件夹,并新建DateUtil
和MenuUtil
。
package com.example.toolbartest01.util;
import android.annotation.SuppressLint;
import android.text.TextUtils;
import java.text.SimpleDateFormat;
import java.util.Date;
/**
* Created by ouyangshen on 2017/9/24.
*/
@SuppressLint("SimpleDateFormat")
public class DateUtil {
public static String getNowDateTime(String formatStr) {
String format = formatStr;
if (TextUtils.isEmpty(format)) {
format = "yyyyMMddHHmmss";
}
SimpleDateFormat sdf = new SimpleDateFormat(format);
return sdf.format(new Date());
}
public static String getNowTime() {
SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss");
return sdf.format(new Date());
}
public static String getNowTimeDetail() {
SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss.SSS");
return sdf.format(new Date());
}
public static String getAddDate(String str, long day_num) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
Date old_date;
try {
old_date = sdf.parse(str);
} catch (Exception e) {
e.printStackTrace();
return "";
}
long time = old_date.getTime();
long diff_time = day_num * 24 * 60 * 60 * 1000;
// LogUtil.debug(TAG, "day_num="+day_num+", diff_time="+diff_time);
time += diff_time;
Date new_date = new Date(time);
return sdf.format(new_date);
}
}
package com.example.toolbartest01.util;
import android.content.Context;
import android.view.Menu;
import android.view.ViewConfiguration;
import android.view.Window;
import java.lang.reflect.Field;
import java.lang.reflect.Method;
/**
* Created by ouyangshen on 2018/1/21.
*/
public class MenuUtil {
// 如果设备有物理菜单按键,需要将其屏蔽才能显示OverflowMenu
// API18以下需要该函数在右上角强制显示选项菜单
public static void forceShowOverflowMenu(Context context) {
try {
ViewConfiguration config = ViewConfiguration.get(context);
Field menuKeyField = ViewConfiguration.class.
getDeclaredField("sHasPermanentMenuKey");
if (menuKeyField != null) {
menuKeyField.setAccessible(true);
menuKeyField.setBoolean(config, false);
}
} catch (Exception e) {
e.printStackTrace();
}
}
// 显示OverflowMenu的Icon
public static void setOverflowIconVisible(int featureId, Menu menu) {
// ActionBar的featureId是8,Toolbar的featureId是108
if (featureId % 100 == Window.FEATURE_ACTION_BAR && menu != null) {
if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
try {
// setOptionalIconsVisible是个隐藏方法,需要通过反射机制调用
Method m = menu.getClass().getDeclaredMethod(
"setOptionalIconsVisible", Boolean.TYPE);
m.setAccessible(true);
m.invoke(menu, true);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
}
最后是MainActivity
。
package com.example.toolbartest01;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;
import android.widget.Toast;
import com.example.toolbartest01.util.DateUtil;
import com.example.toolbartest01.util.MenuUtil;
/**
* Created by ouyangshen on 2017/10/21.
*/
@SuppressLint("SetTextI18n")
public class MainActivity extends AppCompatActivity {
private TextView tv_desc;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 从布局文件中获取名叫tl_head的工具栏
Toolbar tl_head = findViewById(R.id.tl_head);
// 设置工具栏的标题文字
tl_head.setTitle("溢出菜单页面");
// 使用tl_head替换系统自带的ActionBar
setSupportActionBar(tl_head);
tv_desc = findViewById(R.id.tv_desc);
}
@Override
public boolean onMenuOpened(int featureId, Menu menu) {
// 显示菜单项左侧的图标
MenuUtil.setOverflowIconVisible(featureId, menu);
return super.onMenuOpened(featureId, menu);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// 从menu_overflow.xml中构建菜单界面布局
getMenuInflater().inflate(R.menu.menu_overflow, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == android.R.id.home) { // 点击了工具栏左边的返回箭头
finish();
} else if (id == R.id.menu_refresh) { // 点击了刷新图标
tv_desc.setText("当前刷新时间: " + DateUtil.getNowDateTime("yyyy-MM-dd HH:mm:ss"));
return true;
} else if (id == R.id.menu_about) { // 点击了关于菜单项
Toast.makeText(this, "这个是工具栏的演示demo", Toast.LENGTH_LONG).show();
return true;
} else if (id == R.id.menu_quit) { // 点击了退出菜单项
finish();
}
return super.onOptionsItemSelected(item);
}
}
自定义菜单栏样式。
- 修改三点菜单的颜色
<style name="ToolBarTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorButtonNormal">@android:color/black</item>
<item name="colorControlNormal">@android:color/black</item>
</style>
- 修改三点菜单的图片
<style name="ToolBarTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="actionOverflowButtonStyle">@style/OverFlowButton</item>
</style>
<style name="OverFlowButton" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="android:src">@drawable/ic_menu</item>
</style>
- 修改菜单的弹出位置
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
</style>
<style name="OverflowMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
<!-- 修改竖直方向上与屏幕顶端的距离为50dp -->
<item name="android:dropDownVerticalOffset">50dp</item>
<!-- 修改水平方向上与屏幕右端的距离为10dp -->
<item name="android:dropDownHorizontalOffset">10dp</item>
</style>
- 最后在toolbar中引用theme
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:theme="@style/ToolBarTheme"
app:popupTheme="@style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
总结
Toolbar下的字体和图标颜色默认都是黑色的,如果你的背景也设置成黑色就看不到了。要修改样式去修改成其他颜色。
可能会用上的图片资源:
https://pan.baidu.com/s/1WkTFFA0bnE18cXVIon9MCg
提取码:cfg2
网友评论