Toolbar的简单使用

前言：由于之前项目都没怎么使用toobar，今天心血来潮就写了个demo熟悉下，免得以后用到还得花时候查资料，顺便做下笔记！go。。。

一、简介

Toobar是5.0之后出来的，可以说出来之后就取代了ActionBar了（反正我身边的开发人员都不用ActionBar了），好处就不说了，用了之后好不好自己自然有所感觉，要注意的是要兼容5.0以下就使用V7包下的Toobar哦！

二、开始使用

1、首先就是在布局文件中使用，很简单，就跟平常控件一样用就可以！

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.Toolbarandroid:background="@color/app_bg"android:id= "@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"></android.support.v7.widget.Toolbar>
</RelativeLayout>

2、由于我们在代码用是以setSupportActionBar(toolbar)的方式去使用toolbar的，一也就是代替actionbar，那么我们就需要把actionbar去掉，一山不容二虎！！！去掉actionbar要自定义下主题，自定义一个Base.AppTheme样式

<resources><style name="Base.AppTheme" parent="Theme.AppCompat"><!--去掉原来的ActionBar--><item name="windowActionBar">false</item><item name="android:windowNoTitle">true</item><!-- API Level 22 编译要去点android --><item name="windowNoTitle">true</item><!-- Actionbar color --><item name="colorPrimary">@color/material_deep_teal_500</item><!--Status bar color--><item name="colorPrimaryDark">@color/material_deep_teal_500</item><!--Window color--><item name="android:windowBackground">@color/dim_foreground_material_dark</item></style><!-- Base application theme. --><style name="AppTheme" parent="Base.AppTheme"><!-- 这个属性之所以注释掉是因为它只能在5.0之后使用，所以一定要定义它的话需要在/res/valuse-v21/sytles.xml中进行定义 --><!-- <item name="android:navigationBarColor">@color/accent_material_light</item> --></style>
</resources>

至此，我们的toobar已经可以正常显示出来了，不过先不急，我们先设置一些标题、logo、之类的东西再看效果，不过先看看google提供的图也可以的：

代码中对toolbar最基本的设置：

public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);// Logotoolbar.setLogo(R.mipmap.push_4);// 主标题toolbar.setTitle("Title");// 副标题toolbar.setSubtitle("Sub Title");//设置toolbarsetSupportActionBar(toolbar);//左边的小箭头（注意需要在setSupportActionBar(toolbar)之后才有效果）toolbar.setNavigationIcon(R.mipmap.back);//菜单点击事件（注意需要在setSupportActionBar(toolbar)之后才有效果）toolbar.setOnMenuItemClickListener(onMenuItemClick);}
}

经过初步设计后，我们就可以看看最原始的效果了！！

三、菜单部分

看了效果图，结合代码其它的不难理解，下面就着重说一下菜单那部分的实现，也就后面的三个点点点

1、首先我们要为toolbar绑定一个菜单，如下：

@Override
public boolean onCreateOptionsMenu(Menu menu) {// 绑定toobar跟menugetMenuInflater().inflate(R.menu.menu_main, menu);return true;
}

2、其中R.menu.menu_main是我们创建的一个菜单文件，代码如下：

<?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"xmlns:tools="http://schemas.android.com/tools"tools:context=".MainActivity"><itemandroid:id="@+id/action_edit"android:icon="@mipmap/push_3"android:orderInCategory="80"android:title="@string/action_edit"app:showAsAction="never"/><itemandroid:id="@+id/action_share"android:icon="@mipmap/push_3"android:orderInCategory="90"android:title="@string/action_edit"app:showAsAction="never"/><itemandroid:id="@+id/action_settings"android:icon="@mipmap/push_3"android:orderInCategory="100"android:title="@string/action_settings"app:showAsAction="never"/>
</menu>

下面解析下菜单项的几个属性：

android:icon：这个属性是指定每个菜单项左边的图标的
android:id：菜单项的唯一标识
android:orderInCategory：菜单项的优先级，也就是顺序，只能设置大于正整数，数值越大菜单项越靠前
android:title：菜单描述，也就是菜单文字
app:showAsAction：这个是控制菜单项的显示的

其中app:showAsAction这个属性是比较有意思的我们一个个看看他的值都表示什么！
always：设置这个值会让所有菜单项都会显示在toolbar上

ifRoom：设置这个值之后，如果toolbar上还有空间的话就会显示优先级高的菜单项在toolbar上，剩下的才显示在弹出的列表中

never：永远不会显示在Toolbar上，只会在溢出列表中出现
withText：这个属性我看了下效果是跟never一个样不知道是不是我哪里没设置对！！！
collapseActionView：这个属性通俗的说就是声明某一个菜单项单独显示在toolbar上，而不是显示在打开的菜单中，一般配合ifRoom使用，如下：

3、还有个小问题，就是正常的设置完之后菜单item图标是不会显示的，我们需要重写onPrepareOptionsPanel(View view, Menu menu)方法，这样才能正常显示图标，代码如下：

