使用 SharedElement 动画切换 Fragment 页面

最新推荐文章于 2021-05-27 01:24:03 发布
最新推荐文章于 2021-05-27 01:24:03 发布
阅读量2k 收藏
点赞数
分类专栏： android_动画

http://www.wangchenlong.org/2016/03/22/1603/232-fragment-shared-element/

http://www.wangchenlong.org/2016/03/22/1603/232-fragment-shared-element/
http://www.wangchenlong.org/2016/03/22/1603/232-fragment-shared-element/
http://www.wangchenlong.org/2016/03/22/1603/232-fragment-shared-element/



使用 SharedElement 动画切换 Fragment 页面

发表于 2016-03-22    |   分类于 Android    |   暂无评论    |   阅读次数 4521

Android的动画效果, Material Design提出的. 当Fragment切换时, 一些元素(Element)会保持不变, 形成连续动画. 目前只支持Api21+.

更多: http://www.wangchenlong.org/

在这些元素切换时, 页面需要设置addSharedElement()方法. 让我们来看一下如何实现吧.

本文源码的GitHub下载地址

欢迎Follow我的GitHub: https://github.com/SpikeKing

效果

配置

还是从一个HelloWorld工程开始.
build.gradle添加两个常用库, recyclerview和butterknife.

1
2

compile 'com.jakewharton:butterknife:7.0.1'
compile 'com.android.support:recyclerview-v7:23.1.0'

修改主题颜色

1
2

<color name="colorPrimary">#FF1493</color>
<color name="colorPrimaryDark">#FF1493</color>

去掉状态条(status bar)的透明颜色, 在style中, 删除statusBarColor.

1

<item name="android:statusBarColor">@android:color/transparent</item>

主页

在Activity中添加Fragment, 内容在Fragment中添加

1
2
3
4
5
6
7
8
9
10
11
12

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

    // 替换Fragment
    if (savedInstanceState == null) {
        getSupportFragmentManager().beginTransaction()
                .add(R.id.main_cl_container, new GridFragment())
                .commit();
    }
}

Fragment中使用RecyclerView创建一个网格(Grid)页面, 为Item添加点击监听, 这个下一步再完成. Item显示一个图片和一行文字.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

public class GridFragment extends Fragment {

    private ArrayList<Pair<Integer, Integer>> mData;

    @Bind(R.id.grid_rv_recycler)
    RecyclerView mRvRecycler;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_grid, container, false);
        ButterKnife.bind(this, view);
        return view;
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        initData();

        mRvRecycler.setAdapter(new MyGridAdapter(mData, mListener));
        mRvRecycler.setLayoutManager(new GridLayoutManager(getContext(), 2)); // 一行两个
    }

    private MyViewOnClickListener mListener = new MyViewOnClickListener() {
        @Override
        public void onClickedView(MyGridViewHolder holder, int position) {

        }
    };

    // 初始化数据
    private void initData() {
        mData = new ArrayList<>();

        mData.add(Pair.create(R.string.taeyeon, R.drawable.taeyeon));
        mData.add(Pair.create(R.string.jessica, R.drawable.jessica));
        mData.add(Pair.create(R.string.sunny, R.drawable.sunny));
        mData.add(Pair.create(R.string.tiffany, R.drawable.tiffany));
        mData.add(Pair.create(R.string.yuri, R.drawable.yuri));
        mData.add(Pair.create(R.string.yoona, R.drawable.yoona));
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        ButterKnife.unbind(this);
    }
}

RecyclerView的Adapter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

/**
 * Fragment的网格适配器
 * <p/>
 * Created by wangchenlong on 15/11/5.
 */
public class MyGridAdapter extends RecyclerView.Adapter<MyGridViewHolder> {

    private ArrayList<Pair<Integer, Integer>> mData; // 名字和图片
    private MyViewOnClickListener mListener; // 点击事件

    public MyGridAdapter(ArrayList<Pair<Integer, Integer>> data,
                         MyViewOnClickListener listener) {
        mData = data;
        mListener = listener;
    }

    @Override
    public MyGridViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.grid_item, parent, false);
        return new MyGridViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final MyGridViewHolder holder, final int position) {
        holder.getTextView().setText(mData.get(position).first);
        holder.getImageView().setImageResource(mData.get(position).second);

        // 把每个图片视图设置不同的Transition名称, 防止在一个视图内有多个相同的名称, 在变换的时候造成混乱
        // Fragment支持多个View进行变换, 使用适配器时, 需要加以区分
        ViewCompat.setTransitionName(holder.getImageView(), String.valueOf(position) + "_image");

        holder.getImageView().setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mListener.onClickedView(holder, position);
            }
        });
    }

    @Override
    public int getItemCount() {
        return mData.size();
    }
}

