Android ToolBar控件详解及实例

ToolBar控件详解

在Activity中添加ToolBar

1.添加库

dependencies {
  ...
  compile "com.android.support:appcompat-v7:18.0.+"
}

2.Activity要继承AppCompatActivity

3.设置主题

使用ToolBar,要将系统默认的ActionBar隐藏掉

<application
  android:theme="@style/Theme.AppCompat.Light.NoActionBar"
  />

4.在XML添加ToolBar布局

<android.support.v7.widget.Toolbar
  android:id="@+id/my_toolbar"
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize"
  android:background="?attr/colorPrimary"
  android:elevation="4dp"
  android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
  app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Material Design specification 建议设置 elevation 为 4dp

Toolbar放在Activity的顶部(等于废话)

5.设置ToolBar

在Activity的onCreate()方法中,调用setSupportActionBar()方法,把我们的ToolBar对象传递进去,将我们xml中添加的ToolBar设置为我们这个Activity页面的App Bar。

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_my);
  Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
  setSupportActionBar(myToolbar);
  }

现在,我们的页面中,应该就会有一个App Bar了,默认情况下,这个App Bar只会显示一个App的名字和一个带有下拉选项的按钮,也可以在App Bar上添加更多的选项按钮

添加并处理一个Action

ToolBar允许在上面添加操作按钮,但是因为ToolBar上空间是有限的,如果一个程序有太多的Action,那么可以将Action添加到下拉菜单中,而不显示在ToolBar上

添加一个Action按钮

可以在XML文件中定义所有我们想添加的操作按钮和下拉列表中的行为,如果想要添加Action,可以在 res/目录下创建一个新的XML文件,添加元素。例如这样

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

  <!-- "Mark Favorite", should appear as action button if possible -->
  <item
    android:id="@+id/action_favorite"
    android:icon="@drawable/ic_favorite_black_48dp"
    android:title="@string/action_favorite"
    app:showAsAction="ifRoom"/>

  <!-- Settings, should always be in the overflow -->
  <item android:id="@+id/action_settings"
     android:title="@string/action_settings"
     app:showAsAction="never"/>

</menu>

App:showAsAction 属性是用来设置Action显示在哪,如果我们设置 app:showAsAction =”ifRoom”(示例中最常用的一种方式) ,这个Action将显示在ToolBar上,如果ToolBar上没有足够的控件,则显示在下拉菜单中。如果在程序中设置为 app:showAsAction=”never”,那么这个Action将永远显示在下拉列表中,而不会显示在ToolBar上。
响应操作(回调)

当用户选择了一个Action后,系统会回调 onOptionsItemSelected() 方法并传递 MenuItem 对象,在 onOptionsItemSelected() 的实现中,调用 MenuItem.getItemId() 方法来确定按下了哪个项目。返回的 ID 与您在相应的 元素 Android: id 属性中声明的值匹配。

例如下面

@Override
public boolean onOptionsItemSelected(MenuItem item) {
  switch (item.getItemId()) {
    case R.id.action_settings:
      // User chose the "Settings" item, show the app settings UI...
      return true;

    case R.id.action_favorite:
      // User chose the "Favorite" action, mark the current item
      // as a favorite...
      return true;

    default:
      // If we got here, the user's action was not recognized.
      // Invoke the superclass to handle it.
      return super.onOptionsItemSelected(item);

  }
}

添加一个回到主界面的按钮

应用为了使用户可以方便的回到主界面,ToolBar可以添加一个按钮,直接返回到指定的主界面。

声明主界面(父界面)

需要在清单文件中通过设置 android: parentActivityName 属性声明,如果要支持旧版本的Android设备,需要定义 ,类似这样:

<application ... >
  ...

  <!-- The main/home activity (it has no parent activity) -->

  <activity
    android:name="com.example.myfirstapp.MainActivity" ...>
    ...
  </activity>

  <!-- A child of the main activity -->
  <activity
    android:name="com.example.myfirstapp.MyChildActivity"
    android:label="@string/title_activity_child"
    android:parentActivityName="com.example.myfirstapp.MainActivity" >

    <!-- Parent activity meta-data to support 4.0 and lower -->
    <meta-data
      android:name="android.support.PARENT_ACTIVITY"
      android:value="com.example.myfirstapp.MainActivity" />
  </activity>
</application>

使用返回按钮

