脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Android 5.0中Toolbar

深入理解Android 5.0中的Toolbar

 更新时间：2017年01月25日 10:23:28   作者：木木仨儿  
相信大家都有所体会，搜索Toolbar相关文章满天飞，但是大都不是很全面，每次要用到的时候又要重头过滤一遍。而且随着版本升级很多较早的文章的方法已经失效，最近刚好好用到Toolbar，就将相关配置整理下，方便以后需要的时候或者有需要的朋友们参考学习。

环境说明：

  • Android Studio 2.0
  • V7包版本：com.android.support:appcompat-v7:23.4.0
  • compileSdkVersion 23
  • buildToolsVersion "24.0.0"

Toolbar 引入使用

XML布局中加入：

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

主题改为隐藏ActionBar:

Theme.AppCompat.Light.NoActionBar

Activity代码中加入：

 setContentView(R.layout.activity_main);
 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);

此时运行效果：

添加背景色

android:background="@color/colorPrimary"

此时运行效果：

基本属性设置

<android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"
 android:background="@color/colorPrimary"
 app:navigationIcon="@mipmap/title_bar_back"//左侧图标
 app:subtitle="子标题"
 app:subtitleTextColor="#fff" //标题颜色
 app:title="标题"
 app:titleTextColor="#fff"/> //子标题颜色

运行效果：

添加选项菜单

第一步创建菜单文件

 <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:icon="@mipmap/ic_launcher"
 android:orderInCategory="100"
 android:title="settings"
 app:showAsAction="never"/>
 <item
 android:id="@+id/action_share"
 android:icon="@mipmap/ic_action_share"
 android:orderInCategory="100"
 android:title="settings"
 app:showAsAction="ifRoom"/>
 <item
 android:id="@+id/action_search"
 android:icon="@mipmap/ic_action_search"
 android:orderInCategory="100"
 android:title="settings"
 app:showAsAction="ifRoom"/>
 </menu>

第二部在代码中重写onCreateOptionsMenu方法加载菜单文件

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

此时效果：

个性设置

左侧返回箭头

想要显示自带的返回箭头，需要去掉之前设定的属性：

app:navigationIcon="@mipmap/title_bar_back"

然后在代码中添加：

getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

此时效果：

溢出图标颜色

在style文件中添加：

 <!-- 溢出菜单图标颜色-->
<item name="colorControlNormal">@android:color/white</item>

此时效果：

自定义右侧溢出图标

在Style文件中添加：

<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>
 <!-- 溢出菜单图标颜色-->
 <item name="colorControlNormal">@android:color/white</item>
 <!-- 溢出菜单图标自定义-->
 <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
 </style>

 <style name="OverflowButtonStyle" parent="android:Widget.ActionButton.Overflow">
 <item name="android:src">@mipmap/ic_action_add</item>
 </style>

此时运行效果：

更改弹出菜单背景

在Style文件中添加样式：





在布局文件中添加使用主题：




app:popupTheme="@style/ToolbarPopupTheme"




此时运行效果：




更改弹出菜单文字颜色


添加样式文件：




<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>
  <!-- 溢出菜单图标颜色-->
  <item name="colorControlNormal">@android:color/white</item>
  <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
  <!-- 溢出菜单文字颜色-->
  <item name="textAppearanceLargePopupMenu">@style/Overflow_Menu_Text_style</item>
 </style>
 <!--溢出菜单文字颜色-->
 <style name="Overflow_Menu_Text_style" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large">
  <item name="android:textColor">#fff</item>
 </style>




此时运行效果：




修改标题文字大小


添加配置：




 app:titleTextAppearance="@style/ToolbarTitleSize"




添加style：




 <!-- toolbar标题文字大小 -->
 <style name="ToolbarTitleSize" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
  <item name="android:textSize">28sp</item>
 </style>




此时运行效果：




子标题文字大小类似，添加配置然后定义style文件（此处省略）：




app:subtitleTextAppearance="@style/ToolbarTitleSize"




修改弹出菜单位置


修改配置使弹出菜单显示在Toolbar下方：




首先重新设置属性：（在界面布局文件Toolbar中）




app:popupTheme="@style/OverflowMenuStyle"




在Style文件中添加：




<style name="OverflowMenuStyle">
  <!-- 是否覆盖锚点，默认为true，即盖住Toolbar -->
  <item name="overlapAnchor">false</item>
  <item name="android:dropDownWidth">wrap_content</item>
  <item name="android:paddingRight">5dp</item>
  <!-- 弹出层背景颜色 -->
  <item name="android:colorBackground">#FFCC99</item>
  <!-- 弹出层垂直方向上的偏移，即在竖直方向上距离Toolbar的距离，值为负则会盖住Toolbar -->
  <item name="android:dropDownVerticalOffset">5dp</item>
  <!-- 弹出层水平方向上的偏移，即距离屏幕左边的距离，负值会导致右边出现空隙 -->
  <item name="android:dropDownHorizontalOffset">0dp</item>
  <!-- 设置弹出菜单文字颜色 -->
  <item name="android:textColor">#0099CC</item>
 </style>




