Skip to content

Commit

Permalink
Improved DN Story transition.
Browse files Browse the repository at this point in the history 
– Introduced ReflowText & StretchyChangeBounds transitions.
– Make CollapsingTitleLayout work with text reflowing.
– Improve choreography of DN story enter/exit.
– Some minor tweaks to dribbble shot transition & Pop.
  • Loading branch information
@nickbutcher
nickbutcher committed Jul 29, 2016
1 parent 8f8cdb0 commit 7750cd7
Show file tree
Hide file tree
Showing 25 changed files with 1,719 additions and 138 deletions.
39 changes: 20 additions & 19 deletions app/src/main/java/io/plaidapp/ui/DesignerNewsStory.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
import android.app.Activity;
import android.app.ActivityOptions;
import android.app.PendingIntent;
import android.app.SharedElementCallback;
import android.app.assist.AssistContent;
import android.content.Context;
import android.content.Intent;
Expand All @@ -39,15 +40,13 @@
import android.support.design.widget.TextInputLayout;
import android.support.v4.app.ShareCompat;
import android.support.v4.content.ContextCompat;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.TextUtils;
import android.text.format.DateUtils;
import android.text.style.TextAppearanceSpan;
import android.transition.Transition;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewAnimationUtils;
Expand Down Expand Up @@ -82,13 +81,14 @@
import io.plaidapp.data.api.designernews.model.StoryResponse;
import io.plaidapp.data.prefs.DesignerNewsPrefs;
import io.plaidapp.ui.drawable.ThreadedCommentDrawable;
import io.plaidapp.ui.recyclerview.SlideInItemAnimator;
import io.plaidapp.ui.transitions.GravityArcMotion;
import io.plaidapp.ui.transitions.MorphTransform;
import io.plaidapp.ui.transitions.ReflowText;
import io.plaidapp.ui.widget.AuthorTextView;
import io.plaidapp.ui.widget.CollapsingTitleLayout;
import io.plaidapp.ui.widget.ElasticDragDismissFrameLayout;
import io.plaidapp.ui.widget.PinnedOffsetView;
import io.plaidapp.util.AnimUtils;
import io.plaidapp.util.HtmlUtils;
import io.plaidapp.util.ImageUtils;
import io.plaidapp.util.ImeUtils;
Expand Down Expand Up @@ -119,6 +119,7 @@ public class DesignerNewsStory extends Activity {
private ElasticDragDismissFrameLayout.SystemChromeFader chromeFader;
@Nullable @BindView(R.id.backdrop_toolbar) CollapsingTitleLayout collapsingToolbar;
@Nullable @BindView(R.id.story_title_background) PinnedOffsetView toolbarBackground;
@Nullable @BindView(R.id.background) View background;
private TextView upvoteStory;
private EditText enterComment;
private ImageButton postComment;
Expand All @@ -137,13 +138,10 @@ protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_designer_news_story);
ButterKnife.bind(this);
getWindow().getSharedElementReturnTransition().addListener(returnHomeListener);

story = getIntent().getParcelableExtra(EXTRA_STORY);
fab.setOnClickListener(fabClick);

chromeFader = new ElasticDragDismissFrameLayout.SystemChromeFader(this);