若要使用返回的按钮,需要调用setDisplayHomeAsUpEnabled()方法,类似这样:

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_my_child);

  // my_child_toolbar is defined in the layout file
  Toolbar myChildToolbar =
    (Toolbar) findViewById(R.id.my_child_toolbar);
  setSupportActionBar(myChildToolbar);

  // Get a support ActionBar corresponding to this toolbar
  ActionBar ab = getSupportActionBar();

  // Enable the Up button
  ab.setDisplayHomeAsUpEnabled(true);
}

添加Action Views

和上面 添加并处理一个Action 类似,只不过设置 showAsAction 为 “ifRoom|collapseActionView” 或者 “never|collapseActionView” 就可以了,类似这样

<item android:id="@+id/action_search"
   android:title="@string/action_search"
   android:icon="@drawable/ic_search"
   app:showAsAction="ifRoom|collapseActionView"
   app:actionViewClass="android.support.v7.widget.SearchView" />

这里我们添加的是一个带有搜索功能的Search按钮,如果我们要自定义一个自己的按钮,不添加 actionViewClass 即可

如果想要配置这个Action,可以在 onCreateOptionsMenu() 的回调里通过 getActionView() 获取到Search对象,类似这样:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.main_activity_actions, menu);

  MenuItem searchItem = menu.findItem(R.id.action_search);
  SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);

  // Configure the search info and add any event listeners...

  return super.onCreateOptionsMenu(menu);6
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

时间: 2017-03-14

Android折叠式Toolbar使用完全解析(CollapsingToolbarLayout)

简介 在各种不同的应用中,大家可能会经常见到这样一个效果:Toolbar是透明的,有着一个背景图片以及大标题,随着页面向上滑动,其标题逐渐缩放到Toolbar上,而背景图片则在滑动到一定程度后变成了Toolbar的颜色,这种效果也即是折叠式效果.其实这种效果在GitHub上面已经有很多开源库实现了,但是Google在其推出的Design Library库中也给出了一个这种控件,让我们很方便地实现了这种效果.这个控件是CollapsingToolbarLayout,它是一个增强型的FrameLay

ToolBar中menu无法同时显示图标和文字问题的解决方法

在使用ToolBar时,虽然在menu.xml文件的 item中 设置了 icon 属性,但是当设置 showAsAction="never"时,默认只显示文字的 title,而不会显示图标 icon.可以在 Activity 中重写onMenuOpened()方法,通过反射使 icon 和 title 同时可见. 将如下代码复制到Activity 中即可: @Override public boolean onMenuOpened(int featureId, Menu menu)

Android Support Library 标题栏(Toolbar)滚动效果实现方法

首先来个效果图  布局文件代码 在布局文件中,CoordinatorLayout作为布局文件根节点,AppBarLayout包含在CoordinatorLayout中,toolbar在AppBarLayout节点下include进来. <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="

Android自定义Toolbar使用方法详解

本篇文章介绍: 如何使用Toolbar; 自定义Toolbar; 先来看一看效果,了解一下toolbar: 布局文件: <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@co

解决Android V7后自定义Toolbar、ActionBar左侧有空白问题

如图所示: 1.查看Wiget.AppCompat.Toolbar的parent主题,如下所示: <style name="Base.Widget.AppCompat.Toolbar" parent="android:Widget"> <item name="titleTextAppearance">@style/TextAppearance.Widget.AppCompat.Toolbar.Title</item&

Android中Toolbar随着ScrollView滑动透明度渐变效果实现

Android中Toolbar随着ScrollView滑动透明度渐变效果实现 一.思路:监听ScrollView的滑动事件 不断的修改Toolbar的透明度 二.注意 1.ScrollView 6.0以前没有scrollView.setOnScrollChangeListener(l)方法  所以要自定义ScrollView 在onScrollChanged()中监听 2.ScrollView 6.0(23)以前没有scrollView.setOnScrollChangeListener()方法

Android ToolBar整合实例使用方法详解

最近做项目中遇到ToolBar因为不同的界面toobar不同为了描述统一的风格.相信大家也非常清楚,大多数ToolBar包括以下几个方面 左标题 左边题颜色 左标题图标等 标题 标题颜色 右标题 右标题颜色 右标题图标 ToolBar标题 ToolBar颜色 ToolBar图标 ToolBar子标题 ToolBar子标题 ToolBar子标题颜色 再看一下淘宝以及其他appToolBar样式界面 下面看下我自定义的CustomeToolBar继承原生ToolBar package com.ldm