注意ViewCompat.setTransitionName();, 把不同的视图设置不同的变换名称, 防止造成混乱, 同时支持多个视图同时变换.

ViewHolder

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/**
 * 提供了Grid的ImageView
 * <p/>
 * Created by wangchenlong on 15/11/5.
 */
public class MyGridViewHolder extends RecyclerView.ViewHolder {

    private ImageView mImageView;
    private TextView mTextView;

    public MyGridViewHolder(View itemView) {
        super(itemView);
        mImageView = (ImageView) itemView.findViewById(R.id.grid_image);
        mTextView = (TextView) itemView.findViewById(R.id.grid_text);
    }

    public ImageView getImageView() {
        return mImageView;
    }

    public TextView getTextView() {
        return mTextView;
    }
}

点击接口, 提供ViewHolder和点击的位置position.

1
2
3

public interface MyViewOnClickListener {
    void onClickedView(MyGridViewHolder holder, int position);
}

效果

网格

详情

主页面跳转之后的详情页面, 根据选择的ID, 创建不同内容的Fragment, 点击图片返回上一个Fragment, 和主页面联动执行动画, 动画逻辑在主页面的FragmentManager中添加的.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

/**
 * 详情页面
 * <p/>
 * Created by wangchenlong on 15/11/5.
 */
public class DetailFragment extends Fragment {

    private static final String ARG_NUMBER = "arg_number";
    private ArrayList<DetailData> mDetailDatas;

    @Bind(R.id.detail_image)
    ImageView mImage;

    @Bind(R.id.detail_head)
    TextView mHead;

    @Bind(R.id.detail_body)
    TextView mBody;

    /**
     * 根据选择的number, 选择展示的数据
     *
     * @param number 数字
     * @return 详情页面
     */
    public static DetailFragment newInstance(@IntRange(from = 0, to = 5) int number) {
        Bundle bundle = new Bundle();
        bundle.putInt(ARG_NUMBER, number);

        DetailFragment detailFragment = new DetailFragment();
        detailFragment.setArguments(bundle);

        return detailFragment;
    }

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

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        initData();

        int number = getArguments().getInt(ARG_NUMBER);
        mImage.setImageResource(mDetailDatas.get(number).getImage());
        mHead.setText(mDetailDatas.get(number).getHead());
        mBody.setText(mDetailDatas.get(number).getBody());

        mImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getActivity().getSupportFragmentManager().popBackStack();
            }
        });
    }



    // 初始化数据
    private void initData() {
        mDetailDatas = new ArrayList<>();
        mDetailDatas.add(new DetailData(R.drawable.taeyeon, R.string.taeyeon, R.string.taeyeon_detail));
        mDetailDatas.add(new DetailData(R.drawable.jessica, R.string.jessica, R.string.jessica_detail));
        mDetailDatas.add(new DetailData(R.drawable.sunny, R.string.sunny, R.string.sunny_detail));
        mDetailDatas.add(new DetailData(R.drawable.tiffany, R.string.tiffany, R.string.tiffany_detail));
        mDetailDatas.add(new DetailData(R.drawable.yuri, R.string.yuri, R.string.yuri_detail));
        mDetailDatas.add(new DetailData(R.drawable.yoona, R.string.yoona, R.string.yoona_detail));
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        ButterKnife.unbind(this);
    }

    // 定义类
    private class DetailData {
        private int mImage;
        private int mHead;
        private int mBody;

        public DetailData(int image, int head, int body) {
            mImage = image;
            mHead = head;
            mBody = body;
        }

        public int getImage() {
            return mImage;
        }

        public int getHead() {
            return mHead;
        }

        public int getBody() {
            return mBody;
        }
    }
}

关键的资源文件, 有一条重要的属性, android:transitionName=""表明需要转换对象的名称, 在点击事件中使用.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
              android:gravity="center"
              android:orientation="vertical"
              android:padding="16dp">

    <ImageView
        android:id="@+id/detail_image"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:scaleType="centerCrop"
        android:src="@drawable/tiffany"
        android:transitionName="@string/image_transition"
        tools:ignore="UnusedAttribute"/>

    <TextView
        android:id="@+id/detail_head"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tiffany"
        android:textAppearance="@style/TextAppearance.AppCompat.Headline"/>

    <TextView
        android:id="@+id/detail_body"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tiffany_detail"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"/>

