Android5.0--- Toolbar

来源：互联网发布：php获取表单数据编辑：程序博客网时间：2024/05/16 06:52

原博地址：Android开发：最详细的 Toolbar 开发实践总结

ToolBar的基本使用

这里写图片描述

简介

toolbar是Android5.0时代替actionbar的控件（兼容5.0以下的使用V7中的toolbar），可以设置:导航图标 + App Logo + Title + SubTitle + customView + action menu

导包：

compile 'com.android.support:appcompat-v7:24.2.1'

1 设置导航图标
2 设置app logo
3 设置标题+子标题
4 添加自定义view
5 添加action menu

基本使用 ##

navatigation +app logo + title +subtitle可以进行代码设置，也可以xml中设置

代码中使用

Toolbar toobar = (Toolbar) findViewById(R.id.toobar);toobar.setNavigationIcon(R.mipmap.ic_drawer_home);toobar.setLogo(R.mipmap.ic_launcher);toobar.setTitle("Title");toobar.setSubtitle("Subtitle");//menu：toobar.inflateMenu(R.menu.menu_toobar);toobar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  @Override  public boolean onMenuItemClick(MenuItem item) {      switch (item.getItemId()) {          case R.id.menu_ic_search:              Toast.makeText(context,"ic_search",Toast.LENGTH_SHORT).show();              break;          case R.id.menu_ic_notification:              Toast.makeText(context,"notification",Toast.LENGTH_SHORT).show();              break;          case R.id.menu_item1:              Toast.makeText(context,"menu_item1",Toast.LENGTH_SHORT).show();              break;          case R.id.menu_item2:              Toast.makeText(context,"menu_item2",Toast.LENGTH_SHORT).show();              break;      }      return false;  }});

布局中使用

注意：Toolbar的根布局中要使用：xmlns:toobar=”http://schemas.android.com/apk/res-auto” ，不然toolbar的属性值无效，其中toolbar是自定义的，一般定义为app。

activity_main.xml:

    <?xml version="1.0" encoding="utf-8"?>    <LinearLayout        xmlns:android="http://schemas.android.com/apk/res/android"        xmlns:toobar="http://schemas.android.com/apk/res-auto"        xmlns:tools="http://schemas.android.com/tools"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        tools:context="com.cqc.toobardemo01.MainActivity">        <!--xml设置属性navigationIcon + logo + title + subtitle，需要自定义命名空间 -->        <!-- xmlns:toobar="http://schemas.android.com/apk/res-auto"-->        <android.support.v7.widget.Toolbar            android:id="@+id/toobar"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="#303F9F"            toobar:logo="@mipmap/ic_launcher"            toobar:navigationIcon="@mipmap/ic_drawer_home"            toobar:popupTheme="@style/Theme.Toolbar.base"            toobar:subtitle="subtitle"            toobar:title="Title">            <TextView                android:id="@+id/tv_custom"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="text"/>        </android.support.v7.widget.Toolbar>    </LinearLayout>

menu_toolbar.xml:

    <?xml version="1.0" encoding="utf-8"?>    <menu xmlns:android="http://schemas.android.com/apk/res/android"          xmlns:app="http://schemas.android.com/apk/res-auto">    <!--menu 使用showAsAction 需要xmlns:app="http://schemas.android.com/apk/res-auto"-->     <!--其中 app是自定义的-->        <item            android:id="@+id/menu_ic_search"            android:icon="@mipmap/ic_search"            android:title="search"            app:showAsAction="always"/>        <item            android:id="@+id/menu_ic_notification"            android:icon="@mipmap/ic_notifications"            android:title="notification"            app:showAsAction="ifRoom"/>        <item            android:id="@+id/menu_item1"            android:title="menu_item1"            app:showAsAction="ifRoom"/>        <item            android:id="@+id/menu_item2"            android:title="menu_item2"            app:showAsAction="ifRoom"/>    </menu>

Toolbar的高级使用

属性

title暂用的空间是这个toolbar剩余的，如果menu过大，会挤压title的空间，title过长的话，会省略显示即“…”,

xml

<android.support.v7.widget.Toolbar    android:id="@+id/toolBar"    android:layout_width="match_parent"    android:layout_height="50dp"    android:background="@color/toolbarBG"    app:navigationIcon="@mipmap/ic_menu_white"    app:logo="@mipmap/ic_launcher"    app:titleMarginStart="10dp"    app:title="@string/app_name"    app:titleTextColor="@android:color/white"    app:titleTextAppearance="@style/ToolbarTitleTextAppearance"    app:popupTheme="@style/Theme.Toolbar.menu"/>

其它：

android:minHeight="?attr/actionBarSize"app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

xml + meth

xml属性对应的方法含义 android:background= setBackGround(int resId) 整个Toolbar的背景色 app:navigationIcon= setNavigationIcon(int resId) 导航栏图标 app:logo= setLogo(int resId) Toolbar的logo(通常与navigationIcon的间距过大) app:title= setTitle(String title) 标题 app:titleTextColor= setTitleTextColor(int color) 字体颜色 app:titleTextAppearance= setTitleTextAppearance(int style) style:字体大小+颜色 app:titleMargin=”“ setTitleMargin(int margin) 间距 app:titleMarginStart= setTitleMarginStart(int margin) 左间距 app:titleMarginEnd=”“ setTitleMarginEnd(int margin) 右间距 app:titleMarginTop=”“ setTitleMarginTop(int margin) 上间距 app:titleMarginBottom=”“ setTitleMarginBottom(int margin) 下间距 app:subtitle=”subtitle” setSubtitle(String subtitle) 子标题内容 app:subtitleTextColor=”“ setSubtitleTextColor(int clolor) 子标题文字颜色 toobar:subtitleTextAppearance=”“ setSubtitleTextAppearance(Context context,int style) 子标题style：文字大小+颜色 app:popupTheme=”“ toolbar.setPopupTheme(int resId) menu的Style:字体大小和颜色

