AndroidStudio 2.3 Beta 1
我将尝试在片段中实现过渡效果,但使用的图像没有过渡效果,而是正常弹出。我创建了一个简单的应用程序来尝试解决这个问题。我有两个片段 ListMovieFragment 和 DetailMovieFragment,以及一个 MainActivity。用户将点击 ListMovieFragment 中的图像以转换到 DetailMovieFragment。
这是我的过渡 xml change_image_transform:
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeImageTransform/>
</transitionSet>
ListMovieFragment:
public class ListMovieFragment extends Fragment {
public interface MovieSelectedListener {
void onMovieSelected(int movieId);
}
private MovieSelectedListener mMovieSelectedListener;
public ListMovieFragment() {
}
@Override
public void onAttach(Context context) {
super.onAttach(context);
mMovieSelectedListener = (MovieSelectedListener)context;
}
@Override
public void onDetach() {
super.onDetach();
mMovieSelectedListener = null;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
final View view = inflater.inflate(R.layout.fragment_list, container, false);
final ImageView ivMoviePoster = (ImageView)view.findViewById(R.id.ivMoviePoster);
ivMoviePoster.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(mMovieSelectedListener != null) {
mMovieSelectedListener.onMovieSelected(12345);
}
}
});
Glide.with(getActivity())
.load("https://image.tmdb.org/t/p/w185/qjiskwlV1qQzRCjpV0cL9pEMF9a.jpg")
.placeholder(R.drawable.placeholder_poster)
.centerCrop()
.crossFade()
.into(ivMoviePoster);
return view;
}
}
DetailMovieFragment
public class DetailMovieFragment extends Fragment {
public DetailMovieFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
final View view = inflater.inflate(R.layout.fragment_detail, container, false);
final ImageView ivMovieDetailPoster = (ImageView)view.findViewById(R.id.ivMovieDetailPoster);
Glide.with(getActivity())
.load("https://image.tmdb.org/t/p/w185/qjiskwlV1qQzRCjpV0cL9pEMF9a.jpg")
.placeholder(R.drawable.placeholder_poster)
.centerCrop()
.crossFade()
.into(ivMovieDetailPoster);
return view;
}
}
主活动
public class MainActivity extends AppCompatActivity implements ListMovieFragment.MovieSelectedListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if(savedInstanceState == null) {
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.add(R.id.activity_main, new ListMovieFragment(), "listmoviefragment");
fragmentTransaction.commit();
}
}
@Override
public void onMovieSelected(int movieId) {
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
/* Get the fragments that will be using the transition */
ListMovieFragment listMovieFragment = new ListMovieFragment();
DetailMovieFragment detailMovieFragment = new DetailMovieFragment();
/* Inflate the transition */
Transition changeTransition = TransitionInflater
.from(MainActivity.this)
.inflateTransition(R.transition.change_image_transform);
Transition explodeTransition = TransitionInflater
.from(MainActivity.this)
.inflateTransition(android.R.transition.explode);
/* Set the exit and return on the source fragment (ListMovieFragment) */
listMovieFragment.setSharedElementReturnTransition(changeTransition);
listMovieFragment.setExitTransition(explodeTransition);
/* Set the enter on the destination fragment (MovieDetailFragment) */
detailMovieFragment.setSharedElementEnterTransition(changeTransition);
detailMovieFragment.setEnterTransition(explodeTransition);
/* Get the shared imageview from the source fragment (MovieListFragment) */
final ImageView ivSharedImage = (ImageView)findViewById(R.id.ivMoviePoster);
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.activity_main, new DetailMovieFragment(), "detailmoviefragment");
fragmentTransaction.addToBackStack("detailmoviefragment");
fragmentTransaction.addSharedElement(ivSharedImage, getResources().getString(R.string.transition_poster_image));
fragmentTransaction.commit();
}
else {
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.activity_main, new DetailMovieFragment(), "detailmoviefragment");
fragmentTransaction.addToBackStack("detailmoviefragment");
fragmentTransaction.commit();
}
}
@Override
public void onBackPressed() {
if(getSupportFragmentManager().getBackStackEntryCount() > 0) {
getSupportFragmentManager().popBackStackImmediate();
}
else {
super.onBackPressed();
}
}
}
ListMovieFragment的布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="6dp">
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ivMoviePoster"
android:layout_width="match_parent"
android:layout_height="300dp"
android:src="@drawable/placeholder_poster"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:transitionName="@string/transition_poster_image">
</ImageView>
</LinearLayout>
DetailMovieFragment的布局:
<FrameLayout 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"
tools:context="me.androidbox.fragmenttransitions.detail.DetailMovieFragment">
<ImageView
android:id="@+id/ivMovieDetailPoster"
android:layout_width="140dp"
android:layout_height="160dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="112dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:layout_gravity="end"
android:transitionName="@string/transition_poster_image"/>
</FrameLayout>
转换名称的字符串名称:
<string name="transition_poster_image">imagePoster</string>
实现看起来很简单,所以我认为我的错误是我忽略了某些东西。
非常感谢任何建议。
detailMovieFragment
中添加返回转换,像这样:detailMovieFragment.setSharedElementReturnTransition(changeTransition);
。猜测这应该可以解决你的问题。 - romtsn