Android---Toolbar

这篇具有很好参考价值的文章主要介绍了Android---Toolbar。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

    

android toolbar,# Material Design,android

目录

Toolbar

Toolbar 加上 menu

 Toolbar 设置 Theme

完整 Demo

Toolbar

        Toolbar 是在 Android 5.0 开始推出的一个 Materal Design 风格的导航控件 ,Google 非常推荐大家使用 Toobar 来作为 Android 客户端的导航栏,以此来取代之前的 Actionbar。与 Actionbar 相比,Toolbar 明显要灵活的多。它不像 Actionbar 一样,一定要固定在 Activity 的顶部,而是可以放到界面的任意位置。

注意:在使用 Toolbar 时,整个 App 的 Theme 必须是 NoActionBar, 不然应用会出错。

android toolbar,# Material Design,android

        除此之外,在设计 Toolbar 的时候,Google 也留给了开发者很多可定制修改的余地,这些可定制修改的属性在 API 文档中都有详细介绍,如:

      设置导航栏图标;

       设置 APP 的logo;

      支持设置标题合子标题;

      支持 Action Menu;

在布局文件中的属性:

      app:navigationIcon 设置 navigation button

app:navigationIcon="@mipmap/back_icon"

         android toolbar,# Material Design,android

      app:logo 设置 logo 图标

app:logo="@drawable/ic_tool_logo"

 android toolbar,# Material Design,android

      app:title 设置标题(正标题)

      app:titleTextColor 设置正标题文字颜色

      app:subtitle 设置副标题

      app:subtitleTextColor 设置副标题文字颜色

      app:theme 主题

      app:popupTheme 设置点击右上角''..." 的主题,改变 UI 展示效果

app:popupTheme="@style/ToolBarPopupTheme"

android toolbar,# Material Design,android

TollBarPopupTheme 内容如下。放在了 values --> Thems --> Themes.xml 里。

<!-- 设置”...“ 点击时的主题(即右上角的那个menu) -->
    <style name="ToolBarPopupTheme" parent="ThemeOverlay.AppCompat.Light">
        <item name="android:colorBackground">#616161</item><!--设置背景颜色的-->
        <item name="android:textColorPrimary">@android:color/white</item><!--设置文字颜色的-->
        <item name="android:textSize">16sp</item><!--设置文字大小的-->
        <item name="actionOverflowMenuStyle">@style/OverflowMenuTheme</item><!--设置弹出位置的主题-->
        <item name="android:paddingEnd">-5dp</item><!--设置点击”...“弹出的菜单的位置 ,负数是往右移-->
    </style>

      android:backgroundTint  应用于background 的色彩。而background是一个可绘制的背景,可以是一个完全可绘制资源的引用(例如图片、可调整大小位图9-patch、XML状态列表描述、etc),或者是纯色如黑色。backgroundTint只能用颜色,而background有引用、图片和颜色。如果你只是要给背景上纯色的话,建议用backgroundTint,如果你要用背景图片的话,就用background,可以分别提高对应的执行效率!

android:backgroundTint="#afbfff"

      android:backgroundTindMode 当我们既设置了 android:background 又设置了 android:backgroundTint 时,那么就会将 android:backgroundTint 设置的颜色与背景进行一个叠加,叠加的常用模式如下:

    1. PorterDuff.Mode.SRC_OVER 正常绘制显示,上下层绘制叠盖。

    2. PorterDuff.Mode.SRC_IN 取两层绘制交集。显示上层

    3. PorterDuff.Mode.SRC_ATOP 取下层非交集部分与上层交集部分

    4. PorterDuff.Mode.SCREEN 取两图层全部区域,交集部分变为透明色

android:backgroundTintMode="src_over"

Toolbar 加上 menu

        如下图,当我们设置完 toolbar 时,并没有右侧的 menu ?

