Androd Toolbar 的简单使用（转）

14年Android开发者大会提出了Android5.0 系统以及 材料设置 Material Design。在 材料设计中推出了大量的UI效果，其中某些功能 已添加进 兼容包，所以可以在低版本中来实现一些材料设计效果。今天主要介绍的就是 ActionBar的替代品 Toolbar。Toolbar 是在V7包兼容的，所以需要下载最新的V7包。

使用ToolBar主要从以下3个步骤开始：

  1. 样式定义显示效果，属性
  2. 在布局中使用ToolBar
  3. 在代码中设置属性

 1.  首先，来看下如何设置样式。由于Toolbar是替代ActionBar的，还需要使用 ActionBar兼容的Theme，但是需要做一些简单修改。

a. 先把ActionBar隐藏，为了 方便修改可以將原本 AppTheme 的 parent 属性改为 AppTheme.Base，修改文件 res/values/styles.xml

[java] view plaincopy

  1. <resources>
  2. <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
  3. <item name="windowActionBar">false</item>
  4. <item name="android:windowNoTitle">true</item>
  5. </style>
  6. <style name="AppTheme" parent="AppTheme.Base"/>
  7. </resources>

b. 同样，为统一风格，需要将  /res/values-v21/styles.xml  的样式 parent 属性设置为 AppTheme.Base

[html] view plaincopy

  1. <resources>
  2. <style name="AppTheme" parent="AppTheme.Base"></style>
  3. </resources>

2. 在 Activity 布局中 加入 Toolbar 组件。注意：为了向下兼容，要使用 V7包下的 Toolbar，并且去掉最外层布局的padding属性。为了确保Toolbar的高度，需要设置 最小高度为ActionBar高度 android:minHeight="?attr/actionBarSize"。

[html] view plaincopy

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. tools:context=".MainActivity">
  6. <android.support.v7.widget.Toolbar
  7. android:layout_width="match_parent"
  8. android:layout_height="<span style="font-family: Arial, Helvetica, sans-serif;">?attr/actionBarSize</span><span style="font-family: Arial, Helvetica, sans-serif;">"</span>
  9. android:id="@+id/toolbar" />
  10. </RelativeLayout>

3. 在代码中设置Toolbar。需要Activity 继承 ActionBarActivity。通过setSupportActionBar（）替代ActionBar，在OnCreate() 方法中加入以下代码。

[java] view plaincopy

  1. Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
  2. setSupportActionBar(toolbar);

完成之后，效果如下：

这个 效果不怎么好，需要对其进行简单的修改，改变一些颜色，修整修整就可以见人了。修改的颜色可以参见下图。

通过上图，不难发现，修改颜色主要从这几个方面开始：

  • 状态栏背景色  colorPrimaryDark 属性
  • 如果还是使用ActionBar，colorPrimary 属性设置背景  如果时Toolbar，布局中background 属性设置背景
  • 导航栏背景色 navigationBarColor 属性 ，需要在 5.0 才可以使用，所以属性只可以在 /res/values-v21/styles.xml  设置
  • 主界面背景色 windowBackground

如果要使用这些属性，需要从三个地方开始

a.  主样式中设置基本属性  res/values/styles.xml

[java] view plaincopy

  1. <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
  2. <item name="windowActionBar">false</item>
  3. <item name="android:windowNoTitle">true</item>
  4. <item name="colorPrimary">#66cc99</item>
  5. <item name="colorPrimaryDark">#66cc99</item>
  6. <item name="android:windowBackground">@color/back</item>
  7. </style>

b.   v21中设置导航栏背景

[java] view plaincopy

  1. <style name="AppTheme" parent="AppTheme.Base">
  2. <item name="android:navigationBarColor">#66cc99</item>
  3. </style>

c.   布局中设置 Toolbar背景

[html] view plaincopy

  1. <android.support.v7.widget.Toolbar
  2. android:layout_width="match_parent"
  3. android:layout_height="wrap_content"
  4. android:id="@+id/toolbar"
  5. android:background="#339999"
  6. android:minHeight="?attr/actionBarSize" />

设置完成后，效果如下：

上一篇简单的介绍了如何简单使用Toolbar,这篇主要介绍Toolbar的进一步设置。

既然Toolbar要替代ActionBar，那么Toolbar的功能应该更为强大，在Toolbar上有一些默认的显示效果，先来看下。

