android过渡动画之makeSceneTransitionAnimation学习笔记

Android的过渡动画已经出了好久了,一直没怎么使用。自己还是懒啊,昨天在看blog的时候,看到了亓斌的blog里有相关的介绍。正好,自己也就跟着学一下,写一个例子做为应用。 http://blog.csdn.net/qibin0506/article/details/48129139 http://blog.csdn.net/qibin0506/article/details/53248597 上面这两个就是亓斌的blog,大家可以去看一下,可以让你知道是怎么回事,我这里只是在应用上做一个例子。 这个例子,很简单,就是从一个列表页,到详细页的转换,它的过渡动画相当不错,因为机器没有安虚拟器,所以就不放图了,我会在最后,给一个demo。 要使用android的过渡动画,你的最小版本也要4.0,而要使用其中的share功能,你就得是5.0以上。这个大家要注意了。 功能很简单,就是两个页面,一个listView页面,一个页面。 一,修改style.xml 我们要先在style.xml里,添加过渡样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

二,建立列表页,这里就是使用最简单的listView,没有下列刷新也没有更多,就是一个列表activity_list_view_text.xml

<?xml version="1.0" encoding="utf-8"?>
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.cg.activityoptionslearn.ListViewTextActivity"> android:id="@+id/list_text"
android:layout_width="match_parent"
android:layout_height="match_parent">
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13

列表项中,因为我要试多view协作,所以加三个控件,一个图片,两个TextView

注:这里会为每个控件添加一个transitionName的属性,它的名字是与详细页面相应控件的这个属性名是一样的,是为了实现过渡动画的。

listitem.xml

<?xml version="1.0" encoding="utf-8"?> android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/img_img"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="5dp"
android:transitionName="image"
/> android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp">
android:id="@+id/txt_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="我是标题"
android:gravity="center_vertical"
android:transitionName="title"/>
android:id="@+id/txt_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:singleLine="false"
android:maxLines="2"
android:transitionName="content"
/>

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
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

下面是一个model myNews.java