android toolbar,# Material Design,android

        我们可以给 Toolbar 加上右侧的 menu (那三个"..."),在 toolbar 所在的 activity 中重写 onCreateOptionMenu() 方法即可实现。

/**
     * menu 与 toolbar 绑定
     */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.toolbar, menu);
        // TODO 拿到 toolbar 里的 item
        MenuItem searchItem = menu.findItem(R.id.action_search);
        SearchView searchView = (SearchView) searchItem.getActionView();

        searchItem.setOnActionExpandListener(new MenuItem.OnActionExpandListener() {
            @Override
            public boolean onMenuItemActionExpand(MenuItem item) {
                return true;
            }

            @Override
            public boolean onMenuItemActionCollapse(MenuItem item) {
                return true;
            }
        });

        return super.onCreateOptionsMenu(menu);
    }

  toolbar.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_favorite"
        android:icon="@drawable/nav_selector"
        android:title="@string/favorite"
        app:showAsAction="never" />

    <!-- Settings, should always be in the overflow -->
    <item
        android:id="@+id/action_settings"
        android:icon="@drawable/ic_baseline_settings_64"
        android:title="@string/settings"
        app:showAsAction="never" />

    <item android:id="@+id/action_search"
        android:title="@string/action_search"
        android:icon="@drawable/ic_baseline_search_64"
        app:showAsAction="ifRoom|collapseActionView"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />


</menu>

 加上 menu 的效果

 android toolbar,# Material Design,android

  给 menu 的 item 设置点击事件,重写 onOptionsItemSelected() 方法。这里简单的进行了一个 Toast 弹窗,你可以进行丰富的其它设置。

/**
     *  menu 里 item 点击事件监听
     * @param item menu 里的 菜单
     * @return
     */
    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_settings:
                Toast.makeText(MainActivity.this, R.string.settings, Toast.LENGTH_SHORT).show();
                return true;
            case R.id.action_favorite:
                Toast.makeText(MainActivity.this, R.string.favorite, Toast.LENGTH_SHORT).show();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }

 Toolbar 设置 Theme

        细心的朋友可以发现,上面 toolbar 与我们开始演示的 UI 还是有些区别,比如正副标题的颜色,menu 是横着的且是绿色的等。这时我们可以通过给 Toolbar 设置 Theme 来完成。

        可以通过 textColorPrimary 来设置正标题字体颜色,textColorSecond 设置副标题字体颜色,同时必须实现 windowActionBar 和 windowNoTitle 。

<!--    使用ToolBar, 在 AndroidManifest 里的activity添加该 theme-->
    <style name="ToolBarAppTheme" parent="MaterialAppTheme">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <!-- 修改右侧溢出菜单,副标题,navigation 的颜色-->
        <item name="android:textColorSecondary">@color/purple_500</item>
        <!-- 不能在这里修改弹出框的右边距-->
        <!--        <item name="android:paddingEnd">-5dp</item>-->
        <!-- 设置文字颜色的-->
        <item name="android:textColorPrimary">@color/Green700</item>
        <!-- 设置文字大小的-->
        <item name="android:textSize">16sp</item>
        <!-- 注意设置的位置  -->
        <item name="actionOverflowButtonStyle">@style/OverflowTheme</item>
        <item name="toolbarStyle">@style/NoSpaceActionBarTheme</item>
    </style>

actionOverflowButtonStyle 可以用来设置 menu 的样式,让右上角的 ”...“ 横着显示,且设置它的颜色,OverflowTheme 内容如下:

    <style name="OverflowTheme" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
    <item name="android:src">@drawable/ic_tool_more_horiz_24</item>
    <item name="android:paddingStart">12dp</item>
    <item name="android:paddingEnd">12dp</item>

最后完成上面的 Theme 设置,那么我们要在哪里用 ToolBarAppTheme 呢?答案是 AndroidMnifest 里,加在 Toolbar 所在 activity 上。这样就可以显示我们想要的效果了。

