Android中ToolBar&AppbarLayout的基本使用

1,176 阅读5分钟

Toolbar

toolbar使用来替代ActionBar的,更灵活,也更符合md设计规范.

如何使用?

  1. 替换主题为NoActionBar系列

  2. xml中加入toolbar控件

  3. activity中使用 setSupportActionBar(toolbar);替换ActionBar

  4. 设置相应属性咋可使用 getSupportActionBar()来获取ActionBar实例

  5. 设置toolBar上的menu需要在res文件夹下新建menu文件夹,新建相应的menu资源文件,插入相应的item项,指定id、icon(显示的图标)、title(显示的文字)、showAsAction(item位置,要用app做命名空间,保证向下兼容),可接受的值有:

    • always:使菜单项一直显示在ToolBar上

    • ifRoom:如果有足够的空间,这个值会使菜单项显示在ToolBar上

    • never:使菜单项永远都不出现在ToolBar上,在…的子项中显示

    • withText:使菜单项和它的图标,菜单文本一起显示

  6. 重写 onCreateOptionsMenu() 在其中加入 getMenuInflater().inflate(R.menu.menu_home, menu);来引入menu资源

  7. 重写onOptionsItemSelected()来处理item点击事件

自定义toolbar菜单样式

<style name="ToolbarTheme" parent="Theme.AppCompat.Light">
        <!-- 更换Toolbar OVerFlow menu icon -->s
      <item name="actionOverflowButtonStyle">@style/OverFlowIcon</item>
        <!-- 设置 toolbar 溢出菜单的文字的颜色 -->
      <item name="android:textColor">@android:color/holo_red_dark</item>
        <!-- 设置 显示在toobar上菜单文字的颜色 -->
      <item name="actionMenuTextColor">@android:color/white</item>
        <!-- 设置toolbar 弹出菜单的字体大小和溢出菜单文字大小-->
      <item name="android:textSize">15sp</item>
    </style>
<android.support.v7.widget.Toolbar
      android:id="@+id/tool_bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/colorPrimary"
      toolbar:navigationIcon="@mipmap/navigation_back_white"
      toolbar:title="@string/toolbar_title"
      toolbar:titleTextColor="@color/white"
      android:theme="@style/ToolbarTheme"
      >

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

CoordinatorLayout

这个可以说是重中之重,可以协调子View,而这些子View 的具体响应动作是通过 behavior来指定的。可以结合AppbarLayoutCollapsingToolbarLayout等一起使用,常见于各种首页、详情页,也可以通过自定义Behavior来定制想要的动作,灵活好用。

AppbarLayout

AppbarLayout继承自LinearLayout,它就是一个垂直方向的LinearLayout,在LinearLayout的基础上添加了一些材料设计的概念和特性,即滑动手势。它可以让你定制在某个可滑动的View(如:ScrollView ,ListView ,RecyclerView 等)滑动手势发生改变时,内部的子View 该做什么动作。子View应该提供滑动时他们期望的响应的动作Behavior,通过setScrollFlags(int),或者xml 中使用属性: app:layout_scrollFlags

注意:AppbarLayout 严重依赖于CoordinatorLayout,必须用于CoordinatorLayout 的直接子View,如果你将AppbarLayout 放在其他的ViewGroup 里面,那么它的这些功能是无效的。

AppbarLayout 子View 的几种动作

  1. scroll View将会随着可滚动View(如:ScrollView,以下都会用ScrollView 来代替可滚动的View )一起滚动,就好像子View 是属于ScrollView的一部分一样。

  2. enterAlways 当ScrollView 向下滑动时,子View 将直接向下滑动,而不管ScrollView 是否在滑动。注意:要与scroll 搭配使用,否者是不能滑动的。

  3. enterAlwaysCollapsed enterAlwaysCollapsed 是对enterAlways 的补充,当ScrollView 向下滑动的时候,滑动View(也就是设置了enterAlwaysCollapsed 的View)下滑至折叠的高度,当ScrollView 到达滑动范围的结束值的时候,滑动View剩下的部分开始滑动。这个折叠的高度是通过View的minimum height (最小高度)指定的。

  4. exitUntilCollapsed 当ScrollView 滑出屏幕时(也就时向上滑动时),滑动View先响应滑动事件,滑动至折叠高度,也就是通过minimum height 设置的最小高度后,就固定不动了,再把滑动事件交给 scrollview 继续滑动。

  5. snap在滚动结束后,如果view只是部分可见,它将滑动到最近的边界。比如,如果view的底部只有25%可见,它将滚动离开屏幕,而如果底部有75%可见,它将滚动到完全显示。

CollapsingToolbarLayout

CollapsingToolbarLayout 是对Toolbar的包装并且实现了折叠app bar效果,使用时,要作为 AppbarLayout 的直接子View。 CollapsingToolbarLayout有以下特性:

  1. Collapsing title(折叠标题) 当布局全部可见的时候,title 是最大的,当布局开始滑出屏幕,title 将变得越来越小,你可以通过setTitle(CharSequence) 来设置要显示的标题。

    注意:Toolbar 和CollapsingToolbarLayout 同时设置了title时,不会显示Toolbartitle而是显示CollapsingToolbarLayout 的title,如果要显示Toolbar 的title,你可一在代码中添加如下代码:

    collapsingToolbarLayout.setTitle("");

  2. Content scrim(内容纱布) 当CollapsingToolbarLayout滑动到一个确定的阀值时将显示或者隐藏内容纱布,可以通过setContentScrim(Drawable)来设置纱布的图片。

  3. Status bar scrim(状态栏纱布) 当CollapsingToolbarLayout滑动到一个确定的阀值时,状态栏显示或隐藏纱布,你可以通过setStatusBarScrim(Drawable)来设置纱布图片。

  4. Parallax scrolling children(有视差地滚动子View) 让CollapsingToolbarLayout 的子View 可以有视差的滚动,需要在xml中用 添加如下代码:app:layout_collapseMode="parallax"

  5. **Pinned position children(固定子View的位置)**子View可以固定在全局空间内,这对于实现了折叠并且允许通过滚动布局来固定Toolbar 这种情况非常有用。在xml 中将collapseMode设为pin,代码如下:app:layout_collapseMode="pin"

总结

总的来说,CoordinatorLayout 是协调子View的,通过Behavior指定子View动作。AppbarLayout就是一个竖直方向的LinearLayout,只不过它添加了一些材料的概念和特性,可以定制子View的滑动。CollapsingToolbarLayout 是对Toolbar 的包装,它有5个特性,Collapsing title、Content scrim、Status bar scrim、Parallax scrolling children、Pinned position children。这个三个View配合使用,可以做出一些很炫酷的UI效果。需要注意的是:AppbarLayout 要作为CoordinatorLayout 的直接子View使用,而CollapsingToolbarLayout 要作为AppbarLayout 的直接子View 使用,否则,上面将的特性是没有效果的。