markdown = new Bypass(this, new Bypass.Options()
.setBlockQuoteLineColor(
ContextCompat.getColor(this, R.color.designer_news_quote_line))
Expand All @@ -154,11 +152,9 @@ protected void onCreate(Bundle savedInstanceState) {
.setBlockQuoteTextColor(ContextCompat.getColor(this, R.color.designer_news_quote)));
circleTransform = new CircleTransform(this);
designerNewsPrefs = DesignerNewsPrefs.get(this);

layoutManager = new LinearLayoutManager(this);
commentsList.setLayoutManager(layoutManager);
commentsList.setItemAnimator(new CommentAnimator());

header = getLayoutInflater().inflate(
R.layout.designer_news_story_description, commentsList, false);
bindDescription();
Expand All @@ -170,6 +166,21 @@ protected void onCreate(Bundle savedInstanceState) {
final Toolbar toolbar = (Toolbar) findViewById(R.id.story_toolbar);
toolbar.setNavigationOnClickListener(backClick);
commentsList.addOnScrollListener(headerScrollListener);

setEnterSharedElementCallback(new SharedElementCallback() {
@Override
public void onSharedElementStart(List<String> sharedElementNames, List<View>
sharedElements, List<View> sharedElementSnapshots) {
ReflowText.setupReflow(getIntent(), collapsingToolbar);
}

@Override
public void onSharedElementEnd(List<String> sharedElementNames, List<View>
sharedElements, List<View> sharedElementSnapshots) {
ReflowText.setupReflow(collapsingToolbar);
}
});

} else { // w600dp configuration: content card scrolls over title bar
final TextView title = (TextView) findViewById(R.id.story_title);
title.setText(story.title);
Expand Down Expand Up @@ -389,16 +400,6 @@ public void onClick(View v) {
}
};

private Transition.TransitionListener returnHomeListener = new AnimUtils
.TransitionListenerAdapter() {
@Override
public void onTransitionStart(Transition transition) {
super.onTransitionStart(transition);
// hide the fab as for some reason it jumps position?? TODO work out why
fab.setVisibility(View.INVISIBLE);
}
};

private void doFabExpand() {
// translate the chrome placeholder ui so that it is centered on the FAB
int fabCenterX = (fab.getLeft() + fab.getRight()) / 2;
Expand Down Expand Up @@ -1060,7 +1061,7 @@ public FooterHolder(View itemView) {
}
}

private static class CommentAnimator extends DefaultItemAnimator {
private static class CommentAnimator extends SlideInItemAnimator {

public static final int EXPAND_COMMENT = 1;
public static final int COLLAPSE_COMMENT = 2;
Expand Down
7 changes: 6 additions & 1 deletion app/src/main/java/io/plaidapp/ui/FeedAdapter.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@
import io.plaidapp.data.api.producthunt.model.Post;
import io.plaidapp.data.pocket.PocketUtils;
import io.plaidapp.data.prefs.SourceManager;
import io.plaidapp.ui.transitions.ReflowText;
import io.plaidapp.ui.widget.BadgedFourThreeImageView;
import io.plaidapp.util.AnimUtils;
import io.plaidapp.util.ObservableColorMatrix;
Expand Down Expand Up @@ -210,17 +211,20 @@ public void onClick(View v) {
Uri.parse(story.url));
}
}
);
);
holder.comments.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View commentsView) {
final Intent intent = new Intent();
intent.setClass(host, DesignerNewsStory.class);
intent.putExtra(DesignerNewsStory.EXTRA_STORY,
(Story) getItem(holder.getAdapterPosition()));
ReflowText.addExtras(intent, new ReflowText.ReflowableTextView(holder.title));
setGridItemContentTransitions(holder.itemView);
final ActivityOptions options =
ActivityOptions.makeSceneTransitionAnimation(host,
Pair.create((View) holder.title,
host.getString(R.string.transition_story_title)),
Pair.create(holder.itemView,
host.getString(R.string.transition_story_title_background)),
Pair.create(holder.itemView,
Expand All @@ -247,6 +251,7 @@ public void onClick(final View view) {
private void bindDesignerNewsStory(final Story story, final DesignerNewsStoryHolder holder) {
holder.title.setText(story.title);
holder.comments.setText(String.valueOf(story.comment_count));
holder.itemView.setTransitionName(story.url);
}

@NonNull
Expand Down
20 changes: 10 additions & 10 deletions app/src/main/java/io/plaidapp/ui/transitions/LiftOff.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@
/**
* A transition that animates the elevation of a View from a given value down to zero.
* <p>
* Useful for creating parent↔child navigation transitions (https://www.google.com/design/spec/patterns/navigational-transitions.html#navigational-transitions-parent-to-child)
* Useful for creating parent↔child navigation transitions
* (https://www.google.com/design/spec/patterns/navigational-transitions.html#navigational-transitions-parent-to-child)
* when combined with a {@link android.transition.ChangeBounds} on a shared element.
*/
public class LiftOff extends Transition {
Expand All @@ -42,16 +43,14 @@ public class LiftOff extends Transition {
PROPNAME_ELEVATION
};

private final float lift;

public LiftOff(float lift) {
this.lift = lift;
}
private final float initialElevation;
private final float finalElevation;

public LiftOff(Context context, AttributeSet attrs) {
super(context, attrs);
final TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.LiftOff);
lift = ta.getDimensionPixelSize(R.styleable.LiftOff_android_elevation, 0);
initialElevation = ta.getDimension(R.styleable.LiftOff_initialElevation, 0f);
finalElevation = ta.getDimension(R.styleable.LiftOff_finalElevation, 0f);
ta.recycle();
}

Expand All @@ -62,18 +61,19 @@ public String[] getTransitionProperties() {

@Override
public void captureStartValues(TransitionValues transitionValues) {
transitionValues.values.put(PROPNAME_ELEVATION, 0f);
transitionValues.values.put(PROPNAME_ELEVATION, initialElevation);
}

@Override
public void captureEndValues(TransitionValues transitionValues) {
transitionValues.values.put(PROPNAME_ELEVATION, lift);
transitionValues.values.put(PROPNAME_ELEVATION, finalElevation);
}

@Override
public Animator createAnimator(ViewGroup sceneRoot, TransitionValues startValues,
TransitionValues endValues) {
return ObjectAnimator.ofFloat(endValues.view, View.TRANSLATION_Z, lift, 0f);
return ObjectAnimator.ofFloat(endValues.view, View.TRANSLATION_Z,
initialElevation, finalElevation);
}

}
19 changes: 11 additions & 8 deletions app/src/main/java/io/plaidapp/ui/transitions/Pop.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,21 +38,24 @@ public Pop(Context context, AttributeSet attrs) {
@Override
public Animator onAppear(ViewGroup sceneRoot, View view, TransitionValues startValues,
TransitionValues endValues) {
view.setAlpha(0f);
view.setScaleX(0f);
view.setScaleY(0f);
return ObjectAnimator.ofPropertyValuesHolder(
endValues.view,
PropertyValuesHolder.ofFloat(View.ALPHA, 0f, 1f),
PropertyValuesHolder.ofFloat(View.SCALE_X, 0f, 1f),
PropertyValuesHolder.ofFloat(View.SCALE_Y, 0f, 1f));
view,
PropertyValuesHolder.ofFloat(View.ALPHA, 1f),
PropertyValuesHolder.ofFloat(View.SCALE_X, 1f),
PropertyValuesHolder.ofFloat(View.SCALE_Y, 1f));
}

@Override
public Animator onDisappear(ViewGroup sceneRoot, View view, TransitionValues startValues,
TransitionValues endValues) {
return ObjectAnimator.ofPropertyValuesHolder(
endValues.view,
PropertyValuesHolder.ofFloat(View.ALPHA, 1f, 0f),
PropertyValuesHolder.ofFloat(View.SCALE_X, 1f, 0f),
PropertyValuesHolder.ofFloat(View.SCALE_Y, 1f, 0f));
view,
PropertyValuesHolder.ofFloat(View.ALPHA, 0f),
PropertyValuesHolder.ofFloat(View.SCALE_X, 0f),
PropertyValuesHolder.ofFloat(View.SCALE_Y, 0f));
}

}
Loading

0 comments on commit 7750cd7

Please sign in to comment.