android toolbar,# Material Design,android

注意:对于主题 Theme ,一般是 app --> Activity --> 控件,且后面的 theme 可以覆盖前面的。

完整 Demo

链接:https://pan.baidu.com/s/1nlTax1GFXXR2q_khFz2Wew 
提取码:2tb5文章来源地址https://www.toymoban.com/news/detail-622193.html

到了这里,关于Android---Toolbar的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android---Toolbar

         目录 Toolbar Toolbar 加上 menu  Toolbar 设置 Theme 完整 Demo         Toolbar 是在 Android 5.0 开始推出的一个 Materal Design 风格的导航控件 ,Google 非常推荐大家使用 Toobar 来作为 Android 客户端的导航栏,以此来取代之前的 Actionbar。与 Actionbar 相比,Toolbar 明显要灵活的多。它不

    2024年02月14日
    浏览(38)
  • Android工具栏ToolBar

    主流APP除了底部有一排标签栏外,通常顶部还有一排导航栏。在Android5.0之前,这个顶部导航栏以ActionBar控件的形式出现,但AcionBar存在不灵活、难以扩展等毛病,所以Android5.0之后推出了 ToolBar工具栏 控件,意在取代AcionBar。 但为了兼容之前的版本,ActionBar按件仍然保留。 T

    2024年02月05日
    浏览(52)
  • Android App开发 Toolbar和侧边导航栏

    这是App开发的第二篇文章,讲Toolbar和侧边导航栏。废话不多说,我们开始。 开始阅读之前,建议先跳到文末,下载完整源码,看一下整个项目的结构,然后再阅读文章,这样更好理解,最好的方法是,边阅读,边在源码中对应找到修改的位置。 OK,首先,先说下概念,侧边

    2024年01月22日
    浏览(36)
  • 『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

    👨‍🎓作者简介:一位喜欢写作,计科专业大三菜鸟 🏡个人主页:starry陆离 如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦 为什么默认的Android应用跑出来都是紫色的主题? 可在看到原来默认给我们设置了主题的颜色 Material Theme 可以定义为以下 3 种 Theme.Material(深

    2024年02月03日
    浏览(44)
  • Android中实现Material3主题

    Material 3是由Google引入的一种设计系统,通过采用一套设计原则、指南和组件,提供统一直观的用户体验。 在本篇文章中,您将学习如何: 在您的Android应用程序中应用Material 3主题。 如何使用Material 3属性应用于您的视图。 如何应用动态着色。 首先需要引入material组件以来:

    2024年01月17日
    浏览(35)
  • com.google.android.material.tabs.TabLayout

        ViewPagerScrollAdapter 

    2024年02月21日
    浏览(51)
  • Android Material组件库(日期选择和时间选择器)基本使用

    原文:Android Material组件库(日期选择和时间选择器)基本使用 - Stars-One的杂货小窝 简单的封装下Material组件里的日期选择器和时间选择器的使用方法 需要添加Material组件库的依赖(不过后面新版本Android Studio创建的新项目都会有此依赖了...)

    2024年02月05日
    浏览(71)
  • WPF Material Design 初次使用

    MD全称MaterialDesignInXamlToolkit,MaterialDesign和Bootstrap一样,都是一个UI风格库。相当于衣服中的休闲服,汉服,牛仔裤一样,就是风格不一样的Ui框架 Github 地址 MD 实例资源下载地址 如果是普通的WPF程序,在App.xaml里面进行如下设置 打开示例Demo MainWindow.xaml代码如下 说明导入成功

    2024年02月10日
    浏览(45)
  • Jetpack Compose 第 3 课:Material Design

    点击查看:Jetpack Compose 教程 点击查看:Composetutorial 代码 简介 Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API,可以帮助您简化并加快 Android 界面开发。 在本教程中,您将使用声明性的函数构建一个简单的界面组件。您

    2024年02月19日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包