您的位置:首页 > Web前端 > CSS

Toolbar的常规设置(包括标题样式,菜单样式等)

2017-01-03 19:18 381 查看

一、使用Toolbar必须去掉ActionBar

1)使用NoActionBar的主题

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimarydark</item>
<item name="colorAccent">@color/coloraccent</item>
</style>


2)手动对主题进行去ActionBar设置

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimarydark</item>
<item name="colorAccent">@color/coloraccent</item>
<!--去掉系统默认的标题栏-->
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>


二、在styles.xml中配置Toolbar的样式

<!--Toolbar的样式配置 begin-->
<!-- toolbar菜单文字尺寸 -->
<style name="ToolbarMenuTextSize" parent="@style/TextAppearance.AppCompat.Menu">
<item name="android:textSize">14sp</item>
</style>
<!-- toolbar菜单样式 -->
<style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
<item name="actionMenuTextColor">@android:color/white</item>
<item name="actionMenuTextAppearance">@style/ToolbarMenuTextSize</item>
<!--<item name="android:colorBackground"></item>也可以设置背景色以及menu中的其他属性-->
<item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
<item name="android:itemBackground">@color/colorPrimary</item>
<item name="android:layout_marginRight">10dp</item>
<item name="android:textColor">@android:color/white</item>
</style>
<!--设置菜单popup出现位置在toolbar的下方-->
<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="overlapAnchor">false</item>  <!--设置不覆盖锚点-->
</style>
<!-- toolbar弹出菜单样式 -->
<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat">
<item name="android:colorBackground">#212121</item>
</style>
<!-- toolbar主标题样式 -->
<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">17sp</item>
<item name="android:textColor">@android:color/white</item>
<item name="android:textColorPrimary">@android:color/white</item>
</style>
<!--toolbar副标题样式-->
<style name="ToolbarSubTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textSize">13sp</item>
<item name="android:textColor">@android:color/white</item>
</style>
<!--Toolbar的样式配置 end-->


三、在布局文件中引用Toolbar的配置样式

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="@style/ToolbarTheme"                  <!-- toolbar菜单样式 -->
app:popupTheme="@style/ToolbarPopupTheme"        <!-- toolbar弹出菜单样式 -->
app:titleTextAppearance="@style/ToolbarTitle"    <!-- toolbar主标题样式 -->
app:subtitleTextAppearance="@style/ToolbarSubTitle" <!-- toolbar副标题样式 -->
/>


以后需要修改指定地方的样式,只需要在第2步中对应的style里找出对应的属性设置即可。详细说明请参考:Android Toolbar样式定制详解
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  toolbar样式 自定义