Android Toolbar使用

最新推荐文章于 2023-11-03 17:08:49 发布
最新推荐文章于 2023-11-03 17:08:49 发布
阅读量415 收藏 1
点赞数
分类专栏： android view 文章标签： android toolbar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gary__123456/article/details/77604190
版权

Toolbar是support:design包下的，顾名思义是工具栏。与以前的ActionBar的作用相似，功能却更加强大。

一、Toolbar的简单接入

1.添加依赖

   compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:24.1.1'
    compile 'com.android.support:design:24.1.1'
    compile 'com.android.support:cardview-v7:24.1.1'

2.将MainActivity的主题修改，去掉原来的ActionBar

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

3.MainActivity的布局文件，activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.huang.toolbar.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.v7.widget.Toolbar
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            ></android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

在MainActivity添加以下代码：

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;

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

    private void initView() {
        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        //主标题
        toolbar.setTitle(R.string.app_name);
        //设置颜色
        toolbar.setTitleTextColor(Color.WHITE);
        toolbar.setSubtitle("副标题");
        toolbar.setSubtitleTextColor(Color.WHITE);

        toolbar.setNavigationIcon(R.mipmap.ic_launcher);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showToast("我是左边的菜单");
            }
        });
        //填充菜单
        toolbar.inflateMenu(R.menu.toolbar_menu);
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.menu_main_search:
                        showToast("搜索");
                        break;
                    case R.id.menu_main_refresh:
                        showToast("刷新");
                        break;
                }
                return false;
            }
        });
    }

    private void showToast(String msg) {
        Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
    }}

4、菜单toolbar_menu.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/menu_main_search"
        android:icon="@drawable/ic_search_white_24dp"
        android:title="@string/search"
        app:showAsAction="ifRoom" />


        <item
            android:id="@+id/menu_main_refresh"
            android:icon="@mipmap/ic_launcher"
            android:title="@string/refresh"
            app:showAsAction="never" />

        <item
            android:id="@+id/menu_main_add"
            android:icon="@mipmap/ic_launcher"
            android:title="@string/place"
            app:showAsAction="withText" />

</menu>

效果图：
这里写图片描述

二、实现向下滑动隐藏，向上显示toolbar效果，如：简书的文章页效果

1.首先，为toolbar设置style,ToolBar

  <style name="ToolBar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">?attr/actionBarSize</item>
        <item name="android:background">?attr/colorPrimary</item>
        <!--主题-->
        <item name="android:theme">@style/ThemeOverlay.MaterialSheetFab.ActionBar</item>
        <!--弹出框样式-->
        <item name="popupTheme">@style/ThemeOverlay.MaterialSheetFab.ActionBar.Popup</item>
        <item name="android:elevation" tools:ignore="NewApi">4dp</item>
        <!--设置滑动时toolbar可显示或隐藏，默认为显示-->
        <item name="layout_scrollFlags">scroll|enterAlways</item>
    </style>
    <style name="ThemeOverlay.MaterialSheetFab.ActionBar.Popup" parent="ThemeOverlay.AppCompat.Light" />
    <style name="ThemeOverlay.MaterialSheetFab.ActionBar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <!--默认白色主题-->
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="colorControlNormal">@android:color/white</item>
        <item name="colorControlHighlight">#8fff</item>
    </style>

2.修改布局，activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.huang.toolbar.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"></android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="16dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="CardView"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="fdsafsdafsadfasdfsdafasdfsdafasdfasdfsdafsadfasdfsadfasdf" />

                </LinearLayout>


            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="16dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="CardView"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@drawable/test" />

                </LinearLayout>


            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="16dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="CardView"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@drawable/test" />

                </LinearLayout>


            </android.support.v7.widget.CardView>
        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

3.修改代码：

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;

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

    private void initView() {
        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        //主标题
        toolbar.setTitle(R.string.app_name);
        //设置颜色
        toolbar.setTitleTextColor(Color.WHITE);
        toolbar.setSubtitle("副标题");
        toolbar.setSubtitleTextColor(Color.WHITE);

    }

    private void showToast(String msg) {
        Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
    }

    private void setupActionBar() {
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.toolbar_menu, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
//                toggleDrawer();
                showToast("返回");
                return true;
            case R.id.menu_main_search:
                showToast("搜索");
                return true;
            case R.id.menu_main_add:
                showToast("添加");
                return true;
            case R.id.menu_main_refresh:
                showToast("刷新");
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}

运行效果这里写图片描述

许三多2020
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android Toolbar 使用
01-03
 google 为了统一导航 android3.0 出来了 ActionBar, ActionBar使用比较费劲  JakeWharton ActionBarSherlock 很多人都用这个 后来 android 推出了 android.support.v7.widget.Toolbar  ToolBar功能: 管理标题、...
