-
toolbar是v7包中的类安卓5.0推出,自2014年谷歌io大会上的md风格的设计
-
toolbar作用:代替ActionBar使用,继承自viewgroup
-
要使用toolbar,需要设置主题为AppCompat,并且主题设置里面不要actionbar
<style name="ToolbarTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
-
xml文件和activity中设置toolbar
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
-
menu菜单文件
<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">
<item
android:id="@+id/action_settings"
android:orderInCategory="102"
android:title="@string/action_settings"
app:showAsAction="always" />
<item
android:id="@+id/action_about"
android:orderInCategory="106"
android:title="关于"
app:showAsAction="never" />
<item
android:orderInCategory="103"
android:title="item1"
app:showAsAction="never" />
<item
android:orderInCategory="104"
android:title="item2"
app:showAsAction="never" />
</menu>
-
发现toolbar和下面的内容界面都是黑色,这个问题是主题引起的,修改主题样式为light,并区分toolbar和内容界面的背景色
<style name="ToolbarTheme.Base" parent="Theme.AppCompat.Light">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item> //设置actionbar的背景色
<item name="colorPrimary">@color/colorPrimary</item>
</style>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
上面的主题可以偷懒写
<style name="ToolbarTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
</style>
效果:
还可设置状态栏的背景色
<style name="ToolbarTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>
效果:
-
修改toolbar的title文字颜色,在style主题中添加item,这样修改的就是应用的文字颜色为白色
<item name="android:textColorPrimary">@color/white</item>
-
为toolar加上返回上一级界面的箭头:activity中添加toolbar代码
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_settings:
Toast.toastShort("Setting");
return true;
default:
return super.onOptionsItemSelected(item); }
}
-
发现返回箭头和右上角的menu折叠三个点为黑色的,一般应用使用的是白色的,这个问题出现的原因是app设置的主题是light(浅色主题,内容区域为白色背景,箭头为黑色),这里需要设置toolbar的主题为dark(深色主题,内容区域为黑色背景,箭头为白色)
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="@style/ToolbarTheme"//为了兼容使用app命名空间
android:background="?attr/colorPrimary" />
<style name="ToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
-
修改toolbar的title文字的大小和重新设置颜色,需要设置title的样式
app:titleTextAppearance="@style/ToolBarTitleText"
<style name="ToolBarTitleText" parent="TextAppearance.AppCompat.Medium">
<item name="android:textColor">@color/red</item>
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
</style>
-
设置menu文字的颜色和大小,在toolber主题中设置
app:theme="@style/ToolbarTheme"
<style name="ToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="actionMenuTextColor">@color/blue_light</item>
<item name="android:actionMenuTextAppearance">@style/ToolbarMenuTextSize</item>
</style>
<style name="ToolbarMenuTextSize" parent="Base.TextAppearance.AppCompat.Menu">
<item name="android:textSize">12sp</item>
</style>
-
点击界面右上角三个点展示的是我们设置的popupmneu弹窗,背景色为黑色,是因为我们的toolbar的主题使用的是drak深色主题,所以背景色为黑色,字体为白色
-
修改popupmenu弹窗的背景色和文字颜色和文字大小,在toolbar中设置popuptheme主题
app:popupTheme="@style/ToolbarPopupTheme"
<style name="ToolbarPopupTheme" parent="Theme.AppCompat">
<!--设置背景色为灰色-->
<item name="android:colorBackground">@color/Gray_e</item>
<!--menu菜单的文字颜色设置-->
<item name="android:textColorPrimary">@color/c_xiuxiu</item>
<!--菜单文字的大小-->
<item name="android:textSize">12sp</item>
</style>
-
toolbar其他属性的设置
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:logo="@mipmap/ic_launcher"
app:navigationIcon="@mipmap/icon_back"
app:popupTheme="@style/ToolbarPopupTheme"
app:subtitle="subtitle"
app:theme="@style/ToolbarTheme"
app:title="ToolBar"
app:titleTextAppearance="@style/ToolBarTitleText" />
-
总结
-
使用ToolBar需要线设置Activity的主题样式为AppCompat,并且设置NoActionBar.主题样式主要分浅色light,和深色dark
-
可以在主题设置中定义主题颜色和主题文字颜色
-
设置toolbar返回上一届功能,需要在activity中设置setSupportActionBar,和setDisplayHomeAsUpEnabled(true)方法,和点击事件
-
修改toolbar返回箭头和menu菜单三个点的颜色,需要设置toolbar的主题-app:theme
-
设置menu文字颜色和大小样式,在toolbar主题中进行设置acitonMenuTextColor
-
修改toolbar的title文字颜色和大小,需要设置app:titleTextAppearance样式
-
设置menu菜单的popup弹窗的背景色,文字颜色和大小等样式,需要设置popupTheme主题