Android ToolBar使用

Android Toolbar：

ToolBar是Android 5.0（API Level 21）之后用来取代ActionBar的

ToolBar的优势：

Toolbar本身是一个 ViewGroup(而Actionbar直接继承自object)相比Actionbar可以更加灵活的配置使用。

引入方式：

在布局文件中引入support V7包下的ToolBar控件：


 <android.support.v7.widget.Toolbar

        android:id="@+id/toolbar"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@color/blue"

        android:theme="@style/Theme.ToolBar">

 

    </android.support.v7.widget.Toolbar>

在代码中像使用其他控件一样拿到ToolBar的引用:


 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

设置右上角的menu菜单：调用Toolbar的inflateMenu()方法，传入一个Menu的xml文件


toolbar.inflateMenu(R.menu.menu);

或者覆盖onCreateOptionsMenu()方法


 @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }

ToolBar的配置：

代码方式：

配置主标题：标题内容和颜色


 toolbar.setTitle("Title");//设置主标题

        toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));//设置主标题颜色

        toolbar.setTitleTextAppearance(this, R.style.Theme_ToolBar_Base_Title);//修改主标题的外观，包括文字颜色，文字大小等


  <style name="Theme.ToolBar.Base.Title" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">

        <item name="android:textSize">20sp</item>

        <item name="android:textColor">@color/color_red</item>

    </style>

配置副标题：


toolbar.setSubtitle("Subtitle");//设置子标题

        toolbar.setSubtitleTextColor(getResources().getColor(android.R.color.darker_gray));//设置子标题颜色

        toolbar.setSubtitleTextAppearance(this, R.style.Theme_ToolBar_Base_Subtitle);//设置子标题的外观，包括文字颜色，文字大小等


 <style name="Theme.ToolBar.Base.Subtitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle">

        <item name="android:textSize">15sp</item>

        <item name="android:textColor">@color/color_43d28d</item>

    </style>

配置Home导航图标


toolbar.setNavigationIcon(R.mipmap.home);

配置Logo：


toolbar.setLogo(R.mipmap.ic_logo);

配置ToolBar背景色：

方式一：布局文件中设置android:background属性


android:background="@color/blue"

方式二：代码中调用toolbar的setBackgroundColor()方法


 toolbar.setBackgroundColor(getResources().getColor(R.color.color_red));

响应Menu菜单的点击事件：


toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {

            @Override

            public boolean onMenuItemClick(MenuItem item) {

                int menuItemId = item.getItemId();

                if (menuItemId == R.id.action_search) {

                    //do something

 

                } 

                return true;

            }

        });

或者覆盖onOptionsItemSelected()方法


 @Override

    public boolean onOptionsItemSelected(MenuItem item) {

        // Handle action bar item clicks here. The action bar will

        // automatically handle clicks on the Home/Up button, so long

        // as you specify a parent activity in AndroidManifest.xml.

        int id = item.getItemId();

 

        //noinspection SimplifiableIfStatement

        if (id == R.id.action_search) {

            return true;

        }

 

        return super.onOptionsItemSelected(item);

    }

防止没有Menu按键的手机不显示Menu：

该特性由ViewConfiguration这个类中一个叫做sHasPermanentMenuKey的静态变量控制，系统根据这个变量的值来判断手机有没有物理Menu键的。当然这是一个内部变量，无法直接访问它，可以通过反射的方式修改它的值，让它为false。


 private void setMenuAlwaysShow() {

        try {

            ViewConfiguration config = ViewConfiguration.get(this);

            Field menuKeyField = ViewConfiguration.class.getDeclaredField("sHasPermanentMenuKey");

            menuKeyField.setAccessible(true);

            menuKeyField.setBoolean(config, false);

        } catch (Exception e) {

            e.printStackTrace();

        }

    }

此处参考：Android ActionBar完全解析，使用官方推荐的最佳导航栏(上) - 郭霖的专栏 - 博客频道 - CSDN.NET

http://blog.csdn.net/guolin_blog/article/details/18234477

配置Menu的icon图标：

在ToolBar的主题中配置name="actionOverflowButtonStyle"属性，创建一个主题继承自android:style/Widget.Holo.Light.ActionButton.Overflow，配置name="android:src"属性：


