android Toolbar加文字 android bottombar

转载

我心依旧 2024-08-20 23:46:59

文章标签 android Toolbar加文字 android Toolbar ActionBar AppBar 文章分类 Android 移动开发

ActionBar 简介

height="498" width="510" src="http://player.youku.com/embed/XMTM4ODk2MTU2MA==" allowfullscreen="">

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

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

先来看一眼ActionBar的样子

android Toolbar加文字 android bottombar_Toolbar

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 创建菜单

height="498" width="510" src="http://player.youku.com/embed/XMTM5MDc2MjYxMg==" allowfullscreen="">

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

height="498" width="510" src="http://player.youku.com/embed/XMTM5MjA2OTYzMg==" allowfullscreen="">

介绍完了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 可以用来做什么呢

android Toolbar加文字 android bottombar_android_02

使用起来和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>

主题设置

height="498" width="510" src="http://player.youku.com/embed/XMTM5MzEwNDg2OA==" allowfullscreen="">

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>

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

android Toolbar加文字 android bottombar_android_03

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

后期补充

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

android Toolbar加文字 android bottombar_Toolbar_04

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