Android---Toolbar
qq_44950283的博客
01-06 3469
使用 Toolbar 更好的代替 Actionbar。Toolbar 也可以很好的与 menu 结合设计出更炫酷大的UI。特别注意设置 Toolbar 的主题，可以单独设置
Android的ToolBar简单使用
Mr_Tony的专栏
12-11 9479
文章目录一、前言二、Activity、FragmentActivity与ToolsBar的关系三、ToolsBar的初步使用四、ToolBar的菜单配置五、返回时间监听六、自定义ToolBar 一、前言 在实际开发中，通常会有应用操作栏，如果整个应用有一个统一风格的应用状态栏的话，我们常常会自己对其封装一个公共的组件在各个地方进行引入。不过官方对其提供栏一个公共状态栏的组件，并且拥有其一些常用的属性。以前是ActionBar，现在叫做ToolBar。而且还可以和一些其它的组件进行联动。这些组件在不满足其使用
Android初步认识ToolBar
drinkingcode
09-23 567
前言： ToolBar是ActionBar一种延伸的产物。尽管ActionBar是作为Activity不透明窗体装饰的一部分，但是ToolBar却可以放置在一个视图层的任意层中。应用也可以使用setActionBar() 方法指定ToolBar为ActionBar。 ToolBar比ActionBar有着更多值得人们关注的特性。从头到尾，一个ToolBar可能包含以下可选元素的一种组合
【AndroidUI设计】主界面设计-Toolbar的简单使用
守夜人
06-21 1317
需要设计一个主界面，菜单通过左边界划入主布局，实现点击修改主界面内容的一个效果，并且点击非内容区域恢复原界面的一个效果。 关于Toolbar和ActionBar的使用，请参考官方给出的方案。因为最近有点忙，就不进行详细介绍了，直接copy即可。关于菜单内容，我就随便添加了几个按钮和图片，进行修饰一下，如果需要设计的精美可以查看同栏目下的。进行一个个性化的设计。
【android】ToolBar与弹出侧边栏布局和SnackBar&&CoordinatorLayout
qq_38304672的博客
06-07 1973
一:替换ToolBar 一.ToolBar基础替换 先将主题中的ActionBar改为Light.NoActionBar 修改main.xml文件 1）将ToolBar的高度设置为原ActionBar 2）指定背景色 3）由于设置了淡色系主题，ToolBar上的元素会使用深色主题以区分主体，原本白色会变黑色，比较压抑，所以指定单独深色ToolBar，上面的字会继承原Light白色 4）设置弹出的菜单项为Light <androidx.appcompat.widget.Toolbar
Android toolbar 使用详解
08-14
Android toolbar 使用详解，一个不错的学习toolbar的例子，里面包括各种toolbar用法
Android ToolBar使用图标、菜单事件示例
11-10
android下导航栏ToolBar的使用示例，包含添加菜单、菜单事件、Title、图标等功能
android ToolBar的简单使用
08-28
主要为大家详细介绍了android ToolBar的简单使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android自定义Toolbar使用方法详解
08-31
主要为大家详细介绍了Android自定义Toolbar使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android之ToolBar和自定义ToolBar实现沉浸式状态栏
02-15
ToolBar和自定义ToolBar实现沉浸式状态栏 博客地址：http://blog.csdn.net/dickyqie/article/details/55190133
Android Toolbar 示例
12-07
Android Toolbar的示例程序，在Activity的右上添加了几个按钮（查找、分享和设置）。
【Android】原来Toolbar还能这么用？Toolbar使用最全解析。网友：终于不用老是自定义标题栏啦
宾有为的博客
07-11 4438
参考文章：Toolbar的使用
安卓开发之Toolbar
G11176593的博客
10-10 1192
根据官网的教程，发现实现与预期不一致，查看相关资料自己整理了一下（官网开发文档：https://developer.android.com/training/appbar/setting-up.html）Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ，Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏，以此来取代之前的 Actionbar 。与 Actionbar 相比，Toolbar 明显要灵活的多。它不像 A
Android工具栏ToolBar
最新发布
m0_57150356的博客
11-03 1056
主流APP除了底部有一排标签栏外，通常顶部还有一排导航栏。在Android5.0之前，这个顶部导航栏以ActionBar控件的形式出现，但AcionBar存在不灵活、难以扩展等毛病，所以Android5.0之后推出了。都占着顶部导航栏的位置，要想引入ToolBar就得先关闭ActionBar。设置标题的文字风格(外观)。风格定义在styles.xml中。但为了兼容之前的版本，ActionBar按件仍然保留。设置副标题的文字风格(外观)。设置导航图标的点击监听器。设置副标题的文字颜色。设置标题的文字颜色。
Android ToolBar详解
默小铭的博客
12-06 2997
导读 Toolbar是android L引入的一个新控件,继承于ViewGroup，用于取代ActionBar，它提供了ActionBar类似的功能，但是更灵活 ToolBar不像ActionBar那么固定，Toolbar更像是一般的View元素，可以被放置在view树体系的任意位置，可以应用动画，可以跟着ScrollView滚动，可以与布局中的其他View交互 当然，你还可以用Toolbar替换掉
Android App开发 Toolbar和侧边导航栏
weixin_43522377的博客
07-17 2283
Android app 开发 侧边导航栏 、 toolbar的基础入门使用
Android学习之路(11) ActionBar与ToolBar的使用
qq_32907491的博客
08-27 1480
那找找为啥ActionBar的时候对的，直觉告诉我是theme的问题，于是找Theme.AppCompat.Light.DarkActionBar，点击进去看会看到actionBarPopupThem是Light的，就是menu菜单点击弹出那个actionBarTheme是深色系的，那么控制按钮图标和主副标题颜色就是白色的
Android ToolBar使用详解（手把手教你撸代码）
LazyDer_Pig的博客
03-24 6685
前言 这几天因为偶然看到关于Android 11分区存储的变更，然后博客就耽误了，以前关于toolbar了解过但是没有上手过，因为没有负责到那一块，今天我们来手撸一下关于toolbar的代码以及我遇到的问题，我会给大家一一写清楚，我写的文章是不存在错误或者看不懂的地方，或许有人抬杠，“那么骄傲”？为什么我会说出这句话因为我写的文章都是我自己项目中运用到了，然后遇到了问题，我去解决，进行反复测试，才整理成文章发表出来，而且我发表的文章都不是什么特别深，都是一样可以看明白那种，因为我没有忘记我的初衷，我写文章就
android 中关于toolbar的使用
07-13
要在Android中使用Toolbar，首先要确保你的项目已经添加了AppCompat库的依赖。然后，你可以按照以下步骤进行操作： 1. 在XML布局文件中添加Toolbar视图： ```xml <androidx.appcompat.widget.Toolbar android:id=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值