android:ToolBar详解
来源 http://blog.mosil.biz/2014/10/android-toolbar/
这篇文章因为是台湾人写的,语言风格很别致。本文在原文的基础上做了一些微调(主要是繁体字的问题)。
今年(2014) 的 google i/o 发表令多数人为之一亮的 material design,而 google 也从「google i/o 2014」 开始,大家也陆陆续续地看到其更新的 android app 皆套用了这个设计介面。当然,这个设计介面著实让大家感到惊艳外,更让 android 开发者开始担心未来 app 的界面处理了。
不过,所幸有着之前 actionbar 的经验后,android 也很快地在 support library 里面提供了相对应的 api 给开发者使用,本篇就为各位介绍 – toolbar,这是用来取代过去 actionbar 的控件,而现在于 material design 中也对之有一个统一名称:app bar,在未来的 android app 中,就以 toolbar 这个元件来实作之。
1. 概述
Android 3.0 Android 推了 ActionBar 这个控件,而到了2013 年 Google 开始大力地推动所谓的 android style,想要逐渐改善过去 android 纷乱的界面设计,希望让终端使用者尽可能在 android 手机有个一致的操作体验。ActionBar 过去最多人使用的两大套件就是 ActionBarSherlock 以及官方提供在 support library v 7 里的 AppCompat。
既然会有本篇跟各位介绍的 Toolbar,也意味着官方在某些程度上认为 ActionBar 限制了 android app 的开发与设计的弹性,而在 material design 也对之做了名称的定义:App bar。接下来将为各位分成几个阶段进行说明,如何在 android app 中用 toolbar 这个控件来做出一个基本的 app bar 喽。
本篇所使用到的程序请到 Github 取得。
2. 基础套用
这个阶段从 toolbar_demo_checkpoint0 开始,分成下列三个部份:
风格 (style)
界面 (layout)
程序 (java)
2.1 风格(style)
风格要调整的地方有二
一在 res/values/styles.xml中
二在 /res/values-v21/styles.xml中
为了之后设定方便,我们先在 res/values/styles.xml 里增加一个名为 AppTheme.Base 的风格
1 2 3 4 </td> | <style name= "AppTheme.Base" parent= "Theme.AppCompat" > <item name= "windowActionBar" > false </item> <item name= "android:windowNoTitle" > true </item> </style> | </tr> </tbody> </table> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 </td> | <resources> <!-- Base application theme. --> <style name= "AppTheme" parent= "AppTheme.Base" > </style> <style name= "AppTheme.Base" parent= "Theme.AppCompat" > <item name= "windowActionBar" > false </item> <item name= "android:windowNoTitle" > true </item> </style> </resources> | </tr> </tbody> </table> </div> </div>
1 2 3 4 5 </td> | <?xml version= "1.0" encoding= "utf-8" ?> <resources> <style name= "AppTheme" parent= "AppTheme.Base" > </style> </resources> | </tr> </tbody> </table> </div> </div>
1 </td> | <br> | </tr> </tbody> </table> </div> </div>
1 2 3 4 5 6 7 </td> | <android.support.v7.widget.Toolbar android:id= "@+id/toolbar" android:layout_height= "wrap_content" android:layout_width= "match_parent" android:minHeight= "?attr/actionBarSize" > </android.support.v7.widget.Toolbar> | </tr> </tbody> </table> </div> </div>
1 2 </td> | Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); | </tr> </tbody> </table> </div> </div>
1 2 3 4 5 6 7 8 9 10 </td> | <style name= "AppTheme.Base" parent= "Theme.AppCompat" > <item name= "windowActionBar" > false </item> <item name= "android:windowNoTitle" > true </item> <!-- Actionbar color --> <item name= "colorPrimary" >@color/accent_material_dark</item> <!--Status bar color--> <item name= "colorPrimaryDark" >@color/accent_material_light</item> <!--Window color--> <item name= "android:windowBackground" >@color/dim_foreground_material_dark</item> </style> | </tr> </tbody> </table> </div> </div>
1 2 3 4 </td> | <style name= "AppTheme" parent= "AppTheme.Base" > <!--Navigation bar color--> <item name= "android:navigationBarColor" >@color/accent_material_light</item> </style> | </tr> </tbody> </table> </div> </div>
1 2 3 4 5 6 7 8 </td> | <android.support.v7.widget.Toolbar android:id= "@+id/toolbar" android:layout_height= "wrap_content" android:layout_width= "match_parent" android:background= "?attr/colorPrimary" android:minHeight= "?attr/actionBarSize" > </android.support.v7.widget.Toolbar> | </tr> </tbody> </table> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> | Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); // App Logo toolbar.setLogo(R.drawable.ic_launcher); // Title toolbar.setTitle( "My Title" ); // Sub Title toolbar.setSubtitle( "Sub title" ); setSupportActionBar(toolbar); // Navigation Icon 要設定在 setSupoortActionBar 才有作用 // 否則會出現 back button toolbar.setNavigationIcon(R.drawable.ab_android); | </tr> </tbody> </table> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </td> | <menu xmlns:android= "http://schemas.android.com/apk/res/android" tools:context= ".MainActivity" > <item android:id= "@+id/action_edit" android:title= "@string/action_edit" android:orderInCategory= "80" android:icon= "@drawable/ab_edit" app:showAsAction= "ifRoom" /> <item android:id= "@+id/action_share" android:title= "@string/action_edit" android:orderInCategory= "90" android:icon= "@drawable/ab_share" app:showAsAction= "ifRoom" /> <item android:id= "@+id/action_settings" android:title= "@string/action_settings" android:orderInCategory= "100" app:showAsAction= "never" /> </menu> | </tr> </tbody> </table> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </td> | private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem menuItem) { String msg = "" ; switch (menuItem.getItemId()) { case R.id.action_edit: msg += "Click edit" ; break ; case R.id.action_share: msg += "Click share" ; break ; case R.id.action_settings: msg += "Click setting" ; break ; } if (!msg.equals( "" )) { Toast.makeText(MainActivity. this , msg, Toast.LENGTH_SHORT).show(); } return true ; } }; | </tr> </tbody> </table> </div> </div>
1 2 3 4 5 6 </td> | setSupportActionBar(toolbar); ... // Menu item click 的監聽事件一樣要設定在 setSupportActionBar 才有作用 toolbar.setOnMenuItemClickListener(onMenuItemClick); | </tr> </tbody> </table> </div> </div>