Toolbar设置掉坑总结

时间 2019-11-24

标签 toolbar 设置总结繁體版

原文原文链接

前言:

由于须要封装toolbar,因此完全的研究了下toolbar, 之前只是简单用用,如今发现彻底用起来不少坑,总结一下.android

先来张效果图:

Toolbar的结构其实很简单:

1.NavigationIcon 2.Logo 3.Title 4.subTitle 5.menu. 经常使用的:1,3,5bash

友情提示:

getSupportActionBar()必定要在setSupportActionBar(Toolbar toolbar)以后调用app

先说经常使用的:

1.NavigationIcon的几个方法

//设置是否添加显示NavigationIcon.若是要用
void setDisplayHomeAsUpEnabled(boolean showHomeAsUp);
//设置NavigationIcon的icon.能够是Drawable ,也能够是ResId
void setNavigationIcon(@Nullable Drawable icon);
void setNavigationIcon(@DrawableRes int resId) 
//设置NavigationIcon的点击监听.
void setNavigationOnClickListener(OnClickListener listener);
复制代码

具体使用:

Toolbar mToolbar =  (Toolbar)findViewById(R.id.toolbar)
//设置Toolbar
 setSupportActionBar(mToolbar);
//显示NavigationIcon,这个方法是ActionBar的方法.Toolbar没有这个方法.
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//设置icon
mToolbar.setNavigationIcon(drawable);
//设置监听.必须在setSupportActionBar()以后调用
mToolbar.setNavigationOnClickListener(clickListener);
复制代码

总结几个坑:

1.必须先 setSupportActionBar(mToolbar).ide

2.setDisplayHomeAsUpEnabled(true)是ActionBar的方法.布局

3.setNavigationOnClickListener()必需要在setSupportActionBar()以后调用才能生效.由于setSupportActionBar(Toolbar),会将Toolbar转换成Acitionbar.点击监听也会从新设置.字体

2.Title

几个方法:

//是否显示
getSupportActionBar().setDisplayShowTitleEnabled(boolean showTitle);
//设置title.
getSupportActionBar().setTitle(title);
//设置title.
Toolbar.setTitle(title);
//设置Margin边距.
Toolbar.setTitleMargin();
//设置字体.
Toolbar.setTitleTextAppearance();
//设置字的颜色
Toolbar.setTitleTextColor(int color);
复制代码

总结:

使用比较简单.基本看方法名就知道是干吗的了.也没什么坑. Toolbar直接设置title或者getSupportActionBar()再设置title均可以.ui

3 Menu菜单

这玩意用起来有点蛋疼.坑挺多的.spa

先说建立:

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //写一个menu的资源文件.而后建立就好了.
        getMenuInflater().inflate(R.menu.menu,menu);
        return super.onCreateOptionsMenu(menu);
    }

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      tools:context="com.example.acctionbaractivitydemo.MainActivity">
    <item
        android:id="@+id/menu1"
        //图标
        android:icon="@mipmap/ic_launcher"
        //名字
        android:title=""
        app:showAsAction="withText|ifRoom"/>
    <item
        android:id="@+id/menu2"
        android:icon="@mipmap/ic_launcher"
        android:title="哈哈"
        app:showAsAction="withText"/>
    <item
        android:id="@+id/menu3"
        android:icon="@mipmap/ic_launcher"
        android:title="呵呵"
        app:showAsAction="withText"/>
</menu>

//showAsAction这个属性的值有： 
//一、always：使菜单项一直显示在ToolBar上。 
//二、ifRoom：若是有足够的空间，这个值会使菜单项显示在ToolBar上。 
//三、never：使菜单项永远都不出如今ToolBar上,在…的子项中显示。 
//四、withText：使菜单项和它的图标，菜单文本一块儿显示。
复制代码

设置Menu点击

/**
     * 菜单项被点击时调用，也就是菜单项的监听方法。
     * 经过这几个方法，能够得知，对于Activity，同一时间只能显示和监听一个Menu 对象.
     */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        return super.onOptionsItemSelected(item);
    }
   //经过设置toolbar进行监听,在setSupportActionBar(Toolbar toolbar)以前设置可能会失 效.
    Toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem item) {
                    return false;
                }
            });
复制代码

Menu的一些操做