/**
* Created by Administrator on 2016/12/7 0007.
*/
public class myNews {
private String title;
private String content;
private int pic;
public myNews() {
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public int getPic() {
return pic;
}
public void setPic(int pic) {
this.pic = pic;
}
}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
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

一个Adapter myAdapter.java

package com.example.cg.activityoptionslearn.adpter;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.support.v4.app.ActivityCompat;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v4.util.Pair;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.cg.activityoptionslearn.ContentActivity;
import com.example.cg.activityoptionslearn.R;
import com.example.cg.activityoptionslearn.models.myNews;
import java.util.List;
/**
* Created by Administrator on 2016/12/7 0007.
*/
public class myAdapter extends BaseAdapter {
private List list_data;
private LayoutInflater inflater;
private Context context;
public myAdapter(Context context,List list_data) {
this.context = context;
this.list_data = list_data;
this.inflater = LayoutInflater.from(context);
}
@Override
public int getCount() {
return list_data.size();
}
@Override
public Object getItem(int i) {
return list_data.get(i);
}
@Override
public long getItemId(int i) {
return i;
}
@Override
public View getView(final int i, View view, ViewGroup viewGroup) {
myHolder mHolder;
if(view==null)
{
mHolder = new myHolder();
view = inflater.inflate(R.layout.listitem,null);
mHolder.tv_title = (TextView)view.findViewById(R.id.txt_title);
mHolder.tv_content = (TextView)view.findViewById(R.id.txt_content);
mHolder.img = (ImageView)view.findViewById(R.id.img_img);
view.setTag(mHolder);
}else{
mHolder = (myHolder)view.getTag();
}
mHolder.tv_title.setText(list_data.get(i).getTitle());
mHolder.tv_content.setText(list_data.get(i).getContent());
mHolder.img.setImageResource(list_data.get(i).getPic());
/*mHolder.tv_title.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation((Activity) context, view, "title");
Intent intent = new Intent();
intent.setClass(context, ContentActivity.class);
intent.putExtra("title", list_data.get(i).getTitle());
intent.putExtra("content", list_data.get(i).getContent());
intent.putExtra("image", list_data.get(i).getPic());
ActivityCompat.startActivity((Activity) context, intent, compat.toBundle());
}
});
mHolder.tv_content.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation((Activity) context, view, "content");
Intent intent = new Intent();
intent.setClass(context, ContentActivity.class);
intent.putExtra("title", list_data.get(i).getTitle());
intent.putExtra("content", list_data.get(i).getContent());
intent.putExtra("image",list_data.get(i).getPic());
ActivityCompat.startActivity((Activity) context, intent, compat.toBundle());
}
});
mHolder.img.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation((Activity) context, view, "image");
Intent intent = new Intent();
intent.setClass(context, ContentActivity.class);
intent.putExtra("title", list_data.get(i).getTitle());
intent.putExtra("content", list_data.get(i).getContent());
intent.putExtra("image",list_data.get(i).getPic());
ActivityCompat.startActivity((Activity) context, intent, compat.toBundle());
}
});*/
return view;
}
class myHolder
{
TextView tv_title;
TextView tv_content;
ImageView img;
}
}
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

列表页面的代码 ListViewTextActivity.java

package com.example.cg.activityoptionslearn;
import android.content.Context;
import android.content.Intent;
import android.support.v4.app.ActivityCompat;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v4.util.Pair;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.TextView;
import com.example.cg.activityoptionslearn.adpter.myAdapter;
import com.example.cg.activityoptionslearn.models.myNews;
import java.util.ArrayList;
import java.util.List;
/**
* 在listView的item中使用makeSceneTransitionAnimation动画
* 点击标题进入到详细页面
*/
public class ListViewTextActivity extends AppCompatActivity {
public static void ListViewTextActivityStart(Context context)
{
Intent intent = new Intent();
intent.setClass(context,ListViewTextActivity.class);
context.startActivity(intent);
}
private ListView list_text;
private List list_data;
private myAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_list_view_text);
initData();
initControls();
}
/**
* 初始化数据
*/
private void initData() {
list_data = new ArrayList<>();
myNews mNews1 = new myNews();
mNews1.setTitle("倒计时1天,2016中国大数据技术大会召开在即");
mNews1.setContent("2016中国大数据技术大会(Big Data Technology Conference 2016,BDTC 2016)将于12月8日-10日在北京新云南皇冠假日酒店如约召开。作为大数据技术开发者的年度盛会,大会主办方共设置了16大专题论坛,邀请了超过130位大数据专家亲临现场,为与会者奉献一场大数据技术和应用的饕餮盛宴。(建议一定要带相机!)/n" +
"/n" +
"如果您抢到了本次大会的门票,下面的提示要点也许能帮助您获得更好的现场体验:/n" +
"/n" +
"活动地点是北京新云南皇冠假日酒店,在北京市朝阳区东北三环西坝河,太阳宫桥东北角。地铁十号线芍药居站E口出来左转(太阳宫桥东北角)就可以到达。/n" +
"/n" +
"北京天气寒冷,请大家注意保暖,尤其是南方来的小伙伴们,准备好御寒的衣物,最好带上口罩(我们都懂得)。预计会议期间的天气和温度如下:");
mNews1.setPic(R.drawable.mm2);
list_data.add(mNews1);
myNews mNews2 = new myNews();
mNews2.setTitle("【ECCV 2016】Grid Loss及其在人脸检测中的应用");
mNews2.setContent("检测被遮挡的人脸,这一任务的难点在于,遮挡会导致一部分人脸特征缺失,取而代之的是遮挡物的特征,这不仅容易引起分类器误判," +
"还容易造成漏检。解决遮挡人脸检测的问题可以从数据与算法两个方面切入。从数据方面入手的做法较为直接,即在分类器训练阶段," +
"在正样例集中加入一定比例的带遮挡人脸,让分类器从数据中自动去学习带遮挡人脸的变化模式。数据驱动的方式也就意味着对数据的依赖," +
"而遮挡的变化模式复杂多样,如果希望模型能对遮挡有较好的鲁棒性和泛化能力,那将需要非常大量的数据。从算法的角度入手," +
"已有的一些工作在解决遮挡问题时,有些需要在训练数据中标好人脸的五官,这样在训练数据的制备收集阶段要花费更多的精力;" +
"有些在人脸检测的预测阶段有额外的计算,这样会因为处理遮挡带来额外的时间开销,而检测本身就是一个对速度极其敏感的任务,这也不是我们希望看到的。");
mNews2.setPic(R.drawable.mm3);
list_data.add(mNews2);
myNews mNews3 = new myNews();
mNews3.setTitle("李理:详解卷积神经网络");
mNews3.setContent("这里主要参考了Neural Networks and Deep Learning和cs231n的课程来介绍CNN,两部分都会有理论和代码。前者会用theano来实现," +
"而后者会使用我们前一部分介绍的自动梯度来实现。下面首先介绍Michael Nielsen的部分(其实主要是翻译,然后加一些我自己的理解)。/n" +
"/n" +
"前面的话/n" +
"如果读者自己尝试了上一部分的代码,调过3层和5层全连接的神经网络的参数,我们会发现神经网络的层数越多,参数(超参数)" +
"就越难调。但是如果参数调得好,深的网络的效果确实比较浅的好(这也是为什么我们要搞深度学习的原因)。" +
"所以深度学习有这样的说法:“三个 bound 不如一个 heuristic,三个 heuristic 不如一个trick”。" +
"以前搞机器学习就是feature engineering加调参,现在就剩下调参了。网络的结构,参数的初始化,learning_rate," +
"迭代次数等等都会影响最终的结果。有兴趣的同学可以看看Michael Nielsen这个电子书的相应章节,cs231n的Github资源也有介绍," +
"另外《Neural Networks: Tricks of the Trade》这本书,看名字就知道讲啥的了吧。");
mNews3.setPic(R.drawable.mm2);
list_data.add(mNews3);
myNews mNews4 = new myNews();
mNews4.setTitle("PouchDB:浏览器端数据库");
mNews4.setContent("PouchDB是一个受Apache CouchDB启发的开源JavaScript数据库。可以完美运行在浏览器中。/n" +
"/n" +
"PouchDB设计的初衷是,帮助Web开发者构建能在本地离线运行的App,一如在线时运行的一样。/n" +
"/n" +
"它能让应用程序离线时存储数据,并在回到线上时与服务器兼容,同步数据,保持用户数据的同步。/n" +
"/n" +
"什么是PouchDB?/n" +
"PouchDB是CouchDB的JavaScript实现,目标是实现可以和CouchDB相媲美的API,可以在浏览器和Node.js运行。/n" +
"/n" +
"什么是CouchDB?/n" +
"CouchDB是由Damien Katz于2015年写的NoSQL数据库,现在由Apache软件基金会负责维护。如果你是一个JavaScript开发者,你可能每天都在用CouchDB,因为它的核心技术驱动着npm。/n" +
"/n" +
"Couchbase、CouchDB等都是什么?/n" +
"现在,有两个数据库的血缘可以追溯到CouchDB:Couchbase,和Cloudant。他们都是从CouchDB分离出来的产品。/n" +
"/n" +
"然而,这三种数据库都是使用了相同的CouchDBsync协议。这意味着PouchDB可与这三个数据库配合使用。/n" +
"/n" +
"换句话说,这些数据库像是电话运营商,而CouchDB同步协议是底层的基础技术。");
mNews4.setPic(R.drawable.mm3);
list_data.add(mNews4);
myNews mNews5 = new myNews();
mNews5.setTitle("5位讲师齐聚一堂 共讨“网络与通讯大数据”未来");
mNews5.setContent("作为国内大数据领域的顶级大会,2016中国大数据技术大会将于2016年12月8日-10日在北京新云南皇冠假日酒店隆重举办。" +
"中国大数据技术大会从2008年至今已近十年,超过一万名大数据开发者参与其中,完整地见证了中国大数据技术与应用的变革," +
"忠实地描绘了大数据领域内的技术热点,沉淀了无数极具价值的行业实战经验,历经九届的中国大数据技术大会由于其专业性、技术性," +
"已经成为国内外大数据领域的顶级盛会,也因此受到大数据开发者的强烈关注。/n" +
"/n" +
"本次大会是由中国计算机学会(CCF)主办,CCF大数据专家委员会承办,中国科学院计算技术研究所、中科天玑数据科技股份有限公司与CSDN共同协办。" +
"聚焦行业最佳实践,数据与应用的深度融合,关注热门技术在行业中的最佳实践和深度应用。除Keynote以外,主办方还精心策划了16场+专题技术和行业论坛," +
"100多场技术演讲,累计邀请超过130位技术专家担任演讲嘉宾。预计数千名大数据行业精英、技术专家及意见领袖将齐聚2016中国大数据技术大会," +
"分享最新技术与实践的洞察与经验,共商大数据时代发展之计。");
mNews5.setPic(R.drawable.p1);
list_data.add(mNews5);
myNews mNews6 = new myNews();
mNews6.setTitle("聚焦行业最佳实践,BDTC 2016最新完整议程公布");
mNews6.setContent("2016年12月8-10日,由中国计算机学会(CCF)主办,CCF大数据专家委员会承办,中国科学院计算技术研究所、" +
"中科天玑数据科技股份有限公司与CSDN共同协办的2016中国大数据技术大会(Big Data Technology Conference 2016,BDTC 2016)" +
"将在北京新云南皇冠假日酒店隆重举办。/n" +
"/n" +
"中国大数据技术大会(BDTC)的前身是Hadoop中国云计算大会(Hadoop in China,HiC)。从2008年仅60余人参加的技术沙龙发展到当下数千人参与," +
"国内最具影响力、规模最大的大数据领域技术盛会,以及国内外中高级技术精英最期待大数据技术交流平台。" +
"连续成功举办九届的BDTC见证了中国大数据技术生态系统的建立、发展和演变。");
mNews6.setPic(R.drawable.mm2);
list_data.add(mNews6);
myNews mNews7 = new myNews();
mNews7.setTitle("Android应用内存泄漏的定位、分析与解决策略");
mNews7.setContent("图中的每个圆节点代表对象的内存资源,箭头代表可达路径。当圆节点与 GC Roots 存在可达路径时,表示当前资源正被引用," +
"虚拟机是无法对其进行回收的(如图中的黄色节点)。反过来,如果圆节点与 GC Roots 不存在可达路径,则意味着这块对象的内存资源不再被程序引用," +
"系统虚拟机可以在 GC 过程中将其回收掉。/n" +
"/n" +
"有了上面的内存回收的栗子,那么接下来就可以说说什么是内存泄漏了。从定义上讲,Android(Java)平台的内存泄漏是指没有用的对象资源任" +
"与GC-Root保持可达路径,导致系统无法进行回收。举一个最简单的栗子,我们在 Activity 的 onCreate 函数中注册一个广播接收者," +
"但是在 onDestory 函数中并没有执行反注册,当 Activity 被 finish 掉时,Activity 对象已经走完了自身的生命周期," +
"应该被资源回收释放掉,但由于没有反注册, 此时 Activity 和 GC-Root 间任然有可达路径存在,导致 Activity 虽然被销毁," +
"但是所占用的内存资源却无法被回收掉。类似的栗子其实有很多,不一一例举了。对于 Android(Java)内存回收管理想要再深入了解的童鞋," +
"可以看看下面资源:");
mNews7.setPic(R.drawable.p1);
list_data.add(mNews7);
myNews mNews8 = new myNews();
mNews8.setTitle("倒计时1天,2016中国大数据技术大会召开在即");
mNews8.setContent("2016中国大数据技术大会(Big Data Technology Conference 2016,BDTC 2016)将于12月8日-10日在北京新云南皇冠假日酒店如约召开。作为大数据技术开发者的年度盛会,大会主办方共设置了16大专题论坛,邀请了超过130位大数据专家亲临现场,为与会者奉献一场大数据技术和应用的饕餮盛宴。(建议一定要带相机!)/n" +
"/n" +
"如果您抢到了本次大会的门票,下面的提示要点也许能帮助您获得更好的现场体验:/n" +
"/n" +
"活动地点是北京新云南皇冠假日酒店,在北京市朝阳区东北三环西坝河,太阳宫桥东北角。地铁十号线芍药居站E口出来左转(太阳宫桥东北角)就可以到达。/n" +
"/n" +
"北京天气寒冷,请大家注意保暖,尤其是南方来的小伙伴们,准备好御寒的衣物,最好带上口罩(我们都懂得)。预计会议期间的天气和温度如下:");
mNews8.setPic(R.drawable.mm2);
list_data.add(mNews8);
myNews mNews9 = new myNews();
mNews9.setTitle("Firebug宣布停止开发更新");
mNews9.setContent("Firebug是Firefox旗下的一款扩展工具,可以在各种浏览器下面调试功能。它集HTML查看和编辑、Javascript控制台、" +
"网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。/n" +
"/n" +
"随着Firefox内置工具DevTools的发展强大,Firebug也迎来了停更的命运。无论怎样,Firebug都曾给开发者给予过太多的惊喜与帮助," +
"祝它一路走好。/n" +
"/n" +
"下面分别是摘取Hacker News和Reddit网友的一些评论:/n" +
"/n" +
"Epskampie:依我来看,Firebug在Web开发上进行了一次革命,使得普通的开发者也可以进行JS Web应用的开发。" +
"感谢您为开发者在当今浏览器中提供了“开发人员工具”使用的界面和工具。/n" +
"/n" +
"nkkollaw:我上次使用Firebug还是在几年前,它使得依赖Firefox开发比其它任何浏览器轻100倍。后来,Chrome出来了," +
"Firefox也内置了DevTools,因此,它的停产是有意义的。但无论怎样,它都是一个好产品。");
mNews9.setPic(R.drawable.p1);
list_data.add(mNews9);
myNews mNews10 = new myNews();
mNews10.setTitle("基于Tensorflow和TF-Slim图像分割示例");
mNews10.setContent("在上一篇文章里(如何用TensorFlow和TF-Slim实现图像分类与分割),我们介绍了如何截取图片的中央区域," +
"然后用标准的分类模型对图片的类别进行预测。随后,我们又介绍了如何将网络模型改为全卷积模式,对整张图片进行预测。" +
"我们通过这种方法可以得到原始图片的一张降采样预测图 —— 降采样是由于网络结构含有最大池化层。这种预测图可以被视为一种全图的快速预测。" +
"你也可以把它看作是一种图像分割的方法,但并不算严格意义上的图像分割,因为标准网络模型是以图像分类的目标而训练得到的。" +
"为了实现真正的图像分割任务,我们需要在图像分割的数据集上重新训练模型,训练的方法参照Long等人发表的论文" +
"《Fully convolutional networks for semantic segmentation》。图像分割常用的两种数据集分别是:" +
"Microsoft COCO和PASCAL VOC。/n" +
"/n" +
"在这篇文章里,我们将对预测图进行上采样,从而使得输出的图片与输入图片尺寸保持一致。值得注意的一点是不要把我们的方法与所谓的deconvolution混淆," +
"它们分别是两种不同的操作方法。我们的方法准确的来说应该叫fractionally strided convolution,或者称之为微步长卷积吧。" +
"下文中,我们会适当介绍一些理论知识以便于理解。");
mNews10.setPic(R.drawable.mm1);
list_data.add(mNews10);
}
/**
* 初始化控件
*/
private void initControls() {
list_text = (ListView)findViewById(R.id.list_text);
mAdapter = new myAdapter(this,list_data);
list_text.setAdapter(mAdapter);
list_text.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
//这里我用的是多view连动,你可以根据你自己情况,采用单独的或是几个view过渡
Pair pTitle = Pair.create(view.findViewById(R.id.txt_title),"title");
Pair pContent = Pair.create(view.findViewById(R.id.txt_content),"content");
Pair pImage = Pair.create(view.findViewById(R.id.img_img),"image");
ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation(ListViewTextActivity.this,pTitle,pContent,pImage);
Intent intent = new Intent();
intent.setClass(ListViewTextActivity.this,ContentActivity.class);
intent.putExtra("title", list_data.get(i).getTitle());
intent.putExtra("content", list_data.get(i).getContent());
intent.putExtra("image",list_data.get(i).getPic());
ActivityCompat.startActivity(ListViewTextActivity.this,intent,compat.toBundle());
}
});
}
}
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230

