fafaldo/BlurZoomGallery

语言: Java

git: https://github.com/fafaldo/BlurZoomGallery

扩展CoordinatorLayout,有助于创建背景库
Extended CoordinatorLayout, that helps creating background galleries
README.md (中文)

BlurZoomGallery

Maven Central Android Arsenal

扩展CoordinatorLayout,有助于创建背景库。

Illustration of behavior

特征:

  • 可扩展折叠工具栏布局,为背景视图创建空间
  • 扩展/折叠动画的哈希
  • 模糊的崩溃动画背景视图
  • 折叠时的缩放效果

如何使用

使用Gradle导入依赖项:

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

要使用BlurZoomGallery,您需要在XML布局文件中实现以下视图层次结构:

|
|-> 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。由于显而易见的原因,此结构与Google支持设计库中实现的结构非常相似。 背景图库视图应放置在容器内,容器将被绘制和模糊,但只有内部视图将接收触摸事件。 占位符视图应该是不可见的,用于展开上下视图。

示例实现:

<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>

在折叠工具栏上单击将自动展开图库。如果你想手动使用功能

expand();

在可滚动视图单击时,图库会自动折叠。要手动调用

collapse();

如果要监听折叠并展开更改,请设置OnStateChangedListener。 模糊操作需要一些时间,因此它是异步完成的。听取模糊设置OnBlurCompletedListener的成功。

如果实现中存在其他问题,请参阅此存储库中包含的示例。

动画持续时间和插值器

您可以使用以下方法控制用于展开和折叠工具栏的动画制作工具的持续时间和插补器:

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

但是,Google API尚不允许进行此类自定义。我的实现使用Java的反射机制,因此请注意,此代码可能在将来停止工作。

模糊动画是使用逐帧动画完成的,每帧都模糊得越来越多。 ImageViews是从代码中动态添加的。您可以控制最大模糊半径和模糊步数。请记住,添加太多ImageView可能会影响性能。为了减少内存消耗,图像在模糊之前缩小。您可以使用其中一个参数控制此缩减。

要正确使用所选的持续时间和插值器,您应该至少在AppBarLayout上播放展开/折叠动画一次,然后再尝试通过触摸打开图库。你应该打电话

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

更新日志

  • 1.0.0 - 初始版本

执照

适用于Android的FABToolbar

麻省理工学院许可证(MIT)

版权所有(c)2015RafałTułaza

特此授予任何获得副本的人免费许可 这个软件和相关的文档文件(“软件”),来处理 在软件中没有限制,包括但不限于权利 使用,复制,修改,合并,发布,分发,再许可和/或出售 本软件的副本,并允许软件所在的人员 在这样做的情况下,符合以下条件:

上述版权声明和本许可声明均应包含在内 本软件的副本或重要部分。

本软件按“原样”提供,不提供任何形式的保证,或者 暗示,包括但不限于适销性保证, 适用于特定用途和不侵权的适用性。在任何情况下都不应该 作者或版权所有者对任何索赔,损害或其他责任均有责任 无论是合同,侵权行为还是其他行为,由此产生的责任, 超出或与本软件或其中的使用或其他交易有关的 软件。

本文使用googletrans自动翻译,仅供参考, 原文来自github.com

en_README.md

BlurZoomGallery

Maven Central Android Arsenal

Extended CoordinatorLayout, that helps creating background galleries.

Illustration of behavior

Features:

  • expandable Collapsing Toolbar Layout, making space for a background view
  • hadling of expand/collapse animation
  • blurring of background view on collapse animation
  • zoom effect on collapse

How to use

Import dependency using Gradle:

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

In order to use BlurZoomGallery you need to implement following view hierarchy in your XML layout file:

|
|-> 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)
        ...

Remember to assign each element a proper ID. This structure is very similar to structure implemented in Google's Support Design Library, for obvious reasons.
Background gallery view should be placed inside a container, the container will be drawn and blurred but only the inner view will receive touch events.
Placeholder view should be invisible and is used to expand upper and lower views.

Example implementation:

<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 will be automatically expanded on Collapsing Toolbar click. If you want to do it manually use function

expand();

Gallery collapses automatically on scrollable view click. To do it manually call

collapse();

If you want to listen for collapse and expand changes set the OnStateChangedListener.
Blurring action takes some time so it's done asynchronously. To listen for success of blurring set OnBlurCompletedListener.

In case of other problems with implementation see example included in this repository.

Animation duration and interpolator

You can control duration and interpolator of the animator used to expand and collapse Toolbar with methods:

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

However, Google APIs doesn't allow this kind of customization yet. My implementation uses Java's reflection mechanism, so be aware that this code might stop working in the future.

Blur animation is done using frame by frame animation, with each frame blurred more and more. ImageViews are added dynamically from the code. You can control max blur radius and number of blur steps. Remember, that adding too many ImageView might affect performance. In order to reduce memory consumption images are downscaled before blurring. You can control this downscaling with one of the parameters.

To properly use the selected duration and interpolator you should play expend/collapse animation on AppBarLayout at least once, before trying to open gallery by touching. You should call

appBarLayout.setExpanded(true, true);

By default AppBarLayout is expanded, so call function with first parameter set to 'true', to avoid unwanted animation on start-up. Remember to set second parameter to 'true' too, because only then will the inner fields be properly initiated.

Parameters:

You can control these parameters via 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

Changelog

  • 1.0.0 - initial release

License

FABToolbar for Android

The MIT License (MIT)

Copyright (c) 2015 Rafał Tułaza

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.