神刀安全网

Toolbar的一次邂逅

toolbar 初次见面

Toolbar的一次邂逅
toolbar

Toolbar 作为MD(Material Design)的导航栏,Google也是极力推荐使用,对比一下前任Actionbar 简直就是无耻到= = 它可以到处飞。(随意放在任意一个位置)。

Toolbar功能:

  • 设置导航按钮
  • 设置logo
  • 设置标题和子标题
  • 增加自定义视图
  • 增加一个action meun
    Toolbar的一次邂逅
    来自外星介绍

toolbar天坑之路
一个无知的小白走上MD的路,简直就是一款心酸的血泪史。一个toolbar让我更加的勇敢含泪前进。

开始食用:

在gradle 加入(AS创建项目就自带了,得意)

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

最终结果:(暂时大家只关注toolbar不要跑题了)

Toolbar的一次邂逅

准备食材:
需要一个toolbar布局文件(xml)

Toolbar的一次邂逅

xml code如下:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical" android:layout_width="match_parent"     android:layout_height="match_parent">     <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:minWidth="?attr/actionBarSize"        android:background="?attr/colorPrimary"    > </android.support.v7.widget.Toolbar>  </LinearLayout>

MainActivity code 如下:

public class MainActivity extends AppCompatActivity {      private Toolbar toolbar;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.toolbar);          toolbar = (Toolbar)findViewById(R.id.toolbar);         toolbar.setTitle("OkLife");//设置toolbar 标题       } }

准备开餐:
满怀心情,准备好了食材,卧槽!!居然现任见到前任!ActionBar!!!

Toolbar的一次邂逅
第一次失败

失败记录:
原来在AS创建项目的时候,有一个自带的style
Theme.AppCompat.Light.DarkActionBar
原来google还是没有忘记前任!!
把更换成Theme.AppCompat.Light.NoActionBar
ActionBar就和我们说再见了!

Toolbar的一次邂逅

再次运行!!
成功了!!有没有!! 好激动!! 问题是字体怎么是黑色的!好丑!!

Toolbar的一次邂逅

toolbar 的改造
黑色的字和深色的背景超级不配,天真在toolbar.xml 里面增加Color,认为就可以天真改变字体颜色,谁知道发现!!是不可能!在百般无奈!找了google!
一篇干货!!
https://www.murrayc.com/permalink/2014/10/28/android-changing-the-toolbars-text-color-and-overflow-icon-color/
原来在toolbar 可以直接指定一个主题给它!!!

android:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar”

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:orientation="vertical"     android:layout_width="match_parent"     android:layout_height="match_parent">     <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:minWidth="?attr/actionBarSize"        android:background="?attr/colorPrimary"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"    >      </android.support.v7.widget.Toolbar>  </LinearLayout>

再来一次!!!运行!

Toolbar的一次邂逅

应该有掌声!!!

继续对Toolbar动手
增加app_bar_menu.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"     >      <item         android:id="@+id/navigation_no"         android:icon="@drawable/ic_notifications_24dp"         android:title=""         app:showAsAction="ifRoom"     />     <item         android:id="@+id/sync"         android:icon="@drawable/ic_sync_24dp"         android:title=""         app:showAsAction="ifRoom"         />     <item         android:id="@+id/action_bar_title"         android:orderInCategory="100"         android:title="设置"         app:showAsAction="never"         />     </menu>

对于meun showAsAction的属性同时也是可以参考google官方
https://developer.android.com/guide/topics/resources/menu-resource.html
应该是这样子的:

  • always:使菜单项一直显示在ToolBar上。   
  • ifRoom:如果有足够的空间,这个值会使菜单项显示在ToolBar上。   
  • never:使菜单项永远都不出现在ToolBar上,在…的子项中显示。   
  • withText:使菜单项和它的图标,菜单文本一起显示。

对于drawable里面vector
可以参考google 的使用MD设计指南
https://developer.android.com/training/material/get-started.html
参考google android studio 增加 vector的教程及介绍
https://developer.android.com/studio/write/vector-asset-studio.html#about

Toolbar的一次邂逅
示意图

在MainActivity 增加对meun的引用

toolbar.inflateMenu(R.menu.app_bar_menu);

好了~~~可以继续启动!!!start!!

Toolbar的一次邂逅

最后的润色:

public class MainActivity extends AppCompatActivity {      private Toolbar toolbar;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.toolbar);          toolbar = (Toolbar)findViewById(R.id.toolbar);         toolbar.setTitle("OkLife");//设置toolbar 标题           toolbar.inflateMenu(R.menu.app_bar_menu);//设置菜单          //菜单点击监听器         toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {             @Override             public boolean onMenuItemClick(MenuItem item) {                  if(item.getItemId()==R.id.action_bar_title){                     Toast.makeText(getApplication(),"this is title ",Toast.LENGTH_SHORT).show();                   }                  return false;             }         });        } }

总结:
使用toolbar之前,要禁用actionbar,可以单独对toolbar增加主题,toolbar还可以增加菜单。

源码:
开源是一种美德,分享一份快乐,希望androider少走弯路,多点时间泡妞!
https://github.com/punszeto/android_study

关于:
没有什么版权,开心就好,欢迎和我一起讨论!
地球派来的逗比
QQ:623580072

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Toolbar的一次邂逅

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址