BubbleAnimationLayout

bruce · 2016-10-25 21:47 · 319次阅读

BubbleAnimation.jpg 适用于Android的Bubble Animation Layout,由Cleveroad开发 GitHub链接 - https://github.com/Cleveroad/BubbleAnimationLayout 你不想让你的应用看起来觉得无聊,是吗? 添加一些气泡! 适用于Android的气泡动画布局,由Cleveroad提供您的服务。 这个组件非常实用,适合各种应用程序。 这不仅仅是让你的应用程序的UI脱颖而出,吸引注意。

动画也可用 Android上的Bubble Animation Layout 在高清质量。 它很容易添加一些香料和创建一个杰出的用Cleveroad泡泡动画布局库。 请务必,您的应用程式使用者会感激您的努力和富有想象力的方法。 使用 首先,添加gradle依赖到你的 build.gradle:

dependencies {
    compile 'com.cleveroad:bubbleanimation-layout:1.0.0'
}

然后你可以在你的布局文件中声明它像这样:

<com.cleveroad.bubbleanimation.BubbleAnimationLayout
    android:id="@+id/animation_view"
    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="wrap_content"
    android:background="@android:color/darker_gray"
    android:paddingBottom="@dimen/padding_s"
    android:paddingEnd="@dimen/padding_m"
    android:paddingStart="@dimen/padding_m"
    app:bav_animation_color="@color/base_red"
    app:bav_indicator_width="@dimen/indicator_width"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/list_item_size"
        android:background="@android:color/white"
        app:bav_view_type="base_container"
        >
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/fl_context_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:bav_view_type="context_container"
        >
    </RelativeLayout>

</com.cleveroad.bubbleanimation.BubbleAnimationLayout>

泡泡动画布局只能包含两个孩子。 其中一个是base容器(你可以声明它的属性 app:bav_view_type=“base_container”) 另一个是上下文容器(你可以用属性声明它 app:bav_view_type=“context_container”). 小心,布局通过基本容器的布局参数计算大小

定制

设置指示器和泡泡动画颜色

您可以使用属性更改动画颜色 ‘app:bav_animation_color’

<com.cleveroad.bubbleanimation.BubbleAnimationLayout
    ...
    app:bav_animation_color="#b92714"
    >

要么

BubbleAnimationLayout mBalBaseView = …; mBalBaseView.setAnimationColor(Color.YELLOW);

设置指示灯宽度

您可以使用属性更改指示器宽度 ‘app:bav_indicator_width’

<com.cleveroad.bubbleanimation.BubbleAnimationLayout
    ...
    app:bav_indicator_width="10dp"
    >

要么

BubbleAnimationLayout mBalBaseView = …; mBalBaseView.setIndicatorWidth(30);

显示上下文容器

您可以使用动画显示上下文容器(基础容器将被隐藏)

 BubbleAnimationLayout mBalBaseView = ...;
 View contextView = findViewById(R.id.fl_context_view);
 Animator animator = ObjectAnimator.ofPropertyValuesHolder(contextView, PropertyValuesHolder.ofFloat("alpha", 0.0f, 1.0f))
                    .setDuration(500);
 mBalBaseView.showContextViewWithAnimation(animator);

或无动画

 BubbleAnimationLayout mBalBaseView = ...;
 mBalBaseView.showContextView();

显示基本容器

用于显示具有动画调用的基本容器(上下文容器和气泡视图将被隐藏)

 BubbleAnimationLayout mBalBaseView = ...;
 View contextView = findViewById(R.id.fl_context_view);
 Animator animator = ObjectAnimator.ofPropertyValuesHolder(contextView, PropertyValuesHolder.ofFloat("alpha", 1.0f, 0.0f))
                    .setDuration(500);
 mBalBaseView.showBaseViewWithAnimation(animator);

或无动画

 BubbleAnimationLayout mBalBaseView = ...;
 mBalBaseView.showBaseView();

显示/隐藏气泡视图

您可以使用动画显示气泡视图(用于处理动画的结束指定 BubbleAnimationEndListener)

 BubbleAnimationLayout mBalBaseView = ...;
 mBalBaseView.showBubbleViewWithAnimation(new BubbleAnimationLayout.BubbleAnimationEndListener() {
     @Override
     public void onEndAnimation(boolean isForwardAnimation, Animator animation) {
        //Do something
     }
 });

或无动画

 BubbleAnimationLayout mBalBaseView = ...;
 mBalBaseView.showBubbledView();

对于用动画隐藏(用于处理动画的结束指定 BubbleAnimationEndListener) 呼叫

BubbleAnimationLayout mBalBaseView = ...;
 mBalBaseView.hideBubbledViewWithAnimation(new BubbleAnimationLayout.BubbleAnimationEndListener() {
     @Override
     public void onEndAnimation(boolean isForwardAnimation, Animator animation) {
        //Do something
     }
 });

或无动画

 BubbleAnimationLayout mBalBaseView = ...;
 mBalBaseView.hideBubbledView();

重置视图

呼叫 BubbleAnimationLayout#resetView() 将视图重置为初始状态

 BubbleAnimationLayout mBalBaseView = ...;
 mBalBaseView.resetView();

处理动画结束

用于处理结束声明的动画 BubbleAnimationEndListener

 BubbleAnimationLayout mBalBaseView = ...;
 mBalBaseView.addAnimationEndListener(new BubbleAnimationLayout.BubbleAnimationEndListener() {
     @Override
     public void onEndAnimation(boolean isForwardAnimation, Animator animation) {
         //Do something
     }
 });

列表项中的用法

如果你打电话 BubbleAnimationLayout#hideBubbledViewWithAnimation(BubbleAnimationEndListener) 和滚动动画将显示在回收视图中你可以锁定滚动,而动画将结束解决这个问题。

private static class NonScrollLinearLayoutManager extends LinearLayoutManager {

         private boolean mCanScroll = true;

         public NonScrollLinearLayoutManager(Context context) {
             super(context);
         }

         @SuppressWarnings("unused")
         public NonScrollLinearLayoutManager(Context context, int orientation, boolean reverseLayout) {
             super(context, orientation, reverseLayout);
         }

         @SuppressWarnings("unused")
         public NonScrollLinearLayoutManager(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
             super(context, attrs, defStyleAttr, defStyleRes);
         }

         @Override
         public boolean canScrollHorizontally() {
             return super.canScrollHorizontally() && mCanScroll;
         }

         @Override
         public boolean canScrollVertically() {
             return super.canScrollVertically() && mCanScroll;
         }
 }

 {
    ...
    RecyclerView rvUsers = ...;
    rvUsers.setHasFixedSize(true);
    final NonScrollLinearLayoutManager layoutManager = new NonScrollLinearLayoutManager(this);
    rvUsers.setLayoutManager(layoutManager);
    layoutManager.mCanScroll = false;   
    ...
 }

支持

如果您对使用本教程有任何疑问,请联系我们寻求支持 info@cleveroad.com(电子邮件主题:«泡沫动画布局Android。支持请求») 要么 使用联系人:

由制成 Cleveroad

收藏

代码块的部分我帮你编辑了一下~

登录后可以进行评论。没有账号?马上注册