在这个页面中有一点要说明,就是在过渡动画的时候,我们可以让它多view互动,也可以使用单view互动。 上面的例子中给出的是多view互动,单view就是

ActivityOptionsCompat compat =
ActivityOptionsCompat.makeSceneTransitionAnimation(this,
view, "content");1
2
3
1
2
3

三,建立详细页面 activity_content.xml这里要注意的就是transitionName它的名字一定要与上面的对应上,过渡动画就是指它来进行判断的,你可以试,把图片的改成内容,或是把内容的改成标题,看是什么效果。

<?xml version="1.0" encoding="utf-8"?> xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.cg.activityoptionslearn.ContentActivity"
android:orientation="vertical">
android:id="@+id/txt_cTitle"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:transitionName="title"/>
android:id="@+id/img_cimg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:transitionName="image"
/>
android:id="@+id/txt_cContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:transitionName="content"
/>
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
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

ContentActivity.java

package com.example.cg.activityoptionslearn;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;
public class ContentActivity extends AppCompatActivity {
private TextView txt_cTitle;
private TextView txt_cContent;
private ImageView img_cimg;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_content);
initControls();
}
/**
* 初始化控件
*/
private void initControls() {
txt_cTitle = (TextView)findViewById(R.id.txt_cTitle); txt_cContent = (TextView)findViewById(R.id.txt_cContent); img_cimg = (ImageView)findViewById(R.id.img_cimg); txt_cTitle.setText(getIntent().getStringExtra("title"));
txt_cContent.setText(getIntent().getStringExtra("content"));
img_cimg.setImageResource(getIntent().getIntExtra("image",0));
}
}