Android开发之Toolbar(实现自定义工具栏)

Toolbar是什么

在项目运行在虚拟机上时,都可以看见屏幕上方有一个栏目(下图红框圈出的部分),此为系统默认的DarkActionBar,可在themes.xml中查看。
在这里插入图片描述
在这里插入图片描述
而Toolbar就是用于替换该栏目的,以便于我们更灵活的编辑栏目内容,所以我们先将主题文件中的DarkActionBar改为NoActionBar,再次运行就可以发现顶端的栏目不见了:
在这里插入图片描述

基本框架

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:background="@color/teal_200"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"/>


</LinearLayout>

注意尖括号里不是普通的Toolbar,而是androidx.appcompat.widget.Toolbar。然后栏目的宽度直接与屏幕一致,高度则调用ActionBar的高度。设置好后在虚拟机上运行我们就能看到一个自定义颜色的工具栏:
在这里插入图片描述

常用属性

app:navigationIcon 导航图标,一般情况下放回退按钮,点击退回上一个界面。
android:background 工具栏颜色
app:title 标题
app:titleTextColor 标题文字颜色
app:titleMarginStart 标题与左侧间距
app:subtitle 子标题
app:subtitleTextColor 子标题颜色
app:logo 工具栏logo

随意地设置了一番,看看效果:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:background="@color/teal_200"
        app:navigationIcon="@drawable/ic_baseline_arrow_back_ios_24"
        app:title="ShadyPi's blog"
        app:titleTextColor="#10047E"
        app:titleMarginStart="60dp"
        app:subtitle="Android学习笔记"
        app:subtitleTextColor="#162D6A"
        app:logo="@mipmap/ic_launcher"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"/>


</LinearLayout>

在这里插入图片描述

添加工具栏点击事件

给Toolbar加上id,我们就可以在java代码里获取并监听用户对工具栏图标的点击:

package com.example.mytoolbar;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;//记得Toolbar要导这个包的

import android.os.Bundle;
import android.util.Log;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Log.e("ShadyPi","栏目被点击了");
            }
        });
    }
}

在这里插入图片描述
在java代码里也可以完成标题、颜色、工具栏图标等设置,实现效果与在xml中一致。

Toolbar toolbar2=findViewById(R.id.tb2);
        toolbar2.setNavigationIcon(R.drawable.ic_baseline_arrow_back_ios_24);
        toolbar2.setTitle("第二个工具栏");

        toolbar2.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Log.e("ShadyPi","工具栏2被点击了");
            }
        });

在这里插入图片描述

更复杂的工具栏

只设置margin的话,感觉并不是很科学,更好的办法是直接添加一个TextView控件,设置其居中:

	<androidx.appcompat.widget.Toolbar
        android:id="@+id/tb3"
        android:background="@color/teal_200"
        android:layout_marginTop="10dp"
        app:navigationIcon="@drawable/ic_baseline_arrow_back_ios_24"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

        <TextView
            android:text="居中"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </androidx.appcompat.widget.Toolbar>

在这里插入图片描述
通过编写这个TextView,我们就能做出更复杂的效果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ShadyPi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值