Android开发 之 共享元素

元素"/>

Android开发 之 共享元素

共享元素

如果要在两个拥有共享元素的操作行为之间安排屏幕转换动画：

1.请在您的主题中启用窗口内容转换。

<item name="android:windowContentTransitions">true</item>

2.在您的风格中指定一个共享元素转换。给要共享的元素设置transitionname
3.将您的转换定义为 XML 资源。共享元素动画可以使用xml定义
4.利用 android:transitionName 属性对两个布局中的共享元素指定一个通用名称。
5.使用 ActivityOptions.makeSceneTransitionAnimation() 方法。

// get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);// get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);// define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Intent intent = new Intent(this, Activity2.class);// create the transition animation - the images in the layouts// of both activities are defined with android:transitionName="robot"ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, androidRobotView, "robot");// start the new activitystartActivity(intent, options.toBundle());}
});

对于在您的代码中生成的共享动态视图，请使用 View.setTransitionName() 方法在两个操作行为中指定一个通用元素名称。
如果要在完成第二项操作行为时反转场景转换动画，请调用 Activity.finishAfterTransition() 方法而非 Activity.finish()。

以多个共享元素启动一个操作行为
如果要在两个拥有多个共享元素的操作行为之间安排场景转换动画，请以 android:transitionName 属性（或在两个操作行为中使用 View.setTransitionName() 方法）定义共享元素，并以下列方式创建一个 ActivityOptions 对象：

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,Pair.create(view1, "agreedName1"),Pair.create(view2, "agreedName2"))

以上是基本技术点，下面看实例，先看效果：

代码：

