android之Toolbar

2019-06-08 本文已影响38人 zheng_zq

先看看效果图:

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

android之Toolbar

自定义菜单栏样式。

总结

猜你喜欢

热点阅读