Android教程 -08 ToolBar的使用和主题的介绍

ActionBar 简介

视频为本篇播客知识点讲解,建议采用超清模式观看, 欢迎点击订阅我的优酷

讲解ToolBar之前首先需要了解 ActionBar, 两者使用起来基本上一致。

Android 3.0 Android 推了 ActionBar 这个控件，而到了2013 年 Google 开始大力地推动所谓的 android style，想要逐渐改善过去 android 纷乱的界面设计，希望让终端使用者尽可能在 android 手机有个一致的操作体验。

先来看一眼ActionBar的样子

ActionBar里面包含logo,标题, 菜单等等,怎么给应用程序添加ActionBar呢?

ActionBar存在两个不同包下的类, 分别为兼容低版本的(android.support.v7.app.ActionBar),和不兼容低版本的（android.app.ActionBar）。使用起来基本上没有区别, 一般情况都是采用兼容低版本的,所有大家一定不要导错包。

使用起来首先修改应用程序主题为包含ActionBar的, 然后让Activity继承AppCompatActivity, 这样就可以看到ActionBar了

    <!--主题-->
  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

通过getSupportActionBar(); 就可以获取兼容低版本的ActionBar, 然后就可以进行一系列设置。比如设置标题 setTiTle 之类的。

ActionBar 创建菜单

视频为本篇播客知识点讲解,建议采用超清模式观看, 欢迎点击订阅我的优酷

Android新版本 菜单键默认已经不弹出菜单了,而是弹出最近任务列表, 菜单列表集成到了ActionBar的右上角, 可以隐藏到列表里, 也可以显示到外面。

通过onCreateOptionsMenu 方法加载菜单

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

通过onOptionsItemSelected 处理菜单的点击事件

  @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();

        if (id == R.id.action_settings) {
            Toast.makeText(this,"我是设置按钮",Toast.LENGTH_SHORT).show();
            return true;
        }
        if(id==R.id.action_add){
            Toast.makeText(this,"我是添加按钮",Toast.LENGTH_SHORT).show();
            return true;
        }
        if(id==android.R.id.home){
            Toast.makeText(this,"home",Toast.LENGTH_SHORT).show();
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

再来看看菜单文件是怎么定义的

<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">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never"/>

    <!--orderInCategory显示优先级  orderInCategory值越大优先级越低  -->
    <item
        android:id="@+id/action_add"
        android:orderInCategory="100"
        android:title="你好"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="ifRoom|withText"/>
    <item
        android:id="@+id/action_add2"
        android:orderInCategory="100"
        android:title="你好"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="always|withText"/>
   </menu>

有几个属性，需要重点介绍下，

title菜单标题，

icon菜单图标,

orderInCategory显示的优先 级,

showAsAction 显示的方式, 其中never表示从不显示到外面, always一直显示到ActionBar上面,ifRoom如果ActionBar空间足够显示到上面, 空间不够隐藏到 overflow里面(就是上面三个点的图片 点击弹出的列表中)

Toolbar

视频为本篇播客知识点讲解,建议采用超清模式观看, 欢迎点击订阅我的优酷

介绍完了ActionBar 我们再来看看Toolbar的设计理念

Android 5.0 推出material design(材料设计),官方在某些程度上认为 ActionBar 限制了 android app 的开发与设计的弹性。

Toolbar其实就是为了取代ActionBar, 因为ActionBar 局限性太大, ToolBar更利于扩展, 使用方法很相似

如何用Toolbar 取代ActionBar呢 ,

1.去掉ActionBar

首先第一步更改主题, 选择NoActionBar ,这样就保证当前应用程序不存在ActionBar了

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

2.布局文件中定义ToolBar

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
  />

3.代码中设置ToolBar取代ActionBar

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_app_bar);
        Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);  // 用ToolBar代替ActionBar

    }

Toolbar 可以用来做什么呢

