Android自定义工具栏（一）——从ActionBar说起

事情的起因是这样的，UX说我们的产品需要一个工具栏，大概长下面这个样子：

这个貌似很简单嘛，我隐约记得有个叫ActionBar的东西，配置一下应该就可以了。于是在onCreate()里调了个initActionBar()方法：

    private void initActionBar() {
        ActionBar actionBar = getSupportActionBar();
        // set action bar title
        actionBar.setTitle("Demo");
        // don't display logo
        actionBar.setDisplayUseLogoEnabled(false);
        // set background color
        actionBar.setBackgroundDrawable(new ColorDrawable(0xFF2C477F));
        // remove the shadow line
        actionBar.setElevation(0);
        // show back navigation icon
        actionBar.setDisplayHomeAsUpEnabled(true);
        // show action bar
        actionBar.show();
    }

具体代码的解释可以参见下面这张图：

还要加个overflow菜单，重写一下onCreateOptionsMenu()跟onOptionsItemSelected()方法就可以了，另外还要在res/menu/目录下增加一个xml，把所有菜单项的showAsAction设置为never：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:android="http://schemas.android.com/apk/res/android">
    <item
            android:id="@+id/menu1"
            android:title="menu1"
            app:showAsAction="never"/>
    <item
            android:id="@+id/menu2"
            android:title="menu2"
            app:showAsAction="never"/>
</menu>

然后，UX又说，这个箭头好像不太好看，要改成一个小尖尖，另外，点击标题栏也要有响应，大概长下面这个样子：

于是又去查了一下ActionBar，发现有个叫做Custom View的东西，可以定制工具栏视图，于是又改了下initActionBar()方法，加了一些内容：

private void initActionBar() {
        ActionBar actionBar = getSupportActionBar();
        // set action bar title as empty
        actionBar.setTitle("");
        // don't display logo
        actionBar.setDisplayUseLogoEnabled(false);
        // set background color
        actionBar.setBackgroundDrawable(new ColorDrawable(0xFF2C477F));
        // remove the shadow line
        actionBar.setElevation(0);
        // set custom view
        actionBar.setDisplayShowCustomEnabled(true);
        actionBar.setCustomView(R.layout.actionbar_custom_view);
        // set click event handling logic here
        ImageView back = (ImageView) findViewById(R.id.back);
        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

        TextView hitMe = (TextView) findViewById(R.id.hit_me);
        hitMe.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "Hit me!", Toast.LENGTH_SHORT).show();
            }
        });
        // show action bar
        actionBar.show();
    }

也很简单，先要调setDisplayShowCustomEnabled(true)，然后通过setCustomView()让工具栏显示你定制的layout就可以了。actionbar_custom_view.xml内容如下，一个回退图片，一个标题文字：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <ImageView
            android:id="@+id/back"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:src="@drawable/back_arrow"
            android:layout_gravity="center_vertical"/>
    <TextView
            android:id="@+id/hit_me"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hit me"
            android:textSize="20sp"
            android:textColor="@color/colorWhite"
            android:layout_gravity="center_vertical"
            android:paddingLeft="10dp"/>
</LinearLayout>

你以为这就完了？UX又说了，右边菜单的那三个小圆点不好看，要改成小方点，另外弹出菜单显示的位置也不好，最好要在三个小点的下方，不要遮住三个小点。我看了一下，现在是长这样的：

擦，这个该怎么改？又去查了一下，原来ActionBar早就过时了，现在增加了一个Toolbar，据说更加灵活，好吧，那下一篇就试用一下Toolbar吧~~

示例代码下载