@Override
protected boolean onPrepareOptionsPanel(View view, Menu menu) {if (menu != null) {if (menu.getClass() == MenuBuilder.class) {try {Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);m.setAccessible(true);m.invoke(menu, true);} catch (Exception e) {e.printStackTrace();}}}return super.onPrepareOptionsPanel(view, menu);
}

4、设置菜单的点击事件，前面我们已经看到了toolbar.setOnMenuItemClickListener(onMenuItemClick);这句代码，那么onMenuItemClick的实现如下：

private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem menuItem) {String msg = "";switch (menuItem.getItemId()) {case R.id.action_edit:msg += "Click edit";break;case R.id.action_share:msg += "Click share";break;case R.id.action_settings:msg += "Click setting";break;}if(!msg.equals("")) {Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();}return true;}
};

5、这样，菜单的基本功能就实现了，虽然大家都说程序员的审美观都不是很好（说这话的站出来，保证不打死你，，）大家有木有觉得黑乎乎的很难看？并且位置把toolbar都挡住了，对于有强迫症的我来说使无法容忍的，那么我们就修整一下吧！

其实我们可以通过toobar的app:popupTheme="@style/menu_bg"属性来指定一个自定义的样式，而那么这个样式具体能定义写什么呢，我们详细看看：

<!--自定义toolbar菜单样式-->
<style name="toolbarMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow"><!-- 是否覆盖锚点，默认为true，即盖住Toolbar --><item name="overlapAnchor">false</item><!-- 弹出层背景颜色 --><item name="android:popupBackground">@color/material_deep_teal_500</item><!-- 弹出层垂直方向上的偏移，负值会覆盖toolbar --><item name="android:dropDownVerticalOffset">5dp</item><!-- 弹出层水平方向上的偏移，即距离屏幕左边的距离，负值会导致右边出现空隙 --><item name="android:dropDownHorizontalOffset">-2dp</item><!--文字颜色--><item name="android:textColor">@color/toolbar_meun</item>
</style>

定义好样式后需要在app的主题中引用该样式，才能改变溢出框内的文字颜色，如下：

<!-- Base application theme. -->
<style name="AppTheme" parent="Base.AppTheme"><!--指定toolbar弹出菜单样式--><item name="actionOverflowMenuStyle">@style/toolbarMenuStyle</item>
</style>

最后在toolbar中引用：

<android.support.v7.widget.Toolbarandroid:background="@color/material_deep_teal_500"android:id= "@+id/toolbar"android:layout_width="match_parent"app:popupTheme="@style/toolbarMenuStyle"android:layout_height="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>

ok，至此我们对toolbar溢出框的调整已经初步完成，看看效果如何：

四、优化

到了这里，我们已经能简单的使用ToolBar了，那么需求随时都会改变的，比如说有的人就不需要logo、也不需要主标题副标题等，他就要在toolbar上加个搜索框！或者是要只要主标题，并且主标题要居中显示，那也只能做咯，毕竟产品经常被砍也不是没有原因的！

如果你有过这样的需求，你会发现原生的ToolBar的主标题是没法居中显示的，所以我们需要将主标题设置为空，然后自己写一个标题到ToolBar中，然后设置居中显示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.Toolbarandroid:background="@color/material_deep_teal_500"android:id= "@+id/toolbar"android:layout_width="match_parent"app:popupTheme="@style/toolbarMenuStyle"android:layout_height="?attr/actionBarSize"><TextViewandroid:layout_gravity="center"android:textColor="@color/toolbar_meun"android:textSize="24sp"android:text="ToolBar"android:layout_width="wrap_content"android:layout_height="wrap_content"/></android.support.v7.widget.Toolbar>
</RelativeLayout>

注意，需要在代码中对主标题设置为空字符串，否则会出现默认的主标题：

// 主标题
toolbar.setTitle("");

五、侧滑菜单

经过上面的介绍，其实已经能够使用Toolbar做挺多事情了，那么下面利用ToolBar配合DrawerLyout快速实现一个侧滑菜单看看！

1、布局文件实现，这里我写得比较乱，又有点偷懒不想改了，还是比较建议多使用include的方式的!

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/dl_left"android:layout_width="match_parent"android:layout_height="match_parent"><!--主布局代码--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="@color/material_deep_teal_500"app:popupTheme="@style/toolbarMenuStyle"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="ToolBar"android:textColor="@color/toolbar_meun"android:textSize="24sp"/></android.support.v7.widget.Toolbar></LinearLayout><!--侧滑栏布局--><LinearLayoutandroid:background="@color/material_deep_teal_500"android:layout_width="match_parent"android:layout_gravity="start"android:orientation="vertical"android:layout_height="match_parent"><ImageViewandroid:layout_width="match_parent"android:scaleType="centerCrop"android:src="@mipmap/aa"android:layout_height="150dp"/><LinearLayoutandroid:gravity="center"android:background="@color/window_bg"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:text="菜单项"android:layout_width="wrap_content"android:textColor="#333"android:textSize="24dp"android:layout_height="wrap_content"/></LinearLayout></LinearLayout>
</android.support.v4.widget.DrawerLayout>

