使用AppBarLayout实现炫酷的顶部栏

   最近一两周一直在研究2005在Gool IO上面提出的Android design support  library里面的新的控件。AppBarLayout,Coordinatorlayout,以及CollapsingToolbarLayout的综合使用,实现炫酷的顶部栏,当recycleview向下滑动的时候实现toolbar保持不变,头部背景图片有视差的向下滑动,CollapsingToolbarLayou会对title进行放大和缩小。之前实现这个功能的时候对控件用了好多的动画效果和测量高度来进行编写,但是大大的降低了代码的耦合度。所以Android design support library中提出的控件很好的解决了这样的问题。
    先简单说一下这些的特征:Toolbar类似于ActionBar AppBarLayou继承自Linearlayout  垂直方向,可以指定Toolbar执行哪些动作CollapsingToolbarLayout用来对Toolbar进行再次包装的ViewGroup,主要是用于实现折叠(其实就是看起来像伸缩~)的App Bar效果。CoordinatorLayout继承于FrameLayout 会有两个view和一个behavior作用根据我们自定义的behavior协调两view之间的关系。

下面先一个一个的说一下新的控件的用法和作用。

ToolBar的使用

  Toolbar  作用类似于ActionBar 都是标题栏。主要是用来替换ActionBar的,换句话说,ActionBar能做的,Toolbar都能做但是两者的不同就是ActionBar位置只能是在界面的顶部,而 ToolBar可以随意改变位置。Toolbar相对于ActionBar设置要简单点。使用ToolBar之前先隐藏ActionBar。

 隐藏ActionBar有多种方法
  1  在styles.xml文件的AppTheme标签中加入如下两句话
 <item name="windowActionBar">false</item>
   <item name="windowNoTitle">true</item>
 2 可以新建一个style标签讲第一种方法的代码写进去,然后在application中引用这个新的style
 3  将styles.xml的AppTheme标签的parent标签设置成Theme.AppCompat.Light.NoActionBar   三种方法可以任意选择但是第三种最为简单点。

接下来将ToolBar放在布局文件中 
 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:background="?attr/colorPrimary"
        android:layout_height="?android:attr/actionBarSize"  />

在MainActivity中:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("这里是Title");
        toolbar.setSubtitle("这里是子标题");
        toolbar.setLogo(R.drawable.icon); 
        setSupportActionBar(toolbar);

AppBarlayout的使用

 AppBarLayout继承自LinearLayout,布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料设计的概念,它可以让你定制当某个可滚动View的滚动手势发生变化时,其内部的子View实现何种动作。

AppBarlayout内部的子view通过在布局中加app:layout_scrollFlags设置执行的动作。

  1. 值设为scroll的View会跟随滚动事件一起发生移动
  2. 值设为enterAlways的View,当ScrollView往下滚动时,该View会直接往下滚动。而不用考虑ScrollView是否在滚动。
  3. 值设为exitUntilCollapsed的View,当这个View要往上逐渐“消逝”时,会一直往上滑动,直到剩下的的高度达到它的最小高度后,再响应ScrollView的内部滑动事件。

CollapsingToolbarLayout的使用

CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup,主要是用于实现折叠(其实就是看起来像伸缩~)的App Bar效果。它需要放在AppBarLayout布局里面,并且作为AppBarLayout的直接子View

了解了上面的基础概念来看一个布局,能想象出炫酷的布局吗?

<?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"
    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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="wrap_content"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@drawable/material_img"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                app:layout_collapseMode="pin" />

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

    <android.support.v4.widget.NestedScrollView

        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/my_txt"
            android:textSize="20sp" />

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

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

android.support.v4.widget.NestedScrollView继承的是FrameLayout,但是它实现的效果把它可以看成是ScrollView。里面封装对Scrollview的Behavior。其中有一个属性app:layout_behavior="@string/appbar_scrolling_view_behavior",它就是指定Behavior的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值