如何在Inbox应用程序中隐藏/显示同一FloatingActionButton上的不同操作

时间:2015-11-28 20:06:48

标签: java android android-animation floating-action-button

有没有办法在支持库的FloatingActionButton中为图标设置动画?我想在收件箱应用中为其设置动画,当您点击它时,它会从plus转换为pencil

1 个答案:

答案 0 :(得分:2)

执行此操作的最佳方法可能是使用AnimatedVectorDrawable但在5.0之前不向后兼容。我通常只将两个FloatingActionButton放在彼此的顶部,然后在旋转两个时淡出顶部的一个。{/ p>

例如,您可以将FloatingActionButton两个FrameLayout放入<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:layout_gravity="bottom|end|right"> <android.support.design.widget.FloatingActionButton android:id="@id/fab_edit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_edit"/> <android.support.design.widget.FloatingActionButton android:id="@+id/fab_add" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_add"/> </FrameLayout> ,如下所示:

FloatingActionButton

FrameLayout中的底部// This animation rotates and hides the top Button final Animator hideTopFabAnimation = ObjectAnimator.ofPropertyValuesHolder(fabAdd, PropertyValuesHolder.ofFloat(View.ALPHA, 1.0f, 0.0f), PropertyValuesHolder.ofFloat(View.ROTATION, 0.0f, 360.0f) ); // This animation just rotates the bottom Button while it is being revealed final Animator revealBottomFabAnimation = ObjectAnimator.ofPropertyValuesHolder(fabEdit, PropertyValuesHolder.ofFloat(View.ROTATION, 0.0f, 360.0f) ); // This AnimatorSet combines both animations and also has a listener // attached to set the visibility of the top Button to View.GONE when // the animation is done so the user can actually click through to the // lower Button final AnimatorSet revealAnimation = new AnimatorSet(); revealAnimation.setInterpolator(new AccelerateDecelerateInterpolator()); revealAnimation.playTogether( hideTopFabAnimation, revealBottomFabAnimation ); revealAnimation.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); fabAdd.setVisibility(View.GONE); } }); revealAnimation.start(); 将位于另一个// Set the visibility of the top Button back to VISIBLE fabAdd.setVisibility(View.VISIBLE); // This animation fades the top Button back in and rotates it back final Animator showTopFabAnimation = ObjectAnimator.ofPropertyValuesHolder(fabAdd, PropertyValuesHolder.ofFloat(View.ALPHA, 0.0f, 1.0f), PropertyValuesHolder.ofFloat(View.ROTATION, 360.0f, 0.0f) ); // This animation just rotates the bottom Button while the top Button // fades back in final Animator hideBottomFabAnimation = ObjectAnimator.ofPropertyValuesHolder(fabEdit, PropertyValuesHolder.ofFloat(View.ROTATION, 360.0f, 0.0f) ); // Again we have an AnimatorSet which plays both animations together final AnimatorSet hideAnimation = new AnimatorSet(); revealAnimation.setInterpolator(new AccelerateDecelerateInterpolator()); revealAnimation.playTogether( showTopFabAnimation, hideBottomFabAnimation ); revealAnimation.start(); 之上。然后,您可以旋转并淡出底部的一个,同时只旋转顶部的动画以创建类似于Google应用中的动画的动画,该动画将显示最顶层的动画。例如,您可以像这样实现动画:

US -> [X -> 55, Y -> 5 , Z -> 10, ...] as one object
UK -> [X -> 99, Y -> 1, Z -> 50, W-> 23, ...] as other object

要回到原来的状态,你只需要做相反的事情:

 //structure to store a map of key/value for a key
 Map<String, Map<String, Integer>> hashmap = new HashMap<String, Map<String, Integer>>(); 

   //key/value map
   Map<String, Integer> US = new HashMap<String, Integer>(); 
   US.put("X", 1200); 
   US.put("Y", 50); 
   US.put("Z", 25552); 
   //can add any number, doesn't have to be three

   Map<String, Integer> UK = new HashMap<String, Integer>(); 
   UK.put("X", 222); 
   UK.put("Y", 52); 
   UK.put("Z", 18);

   hashmap.put("USA", US); 
   hashmap.put("UK", UK);

   //loop through main keys (i.e. US, UK, Africa, etc.)         
   for (String key : hashmap.keySet()) {
       Map<String, Integer> temp = hashmap.get(key); 
        System.out.println("Calculating for " + key);
        Integer sum = 0; 
        //for each key i.e. UK loop through its properties
        for(String otherKey: temp.keySet()) {
            sum = sum + temp.get(otherKey); 
        }
      System.out.println("Sum for " + key + " is " + sum);
   }