Meterial Design 常见控件的使用（五），移动端 h5 开发框架

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.arno.aboutmaterialdesign.appbarlayout.AppBarLayoutActivity">

<android.support.design.widget.AppBarLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<android.support.v7.widget.Toolbar

android:id="@+id/include_appbarlayout_toolbarId"

android:layout_width="match_parent"

android:layout_height="200dp"

app:layout_scrollFlags="scroll" ------------------ 在这里更改 ScrollFlag

app:title="Toolbar title"

app:titleTextColor="#ffffff"

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

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

<android.support.v4.widget.NestedScrollView

app:layout_behavior="@string/appbar_scrolling_view_behavior"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/text_textview_content"

android:textSize="20sp"

/>

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

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

1.简单滚动 scroll

2.快速下拉滚动 scroll | enterAlways

3.有限度的下拉滚动：scroll | enterAlways | enterAlwaysCollapsed

4.有限度的上拉滚动：scroll | exitUntilCollapsed

5.有弹性的滚动：scroll | snap

三、根据 AppBarLayout 滑动位置改变视图

根据多天的浏览情况，凡是讲到 Toolbar、AppBarLayout 等等控件的时候，基本都是浅尝即止，测试了几个基本的属性就结束了。但是往往真正应用的时候，仅仅知道上面的效果是不够用的。后面我又进行了组合测试，但是效果并不理想。

这里是最终实现的简单效果：

上面演示的是根据 AppLayout 的滚动实现对于 TextView 位置的变化和 ImageView 透明度的改变。类似的效果在许多 app 上都能看到，这里简单写一下代码、遇到的问题和没有解决的问题。

1.监听获取 AppBarLayout 的滚动位置

可以从源码中发现， AppBarLayout 中有下面的监听接口：

AppBarLayout.OnOffsetChangedListener

我们可以通过 addOnOffsetChangedListener 方法添加监听。

2.动画效果

为了让动画效果实现得更容易一些，我把整个 AppBarLayout 的高度设定为固

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

定值，相关数值如下：

布局数值.png

附上布局代码：

<android.support.design.widget.CoordinatorLayout>

<android.support.design.widget.AppBarLayout

android:orientation="vertical">

<FrameLayout

android:layout_height="200dp"

app:layout_scrollFlags="scroll">

<ImageView

app:layout_anchorGravity="bottom|center_horizontal"

app:layout_anchor="@id/activity_app_bar_layout_bg_container"/>

</FrameLayout>

<RelativeLayout

android:layout_height="60dp"

app:layout_scrollFlags="scroll|enterAlways">

<TextView/>

<ImageView>

</RelativeLayout>

<android.support.design.widget.TabLayout

android:layout_height="?attr/actionBarSize">

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

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

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

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

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

<android.support.v4.widget.NestedScrollView

app:layout_behavior="@string/appbar_scrolling_view_behavior">

<TextView/>

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

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

从上面我们可以知道，整个滑动过程，有三个关键临界点： -100dp 、 -200dp 和 -260dp。现在我按照滚过临界点时的滑动方向分为三种情况：

• -100dp && SCROLL_UP ==> 此时让大图标消失，小图标出现

• -100dp && SCROLL_DOWN ==> 此时让大图标出现，小图标消失

• -200dp && SCROLL_DOWN ==>此时根据 verticalOffset 改变 TextView 的位置

下面附上监听部分的代码：

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_app_bar_layout_test);

//...

mAppBarLayout = ((AppBarLayout) findViewById(R.id.activity_app_bar_layout));