<style name="Theme.ToolBar.Base" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="android:textSize">20sp</item>

        <item name="android:textColorPrimary">@color/black_424242</item>

        <!--s设置Menu菜单的背景色-->

        <item name="android:itemBackground">@color/blue_600</item>

        <!--设置menu菜单不遮挡actionbar-->

        <item name="actionOverflowMenuStyle">@style/OverflowMenu</item>

        <!--配置Menu的图标-->

        <item name="actionOverflowButtonStyle">@style/ToolBar.ActionButton.Overflow</item>

    </style>


<style name="ToolBar.ActionButton.Overflow" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">

        <item name="android:src">@mipmap/ic_menu_more_overflow</item>

    </style>

配置Menu菜单的OvweFlow的action：

基本和ActionBar相同

配置OvweFlow中的action文字颜色：

在ToolBar的主题中配置android:textColorPrimary属性


<style name="Theme.ToolBar.Base" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="android:textSize">20sp</item>

        <item name="android:textColorPrimary">@color/color_red</item>

    </style>

或者在Toolbar的 app:popupTheme="@style/AppTheme.PopupOverlay"主题中配置android:textColorPrimary属性：


 app:popupTheme="@style/AppTheme.PopupOverlay"


 <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">>

        <item name="android:textColorPrimary">#fff</item>

    </style>

配置OvweFlow中的action背景：

在ToolBar的主题中配置android:itemBackground属性


 <!--s设置Menu菜单的背景色-->

        <item name="android:itemBackground">@color/black_light</item>

配置OvweFlow中的action的宽度：

在Toolbar的popupTheme中设置android:width属性，但是注意Item的宽度有最大最小的限制，超过该限制后显示效果是最大宽度和最小宽度。


  <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">

        <!--Item的宽度-->

        <item name="android:width">400dp</item>

        <item name="android:textColorPrimary">#fff</item>

    </style>

配置OvweFlow中的action显示icon：

默认情况下OverFlow中只显示文字，但这样不够美观。在Toolbar的popupTheme中设置android:drawableRight  android:drawableLeft  android:drawableTop  android:drawableBottom属性，注意这个设置对所有Item统一生效的，这样也就没有太大的意义。


<!--<item name="android:drawableLeft">@drawable/ic_action_search</item>-->

        <item name="android:drawableRight">@drawable/ic_home_gray_36dp</item>

        <item name="android:drawableTop">@drawable/ic_textsms_gray_36dp</item>

是否显示Icon是由MenuBuilder这个类的setOptionalIconsVisible方法来决定的，该方法不能直接调用，可以反射之。重写boolean onCreatePanelMenu(int featureId, Menu menu)方法，在menu创建的时候调用之。


  @Override

    public boolean onCreatePanelMenu(int featureId, 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) {

                    e.printStackTrace();

                }

            }

        }

        return super.onCreatePanelMenu(featureId, menu);

    }

配置OvweFlow中的action间的分割线：

在Toolbar的popupTheme中设置android:dividerHeight属性，设置高度大于0就能显示分割线，分割线的默认颜色是白色。


<item name="android:dividerHeight">1dp</item>

配置ToolBar的Menu不遮挡ToolBar：

Actionbar中的配置方式是：设置actionOverflowMenuStyle的android:overlapAnchor属性为false.这里同样,不过注意是在ToolBar的主题中而不是Activity的主题。


<style name="Theme.ToolBar.Base" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="android:textSize">20sp</item>

        <item name="android:textColorPrimary">@color/color_red</item>

        <!--s设置Menu菜单的背景色-->

        <item name="android:itemBackground">@color/gray</item>

        <!--设置menu菜单不遮挡actionbar-->

        <item name="actionOverflowMenuStyle">@style/OverflowMenu</item>

 

    </style>

 

    <style name="OverflowMenu" parent="Widget.AppCompat.PopupMenu.Overflow">

        <!--兼容Api 21之前的版本 -->

        <item name="overlapAnchor">false</item>

        <!-- Api 21-->

        <item name="android:overlapAnchor">false</item>

    </style>

配置ToolBar的Home图标左侧间隙

在布局中Toolbar控件中配置属性 app:contentInsetStart="3dp"


 app:contentInsetStart="3dp"

ToolBar的状态栏沉浸效果：