通过上图，不难看出，我们其实是可以为Toolbar设置以下属性的：

  • 上级按钮 (upbutton)   setNavigationIcon
  • APP 的图标      setLogo
  • 主标题  setTitle
  • 副标题  setSubtitle
  • 设定菜单各按鈕的动作 setOnMenuItemClickListener

在MainActivity的OnCreate() 方法中加入以下代码：

[java] view plaincopy

  1. toolbar.setLogo(R.drawable.ic_launcher);
  2. toolbar.setNavigationIcon(R.drawable.ic_launcher);
  3. toolbar.setTitle(getResources().getString(R.string.app_name));
  4. toolbar.setSubtitle("ToolBar");
  5. toolbar.setOnMenuItemClickListener(this);
  6. toolbar.setTitleTextColor(0xffffffff);
  7. toolbar.setSubtitleTextColor(0xffffffff);

注意：setNavigationIcon(),setOnMenuItemClickListener() 需要放在 setSupportActionBar之后才会生效

Toolbar菜单效果与ActionBar的实现一样，都是OptionsMenu。需要在Menu中添加 item ，然后通过Toolbar显示出来。

res/menu/menu_main.xml

[java] view plaincopy

  1. <menu xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:app="http://schemas.android.com/apk/res-auto"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. tools:context=".MainActivity">
  5. <item
  6. android:id="@+id/action_settings"
  7. android:title="@string/action_settings"
  8. android:orderInCategory="100"
  9. android:icon="@drawable/ic_launcher"
  10. app:showAsAction="always" />
  11. <item
  12. android:id="@+id/action_test"
  13. android:title="@string/action_settings"
  14. android:orderInCategory="10"
  15. android:icon="@drawable/ic_launcher"
  16. app:showAsAction="ifRoom" />
  17. </menu>

然后在MainActivity中添加以下代码

[java] view plaincopy

  1. @Override
  2. public boolean onCreateOptionsMenu(Menu menu) {
  3. getMenuInflater().inflate(R.menu.menu_main, menu);
  4. return true;
  5. }
  6. @Override
  7. public boolean onMenuItemClick(MenuItem menuItem) {
  8. Toast.makeText(this, menuItem.getTitle(), Toast.LENGTH_SHORT).show();
  9. return false;
  10. }

运行效果如下：

通过点击 菜单，可以发现能够触发 onMenuItemClick() 方法，但是，点击上级按钮 (upbutton)并没有触发该事件，因为它有自己独立的点击事件。

[java] view plaincopy

  1. toolbar.setNavigationOnClickListener(new View.OnClickListener() {
  2. @Override
  3. public void onClick(View v) {
  4. Toast.makeText(MainActivity.this, "HOME", Toast.LENGTH_SHORT).show();
  5. }
  6. });

在Android 原生样式应用中，有一个特别漂亮的效果，在使用抽屉布局的时候，展开或关闭抽屉时，Toolbar的 navigation drawer（upButton） 有一个动画，由三个横线旋转成箭头，大概如下：

静态图片展示不出来动画效果，请自行补脑！

这个效果其实是由 Toolbar+DrawerLayout 实现的。

可以通过以下几步实现：

  1. 在布局中加入DrawerLayout
  2. 在代码中找到DrawerLayout，将DrawerLayout 与 Toolbar关联
  3. 通过样式修改 navigation drawer 的颜色

1. 在布局中加入DrawerLayout   res/layout/activity_main.xml

[java] view plaincopy

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. tools:context=".MainActivity">
  6. <android.support.v7.widget.Toolbar
  7. android:layout_width="match_parent"
  8. android:layout_height="?attr/actionBarSize"
  9. android:id="@+id/toolbar"
  10. android:background="#339999" />
  11. <android.support.v4.widget.DrawerLayout
  12. android:layout_below="@+id/toolbar"
  13. android:id="@+id/drawerlayou"
  14. android:layout_width="match_parent"
  15. android:layout_height="match_parent">
  16. <!--Main Content-->
  17. <LinearLayout
  18. android:layout_width="match_parent"
  19. android:layout_height="match_parent"
  20. android:background="#123456">
  21. </LinearLayout>
  22. <!--DrawerLayout Content-->
  23. <LinearLayout
  24. android:layout_width="300dp"
  25. android:layout_height="match_parent"
  26. android:background="#345678"
  27. android:layout_gravity="start" />
  28. </android.support.v4.widget.DrawerLayout>
  29. </RelativeLayout>

2. 在MainActivity中找到DrawerLayout，将DrawerLayout 与 Toolbar关联

