本文参照Google官方的教程，进行了二次整理和实际使用中的经验总结。
Android develop之AppBar
前言
没什么前言了，能进来看ToolBar，相信你也知道为什么要使用ToolBar了。接下来请坐稳，让我们一起去Android developer上学习一下ToolBar。
先放一张Toolbar的示意图
Toolbar
一、ToolBar的基本入门使用
- 让你的工程依赖支持v7 appcompat。这个不废话。
- 让你要显示的Activity继承AppCompatActivity。
- 在清单Manifest中设置Application的主题为NoActionBar。
<application
android:theme="@style/Theme.AppCompat.Light.NoActionBar"
/>
如果你使用的是自定义主题，那么需要在你自定义的style里面加上下面的代码，让ActionBar隐藏。
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
- 在activiy的xml布局文件中加上ToolBar。
<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
需要注意下面几点
- 一般Toolbar都是放到布局的最上面。
- Material Design 规范)建议应用栏具有 4 dp 的仰角，所以要android:elevation="4dp"
- android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
的作用是让ToolBar浮于其他Activity布局之上。
- 在Activity中初始化ToolBar。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(myToolbar);
}
这里其实是分为两步的：
- 初始化ToolBar对象；
- setSupportActionBar将ToolBar对象传递给Activity。该方法会将工具栏设置为 Activity 的应用栏。
- 至此，一个最基本的ToolBar就完成了，这个ToolBar会包含应用的名称和一个溢出菜单。
二、在ToolBar上添加menu
简单地说，就是把当前Activity上比较重要的功能放到ToolBar上，这样方便用户操作。比如我们在看到一篇很好的博客的时候，ToolBar上就可以放上一个分享和收藏的标签。
这里我们采用menu的方式来实现此功能。
- 在res/menu/下创建一个menu资源文件
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/action_favorite"
android:icon="@drawable/ic_favorite_black_48dp"
android:title="@string/action_favorite"
app:showAsAction="ifRoom"/>
<item android:id="@+id/action_settings"
android:title="@string/action_settings"
app:showAsAction="never"/>
</menu>
每个menu的item设置icon、id、title。最重要的一个就是app:showAsAction，这个有下面个选项：
- never：永远不显示的ToolBar上，只放在溢出菜单中（也就是三个竖点）。只有点击溢出菜单才会弹出。
- always：无论是否溢出，总会显示。
- ifRoom：如果还有地儿的话，那就显示上。没地儿的话就放到溢出菜单中。
- 将上一步的menu加载到ToolBar上。
准确的说是将menu加载到Activity中，因为ToolBar取代了Activity的ActionBar，所以menu会被加载到ToolBar上。
在Activity的onCreateOptionsMenu中加载menu
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_item, menu);
return true;
}
- 添加对Menu的响应。
当我们点击了响应的menu，对应的处理方法依然和普通的menu一样是放在Activity的onOptionsItemSelected中。
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_settings:
// User chose the "Settings" item, show the app settings UI...
return true;
case R.id.action_favorite:
// User chose the "Favorite" action, mark the current item
// as a favorite...
return true;
default:
// If we got here, the user's action was not recognized.
// Invoke the superclass to handle it.
return super.onOptionsItemSelected(item);
}
}
- 修改menu的字体颜色
一般默认主题的menu字体颜色是黑色，但是大多数我们希望的是白色。可以通过在style中加入一行设置来实现：
<item name="actionMenuTextColor">#ffffff</item>`
三、添加返回图标
添加返回图标有两种方式：
方法一：官方方法
- 在AndroidManifest中在ParentActivity和ChildActivity中加上配置：
<application ... >
...
<!-- The main/home activity (it has no parent activity) -->
<activity
android:name="com.example.myfirstapp.MainActivity" ...>
...
</activity>
<!-- A child of the main activity -->
<activity
android:name="com.example.myfirstapp.MyChildActivity"
android:label="@string/title_activity_child"
android:parentActivityName="com.example.myfirstapp.MainActivity" >
<!-- Parent activity meta-data to support 4.0 and lower -->
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value="com.example.myfirstapp.MainActivity" />
</activity>
</application>
- 在Java代码中调用actionbar的setDisplayHomeAsUpEnabled()方法。这个方法是让返回按钮能显示出来
// my_child_toolbar is defined in the layout file
Toolbar myChildToolbar = (Toolbar) findViewById(R.id.my_child_toolbar);
setSupportActionBar(myChildToolbar);
// Get a support ActionBar corresponding to this toolbar
ActionBar ab = getSupportActionBar();
// Enable the Up button
ab.setDisplayHomeAsUpEnabled(true);
这是官方API上的教程。
方法二：使用menu
这个方法无需在AndroidManifest中进行配置
- 初始完成Toolbar之后，加上下面这两行：
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
这两行必须同时打开才可以。第一行是显示返回按钮，第二行是使action bar角落上的home button有效。
- 重写onOptionsItemSelected方法，监听android.R.id.home：
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
Toast.makeText(this, "哈哈哈", Toast.LENGTH_SHORT).show();
finish();
}
return super.onOptionsItemSelected(item);
}
方法三：自己设置导航图标
ToolBar是可以自己设置导航icon的，我们完全可以把导航icon设置为返回按钮，然后开始监听返回按钮的点击事件。
看下面的代码。
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
四、Toolbar中加入自定义view
Toolbar为我们提供了title、subtitle、navigationIcon、还有各种menu等组件。但这些似乎并不能满足我们的设计师，似乎要在Toolbar中加入各种绚丽的功能，让我们的Toolbar变得功能更加丰富。这也难不倒我们。因为Toolbar继承了ViewGroup，所以只要你需要，你可以添加各种View到Toolbar中。使用方法也非常简单。只要在xml布局的Toolbar标签中直接添加View就可以，然后在Java代码中像普通组件一样直接使用就可以了。
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hahaha"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
/>
</android.support.v7.widget.Toolbar>
网友评论