Toolbar基本使用

最新推荐文章于 2023-12-12 16:36:38 发布

gonghao2014

最新推荐文章于 2023-12-12 16:36:38 发布

阅读量468

点赞数 1

分类专栏： Android开发相关问题记录文章标签： android toolbar的使用

本文链接：https://blog.csdn.net/GongHao2014/article/details/70770498

版权

Android开发相关同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

问题记录

6 篇文章 0 订阅

订阅专栏

本节按照 Android官方文档 给出的简介，介绍Toolbar的基本使用。

Toolbar被用于替代ActionBar,因此在使用Toolbar前，我们应该禁用掉 ActionBar. 那么怎么禁用呢？
三种方式：

方式一：在 res/style.xml 中配置 NoActionBar 主题样式 (全局可用)

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

方式二： 自定义NoActionBar主题(配置了Activity Theme属性的可用)

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
</style>
<!-- 自定义NoActionBar主题样式 -->
<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

方式三： 在MainActivity.java中的onCreate(Bundle savedInstanceState)方法中 (当前Activity可用)

注意：下面的这句代码要放在setContentView()方法前面调用

    // 若继承自 AppCompatActivity       
    supportRequestWindowFeature(Window.FEATURE_NO_TITLE);

    // 若继承自 Activity        
    requestWindowFeature(Window.FEATURE_NO_TITLE);

三种方式的比较

方式一：用于全部 Activity 主题

方式二：用于单个 Activity 主题，当使用方式二的时候，需要在 AndroidManifest.xml 中的对应的 activity 节点中设置 theme 属性

    <activity
        android:name=".MainActivity"
        android:theme="@style/AppTheme.NoActionBar">
        ...
    </activity>

方式三：相较于方式二代码量更少

本示例中我们使用 第一种方式，因为Toolbar 用于替代 ActionBar,加上第一种方式操作全局且简单，所以我选择方式一

2. 使用Toolbar

在我们的布局文件 activity_main.xml 中添加 toolbar 节点

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">
    </android.support.v7.widget.Toolbar>

看我们的 PreView 咦？什么都没有，一片白茫茫 ~~

是呢，我们还没有给Toolbar设置需要的属性

加个背景吧，按照 Material Design 规范，我们知道，toolbar 的背景色应该是 ?attr/colorPrimary

colorPrimary 的值在 res/colors.xml 中可修改，本示例中我们全部使用默认值

    android:background="?attr/colorPrimary"

哈，是不是看到我们的Toolbar了！！

那么接下来就是 重点来啦…

A. 启用Toolbar （使Toolbar有效）

设置Toolbar有效，才能保证我们像使用ActionBar一样，使用Toolbar

看官方解释：An application may choose to designate a Toolbar as the action bar for an Activity using the setSupportActionBar() method.

在 MainActivity.java 文件中的 onCreate(Bundle savedInstanceState)

    ToolBar toolbar = ...;
    setSupportActionBar(toolbar);

好吧，完事，我们可以用对 Toolbar 为所欲为了 ~~
根据 Toolbar的文档，我们按照从左到右的顺序，介绍 Toolbar 中的 可选元素

两种常见的导航按钮： Up Arrow 和 Navigation Menu

来张图片看下…

不管什么类型，它都是导航按钮，那么在我们的代码中怎么使用呢?

    app:navigationIcon="@drawable/ic_arrow_back"

嘿，运行下，看见你可爱的导航图标没？单有躯体是不行的，要有灵魂才行，给导航图标添加个点击事件吧！

这里有两种方式

方式一： toolbar.setNavigationOnClickListener（View.OnClickListener)

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        ...
    }
});

方式二： 重写 onOptionsItemSelected(MenuItem item)

// 这种方式，是把Navigation当成ActionMenu,使用ActionMenu的方式
// 其中这个Menu(即：Navigation)的 id 是 android.R.id.home
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    switch (id) {
        case android.R.id.home:
            ...
            break;
    }
    return true;
}

两种方式，我更喜欢第一种，所以本示例我选择第一种方式

题外话：导航图标，我说的是图片资源哈，Android为我们提供了很多，本例中我是这样获取图片的…

drawable文件夹 -> 右键 -> new -> Vector Asset -> 双击Icon图标 -> 选个合适的图标.. -> 后面的步骤你们懂得…

B. 可选元素二： A Branded Logo Image（商标Logo）

    app:logo="@mipmap/ic_logo"

C. 可选元素三： A Title and Subtitle（标题、副标题）

    app:title="标题"
    app:subtitle="副标题"

D. 可选元素四： One or More Custom Views（一个或多个其他定制的视图）

Toolbar 继承自 ViewGroup,因此 Toolbar 可以和 ViewGroup 一样，添加子元素 ~~

文档中这样写道：
If a child view’s Toolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.

简单点说就是，可以设置layout_gravity=”center_horizontal”使子视图居中，效果比如 QQ 消息页面的顶部的消息|电话那个效果

如网易云音乐界面，黄色框标记的位置，我们可以通过自定义View的方式去创建一个View,放置在 Toolbar 中，并设置其位置居中

本次只简单的介绍Toolbar的基本使用，后面会写一篇文章结合CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar、NestedScrollView 完成一个酷酷的 小Demo

那这个 Custom View 我们就放置一个可爱的 Button 吧，把 Button 换成我们 自定义View ，就可以完成上面的效果了，使用方式是一样的~

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        ...>
        <!-- 把Button换成我们需要的View即可 -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            .../>
    </android.support.v7.widget.Toolbar>

你的Button还好吧，挺简单的哈！

这个好说，像 Action Bar 一样添加 Menu，具体操作如下：

1. 在 res 文件夹下新建 menu 文件夹
2. 在 res/menu 文件夹下新建 menu resource 文件

    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        <item
        android:id="@+id/action_settings"
        android:icon="@drawable/ic_action_settings"
        android:title="@string/action_settings"/>
    </menu>

3. 在 MainActivity.java 中重写 onCreateOptionsMenu(Menu menu) 方法

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

哈，运行下，toolbar的右侧出现了一个三个小黑点的图标

4. 在 MainActivity.java 中重写 onOptionsItemSelected(MenuItem item) 方法

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        switch (id) {
            case R.id.action_settings:
                ...
                break;
        }
        return true;
    }

嘿，点击三个小黑点，点击设置，是不是有响应了选中事件 ~~