环境说明:
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);
此时运行效果:
添加背景色
android:background="@color/colorPrimary"
此时运行效果:
基本属性设置
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"/> //子标题颜色
运行效果:
添加选项菜单
第一步创建菜单文件
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;
}
此时效果:
个性设置
左侧返回箭头
想要显示自带的返回箭头,需要去掉之前设定的属性:
app:navigationIcon="@mipmap/title_bar_back"
然后在代码中添加:
getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
此时效果:
溢出图标颜色
在style文件中添加:
@android:color/white
此时效果:
自定义右侧溢出图标
在Style文件中添加:
@color/colorPrimary
@color/colorPrimaryDark
@color/colorAccent
@android:color/white
@style/OverflowButtonStyle
@mipmap/ic_action_add
此时运行效果:
更改弹出菜单背景
在Style文件中添加样式:
在布局文件中添加使用主题:
app:popupTheme="@style/ToolbarPopupTheme"
此时运行效果:
更改弹出菜单文字颜色
添加样式文件:
@color/colorPrimary
@color/colorPrimaryDark
@color/colorAccent
@android:color/white
@style/OverflowButtonStyle
@style/Overflow_Menu_Text_style
#fff
此时运行效果:
修改标题文字大小
添加配置:
app:titleTextAppearance="@style/ToolbarTitleSize"
添加style:
28sp
此时运行效果:
子标题文字大小类似,添加配置然后定义style文件(此处省略):
app:subtitleTextAppearance="@style/ToolbarTitleSize"
修改弹出菜单位置
修改配置使弹出菜单显示在Toolbar下方:
首先重新设置属性:(在界面布局文件Toolbar中)
app:popupTheme="@style/OverflowMenuStyle"
在Style文件中添加:
false
wrap_content
5dp
#FFCC99
5dp
0dp
#0099CC
此时运行效果:
事件处理
返回按钮事件
添加监听
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);
此时运行效果:
新版本studio,在新建Activity的时候可以选择对应的模板,会自动创建好DrawerLayout并关联Toolbar.
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。