Android5.0推出的MaterialDesign库包含了处理头部工具栏的多个控件，不但允许自定义顶部导航栏，而且导航栏高度是可以伸缩的。如此一来，一方面导航栏能够放得下更多控件，另一方面在用户想看具体内容时也能腾出更多的屏幕空间。

这么说可能比较抽象，那就先来看看两张导航栏的效果图，第一张是导航栏完全展开时的界面，此时页面头部的导航栏占据了较大部分的高度；

第二张是导航栏完全收缩时的界面，此时头部导航栏只剩矮矮的一个长条。

看起来很眼熟是不是，上面的截图正是仿支付宝首页的头部效果。如果你熟悉AppBarLayout和CollapsingToolbarLayout的话，也许可以很快做出类似以上的简单界面，具体地说，就是定义一个CoordinatorLayout嵌套AppBarLayout再嵌套CollapsingToolbarLayout再嵌套Toolbar的布局。之所以要嵌套这么多层，是因为要完成以下功能：

1、CoordinatorLayout嵌套AppBarLayout，这是为了让头部导航栏能够跟随内容视图下拉而展开，跟随内容视图上拉而收缩。这个内容视图可以是RecyclerView，也可以是NestedScrollView；

2、AppBarLayout嵌套CollapsingToolbarLayout，这是为了定义导航栏下面需要展开和收缩的部分视图；

3、CollapsingToolbarLayout嵌套Toolbar，这是为了定义导航栏上方无论何时都要显示的长条区域，其中Toolbar还要定义两个不同的样式布局，用于分别显示展开与收缩状态时的工具栏界面。

下面是基于以上思路实现的布局文件代码：

<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:fitsSystemWindows="true" > 
  <android.support.design.widget.AppBarLayout 
    android:id="@+id/abl_bar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:fitsSystemWindows="true" > 
    <android.support.design.widget.CollapsingToolbarLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" 
      app:contentScrim="@color/blue_dark" > 
      <include 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginTop="@dimen/toolbar_height" 
        app:layout_collapseMode="parallax" 
        app:layout_collapseParallaxMultiplier="0.7" 
        layout="@layout/life_pay" /> 
      <android.support.v7.widget.Toolbar 
        android:layout_width="match_parent" 
        android:layout_height="@dimen/toolbar_height" 
        app:layout_collapseMode="pin" 
        app:contentInsetLeft="0dp" 
        app:contentInsetStart="0dp" > 
        <include 
          android:id="@+id/tl_expand" 
          android:layout_width="match_parent" 
          android:layout_height="match_parent" 
          layout="@layout/toolbar_expand" /> 
        <include 
          android:id="@+id/tl_collapse" 
          android:layout_width="match_parent" 
          android:layout_height="match_parent" 
          layout="@layout/toolbar_collapse" 
          android:visibility="gone" /> 
      </android.support.v7.widget.Toolbar> 
    </android.support.design.widget.CollapsingToolbarLayout> 
  </android.support.design.widget.AppBarLayout> 
  <android.support.v7.widget.RecyclerView 
    android:id="@+id/rv_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_marginTop="10dp" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 
</android.support.design.widget.CoordinatorLayout> 

然而仅仅实现上述布局并非万事大吉，支付宝首页的头部在伸缩时可是有动画效果的，就像下面这个动图那样有淡入淡出的渐变动画：

这个渐变动画其实可分为两段：

1、导航栏从展开状态向上收缩时，头部的各控件要慢慢向背景色过渡，也就是淡入效果；

2、导航栏向上收缩到一半，顶部的工具栏要换成收缩状态下的工具栏布局，并且随着导航栏继续向上收缩，新工具栏上的各控件也要慢慢变得清晰起来，也就是淡出效果。

如果导航栏是从收缩状态向下展开，则此时相应的做上述渐变动画的取反效果，即：

1、导航栏从收缩状态向下展开时，头部的各控件要慢慢向背景色过渡，也就是淡入效果；同时展开导航栏的下部分布局，并且该布局上的各控件渐渐变得清晰；

2、导航栏向下展开到一半，顶部的工具栏要换成展开状态下的工具栏布局，并且随着导航栏继续向下展开，新工具栏上的各控件也要慢慢变得清晰起来，也就是淡出效果。

看起来还比较复杂，如果只对某个控件做渐变动画还好，可是导航栏上的控件有好几个，而且并不固定常常会增加和修改。倘若要对导航栏上的各控件逐一动画过去，不但费力气，而且后期也不好维护。为了解决这个问题，我们可以采取类似遮罩的做法，即一开始先给导航栏罩上一层透明的视图，此时导航栏的画面就完全显示；然后随着导航栏的移动距离，计算当前位置下的遮罩透明度，比如该遮罩变得越来越不透明，看起来导航栏就像蒙上了一层面纱，蒙到最后就看不见了。反过来，也可以一开始给导航栏罩上一层不透明的视图，此时导航栏的控件是看不见的，然后随着距离的变化，遮罩变得越来越不透明，导航栏也会跟着变得越来越清晰了。

渐变动画的思路有了，可谓万事俱备，只欠东风，再来一个导航栏的移动偏移监听器便行，正好有个现成的AppBarLayout.OnOffsetChangedListener，只需给AppBarLayout对象调用addOnOffsetChangedListener方法，即可实现给导航栏注册偏移监听器的功能。接下来的事还是直接看看具体的实现代码吧：

