ActionBar 浮动，毛玻璃渐变效果（仿蝉游记）

最新推荐文章于 2016-06-22 15:00:38 发布

钟xxa

最新推荐文章于 2016-06-22 15:00:38 发布

阅读量4.3k

点赞数

分类专栏： ActionBar 文章标签： actionbar 蝉游记

本文链接：https://blog.csdn.net/jxxfzgy/article/details/43741749

版权

本文介绍了如何实现类似蝉游记App中ActionBar的浮动物理模糊渐变效果。通过分析和编码，创建了一个透明并浮动的ActionBar，获取其高度，并结合ListView的headerView，实现滚动时毛玻璃效果增强。详细步骤包括设置ActionBar样式、构建ListView的headerView布局及MainActivity的布局调整，通过视差滚动创造出独特的视觉体验。

摘要由CSDN通过智能技术生成

最近看了一下蝉游记这款 app ，发现其中有很多界面还是非常漂亮的，这里截了几幅图，一起来欣赏一下。

这里写图片描述

可以看到第一张图片实现了毛玻璃效果，而且向上滚动的时候毛玻璃效果越来越明显，我今天就是要模仿这个效果

先看下我实现的效果图吧：

这里写图片描述

效果跟蝉游记的基本一致，那么来看看是怎么实现的；
1、先来分析一下，
a）首先的定一个透明的并且浮动的 ActionBar
b）需要获取 ActionBar 的高度，这可以有很多方法获取，用自己熟悉的就行
c）要有一个 ListView，并且需要给他设置 headerView
基本分析就这么多，真正实现的时候肯定还会遇到问题，那我们不管了，等遇到了再来解决，一般实现一个功能有了大致的思路就可以了，在实现的过程中慢慢完善。

2、开始 coding 实现功能，
a）定义 ActionBar 的样式，前面已经分析过了，设置透明和浮动的样式

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <!-- 定义浮动的 ActionBar-->
    <item name="windowActionBarOverlay">true</item>
    <item name="actionBarStyle">@style/blurActionbarStyle</item>
    <!-- 去除阴影-->
    <item name="android:windowContentOverlay">@null</item>
</style>

<style name="blurActionbarStyle" parent="Widget.AppCompat.Light.ActionBar.Solid">
    <!--ActionBar的背景色设为透明-->
    <item name="background">@android:color/transparent</item>
</style>

b）实现 ListView 的headerView Xml布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="260dp"
        android:scaleType="centerCrop"
        android:src="@drawable/img_header"/>
    <TextView
        android:id="@+id/id_header_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"