Toolbar的使用
  HvTJUzsxOBtS 2023年11月18日 29 0


ActionBar早已经不再使用, Google推荐使用Toolbar替代, toolbar不单可以置于最顶端, 也可以是弹出式, 或者像输入法一样置于弹出窗口顶端.

我们只说说普通的toolbar怎么使用.

首先, Toolbar控件是在v7包中提供的, 那么我们需要将v7包纳入.

dependencies {
...
    implementation 'com.android.support:appcompat-v7:27.0.2'
...
}

 在style中设置主题, 设置为"不带actionbar"的主题

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

在布局中导入:

 

<FrameLayout 
    ...>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:background="?attr/colorPrimary"
        app:title="Title" />

</FrameLayout>

好, 我们来看下效果.

 

Toolbar的使用_xml

 

这就完了吗? 那也太简单了吧.

我们给它加个菜单看看.

在res资源下增加一个"menu"目录, 添加一个menu_main.xml菜单文件.

<?xml version="1.0" encoding="utf-8"?>

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

    <item
        android:id="@+id/action_backup"
        android:icon="@drawable/ic_backup_white_24dp"
        android:title="Backup"
        app:showAsAction="always" />
    <item
        android:id="@+id/action_delete"
        android:icon="@drawable/ic_delete_white_24dp"
        android:title="Delete"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_settings"
        android:icon="@drawable/ic_settings_white_24dp"
        android:title="Settings"
        app:showAsAction="never" />

</menu>

 

菜单里只有三项, 分别是"Backup", "Delete", "Settings", 并分别配置了图标.

然后在activity里增加菜单注入代码.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main,menu);
    return true;
}

好, 我们来看下效果. 


Toolbar的使用_ico_02

Toolbar的使用_android_03 编辑

纳尼?!!! 还是老样子, 没看到菜单. 为什么呢?

其实这个时候只是表示这个toolbar显示出来了, 功能上还没任何扩展呢.要想使用它, 我们需要在代码中进行申明, 将actionbar替换成toolbar, 然后我们才可以对它进行一些操作或设置. 比如增加菜单.

private Toolbar toolbar;

private void initView() {
    toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
}

 好, 再来看下效果

Toolbar的使用_xml_04

 

嗯, 不错哦, 有图标了, 也有溢出菜单了, 我们再看看溢出菜单.

Toolbar的使用_android_05

怎么回事? "Setting"的底色怎么是黑色的? 这样不搭啊!

当然, 还记得我们在style中对整个App设置了一个主题吧, 主题是黑色系的

 

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

 

那么菜单自然继承的也是黑色系的, 所以底色是黑色的, 菜单文字是淡色的.

我们需要单独给菜单设置一个主题, 让其底色为淡色, 文字为深色. 那么需要在toolbar的属性栏上增加如下代码:

<android.support.v7.widget.Toolbar
...
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

好, 再来看看效果.

Toolbar的使用_android_06

Yes, 协调多了.

我们给菜单增加点代码, 看菜单是否起作用了. 给"Backup"设置一个点击反馈, 弹出一个吐司.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case R.id.action_backup:
            Toast.makeText(this,"BackUp",Toast.LENGTH_SHORT).show();
            break;
        case R.id.action_delete:
            break;
        case R.id.action_settings:
            break;
    }
    return true;
}

 好, 出来了, 确实OK.

Toolbar的使用_android_07

当然toolbar没这么简单, 还可以设置导航按钮吧. 比如这样的.

Toolbar的使用_xml_08

 

 

来, 我们看看代码中是怎么设置的.

private void initView() {
    toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    ActionBar actionBar = getSupportActionBar();
    if(actionBar != null){
        actionBar.setDisplayHomeAsUpEnabled(true);
    }
}

 

现在来看效果.

Toolbar的使用_android_09

 可是, 一般若是主页的话, 我们可不希望出来的是个"后退" 箭头图标, 最好是能代表HOME或者APP LOGO的图标. 我们要做如下更改.

private void initView() {
    toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    ActionBar actionBar = getSupportActionBar();
    if(actionBar != null){
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeAsUpIndicator(R.drawable.ic_home_white_24dp);
    }
}

 

其中"R.drawable.ic_home_white_24dp"是个小房子图标.

 

Toolbar的使用_xml_10

但怎么确定你点了它就起作用了呢?

这个导航按钮有个固定的名称, 叫"android.R.id.home", 我们在菜单选取项上更新代码.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case android.R.id.home:
            Toast.makeText(this, "Home now",Toast.LENGTH_SHORT).show();
            break;
        ...
    }
    return true;
}

看看效果.

Toolbar的使用_ico_11

 

好, Toolbar就讲这么多, 当然功能还有很多, 比如设置subTitle, 增加自定义View, 增加收缩动画等, 在其它笔记中陆续补充.

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月18日 0

暂无评论

推荐阅读
  0piCg03t9xej   2023年12月23日   105   0   0 mavenxmlJavaJavamavenxml
  wURKzOHw9Irf   2023年12月24日   30   0   0 HTMLicoicohtml