[java] view plaincopy

  1. final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayou);
  2. ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.app_name, R.string.app_name);
  3. toggle.syncState();
  4. drawerLayout.setDrawerListener(toggle);
  5. //通过 NavigationDrawer 打开关闭 抽屉
  6. toolbar.setNavigationOnClickListener(new View.OnClickListener() {
  7. @Override
  8. public void onClick(View v) {
  9. Toast.makeText(MainActivity.this, "HOME", Toast.LENGTH_SHORT).show();
  10. if (drawerLayout.isDrawerOpen(Gravity.START))
  11. drawerLayout.closeDrawer(Gravity.START);
  12. else
  13. drawerLayout.openDrawer(Gravity.START);
  14. }
  15. });

3. 修改样式 为如下：

[java] view plaincopy

  1. <resources>
  2. <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
  3. <item name="windowActionBar">false</item>
  4. <item name="android:windowNoTitle">true</item>
  5. <item name="colorPrimary">#66cc99</item>
  6. <item name="colorPrimaryDark">#66cc99</item>
  7. <item name="android:windowBackground">@color/back</item>
  8. <!-- 使用自定义样式-->
  9. <item name="drawerArrowStyle">@style/AppTheme.MyDrawerArrowStyle</item>
  10. </style>
  11. <style name="AppTheme" parent="AppTheme.Base" />
  12. <!--自定义 navigation drarwer 的样式-->
  13. <style name="AppTheme.MyDrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
  14. <item name="spinBars">false</item>
  15. <item name="color">#FFFFFF</item>
  16. </style>
  17. </resources>

其中：

spinBars  旋转效果      默认值为 true，有旋转效果 ；false则无旋转效果。

color navigation icon 的顏色

如果想要抽屉遮住 Toolbar，只需要改下布局，将Toolbar放入DrawerLayout的主界面即可：

[java] view plaincopy

  1. <android.support.v4.widget.DrawerLayout
  2. android:id="@+id/drawerlayou"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent">
  5. <!--Main Content-->
  6. <LinearLayout
  7. android:layout_width="match_parent"
  8. android:layout_height="match_parent"
  9. android:background="#123456">
  10. <!-- android:elevation="5dp" 加上阴影-->
  11. <android.support.v7.widget.Toolbar
  12. android:layout_width="match_parent"
  13. android:layout_height="?attr/actionBarSize"
  14. android:id="@+id/toolbar"
  15. android:elevation="5dp"
  16. android:background="#339999" />
  17. </LinearLayout>
  18. <!--DrawerLayout Content-->
  19. <LinearLayout
  20. android:layout_width="300dp"
  21. android:layout_height="match_parent"
  22. android:background="#345678"
  23. android:layout_gravity="start" />
  24. </android.support.v4.widget.DrawerLayout> 

    Toolbar 相对于 ActionBar的强大之处在于，ToolBar有更强大的自定义效果。因为ToolBar本身就是一个ViewGroup，可以往Toolbar中放入各种组件。

    [java] view plaincopy

    1. <android.support.v7.widget.Toolbar
    2. android:layout_width="match_parent"
    3. android:layout_height="?attr/actionBarSize"
    4. android:id="@+id/toolbar"
    5. android:elevation="5dp"
    6. android:background="#339999">
    7. <RelativeLayout
    8. android:layout_width="match_parent"
    9. android:layout_height="match_parent"
    10. android:background="#F00">
    11. <Button
    12. android:id="@+id/toolbar_btn"
    13. android:layout_width="wrap_content"
    14. android:layout_height="match_parent"
    15. android:text="Button"/>
    16. <ImageView
    17. android:layout_width="20dp"
    18. android:layout_height="20dp"
    19. android:src="@drawable/ic_launcher"
    20. android:layout_centerInParent="true" />
    21. <TextView
    22. android:layout_alignParentRight="true"
    23. android:layout_centerVertical="true"
    24. android:layout_width="wrap_content"
    25. android:layout_height="wrap_content"
    26. android:text="邓紫棋" />
    27. </RelativeLayout>

    可以根据自己的需求，设置各种效果。但是，左边的边距一直去不了，如果知道的朋友，请给我留言，谢谢！

时间： 2024-12-18 09:38:29

Androd Toolbar 的简单使用（转）的相关文章

Android ToolBar 的简单封装

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

【Android - V】之Toolbar的使用

