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