一探ActionBar和ToolBar的区别

ActionBar

ActionBar是一个确定用户位置的窗口功能,并且能提供用户操作和导航的模块。使用ActionBar能够为用户提供一个熟悉的界面进行界面的切换,这个切换能够使系统更优雅是适应不同屏幕的配置。

ActionBar提供以下几个重要的功能:

  1. 提供一个专属的空间给你的应用,标志和显示用户在应用程序中的位置。
  2. 在可预测的方法中,让重要的操作更加突出和易操作(例如搜索)。
  3. 支持内部一致的导航和视图切换应用程序(用标签或下拉列表)

常规的ActionBar

ActionBar将空间分为4个不同的区域以适应大多数的App
这里写图片描述
1. App icon
你的app应用的身份标志,如果你愿意你可以替换成其他的logo。重要的:
如果你的app现在没有显示最顶层的界面,请确保显示插入了左边符号的app的icon,这样用户才能知道你的app应用层级结构。
2. View control
如果你的应用程序在不同的视图显示数据,这部分的操作栏允许用户切换视图。例如:view-switching控制下拉菜单或选项卡控件。
如果你的应用程序不支持不同的视图,你也可以使用这个空间来显示非交互式内容,比如应用程序标题或更长时间的品牌信息。
3. Action Buttons
显示应用程序中最重要的那部分动作行为。操作栏中放不下的Action就会自动转移到Action overflow。长按图标查看行动的名字。
4. Action overflow
不太常用的Action就会放到这里。

适应旋转和不同大小的屏幕

在UI问题中,其中最重要的一个问题就是怎样在创建app时适应旋转和不同大小的屏幕。
你可以使用split action bars去适应这些变化,使用split action bars允许你将ActionBar中的Action分到其他的bar中,如main action bar或者是屏幕的底部。
这里写图片描述

使用Split Action Bar的注意事项

当将操作栏的acton bar分到多个acton bar时,你可以有三个位置使用:

  1. Main action bar
  2. Top bar
  3. Bottom bar

    位置如下图所示:
    这里写图片描述
    如果用户可以从给定的屏幕定位到app的层次结构,main action bar 至少包含up caret(-_-! 不知道怎么翻译啊)。

    应用程序提供的允许用户在视图之间快速切换,在top bar 中使用tab或者spinner。

为了显示action,如有必要,可以在bottom bar中使用action overflow。

Action Buttons

Action Buttons是ActionBar里面操作应用程序最重要的Activity。考虑到那些button会经常使用,于是让它们排列有顺序。根据可用的屏幕空间,系统显示了你最重要的Action Buttons中的操作,其他的Action Buttons将移动到Action overflow中。ActionBar中应该只显示用户可用的Action。如果一个Action在当前环境中不可用,那就隐藏它。将其设为不可用,并不且不显示这些Action Buttons。
Gmail应用程序中的一些Action Buttons
这里写图片描述

在对于选择那些Action作为ActionBar上的Action Buttons,可以参考FIT原则。

  1. F—–Frequent
  2. I——Important
  3. T—–Typical

Toolbar

Toolbar是Android 5.0中新引入的一个控件,其出现的目的就是为了取代ActionBar。

注意,如果使用Toolbar替代ActionBar,你只能使用Theme.AppCompat中没有ActionBar的主题或者直接继承Activity,否则会造成冲突出错!

ToolBar直接使用 setSupportActionBar(toolbar);来替代ActionBar,这是使用V7兼容包的方式,如果是5.0以上可以直接使用setActionBar();

使用toolbar后改变overflow中背景的颜色:

app:popupTheme="@style/PopupMenu"
<style name="PopupMenu" parent="ThemeOverlay.AppCompat.Light" >
        <item name="android:colorBackground">#ffffff</item>
        <item name="android:textColor">#0000ff</item>
</style>

显示overflow中的图标

