在 actionbarsherlock 上如何对 item 使用自定义的 view

说明：

在通常的 action bar 上只能放置一个图片，但是对于其他一些场合我们需要放置一个自定义的 view，这篇文章就是要探讨如何解决这个问题。

如下图所示，我们在刷新的按钮上面加入和一个标识未读消息个数的提示，所以整个刷新这个 action bar item 就不是一个图片，而是一个 view，那么如何做到的呢？步骤如下：

1.  在 res/menu/ 目录下创建对应的的 menu xml，这里暂且叫 123.xml 吧！内容如下

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_edit"
        android:icon="@drawable/ic_titlebar_edit"
        android:title="@string/menu_editRoster"
        android:showAsAction="always" />

    <item
        android:id="@+id/menu_pubsub_position"
        android:icon="@drawable/ic_titlebar_my_position"
        android:title="@string/title_activity_get_position"
        android:showAsAction="always" />

    <item
        android:id="@id/menu_refresh"
        android:title="@string/menu_refreshRoster"
        android:actionLayout="@layout/menu_refresh"
        android:showAsAction="always" />

</menu>

这里需要重点关注的是 " android:actionLayout="@layout/menu_refresh" 这句话，这里指定了对应的 menu item 所使用的 layout 文件，下面给出 menu_refresh.xml 的 layout 布局文件

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    style="@android:style/Widget.ActionButton">

    <ImageView android:id="@+id/refresh"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="left"
        android:src="@drawable/ic_titlebar_refresh" />

    <TextView android:id="@+id/refresh_indicator"
        android:layout_width="16dip"
        android:layout_height="16dip"
        android:layout_marginTop="4dip"
        android:layout_marginLeft="22dip"
        android:layout_gravity="top|right"
        android:gravity="center"
        android:textColor="#ffffffff"
        android:background="@drawable/ball_notifiction"
        android:visibility="gone"
        android:singleLine="true"/>
</FrameLayout>

此处的 TextView 就是那个用来显示数字的提醒，默认是不显示的，这里需要注意的是 “ style="@android:style/Widget.ActionButton" 此处要使用该风格，否则在 actionbar 上显示的时候就会系统默认的不一致，会感觉比较奇怪，实际测试的时候发现是每个 item 之间靠得更紧密了

2. 代码中的使用

这块对于代码来说使用起来比较简单，主要是要获取这个 TextView 对象，这样可以在合适的时机对其进行 gone/visible 的操作

private TextView mRefreshIndicator;

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    if (DEBUG) Log.v(TAG, "onCreateOptionsMenu()");

    // 此处我的 actionbar 用的是 sherlock actionbar 所以如果是原生 android 应该使用 getMenuInflater() 即可
    getSupportMenuInflater().inflate(R.menu.123, menu);  

    View refreshView = menu.findItem(R.id.menu_refresh).getActionView();
    refreshView.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            refresh();
        }
    });

    mRefreshIndicator = (TextView)(refreshView.findViewById(R.id.refresh_indicator));

    return super.onCreateOptionsMenu(menu);
}

此次要单独对这个 view 安装个 click listener 的原因是，点击这个按钮不会进入通常情况下的 onOptionsItemSelected() 这个函数（原因没有仔细研究）。

好了，如此简单的代码就可以将 action bar 上的 item 从简单的 icon，变为一个 custom 的 view，接下来可以考虑如何再加入动画的效果。