Toolbar使用教程

简介

Toolbar 为 Android3.0之后,用于替代 ActionBar 的新一代标题栏.其优势在于易于使用,功能强大,可定制性以及其舒适的交互效果.

基础

<android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/mainColor"
            app:layout_scrollFlags="scroll|enterAlways"
            app:logo="@mipmap/ic_launcher"
            app:navigationIcon="@android:drawable/ic_menu_close_clear_cancel"
            app:subtitle="副标题"
            app:subtitleTextColor="@color/white"
            app:title="标题"
            app:titleTextColor="@color/white" />

toolbarpng.png

属性XMLJAVA
标题app:titlesetTitle(title)
标题颜色app:titleTextColorsetTitleTextColor(color)
标题边距app:titleMarginsetTitleMargin(start, top, end, bottom)
标题字体app:titleTextAppearancesetTitleTextAppearance(context, style)
副标题app:subtitlesetSubtitle(subtitle)
副标题颜色app:subtitleTextColorsetSubtitleTextColor(color)
副标题字体app:subtitleTextAppearancesetSubtitleTextAppearance(context, style)
Logoapp:logosetLogo(logo)
左侧图标app:navigationIconsetNavigationIcon(icon)

扩展

增加右侧 menu

menu.png

// 将menu填充进toolbar,会根据menu配置自动选择显示位置
inflateMenu(R.menu.home);

// 设置menu的item点击事件
setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
       public boolean onMenuItemClick(MenuItem item) {         
            return false;
        }
    });

联合滑动效果

条件: Toolbar外层父布局必须使用 AppBarLayout;最外层父布局必须为 CoordinatorLayout;


<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@color/colorAccent"
            app:layout_scrollFlags="scroll"
            app:popupTheme="@style/ToolbarPopupTheme">

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

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/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">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:text="@string/large_text" />

        </LinearLayout>


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


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

使用 :

  1. 为 Toolbar 添加 app:layout_scrollFlags 属性
  2. 为联动布局添加 app:layout_behavior="@string/appbar_scrolling_view_behavior"

根据 app:layout_scrollFlags 的值可产生不同效果.

scroll
上划距离超过高度时会隐藏,向下滑动到顶后会重新展示

scroll|enterAlways
上划时隐藏,下滑时展示

scroll|enterAlways|enterAlwaysCollapsed
效果为上两种效果的结合,可以为toolbar设置最小高度,到顶时展示全部高度,其他情况只会展示最小高度

scroll|exitUntilCollapsed
效果为第一种的扩展,但是无法完全隐藏,会留有最小高度的区域

scroll|snap
snap为回弹属性,高度大于一半会回弹展开,低于一半会回弹消失

Last modification:August 29th, 2019 at 04:34 pm
如果觉得我的文章对你有用,请我喝杯咖啡

Leave a Comment