Android
साझा किए गए तत्व परिवर्तन

परिचय

वाक्य - विन्यास

• transaction.addSaringElement (sharedElementView, "targetTransitionName");
• fragment.setSaringElementEnterTransition (नया CustomTransaction ());

दो टुकड़े के बीच साझा तत्व संक्रमण

इस उदाहरण में, दो अलग-अलग से एक ImageViews से अनुवाद किया जाना चाहिए ChooserFragment को DetailFragment ।

में ChooserFragment लेआउट हम अद्वितीय की जरूरत है transitionName गुण:

<ImageView
    android:id="@+id/image_first"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_first"
    android:transitionName="fistImage" />

<ImageView
    android:id="@+id/image_second"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_second"
    android:transitionName="secondImage" />

ChooserFragments वर्ग में, हमें वह View पास करना होगा जिसे क्लिक किया गया था और पैरेंट Activity विच के लिए एक आईडी टुकड़े के प्रतिस्थापन को संभाल रही है (हमें यह पता करने के लिए आईडी की आवश्यकता है कि कौन से छवि संसाधन को DetailFragment में DetailFragment )। किसी मूल गतिविधि के बारे में विस्तार से जानकारी कैसे दें, यह निश्चित रूप से किसी अन्य दस्तावेज़ में शामिल है।

view.findViewById(R.id.image_first).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        if (mCallback != null) {
            mCallback.showDetailFragment(view, 1);
        }
    }
});

view.findViewById(R.id.image_second).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        if (mCallback != null) {
            mCallback.showDetailFragment(view, 2);
        }
     }
});

में DetailFragment , ImageView साझा तत्व की भी अद्वितीय की जरूरत है transitionName विशेषता।

<ImageView
    android:id="@+id/image_shared"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:transitionName="sharedImage" />

DetailFragment के DetailFragment onCreateView() विधि में, हमें यह तय करना होगा कि कौन सा छवि संसाधन दिखाया जाना चाहिए (यदि हम ऐसा नहीं करते हैं, तो संक्रमण के बाद साझा तत्व गायब हो जाएगा)।

public static DetailFragment newInstance(Bundle args) {
    DetailFragment fragment = new DetailFragment();
    fragment.setArguments(args);
    return fragment;
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    super.onCreateView(inflater, container, savedInstanceState);
    View view = inflater.inflate(R.layout.fragment_detail, container, false);

    ImageView sharedImage = (ImageView) view.findViewById(R.id.image_shared);

    // Check which resource should be shown.
    int type = getArguments().getInt("type");

    // Show image based on the type.
    switch (type) {
        case 1:
            sharedImage.setBackgroundResource(R.drawable.ic_first);
            break;

        case 2:
            sharedImage.setBackgroundResource(R.drawable.ic_second);
            break;
    }

    return view;
}

मूल Activity कॉलबैक प्राप्त कर रही है और टुकड़ों के प्रतिस्थापन को संभालती है।

@Override
public void showDetailFragment(View sharedElement, int type) {
    // Get the chooser fragment, which is shown in the moment.
    Fragment chooserFragment = getFragmentManager().findFragmentById(R.id.fragment_container);

    // Set up the DetailFragment and put the type as argument.
    Bundle args = new Bundle();
    args.putInt("type", type);
    Fragment fragment = DetailFragment.newInstance(args);

    // Set up the transaction.
    FragmentTransaction transaction = getFragmentManager().beginTransaction();

    // Define the shared element transition.
    fragment.setSharedElementEnterTransition(new DetailsTransition());
    fragment.setSharedElementReturnTransition(new DetailsTransition());

    // The rest of the views are just fading in/out.
    fragment.setEnterTransition(new Fade());
    chooserFragment.setExitTransition(new Fade());

    // Now use the image's view and the target transitionName to define the shared element.
    transaction.addSharedElement(sharedElement, "sharedImage");

    // Replace the fragment.
    transaction.replace(R.id.fragment_container, fragment, fragment.getClass().getSimpleName());

    // Enable back navigation with shared element transitions.
    transaction.addToBackStack(fragment.getClass().getSimpleName());

    // Finally press play.
    transaction.commit();
}

भूलने के लिए नहीं - Transition ही। यह उदाहरण साझा तत्व को स्थानांतरित और मापता है।

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public class DetailsTransition extends TransitionSet {

    public DetailsTransition() {
        setOrdering(ORDERING_TOGETHER);
        addTransition(new ChangeBounds()).
            addTransition(new ChangeTransform()).
            addTransition(new ChangeImageTransform());
    }

}