您当前的位置: 首页 >  ar

Kevin-Dev

暂无认证

  • 0浏览

    0关注

    544博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

【Android -- Material Design】Toolbar 的基本使用

Kevin-Dev 发布时间:2020-07-14 23:33:28 ,浏览量:0

一、前言

在 2014 年 Google IO 大会上,Google 推出了一套全新的设计规范 Material Design,这也为广大的 Android 开发者带来了福音,不用像以前一样照着 IOS 视觉稿来开发 Android APP,Material Design 的视觉风格本身就比较炫酷。请看 Material Design 中文版,而Google 也为我们提供符合Material Design 风格的一系列组件,这大大的提高了我们的开发效率。

二、概述

官方介绍:A Toolbar is a generalization of action bars for use within application layouts.

意思就是 Toolbar 是应用内的 action bars 的一个归纳。来看一下 Toolbar 的类继承关系,如下图: 在这里插入图片描述 一个 Toolbar 从左到右包括了 一个 navigation button、一个 logo、一个 title 和 subtitle 、一个或多个自定义的 View 和一个 action menu 这5部分。也就是这个 ViewGroup 容器里面包含了这五部分内容,对应着一个界面看一下: 在这里插入图片描述

三、属性 & 方法

1. 常用属性

  • toolbar:navigationIcon 设置navigation button

  • toolbar:logo 设置logo 图标

  • toolbar:title 设置标题

  • toolbar:titleTextColor 设置标题文字颜色

  • toolbar:subtitle 设置副标题

  • toolbar:subtitleTextColor 设置副标题文字颜色

  • toolbar:popupTheme Reference to a theme that should be used to inflate popups shown by widgets in the toolbar.

  • toolbar:titleTextAppearance 设置title text 相关属性,如:字体,颜色,大小等等

  • toolbar:subtitleTextAppearance 设置subtitle text 相关属性,如:字体,颜色,大小等等

  • toolbar:logoDescription logo 描述

  • android:background Toolbar 背景

  • android:theme 主题

注意:开头是自定义命名空间 xmlns:toolbar="http://schemas.android.com/apk/res-auto", 而不是 android,如果使用android:navigationIcon 这种事无效的,必须使用 toolbar:navigationIcon):

2. 重要方法

        //设置NavigationIcon
        toolbar.setNavigationIcon(R.drawable.ic_book_list);
        // 设置navigation button 点击事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        // 设置 toolbar 背景色
        toolbar.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
        // 设置 Title
        toolbar.setTitle(R.string.toolbar_title);
        //  设置Toolbar title文字颜色
        toolbar.setTitleTextColor(getResources().getColor(R.color.white));
        // 设置Toolbar subTitle
        toolbar.setSubtitle(R.string.sub_title);

        toolbar.setSubtitleTextColor(getResources().getColor(R.color.white));
        // 设置logo
        toolbar.setLogo(R.mipmap.ic_launcher);
        // 设置 NavigationIcon 点击事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        //设置 Toolbar menu
        toolbar.inflateMenu(R.menu.setting_menu);
        // 设置溢出菜单的图标
        toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.abc_ic_menu_moreoverflow_mtrl_alpha));
        // 设置menu item 点击事件
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.item_setting:
                        //点击设置
                        break;
                }
                return false;
            }
        });
四、基本使用

1. 在清单文件中,修改 Theme 主题。


2. 在 Activity 的布局文件中添加 Toolbar


3. 在 Fragment 中对 Toolbar 做一些相关的操作,如:设置标题,设置navigation button 点击事件,添加溢出菜单

public class BFragment extends BaseFragment {
    @BindView(R.id.toolbar)
    Toolbar mToolbar;

    @Override
    protected int layoutId() {
        return R.layout.fragment_b;
    }

    @Override
    protected void initView(View view) {
        initToolbar();
    }

    private void initToolbar() {
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //TODO
            }
        });
        //添加溢出菜单
        mToolbar.inflateMenu(R.menu.setting_menu);
        // 添加菜单点击事件
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.item_setting:
                        //点击设置菜单
                        break;
                }
                return false;
            }
        });
    }

    @Override
    protected void initData() {

    }
}

4. 溢出菜单文件如下:



    

   
    

注意: app:showAsAction ,这个属性是设置菜单该怎么显示,取值有5种,主要应用的有 ifRoom、never、always 这三种, ifRoom 表示 如果 Toolbar 上有显示空间就显示在 Toolbar 上,如果没有空间就展示在溢出菜单里,never 表是总是显示在溢出菜单里,always 表示总是显示在Toolbar 上。

五、项目中特殊需求

1. 更改溢出菜单文字的颜色和文字的大小 要更改溢出菜单文字的颜色,我们只需要为Toolbar 添加一个主题,在styles.xml 文件中添加一个主题:

 	
        
      @android:color/holo_red_dark 
      
  	  16sp
    

效果如下: 在这里插入图片描述

2. 更改显示在Toolbar 上的菜单文字颜色 显示在 Toolbar 上的 发布 菜单,默认显示是黑色,设计师肯定不干了,要你更改颜色。在 style 中添加如下代码:

 
 @android:color/white

在这里插入图片描述 最后,贴出 Toolbar 主题的全部代码:

 
        
      @style/OverFlowIcon
        
      @android:color/holo_red_dark
        
      @android:color/white
        
      15sp
    

    
        @drawable/abc_ic_menu_moreoverflow_mtrl_alpha
    

3. 在Toolbar 上添加 自定义 View 在这里插入图片描述 布局文件

	
        
    
关注
打赏
1658837700
查看更多评论
立即登录/注册

微信扫码登录

0.0478s