/**
     * 显示 OverFlow 中的图标
     */
    @Override
    protected boolean onPrepareOptionsPanel(View view, Menu menu) {
        if (menu != null) {
            if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
                try {
                    Method m = menu.getClass().getDeclaredMethod(
                            "setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                }
            }
        }
        return super.onPrepareOptionsPanel(view, menu);
    }

在toolbar中使用ActionMode

说白了,ActionMode就是临时占据了ActionBar的位置。

startSupportActionMode(new ActionMode.Callback() {
            @Override
            public boolean onCreateActionMode(ActionMode mode, Menu menu) {
                MenuItem saveItem = menu.add("add").setIcon(R.drawable.icon);
                MenuItemCompat.setShowAsAction(saveItem, MenuItemCompat.SHOW_AS_ACTION_ALWAYS);

                MenuItem searchItem = menu.add("del").setIcon(R.drawable.icon);
                MenuItemCompat.setShowAsAction(searchItem, MenuItemCompat.SHOW_AS_ACTION_ALWAYS);

                MenuItem refreshItem = menu.add("que").setIcon(R.drawable.icon);
                MenuItemCompat.setShowAsAction(refreshItem, MenuItemCompat.SHOW_AS_ACTION_ALWAYS);
                return true;
            }

            @Override
            public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
                return false;
            }

            @Override
            public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
                Toast.makeText(MainActivity.this, item.getTitle(),
                        Toast.LENGTH_SHORT).show();
                mode.finish();
                return false;
            }

            @Override
            public void onDestroyActionMode(ActionMode mode) {

            }
        });

上面的方法中,onCreateActionMode() 方法是对Mode的初始化,onActionItemClicked() 就是对于与ActionMode的Item点击事件的监听。

注意,在主题中加入
<item name="windowActionModeOverlay">true</item>
否则会同时出现actionmode和toolbar共存的情况。

参考资料:http://blog.csdn.net/zwlove5280/article/details/52771998

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要加大 actionbar 中 homeAsUp 和 title 的间距,可以通过自定义样式来实现。具体步骤如下: 1. 在 styles.xml 文件中添加一个新的样式,并继承自你当前使用的 actionbar 样式,比如: ``` <style name="CustomActionBar" parent="@style/Widget.AppCompat.ActionBar"> <!-- 在这里添加你的自定义属性 --> </style> ``` 2. 在自定义样式中添加一个新的属性 `android:actionBarTitleTextAppearance`,并指定一个自定义的文本样式,比如: ``` <style name="CustomActionBarTitle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"> <item name="android:textSize">18sp</item> <item name="android:textColor">@android:color/white</item> <!-- 在这里添加你的自定义属性 --> </style> ``` 3. 在自定义样式中添加一个新的属性 `android:homeAsUpIndicator`,并指定一个自定义的图标,比如: ``` <style name="CustomActionBarHome" parent="@style/Widget.AppCompat.ActionBar"> <item name="android:homeAsUpIndicator">@drawable/ic_back_button</item> <!-- 在这里添加你的自定义属性 --> </style> ``` 4. 在自定义样式中添加一个新的属性 `android:titleTextStyle`,并指定为之前定义的自定义文本样式,比如: ``` <style name="CustomActionBar" parent="@style/Widget.AppCompat.ActionBar"> <item name="android:actionBarTitleTextAppearance">@style/CustomActionBarTitle</item> <item name="android:homeAsUpIndicator">@drawable/ic_back_button</item> <item name="android:titleTextStyle">@style/CustomActionBarTitle</item> <!-- 在这里添加你的自定义属性 --> </style> ``` 5. 在布局文件中,将 actionbar 样式指定为你自定义的样式,比如: ``` <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" app:theme="@style/CustomActionBar" /> ``` 6. 在你的 Activity 中,通过 `getSupportActionBar()` 方法获取 actionbar 对象,并调用 `setHomeAsUpIndicator()` 方法来设置 homeAsUp 图标,比如: ``` getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_back_button); ``` 7. 最后,在自定义文本样式中添加一个新的属性 `android:paddingStart` 或 `android:paddingEnd`,来调整 homeAsUp 图标和 title 之间的间距,比如: ``` <style name="CustomActionBarTitle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"> <item name="android:textSize">18sp</item> <item name="android:textColor">@android:color/white</item> <item name="android:paddingEnd">32dp</item> </style> ``` 这样,你就可以通过自定义样式来加大 actionbar 中 homeAsUp 和 title 的间距了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值