ToolBar
从Android3.0(API level 11)开始，所有使用默认主题的activity都自带一个ActionBar，但是随着Android版本的迭代，ActionBar的特性不断增加，从而导致了在不同Android系统的设备上，ActionBar的显示不一致。
从Android5.0(API level 21)开始，引进了Toolbar，它包含了ActionBar最近添加的大多数特性，同时添加到了支持库中，使得在低版本设备上也可以使用Toolbar。
Toolbar与ActionBar的区别：
- ToolBar就是一个View，跟其它View一样包含在布局中。
- 像常规View一样，Toolbar很容易来放置、实现动画以及控制。
- 一个Activity中可以有多个Toolbar。
使用
引入v7 appcompat支持库。
compile 'com.android.support:appcompat-v7:25.3.1'
修改styles.xml文件设置主题为NoActionBar
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#673AB7</item>
<item name="colorPrimaryDark">#512DA8</item>
<item name="colorAccent">#FF4081</item>
</style>
创建布局文件activity_toolbar.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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"/>
</LinearLayout>
android:elevation="4dp" 可以解释为视图高度，view阴影，view的z轴高度。
在ToolBarSimple.class中如下：
/**
* Created by 泅渡者
* Created on 2017/10/18.
*/
public class ToolBarSimple extends AppCompatActivity {
Toolbar toolbar;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar);
toolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(toolbar); //引入ToolBar
}
}
展示效果：
image.png
可以看到我们的ToolBar只展示了应用名称，但是Toolbar可以包含以下元素：
导航按钮
- 应用的Logo
- 标题和子标题
- 若干个自定义View
- 动作菜单
我们来一一展示下。
- 显示导航按钮、应用的Logo、标题和子标题。
/**
* Created by 泅渡者
* Created on 2017/10/18.
*/
public class ToolBarSimple extends AppCompatActivity {
Toolbar toolbar;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar);
toolbar = (Toolbar) findViewById(R.id.my_toolbar);
toolbar.setTitle("标题");
toolbar.setSubtitle("子标题");
// 显示导航按钮
toolbar.setNavigationIcon(R.drawable.icon_menu);
setSupportActionBar(toolbar);
// 显示应用的Logo
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setDisplayUseLogoEnabled(true);
getSupportActionBar().setLogo(R.mipmap.ic_launcher);
// 显示标题和子标题
getSupportActionBar().setDisplayShowTitleEnabled(true);
}
}
效果如下（选图有点夸张。。。）：
image.png
2.显示动作菜单
首先我们来定义一个menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_first_fragment"
android:icon="@drawable/lable_one"
android:checked="true"
android:title="First" />
<item
android:id="@+id/nav_second_fragment"
android:icon="@drawable/lable_two"
android:title="Second" />
<item
android:id="@+id/nav_third_fragment"
android:icon="@drawable/lable_three"
android:title="Third" />
<item android:title="Sub items">
<menu>
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_four"
android:icon="@drawable/lable_two"
android:title="Sub item 1" />
<item
android:id="@+id/nav_five"
android:icon="@drawable/lable_three"
android:title="Sub item 2" />
</group>
</menu>
</item>
</group>
</menu>
接下来我们需要改写ToolBarSimple.class
/**
* Created by 泅渡者
* Created on 2017/10/18.
*/
public class ToolBarSimple extends AppCompatActivity {
Toolbar toolbar;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar);
toolbar = (Toolbar) findViewById(R.id.my_toolbar);
toolbar.setTitle("标题");
toolbar.setSubtitle("子标题");
// 显示导航按钮
toolbar.setNavigationIcon(R.drawable.icon_menu);
setSupportActionBar(toolbar);
// 显示应用的Logo
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setDisplayUseLogoEnabled(true);
getSupportActionBar().setLogo(R.mipmap.ic_launcher);
// 显示标题和子标题
getSupportActionBar().setDisplayShowTitleEnabled(true);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.drawer_view, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
default:
Toast.makeText(ToolBarSimple.this, "菜单被点击", Toast.LENGTH_SHORT).show();
item.setChecked(true);
return super.onOptionsItemSelected(item);
}
}
}
结果如下：
image.png
- 自定义布局
目前我只加了一个TextView ，此处可以改为任何布局。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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">
<TextView
android:id="@+id/toolbar_title"
style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="20dp"
android:textColor="#FFFFFF"
android:text="注销"
android:textSize="21sp"/>
</android.support.v7.widget.Toolbar>
</LinearLayout>
image.png
以上呢就是ToolBar的使用了，但是一般情况下我们不会每个布局文件写一个ToolBar，通常我们会将一套或者多套ToolBar 都写进BaseActivity中，这样方便我们复用。
需要代码点击获取
网友评论