Meizu SmartBar 开发指南

Size: px

Start display at page:

Download "Meizu SmartBar 开发指南"

壹堰卞
7 years ago
Views:

1 Meizu Smart Bar 开发指南目录前言采用 Android 4.0 规范开发 Smart Bar Smart Bar 与 Tab 结合使用 Action Item 方式使用 ActionBar Tab 的方式使用 ActionBar Tab 与 TabHost 结合的方式隐藏顶栏的效果隐藏 ActionBar Top 隐藏 ActionMode Top ActionBar 顶栏使用 Tab 判断设备是否有动态 SmartBar FAQ 如何把 Action Item 显示在底栏? 为什么菜单项没有在 ActionBar 上显示? 如何定制 overflow menu 的图标? 如何在 Android 2.3 版本使用 ActionBar 特性?

2 前言 ActionBar 使用说明请参考官方文档 Action Bar, 具体示例请看 Android SDK 中的 Samples, 如 sdk/samples/android-15/actionbarcompat, 或者 sdk/samples/android-15/apidemos 中的 App > Action Bar 另外, 如需更改 Smart Bar 样式, 请按照官方文档 Action Bar 提供的方法修改 Smart Bar 开发请下载 Smart Bar Demo 进行参考注意 : 对于文中提到的采用反射方法获取的 Meizu 提供的接口或者 API, Meizu 保留随时修改或删除并且不通知开发者的权利但是 Meizu 在修改该接口功能的时候, 会保证功能的完整性 ;Meizu 在删除该接口的时候, 保证不调用该接口也能使软件具有完备的功能通过这种方式, 第三方开发者可以方便的做到不为 Meizu 版本维护专门的版本分支, 因为这些接口在其他 Android 手机上并不存在 1. 采用 Android 4.0 规范开发 Smart Bar 该示例类似 Google Map, 按照 Android 4.0 规范开发, 使用 ActionBar 的 List Navigation Mode 切换界面, 底栏使用 Action Item 进行一般的操作示例代码请看 SmartBarDemo 的 ActionBarList.java; 设置 ActionBar List Navigation Mode 关键代码如下 : public class ActionBarList extends Activity implements OnNavigationListener protected void oncreate(bundle savedinstancestate) { // TODO Auto-generated method stub super.oncreate(savedinstancestate); final ActionBar bar = getactionbar(); bar.setdisplayoptions(actionbar.display_show_home, ActionBar.DISPLAY_SHOW_HOME ActionBar.DISPLAY_SHOW_TITLE);

3 // 设置 List Navigation Mode bar.setnavigationmode(actionbar.navigation_mode_list); MyAdapter adapter = new MyAdapter(this this, android.r.layout.simple_list_item_1, android.r.id.text1, new String[] {"Recent", "Contacts", "Dialer", "Settings"); // 设置下拉列表项的布局 adapter.setdropdownviewresource(r.layout.spinner_dropdown_item); // 设置 list adapter 以及 navigation callback bar.setlistnavigationcallbacks(adapter, public boolean onnavigationitemselected(int int itemposition, long itemid) { // 切换界面 FragmentTransaction ft = getfragmentmanager().begintransaction(); switch (itemposition) { case LIST_INDEX_RECENT: getactionbar().seticon(r.drawable.ic_tab_recent); ft.replace(android.r.id.content, mrecentfragment); break;... ft.commit(); return true;...

4 以下是 Galaxy Nexus 与 MX2 对比图 ( 左 Galaxy Nexus, 右 MX2): Settings 界面没有菜单项, 对比图如下 ( 左 Galaxy Nexus, 右 MX2):

5 2. Smart Bar 与 Tab 结合 2.1. 使用 Action Item 方式使用 Action Item 方式, 不需要调用 Meizu 的 API 优点 : 在原生系统与 MX2 都使 Tab 图标保持在屏幕下方缺点 : 为了显示选中状态和自定义状态需要应用不断调用 MenuItem.setIcon, 并且 invalidateoptionsmenu() 刷新另外第三方的定制需求不容易满足, 并且在无虚拟按键的手机上会显示全部 menu 示例代码请看 SmartBarDemo 的 ActionItemTab.java 以下是 Galaxy Nexus 与 MX2 对比图 ( 左 Galaxy Nexus, 右 MX2):

6 弹出 MENU 菜单的对比图 : 2.2. 使用 ActionBar Tab 的方式使用 ActionBar Tab 的方式, 需要调用 Meizu 的 API, 使 Tab 适配 Smart Bar 显示在屏幕下方优点 : 很好地适配 Smart Bar, 选中状态等 state 都可在 drawable 的 xml 中配置, 并且 Tab 图标定制需求可以使用 ActionBar Tab 的 setcustomview 满足缺点 : 需要通过反射调用 Meizu 的 ActionBar.setTabsShowAtBottom(boolean) 方法把 Tab 显示在屏幕下方, 在原生系统 Tab 会显示顶部示例代码请看 SmartBarDemo 的 ActionBarTab.java 以下是调用 ActionBar.setTabsShowAtBottom(boolean) 的关键代码 : public static void setactionbartabsshowatbottom(actionbar actionbar, boolean showatbottom) { try { Method method = Class.forName("android.app.ActionBar").getMethod(

7 "settabsshowatbottom", new Class[] { boolean.class ); try { method.invoke(actionbar, showatbottom); catch (IllegalArgumentException e) { catch (IllegalAccessException e) { catch (InvocationTargetException e) { catch (SecurityException e) { catch (NoSuchMethodException e) { catch (ClassNotFoundException e) { 以下是 Galaxy Nexus 与 MX2 对比图 ( 左 Galaxy Nexus, 右 MX2):

8 弹出 MENU 菜单的对比图 : 2.3. 使用 ActionBar Tab 与 TabHost 结合的方式使用 ActionBar Tab 与 TabHost 结合的方式,MX2 调用 Meizu 的 API 适配 Smart Bar, 非魅族系统则换用 TabHost, 把 TabWidget 显示出来优点 : 在 MX2 很好地适配 Smart Bar, 在其它系统 Tab 图标也显示在屏幕下方缺点 : 需要通过代码切换使用 TabHost 或 ActionBar Tab,Flyme 系统则选用 ActionBar 方式, 非 Flyme 则使用 TabHost 方式示例代码请看 SmartBarDemo 的 ActionBarTabAndTabHost.java 注意 : 为了使 TabWidget 显示在屏幕最下方, 在使用 TabHost 方式的时候, 调用 Window.setUiOptions(0) 使用不拆分的 ActionBar, 即 MENU 显示在屏幕上方

9 以下是 Galaxy Nexus 与 MX2 对比图 ( 左 Galaxy Nexus, 右 MX2): 弹出 MENU 菜单的对比图 :

10 3. 隐藏顶栏的效果 3.1. 隐藏 ActionBar Top 隐藏 ActionBar Top, 需要通过反射调用 Meizu 的 API, 即 ActionBar.setActionBarViewCollapsable(boolean), 并且需要调用 ActionBar.setDisplayOptions(0) 设置 ActionBar 顶栏无显示内容码 : 示例代码请看 SmartBarDemo 的 ActionBarTop.java 以下是调用 ActionBar.setActionBarViewCollapsable(boolean) 的关键代 public static void setactionbarviewcollapsable(actionbar actionbar, boolean collapsable) { try { Method method = Class.forName("android.app.ActionBar").getMethod( "setactionbarviewcollapsable", new Class[] { boolean.class ); try { method.invoke(actionbar, collapsable); catch (IllegalArgumentException e) { catch (IllegalAccessException e) { catch (InvocationTargetException e) { catch (SecurityException e) { catch (NoSuchMethodException e) { catch (ClassNotFoundException e) {

11 以下是 Galaxy Nexus 与 MX2 对比图, 原生系统调用 ActionBar.setDisplayOptions(0) 后, 顶栏无显示内容, 但顶栏背景仍在, 如图红框标志 ( 左 Galaxy Nexus, 右 MX2): 3.2. 隐藏 ActionMode Top 隐藏 ActionMode 的顶栏, 需要通过反射调用 Meizu 的 API, 即 ActionBar.setActionModeHeaderHidden(boolean) 码 : 示例代码请看 SmartBarDemo 的 ActionModeTop.java 以下是调用 ActionBar.setActionModeHeaderHidden(boolean) 的关键代 public static void setactionmodeheaderhidden(actionbar actionbar, boolean hidden) { try { Method method = Class.forName("android.app.ActionBar").getMethod( "setactionmodeheaderhidden", new Class[] { boolean.class ); try { method.invoke(actionbar, hidden);

12 catch (IllegalArgumentException e) { catch (IllegalAccessException e) { catch (InvocationTargetException e) { catch (SecurityException e) { catch (NoSuchMethodException e) { catch (ClassNotFoundException e) { 以下是 Galaxy Nexus 与 MX2 对比图原生系统的 ActionMode 顶栏无法隐藏, 所以转为 ActionMode 时顶栏有变化 MX2 可隐藏 ActionMode 顶栏, 故转为 ActionMode 时顶栏没有变化, 如图红框标志 ( 左 Galaxy Nexus, 右 MX2):

13 4. ActionBar 顶栏使用 Tab 该示例类似 Meizu 的应用中心, 调用 ActionBar.setCustomView 自定义仿 Tab 的 View, 与 ViewPager 结合使用, 实现界面切换 ; 底栏 Tab 则使用 Action Item 实现示例代码请看 SmartBarDemo 的 CustomTabOnTopActivity.java 设置 ActionBar CustomView 关键代码如下 public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate);... // 自定义 Tab View, 并添加到 ActionBar 上 ( 未设置 DisplayOptions, 不会显示 ) mcustomview = LayoutInflater.from(this this).inflate(r.layout.custom_tab_view, null); getparent().getactionbar().setcustomview( protected void onresume() { super.onresume(); ActionBar bar = getparent().getactionbar(); mactionbaroptions = bar.getdisplayoptions(); // 设置 DisplayOptions, 显示 ActionBar 自定义的 View bar.setdisplayoptions(actionbar.display_show_custom, ActionBar.DISPLAY_SHOW_CUSTOM mactionbaroptions);... 使用 ViewPager 的关键代码如下 public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate);...

14 mviewpager.setadapter(new ViewPagerAdapter(getSupportFragmentManager())); mviewpager.setonpagechangelistener(this this); // 设置页面分隔线 mviewpager.setpagemargin(8); mviewpager.setpagemargindrawable(android.r.drawable.divider_horizontal_bright);... private class ViewPagerAdapter extends FragmentPagerAdapter { public ViewPagerAdapter(FragmentManager fm) { public Fragment getitem(int position) { return public int getcount() { return 3;

15 以下是 Galaxy Nexus 与 MX2 对比图 ( 左 Galaxy Nexus, 右 MX2): 5. 判断设备是否有动态 SmartBar 新型号的设备都能通过反射调用 Build.hasSmartBar() API 来判断是否有动态 SmartBar, 但对于较旧版本的设备或固件, 则仍然通过 Build.DEVICE 来判断示例代码请看 SmartBarDemo 的 ActionMenuItem.java 关键代码如下: private boolean hassmartbar() { try { // 新型号可用反射调用 Build.hasSmartBar() Method method = Class.forName("android.os.Build").getMethod("hasSmartBar"); return ((Boolean) method.invoke(null null)).booleanvalue(); catch (Exception e) { // 反射不到 Build.hasSmartBar(), 则用 Build.DEVICE 判断 if (Build.DEVICE.equals("mx2" )) { return true; else if (Build.DEVICE.equals("mx" ) Build.DEVICE.equals("m9")) {

16 return false; return false; 6. FAQ 6.1. 如何把 Action Item 显示在底栏? 答 : 把 Action Item 显示在底栏, 则要使用拆分的 ActionBar, 只需在 AndroidManifest 的 <activity> 或者 <application> 加上 uioptions="splitactionbarwhennarrow", 例如 : <activity android:name=".actionbarsplit" android:label="@string/action_bar_split" android:uioptions="splitactionbarwhennarrow" > </activity> 如下图红框标志, 设置前 Action Item 显示在顶栏 ( 左图 ), 设置后 Action Item 显示在底栏 ( 右图 ):

17 6.2. 为什么菜单项没有在 ActionBar 上显示? 答 : 设置 showasaction 属性值, 可使菜单项显示在 Action Bar 上 showasaction 属性控制菜单项的显示和行为, 可接受的值有 : 1 never: 使菜单项永远都不出现在 Action Bar 上 2 ifroom: 如果有足够的空间, 使菜单项显示在 Action Bar 上 3 always: 使菜单项一直显示在 Action Bar 上 4 withtext: 使菜单项的图标和文本一起显示 5 collapseactionview: 把可展开的组件折叠在菜单项上, 点击时才屏开在 XML 中, 使用 android:showasaction 添加属性值, 例如 : <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android=" <item android:id="@+id/menu_save" android:icon="@drawable/ic_menu_save" android:title="@string/menu_save" android:showasaction="ifroom withtext" /> </menu> 在代码中, 直接在 oncreateoptionsmenu() 实现, 调用 MenuItem 对象的 setshowasaction() 方法传入参数值, 例如 public boolean oncreateoptionsmenu(menu menu) { MenuItem actionitem = menu.add("save"); actionitem.setshowasaction(menuitem.show_as_action_if_room SHOW_AS_ACTION_IF_ROOM); actionitem.seticon(android.r.drawable.ic_menu_save); return true;

18 如下图红框标志, 设置前菜单项显示在 overflow 列表中 ( 左图 ), 设置后菜单项显示在 Action Bar 上 ( 右图 ): 6.3. 如何定制 overflow menu 的图标? 答 : 首先自定义 Theme, 然后重新定义属性 android:actionoverflowbuttonstyle 的值, 示例代码如下 : <?xml version="1.0" encoding="utf-8"?> <resources xmlns:android=" <style name="customtheme" parent="@android:style/theme.devicedefault.light"> <item name="android:actionoverflowbuttonstyle">@style/customactionbuttonoverflow</ item> </style> <style name="customactionbuttonoverflow" parent="@android:style/widget.devicedefault.light.actionbutton.overflow"> <item name="android:src">@android:drawable/ic_menu_info_details</item> </style> </resources>

19 如下图红框标志, 左图是 overflow menu 图标定制前, 右图是图标定制后 : 6.4. 如何在 Android 2.3 版本使用 ActionBar 特性? 答 :ActionBar 是 Android 3.0 版本新增加的窗口特性, 因此要在 Android 2.3 版本使用 ActionBar 需要用到 ActionBarSherLock 的库, 详细说明及 Demos 可到其官网下载 ActionBarSherLock 可在 Android 3.0 以下低版本实现 ActionBar 特性, 同时兼容 Android 3.0 及更高版本

res/layout 目录下的 main.xml 源码 : <?xml version="1.0" encoding="utf 8"?> <TabHost android:layout_height="fill_parent" xml

res/layout 目录下的 main.xml 源码 : <?xml version=1.0 encoding=utf 8?> <TabHost android:layout_height=fill_parent xml 拓展训练 1- 界面布局 1. 界面布局的重要性做应用程序, 界面是最基本的 Andorid 的界面, 需要写在 res/layout 的 xml 里面, 一般情况下一个 xml 对应一个界面 Android 界面布局有点像写 html( 连注释代码的方式都一样 ), 要先给 Android 定框架, 然后再在框架里面放控件,Android 提供了几种框架,AbsoluteLayout,LinearLayout,