这里一定要注意android:layout_gravity="start"属性的设置！
下面是整个java类的完整代码

public class MainActivity extends AppCompatActivity {private DrawerLayout          mDrawerLayout;private ActionBarDrawerToggle mDrawerToggle;private Toolbar mToolbar;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mToolbar = (Toolbar) findViewById(toolbar);mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_left);// Logo//toolbar.setLogo(R.mipmap.ic_launcher);// 主标题mToolbar.setTitle("");// 副标题//toolbar.setSubtitle("Sub Title");//设置toolbarsetSupportActionBar(mToolbar);//左边的小箭头（注意需要在setSupportActionBar(toolbar)之后才有效果）mToolbar.setNavigationIcon(R.mipmap.store_home_tab_index_pre);//菜单点击事件（注意需要在setSupportActionBar(toolbar)之后才有效果）mToolbar.setOnMenuItemClickListener(onMenuItemClick);//创建返回键，并实现打开关/闭监听mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close) {@Overridepublic void onDrawerOpened(View drawerView) {super.onDrawerOpened(drawerView);//侧滑栏打开}@Overridepublic void onDrawerClosed(View drawerView) {super.onDrawerClosed(drawerView);//侧滑栏关闭}};//mDrawerToggle.syncState();此处注释掉是为了不使用默认的开关箭头//设置侦听mDrawerLayout.addDrawerListener(mDrawerToggle);}private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem menuItem) {String msg = "";switch (menuItem.getItemId()) {case R.id.action_edit:msg += "Click edit";break;case R.id.action_share:msg += "Click share";break;case R.id.action_settings:msg += "Click setting";break;}if(!msg.equals("")) {Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();}return true;}};@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// 绑定toobar跟menugetMenuInflater().inflate(R.menu.menu_main, menu);return true;}@Overrideprotected boolean onPrepareOptionsPanel(View view, Menu menu) {if (menu != null) {if (menu.getClass() == MenuBuilder.class) {try {Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);m.setAccessible(true);m.invoke(menu, true);} catch (Exception e) {e.printStackTrace();}}}return super.onPrepareOptionsPanel(view, menu);}
}

其中ActionBarDrawerToggle是对Toolbar上的开关跟侧滑栏进行关联的！

到这里，我们的toolbar跟侧滑都说了一些简单的使用，下面看看侧滑栏的图：

demo地址

注：由于个人android学习的大部分知识都来源于网络，比如说：郭霖、张鸿洋、泡在网上的日子等等大牛的博客，在此写下一些学习笔记，并加入一些个人的理解或者说总结，主要用于个人提升，如有雷同并非巧合^_^

Toolbar的简单使用相关推荐

Toolbar的简单使用和封装
因为Actionbar的扩展性比较弱,所以一般都是自定义一个titlebar,但是现在有了toolbar,完全可以解决任何头布局的显示. 简单封装后的效果是这样的: 代码: public class ...
ToolBar+NavigationDraw实现炫酷的侧边栏
Android Studio自带的Navigation Drawer主题撑满了整个界面的高度把ToolBar挡住了,很遗憾左上角那个炫酷的动态Icon看不见了.有兴趣的同学可以去创建一个project ...
android toolbar的使用方法,Toolbar使用详解
Toobar与ActionBar 从Android3.0(API level 11)开始,所有使用默认主题的activity都自带一个ActionBar,但是随着Android版本的迭代,Action ...
VS2010开发ribbon风格的程序
转自:http://blog.csdn.net/akof1314/article/details/5268071 创建MFC应用程序项目实际上,Ribbon界面(Office 2007风格的界面 ...
Android中通过ActionBar为标题栏添加搜索以及分享视窗
在Android3.0之后,Google对UI导航设计上进行了一系列的改革,其中有一个非常好用的新功能就是引入的ActionBar,他用于取代3.0之前的标题栏,并提供更为丰富的导航效果.Action ...
android应用开发-从设计到实现 3-5 静态原型的Appbar
静态原型的Appbar 我们设计的Appbar包括了两个部分,一个是toolbar,另一个就是flexible space-显示当日天气的详细信息, Toolbar参数确定添加Toolbar很简单, ...
win10 uwp 使用油墨输入
win10可以很简单在我们的app使用自然输入,这篇文章主要翻译https://blogs.windows.com/buildingapps/2015/09/08/going-beyond-keybo ...
2018-4-12-win10-uwp-使用油墨输入
title author date CreateTime categories win10 uwp 使用油墨输入 lindexi 2018-04-12 14:19:58 +0800 2018-2-13 ...
Android的ToolBar简单使用
文章目录一.前言二.Activity.FragmentActivity与ToolsBar的关系三.ToolsBar的初步使用四.ToolBar的菜单配置五.返回时间监听六.自定义ToolB ...

Toolbar的简单使用

Toolbar的简单使用

Toolbar的简单使用相关推荐

最新文章

热门文章