配置ToolBar和系统状态栏背景色一致：必须配置不使用半透明状态栏才可以设置状态栏颜色，需要android4.4（Api Level 19）及以上


  <style name="Theme.MyActivity" parent="Theme.AppCompat.Light.NoActionBar">

        <!-- Customize your theme here. -->

        <!--配置是否使用半透明状态栏-->

        <item name="android:windowTranslucentStatus">false</item>

        <item name="android:windowTranslucentNavigation">true</item>

        <!--状态栏颜色-->

        <item name="android:statusBarColor">@color/color_0176da</item>

    </style>

设置Toolbar 浮动：

ToolBar 没有提供显示和隐藏的方法，首先调用 setSupportActionBar(toolbar);方法把ToolBar设置为ActionBar，再使用ActionBar的方式显示隐藏

点击屏幕后显示隐藏ToolBar;


 @Override

    public boolean onTouchEvent(MotionEvent event) {

        if (actionBar == null) {

            actionBar = getSupportActionBar();

        }

        switch (event.getAction()) {

            case MotionEvent.ACTION_UP:

 

                if (actionBar != null) {

                    if (actionBar.isShowing()) {

                        actionBar.hide();

                    } else {

                        actionBar.show();

                    }

                }

                break;

        }

 

        return super.onTouchEvent(event);

    }

但是这样设置setSupportActionBar(toolbar);之后，如果是直接在ToolBar上设置的Menu的方式;toolbar.inflateMenu(R.menu.base_toolbar_menu);ToolBar上的Menu菜单会消失,这时候需要使用复写方式添加Menu


 @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.base_toolbar_menu, menu);

        return true;

    }

ToolBar和一个普通控件是一样的，所以浮动效果应该通过布局搞定，设置Toolbar的根布局为相对布局，同时添加一个移动动画

设置Activity的主题：


 <style name="ToolbarActivityTheme" parent="AppTheme">

        <!--启用ActionBar的叠加模式(不生效)-->

        <item name="windowActionBarOverlay">true</item>

        <!--状态栏半透明-->

        <item name="android:windowTranslucentStatus">true</item>

        <!--内容填充到导航栏-->

        <item name="android:windowTranslucentNavigation">true</item>

        <!--设置全屏-->

        <item name="android:windowFullscreen">true</item>

    </style>

添加动画和隐藏效果：


 @Override

    public boolean onTouchEvent(MotionEvent event) {

        if (actionBar == null) {

            actionBar = getSupportActionBar();

        }

        switch (event.getAction()) {

            case MotionEvent.ACTION_UP:

 

                if (actionBar != null) {

                    if (actionBar.isShowing()) {

                        int height = toolbar.getMeasuredHeight();

                        height = height <= 0 ? 112 : height;

                        startAnimation(-height, new Runnable() {

                            @Override

                            public void run() {

                                actionBar.hide();

                            }

                        });

 

                    } else {

                        actionBar.show();

                        startAnimation(0, new Runnable() {

                            @Override

                            public void run() {

 

                            }

                        });

 

                    }

                }

                break;

        }

 

        return super.onTouchEvent(event);

    }

 

    @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)

    private void startAnimation(int transY, final Runnable end) {

 

        ViewPropertyAnimator animator = toolbar.animate().translationY(transY).setDuration(600);

        animator.start();

        animator.setListener(new Animator.AnimatorListener() {

            @Override

            public void onAnimationStart(Animator animation) {

 

            }

 

            @Override

            public void onAnimationEnd(Animator animation) {

                end.run();

            }

 

            @Override

            public void onAnimationCancel(Animator animation) {

 

            }

 

            @Override

            public void onAnimationRepeat(Animator animation) {

 

            }

        });

    }

配置Activity内容填充到系统状态栏：

这样Activity的整个内容会冲到屏幕顶部，不是导航栏透明


<item name="android:windowTranslucentNavigation">true</item>

ToolBar的navigationIcon一直居上不居中的异常：

排查原因竟然是在Activity中设置ToolBar的主题......哪怕这个主题中什么都不写，这个图标依然会居上，不明白什么原因


 <style name="ToolBarActivityTheme" parent="Theme.AppCompat.Light">

        <!--使用toolbar取消默认的actionbar-->

        <item name="android:windowActionBar">false</item>

        <item name="windowNoTitle">true</item>

 

        <item name="android:actionBarStyle">@style/TranslucentActionBar</item>

        <!--设置ActionBar的主题-->

        <!--<item name="android:toolbarStyle">@style/ToolBarActivityToolbarTheme</item>-->

        <item name="toolbarStyle">@style/ToolBarActivityToolbarTheme</item>

    </style>

修改后效果：