使用起来和ActionBar非常相似, 菜单添加都是一模一样

   toolbar.setTitle("我是标题");
   toolbar.setSubtitle("子标题");
   toolbar.setLogo(R.mipmap.ic_launcher);
   toolbar.setNavigationIcon(R.mipmap.ic_launcher);

我们可能也许会有需求就是让Toolbar显示的标题居中,这也不难, Toolbar非常灵活,可以在里面添加TextView, 但是还需要把toolbar的标题设置为空,否则的话显示的太难看了。

 toolbar.setTitle(" ");

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        >
        <!--gravity 文字在控件中居中
            layout_gravity  控件在父容器的位置
        -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_gravity="center"
            android:layout_centerInParent="true"
            android:text="我是标题"
            android:textSize="20sp"/>

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

主题设置

视频为本篇播客知识点讲解,建议采用超清模式观看, 欢迎点击订阅我的优酷

Toolbar可以单独设置主题,也可以单独添加菜单颜色主题

  <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:theme=""       // Toolbar主题
        android:popupTheme=""  // 菜单主题控制
          ....
        >

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

如果你不单独给Toolbar设置主题,toolbar就会采用系统默认主题

我们是可以给系统主题添加一些条目,控制一些组件的颜色,如下面的主题就设置了三种颜色,根据不同的name会自动控制不同区域的颜色

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

具体分别控制什么颜色呢?

1. android:colorPrimaryDark 应用的主要暗色调，statusBarColor默认使用该颜色
2. android:statusBarColor 状态栏颜色，默认使用colorPrimaryDark
3. android:colorPrimary 应用的主要色调，actionBar默认使用该颜色
4. android:windowBackground 窗口背景颜色
5. android:navigationBarColor 底部栏颜色
6. android:colorForeground 应用的前景色，ListView的分割线，switch滑动区默认使用该颜色
7. android:colorBackground 应用的背景色，popMenu的背景默认使用该颜色
8. android:colorAccent 一般控件的选种效果默认采用该颜色
9. android:colorControlNormal 控件的默认色调　
10. android:colorControlHighlight 控件按压时的色调
11. android:colorControlActivated 控件选中时的颜色，默认使用colorAccent
12. android:colorButtonNormal 默认按钮的背景颜色
13. android:textColor Button，textView的文字颜色
14. android:textColorPrimaryDisableOnly RadioButton checkbox等控件的文字
15. android:textColorPrimary 应用的主要文字颜色，actionBar的标题文字默认使用该颜色

后期补充

其实主题还可以做很多操作,不仅仅可以控制主题颜色,还可以控制动画之类的,总之很强大 ,

windowBackground 背景

windowBackgroundFallback

windowClipToOutline

windowFrame Dialog 是否有边框

windowNoTitle 是否有标题

windowFullscreen 是否为全屏

windowOverscan 是否要求窗体铺满整屏幕

windowIsFloating 是否浮在下层之上

windowContentOverlay 设置覆盖内容背景

windowShowWallpaper 是否显示壁纸

windowTitleStyle 标题栏Style

windowTitleSize 窗体文字大小

windowTitleBackgroundStyle 标题栏背景style

windowAnimationStyle 切换时的动画样式

windowSoftInputMode 在使用输入法时窗体的适配

windowActionBar 是否打开ActionBar

windowActionModeOverlay 是否覆盖action

windowCloseOnTouchOutside 是否再点击外部可关闭

windowTranslucentStatus 是否半透明状态

windowTranslucentNavigation 是否使用半透明导航

windowDrawsSystemBarBackgrounds 是否绘制系统导航栏背景

statusBarColor 状态栏颜色

navigationBarColor 导航栏颜色

windowActionBarFullscreenDecorLayout 全屏时的布局

windowContentTransitions 内容是否转换

windowActivityTransitions 活动时候转换

本章教程就讲解到这了,欢迎点击订阅我的优酷