Android导航控件之Toolbar

发表于 | 分类于 | 本文总阅读量 次
时间不会辜负每一个平静努力的人！

欢迎来到周建的博客: 共同致力于技术分享与交流

##简介

Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 用来取代之前的 Actionbar

Toolbar支持：

  • 设置导航栏图标
  • 设置App的logo
  • 支持设置标题和子标题
  • 支持添加一个或多个的自定义控件
  • 支持Action Menu

##实践说明

默认情况下Activity是有一个ActionBar的

如何删除这个ActionBar呢？

首先在styles文件中自定义一个style

1
2
3
4
5
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

然后在对应Activity清单文件中配置

1
2
3
<activity
android:name=".FirstToolbarActivity"
android:theme="@style/MyTheme"/>

###第一种样式

布局文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:navigationIcon="@mipmap/ic_book_list"
app:titleTextColor="@color/white"
app:theme="@style/CustomToolbarTheme">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:text="标题"
android:textColor="@android:color/white"
android:textSize="16sp"/>
</android.support.v7.widget.Toolbar>
</RelativeLayout>

FirstToolbarActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
package com.zhoujian.toolbar;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
/**
* Created by zhoujian on 2017/3/8.
*/
public class FirstToolbarActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_first);
initView();
}
private void initView()
{
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
// 设置navigation button 点击事件
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
//设置menu
toolbar.inflateMenu(R.menu.menu_item);
// 设置溢出菜单的图标
toolbar.setOverflowIcon(getResources().getDrawable(R.mipmap.icon_menu));
// 设置menu item 点击事件
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.item_collect:
//点击设置
Toast.makeText(FirstToolbarActivity.this, "按钮被点击了", Toast.LENGTH_SHORT).show();
break;
case R.id.item_talk:
//点击设置
Toast.makeText(FirstToolbarActivity.this, "发起群聊点击了", Toast.LENGTH_SHORT).show();
break;
case R.id.item_add:
//点击设置
Toast.makeText(FirstToolbarActivity.this, "添加朋友被点击了", Toast.LENGTH_SHORT).show();
break;
}
return false;
}
});
}
}

显示效果：

a.png

###第二种样式

布局文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:toolbar="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/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
toolbar:logo="@mipmap/ic_launcher"
toolbar:navigationIcon="@mipmap/ic_book_list"
toolbar:subtitle="小标题"
toolbar:theme="@style/CustomToolbarTheme"
toolbar:title="大标题"
toolbar:titleMarginStart="20dp"
toolbar:titleTextColor="@color/white">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:text="我的"
android:textColor="@color/white"
android:textSize="14sp"/>
</android.support.v7.widget.Toolbar>
</RelativeLayout>

SecondToolbarActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
package com.zhoujian.toolbar;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
/**
* Created by zhoujian on 2017/3/8.
*/
public class SecondToolbarActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
initView();
}
private void initView()
{
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
// 设置navigation button 点击事件
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
//设置menu
toolbar.inflateMenu(R.menu.menu_item);
// 设置溢出菜单的图标
toolbar.setOverflowIcon(getResources().getDrawable(R.mipmap.icon_menu));
// 设置menu item 点击事件
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.item_collect:
//点击设置
Toast.makeText(SecondToolbarActivity.this, "按钮被点击了", Toast.LENGTH_SHORT).show();
break;
case R.id.item_talk:
//点击设置
Toast.makeText(SecondToolbarActivity.this, "发起群聊点击了", Toast.LENGTH_SHORT).show();
break;
case R.id.item_add:
//点击设置
Toast.makeText(SecondToolbarActivity.this, "添加朋友被点击了", Toast.LENGTH_SHORT).show();
break;
}
return false;
}
});
}
}

显示效果：

b.png

###第三种样式

布局文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:toolbar="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/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
toolbar:title="使用实例"
toolbar:navigationIcon="@mipmap/ic_book_list"
toolbar:titleTextColor="@color/white"
toolbar:theme="@style/CustomToolbarTheme">
</android.support.v7.widget.Toolbar>
</RelativeLayout>

ThirdToolbarActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
package com.zhoujian.toolbar;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
/**
* Created by zhoujian on 2017/3/8.
*/
public class ThirdToolbarActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_third);
initView();
}
private void initView()
{
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
// 设置navigation button 点击事件
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
//设置 Toolbar menu
toolbar.inflateMenu(R.menu.toolbar_menu);
// 设置溢出菜单的图标
toolbar.setOverflowIcon(getResources().getDrawable(R.mipmap.icon_menu));
// 设置menu item 点击事件
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.publish:
//点击设置
Toast.makeText(ThirdToolbarActivity.this, "发布按钮被点击了", Toast.LENGTH_SHORT).show();
break;
}
return false;
}
});
}
}

显示效果：

c.png

###第四种样式

布局文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:toolbar="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/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
toolbar:navigationIcon="@mipmap/ic_book_list"
toolbar:theme="@style/CustomToolbarTheme"
toolbar:titleTextColor="@color/white">
<EditText
android:id="@+id/edit_search"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="@color/white"/>
</android.support.v7.widget.Toolbar>
</RelativeLayout>

FourthToolbarActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
package com.zhoujian.toolbar;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
/**
* Created by zhoujian on 2017/3/8.
*/
public class FourthToolbarActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_four);
initView();
}
private void initView()
{
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
// 设置navigation button点击事件
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
//设置menu
toolbar.inflateMenu(R.menu.menu_search);
// 设置溢出菜单的图标
toolbar.setOverflowIcon(getResources().getDrawable(R.mipmap.icon_menu));
// 设置menu item 点击事件
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.item_search:
//点击设置
Toast.makeText(FourthToolbarActivity.this, "搜索按钮被点击了", Toast.LENGTH_SHORT).show();
break;
}
return false;
}
});
}
}

显示效果：

d.png

##源码下载

源码下载：https://github.com/zeke123/Toolbar