/**
     * 每次菜单被关闭时调用.
     *菜单被关闭有三种情形:
     *1.展开menu的按钮被再次点击
     *2.back按钮被点击
     *3.用户选择了某一个菜单项
     */
    @Override
    public void onOptionsMenuClosed(Menu menu) {
        super.onOptionsMenuClosed(menu);
    }
  /**
     * 在onCreateOptionsMenu执行后，菜单被显示前调用；若是菜单已经被建立，则在菜单显示前被调用。 一样的，
     * 返回true则显示该menu,false 则不显示; （能够经过此方法动态的改变菜单的状态，好比加载不一样的菜单等）
     */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        return super.onPrepareOptionsMenu(menu);
    }
  /**
     * 显示menu的icon,经过反射,设置Menu的icon显示.
     * @param view
     * @param menu
     * @return
     */
    @Override
    protected boolean onPrepareOptionsPanel(View view, Menu menu) {
        if (menu != null) {
            if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
                try{
                    Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                    Log.e(getClass().getSimpleName(), "onMenuOpened...unable to set icons for overflow menu", e);
                }
            }
        }
        return super.onPrepareOptionsPanel(view, menu);
    }

复制代码

style的配置:

style的配置感受挺恶心的.坑挺多的

基本的配置:3d

<style name="toolbar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        //设置toolbar的最小高度.这样设置的意义,就是解决适配的问题,标准md高度.
        <item name="android:minHeight">?attr/actionBarSize</item>
        <item name="android:background">@color/colorPrimary</item>
          //设置沉浸式,
        <item name="android:fitsSystemWindows">true</item>
    </style>
复制代码

style的有些方法必须是Sdk21以上才能用,因此得这样code

建立一个values-v21的文件夹,再写一个style. 还得作一些配置. 普通values中的style改为以下:

<style name="toolbar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:minHeight">?attr/actionBarSize</item>
        <item name="android:background">@color/colorPrimary</item>

        <item name="android:fitsSystemWindows">true</item>
    </style>
    <style name="base_toolbar" parent="toolbar"/>

复制代码

values-v21中的style以下:

<style name="base_toolbar" parent="@style/toolbar">
        <item name="android:elevation">3dp</item>
        <item name="android:navigationIcon">?attr/homeAsUpIndicator</item>
    </style>
复制代码

使用这个style

style="@style/base_toolbar"
复制代码

-----------------------------------------------分割线 -----------------------------------------------

如今来讲说style中的坑:

1.app:theme ------------------toolbar的主题

2.app:popupTheme------------弹出的menu的主题.

<!-- ToolBar样式 .-->
    <style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Dark">
        <item name="android:textSize">18sp</item> <!--  字体大小-->
    </style>
  <!-- ToolBar菜单样式.-->
    <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Dark">
        <item name="android:background">@android:color/white</item>
        <item name="android:textColor">@android:color/holo_red_dark</item>
    </style>
复制代码

继承的是ThemeOverlay.AppCompat:

若是使用的是Dark系列的主题,那么字体就是白色的.menu菜单背景是黑色

若是使用的是Light系列的主题,那么字体和图标就是黑色的.menu菜单背景是白色

下面说说这里坑的地方:

1.修改toolbar的字体

<!-- ToolBar样式 .-->
   <style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <!--修改toolbar的Title颜色.正确-->
       <item name="android:textColorPrimary">@android:color/holo_red_dark</item>
       <!--错误,网上有些资料是这样的,然而这样写编译都会报错-->
       <item name="textColorPrimary">@android:color/holo_red_dark</item>
       <!--修改toolbar的subtitle(小标题)颜色.正确-->
       <item name="subtitleTextColor">@android:color/holo_red_dark</item>
   </style>
复制代码

2.修改Toolbar的menu折叠图标和NavigationIcon的颜色

<style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light">
          <!-正确,这个要求Api大于21-->
        <item name="android:colorControlNormal">@android:color/holo_red_dark</item>
        <!--这个也正确,用这个吧-->
        <item name="colorControlNormal">@android:color/holo_red_dark</item>
    </style>
复制代码

效果图:

3.修改menu的字体颜色(大坑):

既然是menu菜单的内容,固然是修改popup_theme了.

找了不少资料,发现都不正确. 好比说设置android:actionMenuTextColor这个属性