Title + SubTitle 的Style

Toolbar的title和subTitle的字体大小在xml中无法直接设置，必须通过style中的android:textSize=属性更改字体大小。

<!--Toobar的字体style--><!-- parent="Base.TextAppearance.AppCompat.Title"也可以--><style name="ToolbarTitleTextAppearance" parent="Base.TextAppearance.Widget.AppCompat.Toolbar.Title">    <item name="android:textSize">18sp</item></style>

//颜色toobar.setTitleTextColor(0x33fb4804);toobar.setSubtitleTextColor(0xBB000000);//style：字体大小+颜色toobar.setTitleTextAppearance(context,android.support.annotation.StyleRes int resId);toobar.setSubtitleTextAppearance(context,android.support.annotation.StyleRes int resId);

<!--toolbar 设置action menu--><style name="Theme.Toolbar.base" parent="Theme.AppCompat.Light.NoActionBar">    <item name="actionMenuTextColor">#fb4804</item><!--无效-->    <item name="android:textColorPrimary">#fb4804</item>    <item name="android:textSize">25sp</item><!--menu的字体-->    <item name="android:colorBackground">@color/mtrl_white_100</item><!--menu的背景色--></style>

在xml中引用：

app:popupTheme="@style/Theme.Toolbar.base"

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto"><!--menu 使用showAsAction 需要xmlns:app="http://schemas.android.com/apk/res-auto"--> <!--其中 app是自定义的-->    <item        android:id="@+id/menu_ic_search"        android:icon="@mipmap/ic_search"        android:title="search"        app:showAsAction="always"/>    <item        android:id="@+id/menu_ic_notification"        android:icon="@mipmap/ic_notifications"        android:title="notification"        app:showAsAction="ifRoom"/>    <item        android:id="@+id/menu_item1"        android:title="menu_item1"        app:showAsAction="ifRoom"/>    <item        android:id="@+id/menu_item2"        android:title="menu_item2"        app:showAsAction="ifRoom"/></menu>

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {    // Inflate the menu; this adds items to the action bar if it is present.    getMenuInflater().inflate(R.menu.menu_main, menu);    return true;}

或者

toobar.inflateMenu(R.menu.menu_toobar);

toobar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  @Override  public boolean onMenuItemClick(MenuItem item) {      switch (item.getItemId()) {          case R.id.menu_ic_search:              Toast.makeText(context,"ic_search",Toast.LENGTH_SHORT).show();              break;      return false;  }

或者：

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {    // Handle action bar item clicks here. The action bar will    // automatically handle clicks on the Home/Up button, so long    // as you specify a parent activity in AndroidManifest.xml.    int id = item.getItemId();    //noinspection SimplifiableIfStatement    if (id == R.id.action_settings) {        return true;    }    return super.onOptionsItemSelected(item);}

怎么设置Title与Logo的间距 ?

XML:app:titleMarginStart="10dp"代码：toolbar.setTitleMarginStart(int margin);

怎么让title居中？

让title居中，使用属性app:title="Title",实现不了，通过给Toolbar设置子View,让其居中来实现。但是这样的话，调用toolbar.setTitle("修改个人信息");无效。

<TextView    android:id="@+id/tv"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:gravity="center"    android:text="text"/>

为了解决这个bug，我们需要将TextView的宽改为wrap_content,android:layout_gravity="center"

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:minHeight="?attr/actionBarSize"    android:background="@color/primary">    <TextView        android:id="@+id/toolbar_title"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:singleLine="true"        android:textColor="@color/white"        android:textSize="20sp" /></android.support.v7.widget.Toolbar>

点击事件

navatigation 的点击事件，menu的点击事件
app logo + title +subtitle 没有点击事件

toobar.setNavigationOnClickListener(new View.OnClickListener() {       @Override       public void onClick(View view) {                   Toast.makeText(context,"NavigationIcon",Toast.LENGTH_SHORT).show();       }});toobar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {       @Override       public boolean onMenuItemClick(MenuItem item) {           switch (item.getItemId()) {               case R.id.menu_ic_search:                   Toast.makeText(context,"ic_search",Toast.LENGTH_SHORT).show();                   break;               case R.id.menu_ic_notification:                   Toast.makeText(context,"notification",Toast.LENGTH_SHORT).show();                   break;               case R.id.menu_item1:                   Toast.makeText(context,"menu_item1",Toast.LENGTH_SHORT).show();                   break;               case R.id.menu_item2:                   Toast.makeText(context,"menu_item2",Toast.LENGTH_SHORT).show();                   break;           }           return false;//改成true也可以，为什么？？       }   });

将ActionBar改成Toolbar

public Toolbar initToolbar(String title) {    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);    toolbar.setTitle(title);    setSupportActionBar(toolbar);    android.support.v7.app.ActionBar actionBar = getSupportActionBar();    if (actionBar != null) {        actionBar.setDisplayHomeAsUpEnabled(true);    }    return toolbar;}

点击下载源码

0 0