2014-12-15 20 views
8

Tôi muốn triển khai hoạt ảnh lớp trượt để chuyển đổi hoạt động như được mô tả trong nguyên tắc thiết kế material design.Hoạt ảnh của lớp trượt hoạt ảnh android

Material Transition

Tuy nhiên, tất cả tôi có thể làm bây giờ là sự kết hợp đơn giản của slide_in và ở lại hình ảnh động mà không cho tôi một lớp loại xếp chồng lên nhau có hiệu lực. Làm thế nào tôi có thể đạt được nó?

thực hiện hiện tại của tôi:

On Hoạt động bắt đầu:

activity.overridePendingTransition(R.anim.slide_in_right, R.anim.stay); 

On Hoạt động Đóng:

activity.overridePendingTransition(R.anim.stay, R.anim.slide_out_right); 

slide_in_right.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android" 
    android:interpolator="@android:anim/accelerate_interpolator"> 
    <translate 
     android:fromXDelta="100%p" 
     android:toXDelta="0" 
     android:duration="@android:integer/config_shortAnimTime" /> 
</set> 

slide_out_right.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android" 
    android:interpolator="@android:anim/accelerate_interpolator"> 
    <translate 
     android:fromXDelta="0" 
     android:toXDelta="100%p" 
     android:duration="@android:integer/config_shortAnimTime" /> 
</set> 

stay.xml:

<?xml version="1.0" encoding="utf-8"?> 
<translate xmlns:android="http://schemas.android.com/apk/res/android" 
    android:duration="@android:integer/config_shortAnimTime" 
    android:fromYDelta="0%p" 
    android:toYDelta="0%p" /> 
+1

Vấn đề với việc triển khai này ở đâu? – TheRedFox

+1

@gauravsapiens bạn có tìm thấy câu trả lời cho câu trả lời này không? –

Trả lời

6

tôi cuối cùng đã tìm thấy một giải pháp cho câu hỏi này. Nó hoạt động hoàn hảo.

Các thành phần quan trọng được sử dụng trong câu trả lời này:

  • BackActivity hoạt động = nền
  • FrontActivity = hoạt động trượt trước
  • BackgroundView = các ViewGroup cơ sở trong FrontActivity bạn

Các giải pháp là animate bố cục của FrontActivity trước khi đóng FrontActivity. Điều này chỉ có thể xảy ra nếu bạn sử dụng thanh công cụ được tích hợp trong bố cục làm thanh tác vụ!

Tôi sẽ sao chép mã của mình tại đây. Hoạt ảnh của tôi là một hoạt động trượt ở phía trước từ phía dưới, và biến mất một lần nữa trượt ra phía dưới ở phía trước của hoạt động trước đó. Bạn có thể dễ dàng có được hiệu ứng này theo bất kỳ hướng nào bằng cách thay đổi hình động.


1) Trượt FrontActivity tại hơn BackActivity
Chỉ cần gọi overridePendingTransition khi bắt đầu FrontActivity từ BackActivity.

Intent intent = new Intent(activity, FrontActivity.class); 
startActivity(intent); 
overridePendingTransition(R.anim.slide_in_bottom, 0); 

slide_in_bottom.xml

<?xml version="1.0" encoding="utf-8"?> 
<translate xmlns:android="http://schemas.android.com/apk/res/android" 
    android:fromYDelta="100%p" 
    android:toYDelta="0%p" 
    android:duration="@android:integer/config_mediumAnimTime" 
    android:interpolator="@android:anim/decelerate_interpolator"> 
</translate> 

2) Khi đi trở lại từ FrontActivity để BackActivity, animate bố trí từ FrontActivity ra trước khi bạn đóng FrontActivity!

Tôi đã làm điều này bằng cách gọi phương pháp sau đây trong onOptionsSelected() tôi và onBackPressed() tôi trong FrontActivity

private void animateOut() { 
    Animation slideAnim = AnimationUtils.loadAnimation(this,R.anim.slide_out_bottom); 
    slideAnim.setFillAfter(true);; 
    slideAnim.setAnimationListener(new AnimationListener() { 
     public void onAnimationStart(Animation paramAnimation) { } 
     public void onAnimationRepeat(Animation paramAnimation) { } 
     public void onAnimationEnd(Animation paramAnimation) { 
      finish(); 
      // if you call NavUtils.navigateUpFromSameTask(activity); instead, 
      // the screen will flicker once after the animation. Since FrontActivity is 
      // in front of BackActivity, calling finish() should give the same result. 
      overridePendingTransition(0, 0); 
     } 
    }); 
    BackgroundView.startAnimation(slideAnim); 
} 

slide_out_bottom.xml

<?xml version="1.0" encoding="utf-8"?> 
<translate xmlns:android="http://schemas.android.com/apk/res/android" 
    android:fromYDelta="0%p" 
    android:toYDelta="100%p" 
    android:duration="@android:integer/config_mediumAnimTime" 
    android:interpolator="@android:anim/accelerate_interpolator"> 
