Toolbar也是在一个 Material Design 风格的导航控件 ,以此来取代之前的 Actionbar 。与 Actionbar 相比, Toolbar 明显要灵活的多,可以添加导航栏图标 、 App的logo 、 标题和子标题 、 自定义控件 、以及 ActionMenu等,效果图如下:
那么我们就来学习一下如何使用它吧。
一、按照惯例,先创建项目,然后添加v7的依赖包
compile 'com.android.support:appcompat-v7:25.1.1'
二、添加布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.wangguifa.toolbartest.HomeActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#4054B2">
<!--可以任意添加需要的控件-->
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="自定义标题"
android:textColor="#ffffff"
android:textSize="11sp" />
</android.support.v7.widget.Toolbar>
</RelativeLayout>
这样ToolBar就算创建好了,效果如下:
你会发现怪怪的,没错,那是因为没有隐藏掉actionBar,通过一下方法隐藏actionBar就可以了:
在布局代码中给activity设置theme:
android:theme="@style/Theme.AppCompat.Light.NoActionBar"
或者在java代码中给activity设置:
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_home);
他俩效果是一样的。
你以为到这就完了?其实并没有,下面开始我们学习些ToolBar的其他用法吧:
package com.wangguifa.toolbartest;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
public class HomeActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
Toolbar mToolBar = (Toolbar) findViewById(R.id.toolbar);
// 左上角按钮图标
mToolBar.setNavigationIcon(R.drawable.back);
// 设置logo图标
mToolBar.setLogo(R.mipmap.ic_launcher);
// 设置主标题,若不设置,则默认为App的名字
mToolBar.setTitle("主标题");
// 设置主标题颜色
mToolBar.setTitleTextColor(Color.WHITE);
// 设置副标题
mToolBar.setSubtitle("副标题");
// 设置副标题颜色
mToolBar.setSubtitleTextColor(Color.RED);
// 设置NavigationIcon的点击事件
mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 执行对应操作,这里使用Toast演示
Toast.makeText(HomeActivity.this, "您点击了返回键", Toast.LENGTH_SHORT).show();
}
});
// 加载Menu布局
mToolBar.inflateMenu(R.menu.toolbar_menu);
// menu点击事件
mToolBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_1:
// 执行对应操作,这里使用Toast演示
Toast.makeText(HomeActivity.this, "您点击了menu_1", Toast.LENGTH_SHORT).show();
return true;
case R.id.menu_2:
// 执行对应操作,这里使用Toast演示
Toast.makeText(HomeActivity.this, "您点击了menu_2", Toast.LENGTH_SHORT).show();
return true;
case R.id.menu_3:
// 执行对应操作,这里使用Toast演示
Toast.makeText(HomeActivity.this, "您点击了menu_3", Toast.LENGTH_SHORT).show();
return true;
default:
return false;
}
}
});
}
}
对应的Menu文件:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".HomeActivity">
<item
android:id="@+id/menu_1"
android:icon="@drawable/ic_menu_camera"
android:title="menu_1"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_2"
android:icon="@drawable/ic_menu_gallery"
android:title="menu_2"
app:showAsAction="never" />
<item
android:id="@+id/menu_3"
android:icon="@drawable/ic_menu_slideshow"
android:title="menu_3"
app:showAsAction="never" />
</menu>
你也许会问app:showAsAction=”ifRoom”这个是什么意思?其实这是跟android:showAsAction属性差不多,showAsAction属性共有五个值:ifRoom、never、always、withText、collapseActionView,可以混合使用。
ifRoom ToolBar如果有位置就显示在ToolBar上,没有则隐藏。
never 永远不会显示在ToolBar上,会存在更多item里面(点击竖向三个点后显示)。
always 无论ToolBar空间是否够,都显示。
withText 该值示意ToolBar要显示文本标题。
collapseActionView 声明了这个操作视窗应该被折叠到一个按钮中,当用户选择这个按钮时,这个操作视窗展开。否则,这个操作视窗在默认的情况下是可见的,并且即便在用于不适用的时候,也要占据操作栏的有效空间。一般要配合ifRoom一起使用才会有效果。
切记这里使用app:showAsAction=”“而不是android:showAsAction。
最后还可以在ToolBar中添加各种需要的控件,如ImageView、TextView、Button等。
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#4054B2">
<!--可以任意添加需要的控件-->
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="自定义标题"
android:textColor="#ffffff"
android:textSize="11sp" />
</android.support.v7.widget.Toolbar>
以上就是ToolBar的简单使用,若有什么不准备或者错误的地方请及时联系我更正。