</LinearLayout>

效果
Detail

重写GridFragment的点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/**
 * 点击事件, 转换元素的动画,
 * 关键addSharedElement(holder.getImageView(), getResources().getString(R.string.image_transition))
 * 绑定ViewHolder的图片和DetailFragment的跳转.
 */
private MyViewOnClickListener mListener = new MyViewOnClickListener() {
    @Override
    public void onClickedView(MyGridViewHolder holder, int position) {
        DetailFragment detailFragment = DetailFragment.newInstance(position);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            detailFragment.setSharedElementEnterTransition(new DetailTransition());
            setExitTransition(new Fade());
            detailFragment.setEnterTransition(new Fade());
            detailFragment.setSharedElementReturnTransition(new DetailTransition());
        }

        getActivity().getSupportFragmentManager().beginTransaction()
                .addSharedElement(holder.getImageView(), getResources().getString(R.string.image_transition))
                .replace(R.id.main_cl_container, detailFragment)
                .addToBackStack(null)
                .commit();
    }
};

关键addSharedElement(), 确定转换的元素View.
Fade是淡出动画; DetailTransition是自定义动画.

填写动画属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/**
 * 转换动画
 * Created by wangchenlong on 15/11/5.
 */
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public class DetailTransition extends TransitionSet {
    public DetailTransition() {
        init();
    }

    // 允许资源文件使用
    public DetailTransition(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        setOrdering(ORDERING_TOGETHER);
        addTransition(new ChangeBounds()).
                addTransition(new ChangeTransform()).
                addTransition(new ChangeImageTransform());
    }
}

动画效果, 添加属性即可.
ChangeBounds: 视图的位置和大小;
ChangeTransform: 视图的比例(scale);
ChangeImageTransform: 图像的比例;

已经都完成了, 当切换Fragment时, 关联视图就会使用动画进行播放!
OK, that’s all! Enjoy it.

原始地址:
http://www.wangchenlong.org/2016/03/22/1603/232-fragment-shared-element/
欢迎Follow我的GitHub, 关注我的简书, 微博, CSDN, 掘金.
我已委托“维权骑士”为我的文章进行维权行动. 未经授权, 禁止转载, 授权或合作请留言.

#Android  #动画

