事情的起因是这样的,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吧~~