Toolbar是Android V7包中的一个控件,用来代替Action Bar作为界面的头部标题栏布局.Toolbar相对于Action Bar的特点是更加灵活,可以显示在任何位置. 首先先来看Toolbar在布局文件中的代码怎么写,实际上跟其他Android原生控件一样,只需要设置宽高.背景等属性就可以了,如果有其他需求还可以设置theme等主题属性. 下面是一个Toolbar在布局文件中的代码: <RelativeLayout xmlns:android="http://schema

Android中通过ActionBar为标题栏添加搜索以及分享视窗

在Android3.0之后,Google对UI导航设计上进行了一系列的改革,其中有一个非常好用的新功能就是引入的ActionBar,他用于取代3.0之前的标题栏,并提供更为丰富的导航效果.ActionBar的主要目的是: 1．提供一个用于识别应用程序的标示和用户的位置的专用空间. 2．在不同的应用程序之间提供一致的导航和视觉体验. 3．突出Activity的关键操作(如"搜索"."创建"."共享"等),并且在可预见的方法内给用户提供快捷的访问.

win10 uwp 使用油墨输入

win10可以很简单在我们的app使用自然输入,这篇文章主要翻译https://blogs.windows.com/buildingapps/2015/09/08/going-beyond-keyboard-mouse-and-touch-with-natural-input-10-by-10/ 一些内容是参见成染大神 现在很多人还是使用笔和纸来记录,那么可以在电脑输入方式和之前使用的方式一样,很多用户觉得会方便.在win10 我们有一个简单的方法去让用户输入,InkCanvas.现在edge,

android应用开发-从设计到实现 3-5 静态原型的Appbar

静态原型的Appbar 我们设计的Appbar包括了两个部分,一个是toolbar,另一个就是flexible space-显示当日天气的详细信息, Toolbar参数确定 添加Toolbar很简单,首先找到Material Design中对Appbar的描述可以知道, 这是一个高度为56dp的矩形区域: 当Appbar收缩时,应用的名字会显示出来, 注意:这里显示的是中文-Dense类型的文字,所以文字的大小比英文要大1sp. 添加Toolbar 先添加区域, 选择Insert -> Shap

手把手教你打造一个Material Design风格的App(二)

--接上文. 3.1添加ToolBar(ActionBar) 添加ToolBar非常简单,你需要做的仅仅是为toolbar创建一个单独的layout布局,如果你想在哪里展示toolbar,只要在对应布局里将toolbar的布局文件include进来即可. (8)在res-->layout文件夹下创建一个名为toolbar.xml的文件,然后在里面添加一个android.support.v7.widget.Toolbar元素,这样就创建了一个具有特定高度和主题的toolbar. toolbar.x

Introduction to C++ Programming in UE4——UE4官方文档翻译与理解（一）

UE4这篇官方文档大体上讲解了UE4本身的诸多特性以及如何编写基本的C++代码,对理解UE4的编程基础内容非常有帮助,还是因为没有对于的汉语翻译.所以,这里我把这篇文档翻译出来,之后还会简洁的对其进行必要的总结.由于内容比较多,会分两个部分进行编写,持续更新~ Unreal C++ is Awesome!(虚幻4的C++是了不起的) This guide is about learning how to write C++ code in Unreal Engine. Do not worry,

窗体皮肤实现 - 实现简单Toolbar（六）

自定义皮肤很方便,基础开发的工作也是很大的.不过还好一般产品真正需要开发的并不是很多.现在比较漂亮的界面产品都会有个大大的工具条. Toolbar工具条实现皮肤的方法还是可以使用Form的处理方案.每当重复写相同东西的时候,有时会感觉无聊.所以想简单实现个轻量级的,依葫芦画瓢进行减肥. 完成后大致的效果 这个简易Toolbar只实现了Button样式,没有分割线没有下拉多选之类的样式. ”这么弱的东西有毛用?“ 其实这个工具条主要目的是用于附着在其他控件上使用,比如某些控件的标题区域位置.当然如

仿知乎程序 fragment的切换以及toolbar在不同页面下显示的menu不同

       我们在看知乎的时候,你会发现,首页,发现,关注,收藏,草稿这五项,你在点击之后进入到相应页面之后,侧滑菜单还在,你左侧滑一下,这个侧滑菜单还在,而提问,左滑屏幕,这个页面就没有,有点像返回上一页的感觉. 从操作来看,五页面应该是fragment之间的切换,而提问是单独的activity.     我们先从几个fragment入手,这里我们建立五fragment页,选择继承自android.support.v4.app.Fragment,因为这五个页面基本上都一样,就是简单的一个布局