山楂树之恋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Activity之间以及fragment之间跳转 共享元素动画实现
08-30
实现Activity 之间以及 fragment 之间 共享元素 平滑动画过渡跳转,实现界面跳转动画
深入理解共享元素变换（Shared Element Transition）-上
AP0905510的博客
12-19 886
本文将深入分析共享元素变换（shared element transition）以及它在Activity 和Fragment Transitions API中所扮演的角色。这是这Transition系列文章的第三部分： 第一章: Activity和Fragment Transition介绍 第二章: 深入理解内容变换（Content Transition） 第三章
Android Shared Element Transition
qq_36999309的博客
02-08 449
要想实现Shared Element Transition需要实现以下几点·设置共享视图在layout布局文件内,为需要实现该功能的View加上android:transitionName=""假设从活动A跳转到活动B，那么A、B需要共享的View都需要在布局文件内加上一样的名字·启动活动 Bundle bundle= ActivityOptions.makeSceneTransitionAni...
Shared Element Transitions - Part 4: RecyclerView
nightyk的专栏
03-30 927
原文地址：http://mikescamell.com/shared-element-transitions-part-4-recyclerview/在系列的第三节我们看到了如何在使用Picasso或Glide时使用共享元素过渡。在第四节，我们准备通过使用应用程序中热门的共享元素过渡组件RecyclerView来实现这个效果。Google Play Music是我在第一节中提到过的例子，当然还有很多
FragmentSharedElementTransition:片段之间共享元素过渡的示例
05-14
FragmentSharedElementTransition 片段之间共享元素过渡的示例 在此示例中，所有窗口转换都explode并且在第一活动和第二活动中包含的片段之间存在共享元素转换。 然后，两个片段之间会有一个滑动过渡，并具有共享元素过渡。 共享元素 要在片段上启用共享元素转换，请执行3个步骤： 通知事务将存在共享元素转换 getFragmentManager() . beginTransaction() .addSharedElement(view, transitionName); 将共享元素过渡设置为片段 Java fragment . setSharedElementEnterTransition( TransitionInflater . from(context) . inflateTransition( R . transition . chan
21种Fragment切换动画效果
12-24
除此之外，还有共享元素动画（Shared Element Transition），这种动画可以将一个Fragment中的某个视图与另一个Fragment中的对应视图进行平滑过渡，创造出更高级别的用户体验。 要实现Fragment动画，开发者通常需要...
Android下Fragment的动画切换效果
10-10
本教程将深入探讨如何在Android应用程序中实现Fragment之间的动画切换效果，尤其适用于平板电脑和大屏设备。 首先，我们需要了解Fragment的基本操作。在Android中，我们通常使用FragmentManager和...
fragment多种切换动画效果
04-01
此外，还有共享元素动画（Shared Element Transition），这种动画可以让两个Fragment之间共享一个UI元素，比如图片或按钮，实现平滑过渡。 在Android中，动画主要通过以下两种方式实现： 1. **属性动画（Property ...
Android中21中fragment切换的动画
07-07
此外，还有共享元素（Shared Element）动画，这种动画用于两个Fragment之间共享一个视图元素，使得过渡更加平滑自然。 1. **淡入淡出动画**：这是最基础的动画，通过设置`anim/fragment_fade_in.xml`和`anim/...
多样式Fragment动画切换
08-15
本教程将详细讲解如何实现多样式的Fragment动画切换，以提升用户体验并增强应用的视觉吸引力。 一、Fragment动画基础 Fragment之间的切换动画分为进入动画（Enter）和退出动画（Exit），以及共享元素动画（Shared ...
KShareViewActivityManager,一、Android 5.0共享元素转换（shared element transition）.zip
10-14
一、Android 5.0共享元素转换（shared element transition）
shared-element-transitions:Android上的Shared Element Transitions系列博客文章的源代码-android source code
03-25
shared-element-transitions:Android上的Shared Element Transitions系列博客文章的源代码
共享元素实现大图浏览，即recycleView到ViewPager共享动画setExitSharedElementCallback
05-04
类似于微信，微博。九宫格图小图到大图的动画，viewpager左右滑动后共享item改变
Android-轻松实现AndroidShareElement动画
08-13
Easy to implement Android ShareElement Animation（轻松实现Android ShareElement动画）
关于shared element transition 1
wove55678的博客
09-02 441
接到一个需求，需要向tumblr 发布内容页和标签页的切换学习，然后找到shared element transition这个东西。翻译为共享元素转换。 看了很多的资源，我的理解是a页面跳转到b页面是，b中存在和a页显示效果极为相似的控件，所以这两个控件就可以看成是共享的。但由于这两个控件会存在差异，所以会有一个转换的效果。 接下来是实际使用。首先这个东西只适用于v21以上的的系统版本，兼容的
深入理解 Shared Element Transition (part 3a)
k_tiiime的专栏
05-06 2163
深入理解 Shared Element Transition (part 3a)
android自定义共享元素动画,深入理解共享元素变换（Shared Element Transition）-上
weixin_29323049的博客
05-27 1040
本文将深入分析共享元素变换(shared element transition)以及它在Activity 和Fragment Transitions API中所扮演的角色。这是这Transition系列文章的第三部分：第三章下: Shared Element Transitions In Practice (即将发布)第四章: Activity & Fragment Transition ...
共享元素动画与Transition
shanshan_1117的博客
08-30 774
1.首先我们先讲下两个activity之间的共享元素平滑过渡动画: 直接上代码: 在A(activity)中:id_iv.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { DetailActi
Fragment的addSharedElement方法简述
Mystra
11-08 5525
又是一个Android的动画效果, Material提出的. Fragment切换时, 有一些元素(element)会保持不变, 如何使这些元素切换时, 赋予动画效果呢? 需要设置addSharedElement()方法, 目前只支持api21+. 那么我们就来看一下吧. 1. 准备还是从一个HelloWorld工程开始. build.gradle添加两个常用库, recyclerview和but
使用Fragment构建Android页面切换框架
"本文将介绍如何使用Fragment构建一个万能的页面切换框架，以替代传统的Activity切换方式，从而简化Android应用的开发流程。" 在Android开发中，Activity是用于展示用户界面的基本组件，但其切换过程相对繁琐，涉及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值