2016-01-19 9 views
10

Ich arbeite ein schwebendes Aktionstaste (FAB) zu einer Symbolleiste und die Dinge funktionieren reibungslos und perfekt mit dem folgenden Code auf Morphing:Circular Reveal funktioniert nicht, wenn FAB Schwerkraft unten

Layout-Datei:

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="sg.com.saurabh.designlibraryexpirements.ToolbarMorphActivity"> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="top|right" 
     android:layout_marginTop="@dimen/activity_vertical_margin" 
     android:layout_marginRight="@dimen/activity_vertical_margin" 
     android:layout_marginBottom="@dimen/activity_vertical_margin" 
     android:src="@drawable/ic_add" /> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     style="@style/ToolBarTheme" 
     android:layout_height="?attr/actionBarSize" 
     android:layout_gravity="top" 
     android:layout_marginTop="@dimen/activity_vertical_margin" 
     android:layout_marginBottom="@dimen/activity_vertical_margin" 
     android:visibility="invisible" 
     tools:visibility="visible" /> 

</FrameLayout> 

Aktivität:

package sg.com.saurabh.designlibraryexpirements; 

import android.animation.Animator; 
import android.os.Bundle; 
import android.os.Handler; 
import android.support.design.widget.FloatingActionButton; 
import android.support.v4.view.animation.FastOutLinearInInterpolator; 
import android.support.v4.view.animation.LinearOutSlowInInterpolator; 
import android.support.v7.app.AppCompatActivity; 
import android.support.v7.widget.Toolbar; 
import android.view.View; 
import android.view.ViewAnimationUtils; 
import android.view.animation.AccelerateInterpolator; 
import android.view.animation.AnticipateOvershootInterpolator; 

public class ToolbarMorphActivity extends AppCompatActivity { 

    Toolbar toolbar; 
    FloatingActionButton fab; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_toolbar_morph); 

     toolbar = (Toolbar) findViewById(R.id.toolbar); 
     fab = (FloatingActionButton) findViewById(R.id.fab); 
     fab.setOnClickListener(mFabClickListener); 
    } 

    private View.OnClickListener mFabClickListener = new View.OnClickListener() { 
     @Override 
     public void onClick(View v) { 
      fab.animate() 
        .rotationBy(45) 
        .setInterpolator(new AnticipateOvershootInterpolator()) 
        .setDuration(250) 
        .start(); 

      new Handler().postDelayed(new Runnable() { 
       @Override 
       public void run() { 
        fab.setVisibility(View.GONE); 
       } 
      },50); 

      revealToolbar(); 
     } 
    }; 

    private void revealToolbar() { 
     toolbar.setVisibility(View.VISIBLE); 

     int x = (int)fab.getX() + fab.getWidth()/2; 
     int y = (int)fab.getY() + fab.getHeight()/2; 

     Animator animator = ViewAnimationUtils.createCircularReveal(toolbar, x, y, 0, toolbar.getWidth()) 
       .setDuration(400); 
     animator.setInterpolator(new FastOutLinearInInterpolator()); 
     animator.start(); 
    } 

    private void dismissToolbar() { 
     int x = (int)fab.getX() + fab.getWidth()/2; 
     int y = (int)fab.getY() + fab.getHeight()/2; 

     Animator animator = ViewAnimationUtils.createCircularReveal(toolbar, x, y, toolbar.getWidth(), 0) 
       .setDuration(400); 
     animator.setInterpolator(new LinearOutSlowInInterpolator()); 
     animator.addListener(new Animator.AnimatorListener() { 
      @Override 
      public void onAnimationStart(Animator animation) { 

      } 

      @Override 
      public void onAnimationEnd(Animator animation) { 
       toolbar.setVisibility(View.INVISIBLE); 
      } 

      @Override 
      public void onAnimationCancel(Animator animation) { 

      } 

      @Override 
      public void onAnimationRepeat(Animator animation) { 

      } 
     }); 
     animator.start(); 

     new Handler().postDelayed(new Runnable() { 
      @Override 
      public void run() { 
       fab.setVisibility(View.VISIBLE); 

       fab.animate() 
         .rotationBy(-45) 
         .setInterpolator(new AccelerateInterpolator()) 
         .setDuration(100) 
         .start(); 
      } 
     },200); 
    } 

    @Override 
    public void onBackPressed() { 
     if(toolbar.getVisibility() == View.VISIBLE) { 
      dismissToolbar(); 
     } 
     else 
      super.onBackPressed(); 
    } 
} 

der Kreis zeigt Werke wie für das oben Layout erwartet. Allerdings zerbrechen die Dinge, wenn ich die layout_gravity der Fab und Toolbar zu bottom anstelle von top ändern. Die Rotationsanimation funktioniert und dann erscheint die Werkzeugleiste ohne die kreisförmige Enthüllungsanimation. Ich bin völlig ratlos, wie das die kreisförmige Enthüllungsanimation unterbricht.

Antwort

4

enter image description here

Das Update für Sie wäre zu ersetzen:

private void revealToolbar() { 
    .... 
    int x = (int)fab.getX() + fab.getWidth()/2; 
    int y = (int)fab.getY() + fab.getHeight()/2; 
    .... 
} 

von

private void revealToolbar() { 
    ... 
    int x = (int)fab.getX() + fab.getWidth()/2; 
    int y = fab.getHeight()/2; 
    ... 
} 

Der Grund ist, dass createCircularReveal Parameter nehmen wird centerY und centerX als Koordinaten der Mitte des Animationskreises, relativ zur Ansicht (d.h. Toolbar, in unserem Fall).

Siehe method ViewAnimationUtils.createCircularReveal definition:

........ 
* @param view The View will be clipped to the animating circle. 
* @param centerX The x coordinate of the center of the animating circle, relative to 
*    <code>view</code>. 
* @param centerY The y coordinate of the center of the animating circle, relative to 
*    <code>view</code>. 
* @param startRadius The starting radius of the animating circle. 
* @param endRadius The ending radius of the animating circle. 
*/ 
+0

Aah. Funktioniert jetzt. Vielen Dank – Saurabh