欢迎回来Android入门教程的第十八期,本期来介绍一种新组件:ToolBar。

说到ToolBar,我们也并不陌生,像是在QQ、微信、知乎、哔哩哔哩客户端的顶部都有一栏,一般是左右两边按钮,中间是标题或一个搜索框,那么这种组件就是ToolBar,也就是标题栏。

那么Android原有的标题栏可以被转换为ActionBar,若你之前按照我的方法创建了项目,就可以直接在代码中获取到它。

ActionBar actionBar = getSupportActionBar();

如果你的主题是@style/Theme.AppCompat.Light.NoActionBar,那么这个方法获取到的将会是null,因为这个主题已经是NoActionBar也就是不使用系统自带的。

在有了ToolBar以后,在一些特定的场景中ActionBar已经无法满足我们的需求了,因为ToolBar可以与其他组件共同使用,可以组合出折叠标题栏,例如某宝的商品详情页。

介绍了这么多,那么我们就开始吧,先从ActionBar开始。

        ActionBar actionBar = getSupportActionBar();
        actionBar.setTitle("ActionBar标题");
        actionBar.setSubtitle("这里是副标题");
        // 启用左上角的返回按钮
        actionBar.setHomeButtonEnabled(true);
        actionBar.setDisplayHomeAsUpEnabled(true);

这样我们就利用Android自带的ActionBar完成了一个简单的标题栏,效果如下。

1629170044 Img 20210817 111313

那么ActionBar的使用就到这里,下面来看看ToolBar有什么不同。

首先我们来到AndroidManifest.xml,找到Activity标签,若你想在MainActivity使用ToolBar来代替ActionBar,就将theme修改成@style/AppTheme.NoActionBar,若没有这个属性,自己添加一个即可,如下所示:

        <activity 
            android:name=".MainActivity"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

这样我们的MainActivity就没有ActionBar了,现在我们回到它的布局文件中,在最顶部添加ToolBar。

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

这样我们就创建了一个ToolBar,现在我们为它指定主题和颜色。

    <androidx.appcompat.widget.Toolbar
        android:theme="@style/AppTheme.AppBarOverlay"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:title="这里是标题"
        app:subtitle="这里是副标题" />

细心的朋友已经发现我的height改成了Android自带的属性,这个值是通用的,也就是标准标题栏的高度,自己改成其他高度也是可以的,现在我们实机运行后会发现一个小问题:

1629171173 Img 20210817 113132

现在标题栏已经有了,但是状态栏好像没有颜色,下面我们再为这个Activity设置为沉浸式。

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

非常简单,只要在Activity中将这一行放在setContentView()的后面就行了。然后我们再回到布局对ToolBar进行一些小修改:

    <androidx.appcompat.widget.Toolbar
        android:theme="@style/AppTheme.AppBarOverlay"
        android:layout_width="match_parent"
        android:minHeight="?android:attr/actionBarSize"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:title="这里是标题"
        app:subtitle="这里是副标题"
        android:fitsSystemWindows="true"/>

android:fitsSystemWindows这个属性即不将标题栏拓展到状态栏,设置为false也就是标题栏是被状态栏覆盖的,这里设置为true。

如果仅用这个属性,那么我们的标题栏的高度就会减去状态栏的高度,这是因为实际上的标题栏已经在手机屏幕的最顶端,并且设置了固定高度,这样看来就会少一半。

我们只需将height改成wrap_content,新增一个android:minHeight属性指定标题栏的最小高度,这样我们的标题栏实际高度就是原标题栏高度+状态栏高度,再加上 android:fitsSystemWindows属性,标题栏就能正常显示了。

这样就结束了……吗?

我们还有最后一步,既然我们取消了ActionBar,那么我们就要将这个ToolBar挂在到这个Activity,如下:

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

这样setSupportActionBar之后,就可以通过getSupportActionBar()来获取到这个ToolBar,但这个获取到的对象还是ActionBar。

ToolBar的功能之一就在于它内部是可以自定义布局的,下面我们来看一个简单的例子。

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:theme="@style/AppTheme.AppBarOverlay"
        android:layout_width="match_parent"
        android:minHeight="?android:attr/actionBarSize"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:title="这里是标题"
        app:subtitle="这里是副标题"
        android:fitsSystemWindows="true">

        <TextView
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textColor="#fff"
            android:textSize="18sp"/>

    </androidx.appcompat.widget.Toolbar>

没错,你可以展开ToolBar标签,在里面换上你自己的布局。一旦你这么做,将会覆盖掉原有的布局,也就是title、subtitle这些都会失效。

如上所示的布局,就是标题居中的一种实现方式。

1629172267 Img 20210817 115045

那么最后再介绍一种style,名为TextAppearance,你会发现ToolBar貌似并没有textSize,那么我们就可以通过这个style来控制。

    <!--Title-->
    <style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textColor">#fff</item>
        <item name="android:textSize">18sp</item>
    </style>
    <!--SubTitle-->
    <style name="ToolbarSubtitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textColor">#fff</item>
        <item name="android:textSize">14sp</item>
    </style>

最后我们将这个style设置在ToolBar上即可。


那么本期ToolBar的教程就到这里,简单地介绍了一下ToolBar的使用,那么下一期我们讲一讲什么是Menu。


0 条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注