自定义标题Toolbar实现

自定义标题Toolbar实现

使用Toolbar的原因有三：

1. ActionBar在各个安卓版本和定制Rom中的效果表现不一,无法统一。
2. Toolbar可以调整导航状态栏的颜色。
3. ActionBar只能用于顶部而Toolbar它可以还底部顶部使用。

下面是具体实现过程

第一步设置自定义标题的主题theme

首先新建一个空白项目moudle sidebartest,打开AndroidManifest.xml文件，在以下代码中的theme可以看到我们的主题是@style/AppTheme

c
将鼠标放在其上，按住cntrl左键点击一下，跳转到AppTheme的详细属性，或者打开res/values/styles
.xml文件，具体如下所示。

<resources>

    <!-- Base application theme. -->
    <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>
    </style>

</resources>

我们通过为使Toolbar替代ActionBar要指定parent中不带有ActionBar主题，这里我们设置parent= “Theme.AppCompat.Light.NoActionBar”其中item name为colorPrimary的颜色为标题Toolbar的背景颜色，代码如下。

<resources>

    <!-- Base application theme. -->
    <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>

</resources>

此时运行moudle会发现界面顶部一片白，这是因为我们取消了ActionBar的主题，如下图所示：

第二步 修改布局文件

修改activity_main.xml代码，如下所示:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:background="@color/colorPrimary"
        app:titleTextColor="@color/colorRed"
      />
    <!--其中的 app:titleTextColor="@color/colorRed"是我自己在color中设置了颜色属性值为#F00-->
    <!--其中的 android:layout_height="?attr/actionBarSize"表示覆盖ActionBar的高度-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</LinearLayout>

第三步 添加Java代码

import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;


public class MainActivity extends AppCompatActivity {
    private android.support.v7.widget.Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar =  findViewById(R.id.toolbar);
    }
    @Override
    protected void onStart() {
        super.onStart();
        toolbar.setLogo(R.drawable.icon);//设置图片logo,你可以添加自己的图片
        toolbar.setTitle("主标题");
        toolbar.setSubtitle("副标题");
        setSupportActionBar(toolbar);
    }
}

运行结果如下图示，此时已经简单实现自定义Toolbar标题栏了。

下一篇将会讲解侧滑菜单栏的实现。

个人GitHub链接地址: https://github.com/ziruiliu1.