Toolbar 如何修改标题、子标题字体大小和颜色,Toolbar menu字体的大小和颜色

实例讲解androidx.appcompat.widget.Toolbar控件的标题、子标题及其 menu字体的大小和颜色。

一、Toolbar的简单应用

1、设置导航栏图标

Java代码设置:

toolbar.setNavigationIcon(R.drawable.back);

xml设置:

app:navigationIcon="@mipmap/ic_launcher"

2、设置App的logo

Java代码设置:

toolbar.setLogo(R.mipmap.ic_launcher);

xml设置:

app:logo="@mipmap/ic_launcher"

3、支持设置标题和子标题

Java代码设置:

toolbar.setTitle("大标题");

toolbar.setSubtitle("子标题");

xml设置:

app:title="@string/app_name"
app:subtitle="@string/app_name"

4、支持添加一个或多个的自定义控件

可以使用androidx.appcompat.widget.Toolbar包裹自定义控件。

5、支持Action Menu

6、设置Toolbar左右两边的间距,类似paddingLeft和paddingRight,可用于设置标题和子标题距离左侧的间距

<androidx.appcompat.widget.Toolbar
    android:id="@+id/view_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:contentInsetLeft="20dp"
    app:contentInsetRight="20dp"
    app:contentInsetStart="20dp"
    app:contentInsetEnd="20dp"
    app:title="@string/app_name"
    app:subtitle="@string/app_name"
    app:titleTextColor="@color/white"
    app:subtitleTextColor="@color/white"
    app:titleTextAppearance="@style/Toolbar.TitleText"
    android:background="@color/app_main_color"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>

以上app:contentInsetLeft、app:contentInsetStart可以设置左边距,app:contentInsetRight、app:contentInsetEnd可以设置右边距。

二、修改ToolBar的标题、子标题字体大小和颜色,toolbar menu字体的大小和颜色

1、修改ToolBar的标题的字体颜色大小

在style文件上添加如下配置:

<!-- 设置Toolbar标题字体的颜色大小 -->
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <!--toolbar标题字体大小-->
    <item name="android:textSize">24sp</item>
    <!--toolbar标题字体颜色-->
    <item name="android:textColor">@color/home_title_color</item>
    <!--toolbar标题字体粗体-->
    <item name="android:textStyle">bold</item>
</style>

注意,新版的需要在themes.xml文件添加,旧版的在style.xml添加。

然后在布局文件的ToolBar中添加上如下设置进行使用:

app:titleTextAppearance="@style/Toolbar.TitleText"

或者在Java代码中进行如下设置:

toolbar.setTitleTextAppearance(this, R.style.Toolbar_TitleText);

2、修改ToolBar的子标题的字体颜色大小

<!-- 设置Toolbar 子标题subtitle标题字体的大小 -->
<style name="Toolbar.SubTitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <!--子标题字体大小-->
    <item name="android:textSize">15sp</item>
    <!--子标题字体颜色-->
    <item name="android:textColor">@color/home_title_color</item>
</style>

然后在布局文件的ToolBar中添加上如下设置进行使用:

app:subtitleTextAppearance="@style/Toolbar.SubTitleText"

或者在Java代码中如下设置:

toolbar.setSubtitleTextAppearance(this,R.style.Toolbar_SubTitleText);

3、修改ToolBar Menu的字体颜色大小

<!--toolbat mean的字体颜色和大小-->
<style name="ToolbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="actionMenuTextColor">#ffffff</item> <!--menu字体颜色-->
    <item name="android:textSize">18sp</item> <!--menu字体大小-->
</style>

然后在布局文件的ToolBar中添加上如下设置进行使用:

app:theme="@style/ToolbarTheme"

三、注意事项

1、在根布局中添加

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

2、在布局中设置大标题和二级标题正确方法是

app:title="大标题"
app:subtitle="子标题"

而设置以下的方法是没有作用的

android:title="大标题"
android:subtitle="子标题"

3、上边ToolBar Menu的style中item actionMenuTextColor前边是不能加android:的,加上之后没作用!

4、在使用Toolbar之前一定要去掉系统自带的ActionBar,可以给Activity使用NoActionBar主题,或者在setContentView()之前调用supportRequestWindowFeature(Window.FEATURE_NO_TITLE)(或者是requestWindowFeature(Window.FEATURE_NO_TITLE))。

5、若在代码中设置logo。大标题和子标题都要在setSupportActionBar(toolbar)前执行

<androidx.appcompat.widget.Toolbar
    android:id="@+id/view_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:contentInsetLeft="20dp"
    app:contentInsetRight="20dp"
    app:contentInsetStart="20dp"
    app:contentInsetEnd="20dp"
    app:title="@string/app_name"
    app:titleTextColor="@color/home_title_color"
    app:titleTextAppearance="@style/Toolbar.TitleText"
    app:subtitle="@string/app_name"
    app:subtitleTextColor="@color/app_main_color"
    app:subtitleTextAppearance="@style/Toolbar.SubTitleText"
    android:background="@color/app_main_color"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>

四、ToolBar menu的使用

在代码中重写onCreateOptionsMenu方法

/**
 * 该方法是用来加载菜单布局的
 * @param menu
 * @return
 */
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

菜单的点击事件

private static Toolbar.OnMenuItemClickListener onMenuItemClickListener=new Toolbar.OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem menuItem) {
        switch (menuItem.getItemId()){
            //因为使用android.support.v7.widget.SearchView类,可以在
            case R.id.action_search:
                break;
            case R.id.action_share:
                break;
            case R.id.action_more:
                break;
        }
        return true;
    }
};

五、toolbar menu中app:showAsAction各个属性值作用

这个属性的值有:
1、always:使菜单项一直显示在ToolBar上。
2、ifRoom:如果有足够的空间,这个值会使菜单项显示在ToolBar上。
3、never:使菜单项永远都不出现在ToolBar上,在…的子项中显示。
4、withText:使菜单项和它的图标,菜单文本一起显示。

 

 

发表回复

后才能评论