Material Design - Toolbar 使用总结

Material Design - Toolbar 使用总结

在此之前使用 Toolbar 时都是通过笔记零散的记录下使用方式及一些方法,很少去系统性进行整理,以至于会出现东找找西找找的现象,所以决定写篇文章系统梳理下。本文只是我个人的使用总结,如果想看详细的资料,可以看Android开发:最详细的 Toolbar 开发实践总结android:ToolBar详解(手把手教程) 这两篇文章,这也是我最初所看的文章。

  • 主题修改
    新建程序默认都是显示 ActionBar 的,所以先要将 ActionBar 隐藏并在 xml 文件中使用 V7 包下的 Toolbar ,否则无法向下兼容。
<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        ...
</application>

可以看到 android:theme 属性指定了一个 AppTheme 的主题,打开 res/values/styles.xml 文件,如下

<resources>
   <!-- Base application theme. -->
<style  name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>
</resources>

可以看到这里引用了 DarkActionBar 主题,这是个深色的 ActionBar 主题,而使用 Toolbar 需要一个不带 ActionBar 的主题, 常有Theme.AppCompat.NoActionBarTheme.AppCompat.Light.NoActionBar 两种主题可选。
Theme.AppCompat.NoActionBar 表示深色主题,即界面的主题颜色为深色,陪衬颜色为浅色,而Theme.AppCompat.Light.NoActionBar 刚好与之相反。根据项目需求选择合适的主题,这里选用 Theme.AppCompat.Light.NoActionBar

选择后如下

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>
</style>

  • 使用方式
    经过修改主题,ActionBar 已经被隐藏起来,那么如何使用 Toolbar 代替 ActionBar 呢?在替换之前先看下 Toolbar 的 xml文件,
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/popup_theme"/>

此处 ToolbarTheme被单独指定,可以更加实际需求进行设置,app:popupThme 属性是 Toolbar 上弹出菜单的主题。
Activity

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

首先得到 Toolbar 的实例,在调用 setSupportActionBar() 方法将 Toolbar 的实例传入即可。Toolbar 也可执行各种属性的设置,如 setTitle()setSubTitle()setNavigationIcon() 等等操作。当然也可在 xml 中进行属性设置。如果属性是在 Android5.0 新增的,则需使用 xmlns:app 命名空间,如 app:title = “xxx”

  • Toolbar Menu
    res 目录下创建相关 xml 文件,如下
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never"/>
</menu>

showAsAction可选值:
always 表示永远显示在 Toolbar 上,如果屏幕空间不够在不显示;
ifRoom 表示屏幕空间足够的情况下显示在 Toolbar 中,不够的话显示在菜单当中;
never 表示永远显示在菜单当中;
collapseActionView 表示与 android:actionViewClass 相关联的操作视图是可折叠的。

Activity 中重写相关方法

  @Override
  public boolean onCreateOptionsMenu(Menu menu)
  {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item)
  {
   switch (item.getItemId())
    {
      case R.id.action_settings:
        break;
      default:
        break;
    }
    return super.onOptionsItemSelected(item);
  }

或使用 Toolbar 实例初始化Menu

 @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.inflateMenu(R.menu.menu_main);    //加载Menu
    toolbar.setOnMenuItemClickListener(this); //监听
    setSupportActionBar(toolbar);
  }

  @Override
  public boolean onMenuItemClick(MenuItem item)
  {
    switch (item.getItemId())
    {
      case R.id.action_settings:
        break;

      default:
        break;
    }
    return false;
  }

默认情况下 Toolbar Menu 弹出的位置位于 Toolbar 上,可通过修改 app:popupTheme 主题中属性使其位于 Toolbar 下方。

<item name="overlapAnchor">false</item>//主题中设置

这里是 overlapAnchor 属性,而不是 android:overlapAnchor 属性。

修改弹出菜单锚点


  • Toolbar 添加搜索

点击前效果如下:
点击前效果


点击后效果如下:
点击后效果


输入搜索内容后如下:
输入搜索内容

这里控件图标及提示文字都进行了修改。

首先修改 menu.xml 文件

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

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

</menu>

menu 中指定了 android:actionViewClass 属性及自定义 icon 图标,指定 app:showAction = “collapseActionView|ifRoom” 属性。

ActivityonCreateOptionsMenu(Menu menu) 中,

  @Override
  public boolean onCreateOptionsMenu(Menu menu)
  {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    MenuItem item = menu.getItem(0);
    SearchView searchView = new SearchView(this);
    //设置展开后图标的样式,false时ICON在搜索框外,true为在搜索框内,无法修改
    searchView.setIconifiedByDefault(false);
    searchView.setQueryHint("搜索");
    searchView.setSubmitButtonEnabled(true);//设置最右侧的提交按钮
    item.setActionView(searchView);

    //搜索字体颜色
    TextView textView = (TextView) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
    textView.setHintTextColor(Color.WHITE);
    textView.setTextColor(Color.WHITE);

        //搜索字体颜色
    TextView textView = (TextView) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
    textView.setHintTextColor(Color.WHITE);
    textView.setTextColor(Color.WHITE);

    //右侧提交
    ImageView goBtn = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_go_btn);
    goBtn.setImageDrawable(getDrawable(R.drawable.ic_go_btn));

    //搜索
    ImageView magBtn = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_mag_icon);
    magBtn.setImageDrawable(getDrawable(R.drawable.ic_toolbar_menu));

    //清除
    ImageView closeBtn = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
    closeBtn.setImageDrawable(getDrawable(R.drawable.ic_close_btn));
    return true;
  }

通过系统 ViewId 找到相关控件并进行设置即可。

添加搜索回调监听

searchView.setOnQueryTextListener(this);//搜索监听
  • 总结
    ToolbarActionBar 灵活的很多,Google 推荐开发者使用 Toolbar 。这里只列出 Toolbar 的一小部分用法,配合 Material Design 中其他控件使用时,会展现出更加炫酷的效果。

  • 后记
    第一次写博客,未写之前感觉和写个笔记没啥大区别,当动起手写才发现自己想的太简单了,笔记是零散、片段式记录下来,而要写好一篇博客需要在头脑中有良好的大纲,清晰的思路,这样才能良好的表达出来,同时也可加深自己对其认识。阅读中如果发现不妥之处,希望大家踊跃提出,帮助纠正,同时也请大家海涵。
    学习贵在坚持,加油!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值