环境说明:

Android Studio 2.0

V7包版本:com.android.support:appcompat-v7:23.4.0

compileSdkVersion 23

buildToolsVersion "24.0.0"

Toolbar 引入使用

XML布局中加入:

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"/>

主题改为隐藏ActionBar:

Theme.AppCompat.Light.NoActionBar

Activity代码中加入:

setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

此时运行效果:

835e5bd5c60571f2f64c0b286dec83c0.png

添加背景色

android:background="@color/colorPrimary"

此时运行效果:

3efd75b656e651029f1cf5bde4b880d1.png

基本属性设置

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="@color/colorPrimary"

app:navigationIcon="@mipmap/title_bar_back"//左侧图标

app:subtitle="子标题"

app:subtitleTextColor="#fff" //标题颜色

app:title="标题"

app:titleTextColor="#fff"/> //子标题颜色

运行效果:

cee8e2f71b95a308634fa6f33a316946.png

添加选项菜单

第一步创建菜单文件

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

tools:context=".MainActivity">

android:id="@+id/action_settings"

android:icon="@mipmap/ic_launcher"

android:orderInCategory="100"

android:title="settings"

app:showAsAction="never"/>

android:id="@+id/action_share"

android:icon="@mipmap/ic_action_share"

android:orderInCategory="100"

android:title="settings"

app:showAsAction="ifRoom"/>

android:id="@+id/action_search"

android:icon="@mipmap/ic_action_search"

android:orderInCategory="100"

android:title="settings"

app:showAsAction="ifRoom"/>

第二部在代码中重写onCreateOptionsMenu方法加载菜单文件

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.menu_main, menu);

return true;

}

此时效果:

a426d24ad3dd973ff8db51498655e9cd.png

个性设置

左侧返回箭头

想要显示自带的返回箭头,需要去掉之前设定的属性:

app:navigationIcon="@mipmap/title_bar_back"

然后在代码中添加:

getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

此时效果:

1b29a8a84e5cdae4c6db490983a4226d.png

溢出图标颜色

在style文件中添加:

@android:color/white

此时效果:

3c3c3532b06a8180df1074e5a680583b.png

自定义右侧溢出图标

在Style文件中添加:

@color/colorPrimary

@color/colorPrimaryDark

@color/colorAccent

@android:color/white

@style/OverflowButtonStyle

@mipmap/ic_action_add

此时运行效果:

09611b6de76fc9012c102b3f60e6074b.png

更改弹出菜单背景

在Style文件中添加样式:

在布局文件中添加使用主题:

app:popupTheme="@style/ToolbarPopupTheme"

此时运行效果:

2e91c875290b2fd975ed1d0acdd1bc5b.png

更改弹出菜单文字颜色

添加样式文件:

@color/colorPrimary

@color/colorPrimaryDark

@color/colorAccent

@android:color/white

@style/OverflowButtonStyle

@style/Overflow_Menu_Text_style

#fff

此时运行效果:

e9a52ae4b6ef86dfbf5569518775fdfd.png

修改标题文字大小

添加配置:

app:titleTextAppearance="@style/ToolbarTitleSize"

添加style:

28sp

此时运行效果:

64ae61036a672f107ba942151e4654da.png

子标题文字大小类似,添加配置然后定义style文件(此处省略):

app:subtitleTextAppearance="@style/ToolbarTitleSize"

修改弹出菜单位置

修改配置使弹出菜单显示在Toolbar下方:

首先重新设置属性:(在界面布局文件Toolbar中)

app:popupTheme="@style/OverflowMenuStyle"

在Style文件中添加:

false

wrap_content

5dp

#FFCC99

5dp

0dp

#0099CC

此时运行效果:

e432312fb3b39b05ab567cd6a315f6d2.png

事件处理

返回按钮事件

添加监听

toolbar.setNavigationOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getApplicationContext(), "点击了返回箭头", Toast.LENGTH_LONG).show();

}

});

菜单项点击事件

重写方法

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.action_settings:

break;

case R.id.action_search:

break;

case R.id.action_share:

break;

}

return true;

}

自定义Toolbar

Toolbar下面可以嵌套布局,直接将自己定义好的布局放到Toolbar下面即可

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize">

android:layout_width="match_parent"

android:layout_height="match_parent">

......

Toolbar 和 DrawerLayout 左滑菜单

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/drawer_left"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="start"

android:background="#CCCCFF"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:padding="10dp"

android:text="选项一"

android:textSize="18sp"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:padding="10dp"

android:text="选项二"

android:textSize="18sp"/>

添加左滑布局文件:

在主布局文件中引入:(在Toolbar下方)

在代码中添加关联:

DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_left);

ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close);

mDrawerToggle.syncState();

mDrawerLayout.setDrawerListener(mDrawerToggle);

此时运行效果:

29b29fdccd3c9da81644d15c4bca6612.png

新版本studio,在新建Activity的时候可以选择对应的模板,会自动创建好DrawerLayout并关联Toolbar.

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