<style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <!--这个不对,不生效-->    
      <item name="android:actionMenuTextColor">@android:color/holo_red_dark</item>
    
    </style>
复制代码

后来干脆一个个属性试好了,发现其实没那么麻烦..

<!-- ToolBar菜单样式.-->
    <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
      <!--设置背景-->
       <item name="android:background">@android:color/white</item>
       <!--设置字体颜色-->
      <item name="android:textColor">@android:color/holo_red_dark</item>
    </style>
复制代码

效果:

4.menu菜单的显示位置

默认是这样的:

会遮盖toolbar

能够修改popuptheme的这个属性来设置:

<!--设置不覆盖锚点-->
   <item name="overlapAnchor">false</item>
复制代码

有些资料说要这么设置:

<!-- ToolBar菜单样式.-->
 <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
 </style>
 <style name="OverflowMenuStyle"parent="Widget.AppCompat.Light.PopupMenu.Overflow">
        <!--设置不覆盖锚点-->
        <item name="overlapAnchor">false</item>
 </style>
复制代码

其实不必,能够直接在app:popupTheme的style里面设置overlapAnchor这个属性就行了. 可是,必定是要在app:popupTheme的style里面设置,而不是app:theme的style里面设置.

最终效果以下:

最终效果的style代码:

<style name="toolbar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:minHeight">?attr/actionBarSize</item>
        <item name="android:background">@color/colorPrimary</item>
        <item name="android:fitsSystemWindows">true</item>
    </style>
   <style name="base_toolbar" parent="toolbar"/></style>
     <!-- ToolBar样式.-->
    <style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <!--修改toolbar的Title(大标题)颜色-->
        <item name="android:textColorPrimary">@android:color/holo_red_dark</item>
        <!--修改toolbar的subtitle(小标题)颜色-->
        <item name="subtitleTextColor">@android:color/holo_red_dark</item>
        <!--修改toolbar的图标颜色.-->
        <item name="colorControlNormal">@android:color/holo_red_dark</item>
    </style>
    <!-- ToolBar菜单样式.-->
    <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <!--设置背景-->
        <item name="android:background">@android:color/white</item>
        <!--设置字体颜色-->
        <item name="android:textColor">@android:color/holo_red_dark</item>
        <!--设置不覆盖锚点-->
        <item name="overlapAnchor">false</item>
    </style>

复制代码

values-v21的style的代码:

<style name="base_toolbar" parent="@style/toolbar">
        <item name="android:elevation">6px</item>
        <item name="android:navigationIcon">?attr/homeAsUpIndicator</item>
    </style>
复制代码

toolbar布局的代码

<android.support.v7.widget.Toolbar
    android:id="@+id/tl_costom"
    style="@style/base_toolbar"
    app:theme="@style/toolbar_theme"
    app:popupTheme="@style/popup_theme"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
</android.support.v7.widget.Toolbar>
复制代码

到此通常的基本设置就写完了.

------------------------------------------------------------------------------------------`

2017-6-21更新

fragment使用menu菜单的正确姿式

坑点:

@Override
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
        super.onCreateOptionsMenu(menu, inflater);
    }
复制代码

1.在frgament里面这个方法就是坑爹的

2.即便 `setHasOptionsMenu(true);` 也不建立,跳个页面返回回来结果有了.

3.但若是是viewpager+多frgament这种.会形成错乱.其余的frgament也会有menu

4.style配置无效!!

正确姿式:

哥直接代码设置还不行嘛.不配置了

如下代码在`setSupportActionBar()`以前调用

//设置popupstyle.好比是否覆盖描点,背景,字体颜色什么的.必须在inflateMenu()以前设置
 mToolbar.setPopupTheme(R.style.popup_theme);
//用Toolbar建立menu
 mToolbar.inflateMenu(R.menu.main_home_menu);
//拿到Menu 
Menu menu = mToolbar.getMenu();
//下面的这段代码是为了让menu菜单折叠样式时,展开能显示icon图标.否则icon图标不会显示.(感受很坑)
if (menu != null) {
     if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
           try {
                    MenuBuilder menuBuilder = (MenuBuilder) menu;
                    menuBuilder.setOptionalIconsVisible(true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
        }
}

复制代码

您的喜欢与建议是我最大的动力－＿－