package th.zxq.quxianyundong;import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.SharedElementCallback;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.transition.Slide;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ImageView;import java.util.List;
import java.util.Map;/*** Created by Administrator on 2017/7/24.*/public class MyAnimationActivity extends AppCompatActivity {public static int[] list=new int[]{R.mipmap.tp01,R.mipmap.tp02,R.mipmap.tp03,R.mipmap.tp04,R.mipmap.tp05,R.mipmap.tp06};private RecyclerView recycle;private SharedElementCallback callback=new SharedElementCallback() {@Overridepublic void onMapSharedElements(List<String> names, Map<String, View> sharedElements) {super.onMapSharedElements(names, sharedElements);Log.e("callback","MyAnimationActivity");if(startingPosition!=currentItem){View newSharedElement = recycle.findViewWithTag(currentItem+"");if (newSharedElement != null) {names.clear();names.add(currentItem+"");sharedElements.clear();sharedElements.put(currentItem+"", newSharedElement);}}}};private int currentItem=-1,startingPosition=-1;private PicAdapter picAdapter;@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);setContentView(R.layout.activity_myanimation);getWindow().setEnterTransition(new Slide(Gravity.LEFT));getWindow().setExitTransition(new Slide(Gravity.LEFT));setExitSharedElementCallback(callback);recycle = (RecyclerView) findViewById(R.id.recycle);recycle.setLayoutManager(new GridLayoutManager(this,2));picAdapter = new PicAdapter();recycle.setAdapter(picAdapter);}public class PicAdapter extends RecyclerView.Adapter{@Overridepublic RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view = LayoutInflater.from(MyAnimationActivity.this).inflate(R.layout.item_recycle, parent, false);return new MyViewHolder(view);}@Overridepublic void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {MyViewHolder mholder= (MyViewHolder) holder;mholder.setData(position);}@Overridepublic int getItemCount() {return list.length;}}public class MyViewHolder extends RecyclerView.ViewHolder{private ImageView iv;public MyViewHolder(View itemView) {super(itemView);iv= (ImageView) itemView.findViewById(R.id.iv);}public void setData(final int position){iv.setTransitionName(position+"");iv.setTag(position+"");iv.setBackgroundResource(list[position]);iv.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {startingPosition=position;currentItem=startingPosition;Intent intent = new Intent(MyAnimationActivity.this, PicDetailActivity.class);intent.putExtra("transitionName",iv.getTransitionName());ActivityOptions activityOptions = ActivityOptions.makeSceneTransitionAnimation(MyAnimationActivity.this, iv, iv.getTransitionName());startActivity(intent,activityOptions.toBundle());}});}}@Overridepublic void onActivityReenter(int resultCode, Intent data) {super.onActivityReenter(resultCode, data);currentItem = data.getExtras().getInt("currentItem");if (startingPosition != currentItem) {recycle.scrollToPosition(currentItem);}postponeEnterTransition();recycle.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {@Overridepublic boolean onPreDraw() {recycle.getViewTreeObserver().removeOnPreDrawListener(this);// TODO: figure out why it is necessary to request layout here in order to get a smooth transition.recycle.requestLayout();startPostponedEnterTransition();return true;}});}
}

package th.zxq.quxianyundong;import android.app.SharedElementCallback;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.ImageView;import java.util.List;
import java.util.Map;/*** Created by Administrator on 2017/7/24.*/public class PicDetailActivity extends AppCompatActivity {private ImageView iv_push;private ViewPager viewpager;private int mCurrentPosition=-1;private ImageView currentiv;private boolean mIsReturning;private final SharedElementCallback mCallback = new SharedElementCallback() {@Overridepublic void onMapSharedElements(List<String> names, Map<String, View> sharedElements) {Log.e("callback","PicDetailActivity");if(mIsReturning&&mCurrentPosition!=Integer.parseInt(startpositon)){names.clear();names.add(currentiv.getTransitionName());sharedElements.clear();sharedElements.put(currentiv.getTransitionName(), currentiv);}}};private String startpositon;@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_picdetail);postponeEnterTransition();startpositon = (String) getIntent().getExtras().get("transitionName");mCurrentPosition=Integer.parseInt(startpositon);setEnterSharedElementCallback(mCallback);iv_push= (ImageView) findViewById(R.id.iv_push);viewpager = (ViewPager) findViewById(R.id.viewpager);viewpager.setAdapter(new Myadapter());viewpager.setCurrentItem(Integer.parseInt(startpositon));
//        iv_push.setTransitionName(transitionName);
//        iv_push.setBackgroundResource(MyAnimationActivity.list[Integer.parseInt(transitionName)]);viewpager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){@Overridepublic void onPageSelected(int position) {mCurrentPosition = position;}});}public class Myadapter extends PagerAdapter{private View view;public Myadapter(){}@Overridepublic int getCount() {return MyAnimationActivity.list.length;}@Overridepublic boolean isViewFromObject(View view, Object object) {return view==object;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView((ImageView) object);
//            super.destroyItem(container, position, object);}@Overridepublic Object instantiateItem(ViewGroup container, int position) {    //实例化Item// TODO Auto-generated method stubview =  LayoutInflater.from(PicDetailActivity.this).inflate(R.layout.item_detailpagerview, null);final ImageView iv_pager= (ImageView) view.findViewById(R.id.iv_pager);iv_pager.setTransitionName(position+"");iv_pager.setBackgroundResource(MyAnimationActivity.list[Integer.parseInt(iv_pager.getTransitionName())]);iv_pager.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {@Overridepublic boolean onPreDraw() {iv_pager.getViewTreeObserver().removeOnPreDrawListener(this);startPostponedEnterTransition();return true;}});ViewGroup vg= (ViewGroup) iv_pager.getParent();vg.removeView(iv_pager);container.addView(iv_pager);return iv_pager;}@Overridepublic void setPrimaryItem(ViewGroup container, int position, Object object) {super.setPrimaryItem(container, position, object);currentiv= (ImageView) object;}}@Overridepublic void finishAfterTransition() {mIsReturning = true;Intent data = new Intent();data.putExtra("currentItem",mCurrentPosition);setResult(RESULT_OK, data);super.finishAfterTransition();}
}

上面代码中的 SharedElementCallback是在activity退出和进入的时候都会调用一次。