Android自定义ActionProvider ToolBar实现Menu小红点

今天的几个目标: 1. 自定义ActionProvider 2. Toolbar ActionBar自定义Menu 3. Toolbar ActionBar 右侧Menu添加角标(Toolbar ActionBar Menu添加小红点) 源代码在文章末尾. -------------------------------------------------------------------------------- 效果预览 自定义Menu后不影响原生MD的任何效果.可以通过外部来控制显示的文字

Android5.0+ CollapsingToolbarLayout使用详解

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView.Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端). 使用CollapsingToolbarLayout: <android.support.design.wid

Android动态修改ToolBar的Menu菜单示例

Android动态修改ToolBar的Menu菜单 效果图 实现 实现很简单,就是一个具有3个Action的Menu,在我们滑动到不同状态的时候,把对应的Action隐藏了. 开始上货 Menu Menu下添加3个Item <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xml

Android制作微信app顶部menu菜单(ActionBar)

使用微信APP的小伙伴对于微信的ActionBar一定有印象,今天就带领大家一起实现以下这个效果. 第一步打开我们的开发工具,这里我使用的是Eclipse+ADT插件,然后创建我们的工程,这里选择Android的最低版本号为3.0或以上. 然后开始我们的"抄袭",首先打开我们微信,我们看到,顶部标题部分,分为左右两部分,左侧为"微信"两字,右侧则为搜索按钮+更多按钮,点击搜索按钮,会出现一个文本输入框.点击更多按钮,则会出现隐藏的menu菜单,分为:添加好友.发起群

Android动态修改应用图标与名称的方法实例

遇到的坑 这里我把做这个功能中遇到的一些问题写在前面,是为了大家能先了解有什么问题存在,遇到这些问题的时候就不慌了,这里我把应用图标和名称先统一使用icon代替进行说明. 1.动态替换icon,只能替换内置的icon,无法从服务器端获取来更新icon: 2.动态替换icon以后,应用内更新的时候必须要切换到原始icon),否则可能导致更新安装失败(AS上表现为adb运行会失败),或者升级后应用图标出现多个甚至应用图标都不显示的情况(这些问题都可以通过下面我推荐的开发规则解决掉,所以这是一个坑点,

微信小程序基于slider组件动态修改标签透明度的方法示例

本文实例讲述了微信小程序基于slider组件动态修改标签透明度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view class="img" style="opacity:{{imgOpacity}}"></view> <slider min="0" max="1" step="0.1" show-value value=&quo

Android学习教程之圆形Menu菜单制作方法(1)

本文实例为大家分享了Android圆形菜单的使用方法,供大家参考,具体内容如下 MainActivity.java代码: package siso.handlerdemo; import android.app.NotificationManager; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.vi

android教程之使用popupwindow创建菜单示例

PopupWindow是一个弹出式窗口,它可以展示任意View.他会浮在当前窗口的上方展示. 下面看代码: 复制代码 代码如下: public class MyActivity extends Activity{    private PopupWindow menu;    private LayoutInflater inflater;    private View layout; @Override    public void onCreate(Bundle savedInstance

Android动态绘制饼状图的示例代码

项目里面的需求,当时搜索到MPAndroidChart库,可以实现,但是只是一个需求就引用偌大的一个库,感觉不太爽,打算自己自定义一个. 一.惯例先上效果图 更新图 二.GitHub 代码地址,欢迎指正https://github.com/MNXP/XPPieChart 三.思路 1.空心图(一个大圆中心绘制一个小圆)   2.根据数据算出所占的角度   3.根据动画获取当前绘制的角度   4.根据当前角度获取Paint使用的颜色   5.动态绘制即将绘制的 和 绘制已经绘制的部分(最重要) 四

open 动态修改img的onclick事件示例代码

复制代码 代码如下: var imgsrc = document.getElementById("imgsrc").getElementsByTagName('img'); imgsrc[0].style.cursor="hand"; imgsrc[0].onclick = new Function( "openArticle('/RssCommServlet?catalogid=29')"); imgsrc[1].style.cursor=&q

Android 动态菜单实现实例代码

Android 动态菜单 先上效果图 比较简单,主要就是属性动画的使用和坐标角度的小细节. 实现 实现效果: 图标按照路径一路缩放渐变过来即可. 核心代码 /** * Item开启动画 * * @param btnItem * @param index * @param total * @param radius */ private void btnItemStartAnimator(View btnItem, int index, int total, int radius) { if (b