源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

深入理解Android 5.0中的Toolbar

  • 时间:2021-12-14 11:06 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:深入理解Android 5.0中的Toolbar
[b]环境说明:[/b] [list] [*]Android Studio 2.0[/*] [*]V7包版本:com.android.support:appcompat-v7:23.4.0[/*] [*]compileSdkVersion 23[/*] [*]buildToolsVersion "24.0.0"[/*] [/list] [b]Toolbar 引入使用[/b] 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);
此时运行效果: [img]http://files.jb51.net/file_images/article/201701/2017125101203974.png?2017025101212[/img] 添加背景色
android:background="@color/colorPrimary"
此时运行效果: [img]http://files.jb51.net/file_images/article/201701/2017125101238050.png?2017025101245[/img] [b]基本属性设置[/b]
<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"/> //子标题颜色
运行效果: [img]http://files.jb51.net/file_images/article/201701/2017125101317811.png?2017025101326[/img] [b]添加选项菜单 [/b] 第一步创建菜单文件
 <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;
}
此时效果: [img]http://files.jb51.net/file_images/article/201701/2017125101413766.png?2017025101421[/img] [b]个性设置[/b] [b]左侧返回箭头[/b] 想要显示自带的返回箭头,需要去掉之前设定的属性:
app:navigationIcon="@mipmap/title_bar_back"
然后在代码中添加:
getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
此时效果: [img]http://files.jb51.net/file_images/article/201701/2017125101534140.png?2017025101541[/img] [b]溢出图标颜色[/b] 在style文件中添加:
 <!-- 溢出菜单图标颜色-->
<item name="colorControlNormal">@android:color/white</item>
此时效果: [img]http://files.jb51.net/file_images/article/201701/2017125101856673.png?201702510193[/img] [b]自定义右侧溢出图标[/b] 在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>
此时运行效果: [img]http://files.jb51.net/file_images/article/201701/2017125101936667.png?2017025101945[/img] [b]更改弹出菜单背景[/b] 在Style文件中添加样式:

在布局文件中添加使用主题:
app:popupTheme="@style/ToolbarPopupTheme"
此时运行效果: [img]http://files.jb51.net/file_images/article/201701/2017125102059673.png?2017025102110[/img] 更改弹出菜单文字颜色 添加样式文件:
<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>
此时运行效果: [img]http://files.jb51.net/file_images/article/201701/2017125102611712.png?2017025102618[/img] [b]修改标题文字大小[/b] 添加配置:
 app:titleTextAppearance="@style/ToolbarTitleSize"
添加style:
 <!-- toolbar标题文字大小 -->
 <style name="ToolbarTitleSize" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
  <item name="android:textSize">28sp</item>
 </style>
此时运行效果: [img]http://files.jb51.net/file_images/article/201701/2017125102706062.png?2017025102713[/img] 子标题文字大小类似,添加配置然后定义style文件(此处省略):
app:subtitleTextAppearance="@style/ToolbarTitleSize"
[b]修改弹出菜单位置[/b] 修改配置使弹出菜单显示在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>
此时运行效果: [img]http://files.jb51.net/file_images/article/201701/2017125102810441.png?2017025102817[/img] [b]事件处理[/b] [b]返回按钮事件[/b] 添加监听
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    Toast.makeText(getApplicationContext(), "点击了返回箭头", Toast.LENGTH_LONG).show();
   }
  });
[b]菜单项点击事件[/b] 重写方法
 @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;
 }
[b]自定义Toolbar[/b] 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);
此时运行效果: [img]http://files.jb51.net/file_images/article/201701/2017125102954331.png?201702510302[/img] 新版本studio,在新建Activity的时候可以选择对应的模板,会自动创建好DrawerLayout并关联Toolbar. [b]总结[/b] 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部