public class AlipayActivity extends AppCompatActivity implements OnOffsetChangedListener { 
  private final static String TAG = "AlipayActivity"; 
  private AppBarLayout abl_bar; 
  private View tl_expand, tl_collapse; 
  private View v_expand_mask, v_collapse_mask, v_pay_mask; 
  private int mMaskColor; 
  private RecyclerView rv_content; 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_alipay); 
    mMaskColor = getResources().getColor(R.color.blue_dark); 
    rv_content = (RecyclerView) findViewById(R.id.rv_content); 
    rv_content.setLayoutManager(new GridLayoutManager(this, 4)); 
    rv_content.setAdapter(new LifeAdapter(this, LifeItem.getDefault())); 
    abl_bar = (AppBarLayout) findViewById(R.id.abl_bar); 
    tl_expand = (View) findViewById(R.id.tl_expand); 
    tl_collapse = (View) findViewById(R.id.tl_collapse); 
    v_expand_mask = (View) findViewById(R.id.v_expand_mask); 
    v_collapse_mask = (View) findViewById(R.id.v_collapse_mask); 
    v_pay_mask = (View) findViewById(R.id.v_pay_mask); 
    abl_bar.addOnOffsetChangedListener(this); 
  } 
  @Override 
  public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 
    Log.d(TAG, "verticalOffset="+verticalOffset); 
    int offset = Math.abs(verticalOffset); 
    int total = appBarLayout.getTotalScrollRange(); 
    int alphaIn = offset; 
    int alphaOut = (200-offset)<0?0:200-offset; 
    int maskColorIn = Color.argb(alphaIn, Color.red(mMaskColor), 
        Color.green(mMaskColor), Color.blue(mMaskColor)); 
    int maskColorInDouble = Color.argb(alphaIn*2, Color.red(mMaskColor), 
        Color.green(mMaskColor), Color.blue(mMaskColor)); 
    int maskColorOut = Color.argb(alphaOut*2, Color.red(mMaskColor), 
        Color.green(mMaskColor), Color.blue(mMaskColor)); 
    if (offset <= total / 2) { 
      tl_expand.setVisibility(View.VISIBLE); 
      tl_collapse.setVisibility(View.GONE); 
      v_expand_mask.setBackgroundColor(maskColorInDouble); 
    } else { 
      tl_expand.setVisibility(View.GONE); 
      tl_collapse.setVisibility(View.VISIBLE); 
      v_collapse_mask.setBackgroundColor(maskColorOut); 
    } 
    v_pay_mask.setBackgroundColor(maskColorIn); 
  } 
} 

以上所述是小编给大家介绍的Android仿支付宝的头部伸缩动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# android  # 支付宝头部伸缩动画  # 伸缩动画  # Android实现微信支付功能  # 微信支付仅能成功调用一次问题的解决方法（Android）  # Android仿支付宝支付从底部弹窗效果  # Android app第三方支付宝支付接入教程  # Android接入支付宝实现支付功能实例  # Android支付宝和微信支付集成  # Android微信支付获取二次签名Sign的方法  # Android实现人脸支付的示例代码  # 这是  # 栏上  # 支付宝  # 就像  # 也要  # 不透明  # 首页  # 小编  # 罩上  # 如果你  # 是因为  # 向背  # 也会  # 有个  # 状态下  # 只欠东风  # 是有  # 都要  # 那就  # 多个 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  如何在云服务器上快速搭建个人网站？  如何在VPS电脑上快速搭建网站？  如何在 Go 中优雅地映射具有动态字段的 JSON 对象到结构体  LinuxShell函数封装方法_脚本复用设计思路【教程】  电商网站制作价格怎么算,网上拍卖流程以及规则？  Laravel如何配置中间件Middleware_Laravel自定义中间件拦截请求与权限校验【步骤】  JS中对数组元素进行增删改移的方法总结  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道  高性能网站服务器部署指南：稳定运行与安全配置优化方案  如何快速选择适合个人网站的云服务器配置？  Laravel Eloquent模型如何创建_Laravel ORM基础之Model创建与使用教程  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  如何快速生成凡客建站的专业级图册？  标题：Vue + Vuex + JWT 身份认证的正确实践与常见误区解析  音乐网站服务器如何优化API响应速度？  如何做网站制作流程,*游戏网站怎么搭建？  百度浏览器网页无法复制文字怎么办 百度浏览器复制修复  Laravel怎么解决跨域问题_Laravel配置CORS跨域访问  如何将凡科建站内容保存为本地文件？  EditPlus中的正则表达式实战(5)  常州企业网站制作公司,全国继续教育网怎么登录？  Laravel如何实现API速率限制？（Rate Limiting教程）  潮流网站制作头像软件下载,适合母子的网名有哪些？  Angular 表单中正确绑定输入值以确保提交与验证正常工作  Thinkphp 中 distinct 的用法解析  中山网站推广排名,中山信息港登录入口？  Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】  高端企业智能建站程序：SEO优化与响应式模板定制开发  ,网页ppt怎么弄成自己的ppt？  Laravel如何使用Contracts（契约）进行编程_Laravel契约接口与依赖反转  Laravel如何使用软删除（Soft Deletes）功能_Eloquent软删除与数据恢复方法  西安专业网站制作公司有哪些,陕西省建行官方网站？  如何在阿里云虚拟服务器快速搭建网站？  php 三元运算符实例详细介绍  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  javascript中的try catch异常捕获机制用法分析  Win10如何卸载预装Edge扩展_Win10卸载Edge扩展教程【方法】  js实现点击每个li节点，都弹出其文本值及修改  如何快速查询网站的真实建站时间？  Laravel如何实现数据导出到PDF_Laravel使用snappy生成网页快照PDF【方案】  Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言  Laravel如何发送系统通知？（Notification渠道示例）  活动邀请函制作网站有哪些,活动邀请函文案？  如何用虚拟主机快速搭建网站？详细步骤解析  Java类加载基本过程详细介绍  制作旅游网站html,怎样注册旅游网站？  如何在建站之星绑定自定义域名？