此时运行效果：




事件处理


返回按钮事件


添加监听




toolbar.setNavigationOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    Toast.makeText(getApplicationContext(), "点击了返回箭头", Toast.LENGTH_LONG).show();
   }
  });




菜单项点击事件


重写方法




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




自定义Toolbar


Toolbar下面可以嵌套布局，直接将自己定义好的布局放到Toolbar下面即可




<android.support.v7.widget.Toolbar
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize">

  <RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="match_parent">
   ......
   </RelativeLayout>
 </android.support.v7.widget.Toolbar>




Toolbar 和 DrawerLayout 左滑菜单




 <?xml version="1.0" encoding="utf-8"?>
 <android.support.v4.widget.DrawerLayout 
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/drawer_left"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <!--侧滑菜单-->
 <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_gravity="start"
  android:background="#CCCCFF"
  android:orientation="vertical">

  <TextView
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:padding="10dp"
   android:text="选项一"
   android:textSize="18sp"/>

  <TextView
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:padding="10dp"
   android:text="选项二"
   android:textSize="18sp"/>
 </LinearLayout>
</android.support.v4.widget.DrawerLayout>




添加左滑布局文件：


在主布局文件中引入：（在Toolbar下方）




<!--DrawerLayout-->
<include layout="@layout/custom_drawerlayout"/>




在代码中添加关联：




DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_left);
 ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close);
 mDrawerToggle.syncState();
 mDrawerLayout.setDrawerListener(mDrawerToggle);




此时运行效果：




新版本studio，在新建Activity的时候可以选择对应的模板，会自动创建好DrawerLayout并关联Toolbar.


总结


以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。



                            
                            

                                您可能感兴趣的文章:
                            


                        

                        
                        

                            
                        

                        

                            
                            
                        

                        

                            
                        

                        

                        

                            
相关文章

                            
  •  Android防止点击过快造成多次响应事件的解决方法 
    Android防止点击过快造成多次响应事件的解决方法
    btn点击用户可能只点击了一次但是后台响应了多次，像一些表单的提交出现这种问题比较棘手，本篇文章主要介绍Android防止点击过快造成多次响应事件的解决方法，有兴趣的可以了解一下。

     2016-12-12 
    • 

  •  Android入门教程之RecyclerView的具体使用详解 
    Android入门教程之RecyclerView的具体使用详解
    RecyclerView是Android一个更强大的控件,其不仅可以实现和ListView同样的效果,还有优化了ListView中的各种不足。其可以实现数据纵向滚动,也可以实现横向滚动(ListView做不到横向滚动)。接下来讲解RecyclerView的用法
     2021-10-10 
    • 

  •  Android 多渠道打包进阶版 
    Android 多渠道打包进阶版
    上篇文章更了Android 多渠道打包，这篇文章将做一个后续继续更Android 多渠道打包进阶版，上次意未尽的朋友可以继续啦，第一次点进来的朋友也可以看上次文章
     2021-09-09 
    • 

  •  Android开发之FloatingActionButton悬浮按钮基本使用、字体、颜色用法示例 
    Android开发之FloatingActionButton悬浮按钮基本使用、字体、颜色用法示例
    这篇文章主要介绍了Android开发之FloatingActionButton悬浮按钮基本使用、字体、颜色用法,结合实例形式分析了Android FloatingActionButton悬浮按钮的基本功能、布局、使用方法及操作注意事项,需要的朋友可以参考下
     2019-03-03 
    • 

  •  android微信授权获取用户个人信息代码 
    android微信授权获取用户个人信息代码
    大家好，本篇文章主要讲的是android微信授权获取用户个人信息代码，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下，方便下次浏览
     2021-12-12 
    • 

  •  Android短信验证码（用的Mob短信验证） 
    Android短信验证码（用的Mob短信验证）
    这篇文章主要为大家详细介绍了Android短信验证码，使用Mob短信验证，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
     2017-05-05 
    • 

  •  Android自定义PasswordInputView密码输入 
    Android自定义PasswordInputView密码输入
    这篇文章主要为大家详细介绍了Android自定义PasswordInputView密码输入功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
     2018-08-08 
    • 

  •  Android Studio实现简易计算器设计 
    Android Studio实现简易计算器设计
    这篇文章主要为大家详细介绍了Android Studio实现简易计算器设计，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
     2022-05-05 
    • 

  •  Android实现音频录音与播放 
    Android实现音频录音与播放
    这篇文章主要为大家详细介绍了Android实现音频录音与播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
     2022-08-08 
    • 

  •  Kotlin使用TransitionDrawable实现颜色渐变效果流程讲解 
    Kotlin使用TransitionDrawable实现颜色渐变效果流程讲解
    这篇文章主要介绍了Kotlin使用TransitionDrawable实现颜色渐变效果，这里，我们通过TransitionDrawable显示颜色渐变效果，包括背景颜色的变化，以及图片与图片的渐变效果
     2023-02-02 
    • 


                        

                        

                            
                        

                        
                        

                            
最新评论