Cách tạo hoạt ảnh FloatingActionButton của Thư viện hỗ trợ thiết kế mới

Question

Tôi đang sử dụng TabLayout với 5 đoạn khác nhau. Trên 3 đoạn này, android.support.design.widget.FloatingActionButton sẽ xuất hiện. Ngay bây giờ tôi chỉ đơn giản là thiết lập khả năng hiển thị của FAB khi tab thay đổi, nhưng tôi muốn có một hình ảnh động, trong đó FAB đi vào và ra. Làm thế nào tôi có thể đạt được điều này trong Android?

Answer 1

Bởi vì tôi không muốn kéo dài tuổi FloatingActionButton, tôi đã thực hiện nó theo cách này:

FloatingActionButton createButton; 

// ... 

Animation makeInAnimation = AnimationUtils.makeInAnimation(getBaseContext(), false); 
makeInAnimation.setAnimationListener(new Animation.AnimationListener() { 
    @Override 
    public void onAnimationEnd(Animation animation) { } 

    @Override 
    public void onAnimationRepeat(Animation animation) { } 

    @Override 
    public void onAnimationStart(Animation animation) { 
     createButton.setVisibility(View.VISIBLE); 
    } 
}); 

Animation makeOutAnimation = AnimationUtils.makeOutAnimation(getBaseContext(), true); 
makeOutAnimation.setAnimationListener(new Animation.AnimationListener() { 
    @Override 
    public void onAnimationEnd(Animation animation) { 
     createButton.setVisibility(View.INVISIBLE); 
    } 

    @Override 
    public void onAnimationRepeat(Animation animation) { } 

    @Override 
    public void onAnimationStart(Animation animation) { } 
}); 

// ... 

if (createButton.isShown()) { 
    createButton.startAnimation(makeOutAnimation); 
} 

// ... 

if (!createButton.isShown()) { 
    createButton.startAnimation(makeInAnimation); 
} 

Answer 2

Cách dễ nhất là mở rộng lớp FloatingActionButton và ghi đè setVisibility. Như thế này:

public void setVisibility(final int visibility) { 
    if (getVisibility() != View.VISIBLE && visibility == View.VISIBLE && inAnim != null) { 
     animator = // create your animator here 
     super.setVisibility(visibility); 
    } else if (getVisibility() == View.VISIBLE && visibility != View.VISIBLE) { 
     AnimatorListenerAdapter listener = new AnimatorListenerAdapter() { 
      @Override 
      public void onAnimationEnd(Animator animator) { 
       Button.super.setVisibility(visibility); 
      } 
     }); 
     animator = // create your animator here 
     animator.addListener(listener); 
    } 
} 

Đoạn mã trên được lấy từ lớp Nút từ my library. Bạn có thể tìm các triển khai mẫu trong các nguồn.

Answer 3

Bạn muốn một cái gì đó như thế này? Nhưng thay vì làm động nó trên onScrollListener bạn có thể tạo hiệu ứng động trên phương thức onCreateView hoặc onCreate. Làm theo này ->Implement Floating Action Button – Part 2

Về cơ bản mã tổng kết chỉ để

Animate này để Ẩn

FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab); 
       floatingActionButton.animate().translationY(floatingActionButton.getHeight() + 16).setInterpolator(new AccelerateInterpolator(2)).start(); 

và

Animate trở lại Hiện

FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab); 
       floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start(); 

nhưng chúng tôi không muốn nó hoạt hình chỉ để ẩn nó, 'Animate to Hide' sẽ chỉ b e một cái gì đó như thế này

FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab); 
       floatingActionButton.setTranslationY(floatingActionButton.getHeight() + 16); 

On 'Animate để Ẩn' đặt rằng vào phương pháp onCreateView hoặc onCreate để trên FAB của bạn bị ẩn khi bạn tạo đoạn này và sau đó bạn có thể thêm một handler và Runnable sẽ kích hoạt ' animate trở lại Hiện' sau một hoặc hai giây để hiển thị hình ảnh động của bạn

hoặc bạn có thể sử dụng một thời gian cho các hoạt hoạ ngắn

int mShortAnimationDuration = getResources().getInteger(
      android.R.integer.config_shortAnimTime); 

tôi đã cố gắng này trên OnScroll nhưng chưa thử trên onCreateView hoặc 012.nhưng tôi đoán nó sẽ làm việc

- EDIT -

Hãy thử mã này;)

public class DummyFragment extends Fragment { 

    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
          Bundle savedInstanceState) { 
     int mShortAnimationDuration = getResources().getInteger(
       android.R.integer.config_shortAnimTime); 

     FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab); 
     floatingActionButton.setTranslationY(floatingActionButton.getHeight() + 16); 

     new Handler().postDelayed(new Runnable() { 
      @Override 
      public void run() { 
       FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab); 
       floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start(); 

      }, mShortAnimationDuration); 
     } 
    } 
} 

Answer 4

Việc sửa đổi thư viện hỗ trợ thiết kế 22.2.1 (July 2015) thêm hide() và show() phương pháp cho lớp học FloatingActionButton, do đó bạn có thể sử dụng các phương pháp này từ giờ trở đi.

http://developer.android.com/tools/support-library/index.html

Answer 5

Các ẩn/hiển thị hình ảnh động cho co/pop sẽ được tự động xử lý bởi các phiên bản mới của Thư viện hỗ trợ. (22.2.1) Sau đó OnTabChange nghe hiển thị hoặc ẩn các nút hành động nổi bằng show/hide các phương thức được cung cấp bởi thư viện mới.

fab.show(); hoặc fab.hide();