共享元素转换 - 片段

时间:2015-05-27 17:57:57

标签: android android-fragments android-transitions shared-element-transition fragment-transitions

我已将示例应用推送到此处:https://bitbucket.org/user1010/transitiondemo

我在我的应用中遵循主要细节模式。主片段(MyRecyclerFragment / MyListFragment)显示了一个文本视图列表。当用户单击任何这些文本视图时,将启动详细信息片段(MyDetailsFragment)。详细信息片段具有标题(与用户单击的标题相同)。

我正在尝试实现以下过渡效果:

  • 分享退出视图的转换
  • 淡出显示视图的转换
  • 在这两个片段之间共享的TextView的移动/转换过渡

的问题:

  • 转换开始时,共享TextView将消失。但如果单击列表的第一项,则共享转换奇迹般地起作用。
  • 如果更改了详细信息布局,则转换有效。请参阅details.xml。如果我完全删除FrameLayout title_bar并将TextView title作为根LinearLayout的直接子项,则共享元素转换效果很好。
  • 对于共享元素返回转换,似乎更改了震中。例如,如果我单击列表中的第7个TextView,退出转换(explode)会将TextView作为震中。它上面的所有TextView都向上滑动,下面的TextViews向下滑动。但是当从细节片段返回到主片段时,返回转换的震中不是被单击的TextView。

2 个答案:

答案 0 :(得分:0)

  
      
  • 转换开始时,共享TextView将消失。但如果单击列表的第一项,则共享转换奇迹般地起作用。
  •   
  • 如果更改了详细信息布局,则转换有效。请参阅details.xml。如果我完全删除FrameLayout title_bar并将TextView标题作为根LinearLayout的直接子项,则共享元素转换效果很好。
  •   

看起来细节TextView无法在其父边界之外进行动画处理。尝试将clipChildren设置为false,这样就可以在您的details.xml中将TextView的所有父视图设置为false。它对我有用。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:clipChildren="false"
              android:orientation="vertical">

    <FrameLayout
        android:id="@+id/title_bar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:clipChildren="false">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@android:color/white"
            android:gravity="center"
            android:text="@string/dummy_title"
            android:textColor="@android:color/black"/>
    </FrameLayout>
    ...
</LinearLayout>

答案 1 :(得分:-1)

试试这个 -

使用不同的转换名称设置每个行图像 -

 @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        View view = convertView;

        if (view == null) {
            view = LayoutInflater.from(getContext()).inflate(R.layout.list_item, null);
        }

        TextView textView = (TextView) view.findViewById(R.id.textView);

        ImageView imageView = (ImageView) view.findViewById(R.id.imageView);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            textView.setTransitionName("transtext" + position);
            imageView.setTransitionName("transition" + position);
        }

        return view;
    }
}

然后点击项目点击 -

 ImageView imageView = (ImageView) view.findViewById(R.id.imageView);
            TextView textView = (TextView) view.findViewById(R.id.smallerImageView);

            EndFragment endFragment = new EndFragment();

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

                imageTransitionName = imageView.getTransitionName();
                textTransitionName = textView.getTransitionName();



 setSharedElementReturnTransition(TransitionInflater.from(
                        getActivity()).inflateTransition(R.transition.change_image_trans));


  setExitTransition(TransitionInflater.from(
                    getActivity()).inflateTransition(android.R.transition.fade));

            endFragment.setSharedElementEnterTransition(TransitionInflater.from(
                    getActivity()).inflateTransition(R.transition.change_image_trans));
            endFragment.setEnterTransition(TransitionInflater.from(
                    getActivity()).inflateTransition(android.R.transition.fade));

            }

 Bundle bundle = new Bundle();

        FragmentManager fragmentManager = getFragmentManager();

            bundle.putString("TRANS_NAME", imageTransitionName);
            bundle.putString("TRANS_TEXT", textTransitionName);
            endFragment.setArguments(bundle);

            fragmentManager.beginTransaction()
                    .replace(R.id.container, endFragment)
                    .addToBackStack("Payment")
                    .addSharedElement(imageView, imageTransitionName)
                    .addSharedElement(textView, textTransitionName)
                    .addSharedElement(staticImage, getString(R.string.fragment_image_trans))
                    .commit();

在onFate方法的EndFragment中获取转换名称的键并在视图上设置 -

 public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        Bundle bundle = getArguments();
        String actionTitle = "";
        Bitmap imageBitmap = null;
        String transText = "";
        String transitionName = "";

        if (bundle != null) {
            transitionName = bundle.getString("TRANS_NAME");
            actionTitle = bundle.getString("ACTION");
            imageBitmap = bundle.getParcelable("IMAGE");
            transText = bundle.getString("TRANS_TEXT");
        }

        getActivity().setTitle(actionTitle);
        View view = inflater.inflate(R.layout.fragment_end, container, false);

        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            view.findViewById(R.id.listImage).setTransitionName(transitionName);
            view.findViewById(R.id.smallerImageView).setTransitionName(transText);
        }

        ((ImageView) view.findViewById(R.id.listImage)).setImageBitmap(imageBitmap);
        ((TextView) view.findViewById(R.id.smallerImageView)).setText(actionTitle);

        return view;
    }

相关https://stackoverflow.com/a/31982516/3150663

如果你有解决方案,请投票给我答案。 :)