</translate> 

3) Bây giờ chúng ta phải đảm bảo BackActivity hiển thị phía sau FrontActivity khi nó hoạt hình.
Chúng tôi cần làm việc với các chủ đề minh bạch cho việc này.

styles.xml

<resources> 

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 
     <!-- your theme --> 
    </style> 

    <style name="Theme.Transparent" parent="AppTheme"> 
     <item name="android:windowIsTranslucent">true</item> 
     <item name="android:windowBackground">@android:color/transparent</item> 
    </style> 

</resources> 

4) Áp dụng các chủ đề trong suốt đối với FrontActivity trong biểu hiện của bạn:

AndroidManifest.xml

<activity 
     android:name=".FrontActivity" 
     android:theme="@style/Theme.Transparent" 
     android:parentActivityName=".BackActivity" /> 

5) Vì hoạt động của bạn bây giờ là trong suốt, bạn sẽ cần phải thêm một nền cho BackgroundView. Các nền tiêu chuẩn là:

android:background="@android:color/background_light" 
android:background="@android:color/background_dark" 

front_activity.xml

<?xml version="1.0" encoding="utf-8"?> 

<!-- This is BackgroundView and can be any ViewGroup --> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_height="match_parent" 
    android:layout_width="match_parent" 
    android:background="@android:color/background_light" > 

    <android.support.v7.widget.Toolbar 
     android:layout_height="@dimen/height_toolbar" 
     android:layout_width="match_parent" 
     android:minHeight="?attr/actionBarSize" 
     android:background="?attr/colorPrimary" 
     app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
     app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 

    <!-- rest of layout --> 

</FrameLayout> 

Vậy là xong. Hoạt ảnh phải hoạt động ngay bây giờ.


EDIT

Tôi đã tìm thấy một giải pháp mà không nhấp nháy. Các hình ảnh động trông hoàn hảo.

Khi đóng FrontActivity, hãy gọi finish thay vì NavUtils.navigateUpFromSameTask(activity). Tôi đã thay đổi điều này trong câu trả lời của tôi.

+0

Tuyệt vời !! Hoạt động tốt .. Đừng quên ** loại bỏ 'super.onBackPress();' ** khỏi sự kiện quan trọng. Nó đang chặn hoạt hình cho tôi. – Mangesh

+1

bất kỳ ý tưởng nào về cách tạo bóng cho 'FrontActivity'? – Mangesh

4

Bạn có thể nhận được hành vi được mô tả chỉ ghi đè quá trình chuyển đổi giữa các hoạt động. Tôi cũng bao gồm hiệu ứng giảm dần độ mờ trên hoạt động quay lại để cải thiện ngoại hình:

slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <translate android:fromXDelta="100%p" android:toXDelta="0" 
     android:duration="@android:integer/config_shortAnimTime"/> 
</set> 

slide_out_right.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <translate android:fromXDelta="0" android:toXDelta="100%p" 
     android:duration="@android:integer/config_shortAnimTime"/> 
</set> 

fade_back.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <scale android:duration="@android:integer/config_shortAnimTime" 
     android:pivotX="50.0%" 
     android:pivotY="50.0%" 
     android:fromXScale="1.0" 
     android:toXScale="0.9" 
     android:fromYScale="1.0" 
     android:toYScale="0.9"/> 
    <alpha android:duration="@android:integer/config_shortAnimTime" 
     android:fromAlpha="1.0" 
     android:toAlpha="0.7"/> 
</set> 

fade_forward.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <scale android:duration="@android:integer/config_shortAnimTime" 
     android:pivotX="50.0%" 
     android:pivotY="50.0%" 
     android:fromXScale="0.9" 
     android:toXScale="1.0" 
     android:fromYScale="0.9" 
     android:toYScale="1.0"/> 
    <alpha android:duration="@android:integer/config_shortAnimTime" 
     android:fromAlpha="0.7" 
     android:toAlpha="1.0"/> 
</set> 

ParentActivity.java

Trong một lớp cha mẹ thường cho các hoạt động của bạn, bạn có thể bao gồm mã tái sử dụng của bạn:

/* Activity transitions */ 

protected void slideInTransition() { 
    overridePendingTransition(R.anim.slide_in_right, R.anim.fade_back); 
} 

protected void slideOutTransition() { 
    overridePendingTransition(R.anim.fade_forward, R.anim.slide_out_right); 
} 

Sau đó, trên Hoạt động bắt đầu:

startActivity(intent); 
slideInTransition(); 

Để chuyển đổi trở lại:

@Override 
public void onBackPressed() { 
    super.onBackPressed(); 
    slideOutTransition(); 
} 
Các vấn đề liên quan