时间： 2024-11-01 14:31:16

Android ToolBar使用的相关文章

android toolbar 假标题居中

<android.support.v7.widget.Toolbar android:id="@+id/toolbar_top" android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="?attr/actionBarSize"> <TextView android:layout_wi

Android Toolbar使用及Fragment中的Toolbar处理

Toolbar作为ActionBar使用介绍 本文介绍了在Android中将Toolbar作为ActionBar使用的方法.并且介绍了在Fragment和嵌套Fragment中使用Toolbar作为ActionBar使用时需要注意的事项. 使用support library的Toolbar Android的ActionBar每个版本都会做一些改变, 所以原生的ActionBar在不同的系统上看起来可能会不一样.使用support library版本的Toolbar可以让你的应用在多种设备类型上保

Android ToolBar自定义图标，关联DrawerLayout

Android5.0出现了一个可以代替ActionBar的控件ToolBar,使用更加灵活,一般我们使用ToolBar来和DrawerLayout配合使用,官方提供了一个开关类ActionBarDrawerToggle,来实现ToolBar和DrawerLayout的关联,但是 有时根据我们的需求需要更改左侧的图标,不在需要系统默认的三条杠的图标同时点击图标还想要DrawerLayout的侧拉页面出来,下面讲解两种不同的方式 一:通过代码来实现改变ToolBar的图标 public class

Android ToolBar标题文字居中的方法

在项目的开发中,使用苹果手机的产品,出的界面效果图极有可能(我这里是一定)完全是按照苹果的界面风格来出的,例如界面顶部的title文字位置是水平居中 如图: 那么问题来了,当我们使用ToolBar控件进行开发时,ToolBar的文字位置默认是靠左对齐的,不过这不能难道聪明的安卓开发者,解决方法如下: 1.只需要在ToolBar中添加TextView控件,设置位置为水平居中即可,代码奉上 <?xml version="1.0" encoding="utf-8"?

Android ToolBar 的简单封装

使用过 ToolBar 的朋友肯定对其使用方法不陌生,因为其用法很简单,如果对 ActionBar 使用比较熟练的人来说,ToolBar 就更容易了!不过,相信大家在使用的过程中都遇到过这样一个问题,需要在每一个我们要使用的 xml 中添加 ToolBar 这个控件,比如我需要在 MainActivity中使用 ToolBar,则他的 xml 文件需要这样写, <RelativeLayout xmlns:android="http://schemas.android.com/apk/res

Android ToolBar详解

今年(2014) 的 google i/o 发表令多数人为之一亮的 material design,而 google 也从「google i/o 2014」 开始,大家也陆陆续续地看到其更新的 android app 皆套用了这个设计介面.当然,这个设计介面著实让大家感到惊艳外,更让 android 开发者开始担心未来 app 的界面处理了.不过,所幸有着之前 actionbar 的经验后,android 也很快地在 support library 里面提供了相对应的 api 给开发者使用,本篇

最详细的 Android Toolbar 开发实践总结（转）

转自:http://www.codeceo.com/article/android-toolbar-develop.html 过年前发了一篇介绍 Translucent System Bar 特性的文章 Translucent System Bar 的最佳实践 ,收到很多开发者的关注和反馈.今天开始写第二篇,全面的介绍一下 Toolbar 的使用.说起 Toolbar ,可能有很多开发的童鞋还比较陌生,没关系,请接着往下看. 初识 Toolbar Toolbar是在 Android 5.0 开始

Android Toolbar样式定制详解

前言 Marterial Design出来也有一段时间了,为了紧跟Google的设计规范,决定在项目中使用Toolbar.使用了一段时间之后,发现很多时候原始的Toolbar并不能满足项目的要求.为了适应项目多样化的需求,对Toolbar进行了深入的研究. Toolbar简介 Toolbar使应用的标准工具栏,可以说是Actionbar的升级版.和Actionbar相比,Toolbar最明显的变化是自由,方便定制. Toolbar简单使用 样式设置 style有两个地方需要调整,一个在 res/

android ——Toolbar

Toolbar是我看material design内容的第一个 官方文档:https://developer.android.com/reference/android/support/v7/widget/Toolbar.html 这是用来替代ActionBar,其实就是状态栏下面的标题栏. 想要使用ToolBar,需要隐藏原来的ActionBar,这个可以在主题中修改,在values/styles.xml中做出如下修改: <style name="AppTheme" paren