BlurZoomGallery

介绍:

背景缩放与模糊效果的Gallery,继承自 CoordinatorLayout。

运行效果:

使用说明:

导入依赖:

compile 'com.github.fafaldo:blur-zoom-gallery:1.0.0'

要使用BlurZoomGallery,你需要在xml布局文件中实现以下view结构:

|
|-> BlurZoomCoordinatorLayout
    |
    |-> Gallery container layout (id: gallery_coordinator_gallery_container)
    |   |
    |   |-> Gallery view (for example ViewPager; id: gallery_coordinator_gallery)
    |
    |-> AppBarLayout (id: gallery_coordinator_appbarlayout)
    |   |
    |   |-> CollapsingToolbarLayout
    |       |
    |       |-> Toolbar (id: gallery_coordinator_toolbar)
    |
    |-> Scrollable view (for example NestedScrollView; id: gallery_coordinator_scroll)
        |
        |-> Placeholder view that will be expanded, must be first element of view to make it work (id: gallery_coordinator_placeholder)
        ...

记得为每个元素分配一个id。这个结构非常类似于谷歌的Support Design Library中的实现。背景画廊视图需要放置在一个 container中,container 将绘制与实现模糊但是只有里面的view才能接收触摸事件。Placeholder应该是不可见的,用于view的上下扩展。    

例子:

<com.github.fafaldo.blurzoomgallery.widget.BlurZoomCoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/coordinator">
    <FrameLayout
        android:id="@+id/gallery_coordinator_gallery_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v4.view.ViewPager
            android:id="@+id/gallery_coordinator_gallery"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </FrameLayout>
    <android.support.design.widget.AppBarLayout
        android:id="@+id/gallery_coordinator_appbarlayout"
        android:layout_height="300dp"
        android:layout_width="match_parent"
        android:background="@android:color/transparent"
        app:elevation="0dp">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleTextAppearance="@style/MyExpandedTextAppearance"
            app:collapsedTitleTextAppearance="@style/MyCollapsedTextAppearance"
            app:expandedTitleMargin="50dp"
            android:background="@android:color/transparent">
            <android.support.v7.widget.Toolbar
                android:id="@+id/gallery_coordinator_toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/gallery_coordinator_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:paddingLeft="20dp"
        android:paddingRight="20dp">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <View
                android:id="@+id/gallery_coordinator_placeholder"
                android:layout_width="match_parent"
                android:layout_height="0dp"/>
            ...
        </RelativeLayout>
    </android.support.v4.widget.NestedScrollView>
</com.github.fafaldo.blurzoomgallery.widget.BlurZoomCoordinatorLayout>

Gallery将在Collapsing Toolbar点击的时候自动展开,如果你想手动做这件事情,使用函数:

expand();

而在 scrollable view点击的时候Gallery将自动折叠,手动请用

collapse();

如果你想监听折叠与展开事件,设置OnStateChangedListener。Blurring操作会花费一点时间,因此它是异步的。监听模糊的完成设置OnBlurCompletedListener。

动画持续时间与插值器

你可以用如下方法控制折叠与扩展动画的持续时间和插值器:

setInterpolator(Interpolator interpolator);
setDuration(int duration);

但是谷歌不允许这种定义方式。我是使用反射来实现的,因此这个代码在今后可能不起作用。

模糊动画是通过一帧帧的动画来实现的,每一帧的都越来越模糊。ImageView在代码中被动态的添加。你可以控制最大的模糊半径以及模糊的阶数。记住添加太多的ImageView可能会影响到性能。为了减少内存的开销在模糊之前图片被缩小。你可以用一个属性来控制缩小程度。

要正常使用设置的duration和interpolator你应该让AppBarLayout上的expend/collapse动画至少播放一次。调用:

appBarLayout.setExpanded(true, true);

默认AppBarLayout是展开的,因此函数中第一个参数为“true”,避免在开始的时候得到不想要的动画。记得第二个参数也设置为true,只有这样里面的变量才能正确的初始化。

属性:

你可以通过xml来控制这些属性:

<attr name="collapsedListHeight" format="dimension"/>   //height of the scrollable view that will be left after view expand (in dp), default: 112 px
<attr name="maxBlurRadius" format="float"/>             //maximum radius of blur, default: 4
<attr name="blurSteps" format="integer"/>               //steps of blur animation, default: 5
<attr name="bitmapSizeDivide" format="integer"/>        //how many times are images resized, before blurring, default: 5
<attr name="blurEnable" format="boolean"/>              //enable blur, default: true
<attr name="scaleEnable" format="boolean"/>             //enable scale animation, default: true
<attr name="maxScale" format="float"/>                  //maximum zoom of collapsed anim, default: 1.15
<attr name="android:scaleType"/>                        //scaleType of blur steps ImageViews, default: CENTER_CROP
已下载
0