package com.mvc.kinballwc.ui.fragment; import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.animation.AnimatorSet; import android.animation.ObjectAnimator; import android.graphics.Point; import android.graphics.Rect; import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.view.animation.DecelerateInterpolator; import android.widget.ImageView; import android.widget.ProgressBar; import com.bumptech.glide.Glide; import com.bumptech.glide.load.engine.DiskCacheStrategy; import com.bumptech.glide.load.resource.drawable.GlideDrawable; import com.bumptech.glide.request.RequestListener; import com.bumptech.glide.request.target.Target; import com.mvc.kinballwc.R; import com.mvc.kinballwc.ui.activity.HomeActivity; import com.mvc.kinballwc.ui.adapter.TabPagerAdapter; import com.mvc.kinballwc.utils.Utils; /** * Author: Mario Velasco Casquero * Date: 27/6/15 * Email: m3ario@gmail.com */ public class RefereesFragment extends Fragment { private static final String TAG = "TeamsFragment"; private static final int SHORT_ANIMATION_DURATION = 200; private TabLayout tabLayout; private ViewPager viewPager; private View rootLayout; private ImageView expandedImageView; private ProgressBar progressBar; private Animator mCurrentAnimator; private View lastThumbImage; private Rect startBounds; private float startScaleFinal; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { Log.d(TAG, "onCreate"); View view = inflater.inflate(R.layout.fragment_referees, container, false); ((HomeActivity) getActivity()).setupToolbar(view); rootLayout = view; progressBar = (ProgressBar) view.findViewById(R.id.progressBar); expandedImageView = (ImageView) view.findViewById(R.id.expanded_image); viewPager = (ViewPager) view.findViewById(R.id.referees_viewpager); tabLayout = (TabLayout) view.findViewById(R.id.referees_tabs); if (viewPager != null && tabLayout != null) { setupTabs(); } return view; } public boolean allowBackPressed() { if (expandedImageView != null && expandedImageView.getVisibility() == View.VISIBLE) { zoomOutImage(lastThumbImage); return false; } return true; } private void setupTabs() { String[] categoryQueries = Utils.getCategoriesRefees(); String[] categoryNames = getResources().getStringArray(R.array.categoriesReferees); TabPagerAdapter tabPagerAdapter = new TabPagerAdapter(getChildFragmentManager()); for (int i = 0; i < categoryNames.length; i++) { Fragment fragment = RefereesTabFragment.newInstance(this, categoryQueries[i]); tabPagerAdapter.addFragment(fragment, categoryNames[i]); } viewPager.setAdapter(tabPagerAdapter); tabLayout.setTabMode(TabLayout.MODE_FIXED); tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); tabLayout.post(new Runnable() { @Override public void run() { Log.d(TAG, "setting view pager"); tabLayout.setupWithViewPager(viewPager); } }); } private void zoomImageFromThumb(final View thumbView, String url) { if (thumbView == null) { // || TextUtils.isEmpty(url)){ return; } lastThumbImage = thumbView; progressBar.setVisibility(View.VISIBLE); // If there's an animation in progress, cancel it // immediately and proceed with this one. if (mCurrentAnimator != null) { mCurrentAnimator.cancel(); } // Load the high-resolution "zoomed-in" image. Glide.with(this) .load(url) .placeholder(R.drawable.placeholder) .diskCacheStrategy(DiskCacheStrategy.ALL) .error(R.drawable.ic_error) .fitCenter() .listener(new RequestListener<String, GlideDrawable>() { @Override public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) { progressBar.setVisibility(View.GONE); return false; } @Override public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) { progressBar.setVisibility(View.GONE); expandedImageView.setImageDrawable(resource); return false; } }) .into(expandedImageView); // Calculate the starting and ending bounds for the zoomed-in image. // This step involves lots of math. Yay, math. startBounds = new Rect(); final Rect finalBounds = new Rect(); final Point globalOffset = new Point(); // The start bounds are the global visible rectangle of the thumbnail, // and the final bounds are the global visible rectangle of the container // view. Also set the container view's offset as the origin for the // bounds, since that's the origin for the positioning animation // properties (X, Y). thumbView.getGlobalVisibleRect(startBounds); rootLayout.getGlobalVisibleRect(finalBounds, globalOffset); startBounds.offset(-globalOffset.x, -globalOffset.y); finalBounds.offset(-globalOffset.x, -globalOffset.y); // Adjust the start bounds to be the same aspect ratio as the final // bounds using the "center crop" technique. This prevents undesirable // stretching during the animation. Also calculate the start scaling // factor (the end scaling factor is always 1.0). float startScale; if ((float) finalBounds.width() / finalBounds.height() > (float) startBounds.width() / startBounds.height()) { // Extend start bounds horizontally startScale = (float) startBounds.height() / finalBounds.height(); float startWidth = startScale * finalBounds.width(); float deltaWidth = (startWidth - startBounds.width()) / 2; startBounds.left -= deltaWidth; startBounds.right += deltaWidth; } else { // Extend start bounds vertically startScale = (float) startBounds.width() / finalBounds.width(); float startHeight = startScale * finalBounds.height(); float deltaHeight = (startHeight - startBounds.height()) / 2; startBounds.top -= deltaHeight; startBounds.bottom += deltaHeight; } // Hide the thumbnail and show the zoomed-in view. When the animation // begins, it will position the zoomed-in view in the place of the // thumbnail. thumbView.setAlpha(0f); expandedImageView.setVisibility(View.VISIBLE); // Set the pivot point for SCALE_X and SCALE_Y transformations // to the top-left corner of the zoomed-in view (the default // is the center of the view). expandedImageView.setPivotX(0f); expandedImageView.setPivotY(0f); // Construct and run the parallel animation of the four translation and // scale properties (X, Y, SCALE_X, and SCALE_Y). AnimatorSet set = new AnimatorSet(); set .play(ObjectAnimator.ofFloat(expandedImageView, View.X, startBounds.left, finalBounds.left)) .with(ObjectAnimator.ofFloat(expandedImageView, View.Y, startBounds.top, finalBounds.top)) .with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_X, startScale, 1f)).with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_Y, startScale, 1f)); set.setDuration(SHORT_ANIMATION_DURATION); set.setInterpolator(new DecelerateInterpolator()); set.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { mCurrentAnimator = null; } @Override public void onAnimationCancel(Animator animation) { mCurrentAnimator = null; } }); set.start(); mCurrentAnimator = set; // Upon clicking the zoomed-in image, it should zoom back down // to the original bounds and show the thumbnail instead of // the expanded image. startScaleFinal = startScale; expandedImageView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { zoomOutImage(thumbView); } }); } private void zoomOutImage(final View thumbView) { progressBar.setVisibility(View.GONE); if (mCurrentAnimator != null) { mCurrentAnimator.cancel(); } // Animate the four positioning/sizing properties in parallel, // back to their original values. AnimatorSet set = new AnimatorSet(); set.play(ObjectAnimator .ofFloat(expandedImageView, View.X, startBounds.left)) .with(ObjectAnimator .ofFloat(expandedImageView, View.Y,startBounds.top)) .with(ObjectAnimator .ofFloat(expandedImageView, View.SCALE_X, startScaleFinal)) .with(ObjectAnimator .ofFloat(expandedImageView, View.SCALE_Y, startScaleFinal)); set.setDuration(SHORT_ANIMATION_DURATION); set.setInterpolator(new DecelerateInterpolator()); set.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { thumbView.setAlpha(1f); expandedImageView.setVisibility(View.GONE); mCurrentAnimator = null; } @Override public void onAnimationCancel(Animator animation) { thumbView.setAlpha(1f); expandedImageView.setVisibility(View.GONE); mCurrentAnimator = null; } }); set.start(); mCurrentAnimator = set; } public class ExpandOnClickListener implements View.OnClickListener { private View mThumbImage; private String mUrl; public ExpandOnClickListener(View view, String url) { this.mThumbImage = view; this.mUrl = url; } @Override public void onClick(View v) { zoomImageFromThumb(mThumbImage, mUrl); } } }