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

ActionBar 简介

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

讲解ToolBar以前首先须要了解 ActionBar, 二者使用起来基本上一致。java

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

先来看一眼ActionBar的样子
这里写图片描述markdown

ActionBar里面包含logo,标题, 菜单等等,怎么给应用程序添加ActionBar呢?
ActionBar存在两个不一样包下的类, 分别为兼容低版本的(android.support.v7.app.ActionBar),不兼容低版本的(android.app.ActionBar)。使用起来基本上没有区别, 通常状况都是采用兼容低版本的,全部你们必定不要导错包。
使用起来首先修改应用程序主题为包含ActionBar的, 而后让Activity继承AppCompatActivity, 这样就能够看到ActionBar了app

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

经过getSupportActionBar(); 就能够获取兼容低版本的ActionBar, 而后就能够进行一系列设置。好比设置标题 setTiTle 之类的。ide

ActionBar 建立菜单

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

Android新版本 菜单键默认已经不弹出菜单了,而是弹出最近任务列表, 菜单列表集成到了ActionBar的右上角, 能够隐藏到列表里, 也能够显示到外面。
经过onCreateOptionsMenu 方法加载菜单动画

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

经过onOptionsItemSelected 处理菜单的点击事件this

@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);
    }

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

<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 活动时候转换

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

相关文章
相关标签/搜索