Travail complet de l'Échantillon de l'Gmail Trois-Fragment d'Animation de Scénario?

OK, voici ma solution, dérivé de l'e-Mail PSBA application, par @Christophe suggestion dans la question de commentaires.

https://github.com/commonsguy/cw-omnibus/tree/master/Animation/ThreePane

@weakwire la solution est pas sans rappeler la mienne, bien qu'il utilise le classique Animation plutôt que des animateurs, et il utilise RelativeLayout règles à appliquer de positionnement. À partir de la bounty point de vue, il sera probablement obtenir la prime, à moins que quelqu'un d'autre avec un ciré solution encore des postes une réponse.

En un mot, la ThreePaneLayout dans ce projet est un LinearLayout sous-classe, conçu pour fonctionner en mode paysage avec trois enfants. Ces enfants largeurs peuvent être définies dans le schéma XML, via n'importe quel souhaité signifie-je montrer à l'aide de poids, mais vous pourriez avoir largeurs spécifiques fixés par la dimension des ressources ou quoi que ce soit. Le troisième enfant, le Fragment C de la question, doit avoir une largeur de zéro.

package com.commonsware.android.anim.threepane;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.LinearLayout;
public class ThreePaneLayout extends LinearLayout {
private static final int ANIM_DURATION=500;
private View left=null;
private View middle=null;
private View right=null;
private int leftWidth=-1;
private int middleWidthNormal=-1;
public ThreePaneLayout(Context context, AttributeSet attrs) {
super(context, attrs);
initSelf();
}
void initSelf() {
setOrientation(HORIZONTAL);
}
@Override
public void onFinishInflate() {
super.onFinishInflate();
left=getChildAt(0);
middle=getChildAt(1);
right=getChildAt(2);
}
public View getLeftView() {
return(left);
}
public View getMiddleView() {
return(middle);
}
public View getRightView() {
return(right);
}
public void hideLeft() {
if (leftWidth == -1) {
leftWidth=left.getWidth();
middleWidthNormal=middle.getWidth();
resetWidget(left, leftWidth);
resetWidget(middle, middleWidthNormal);
resetWidget(right, middleWidthNormal);
requestLayout();
}
translateWidgets(-1 * leftWidth, left, middle, right);
ObjectAnimator.ofInt(this, "middleWidth", middleWidthNormal,
leftWidth).setDuration(ANIM_DURATION).start();
}
public void showLeft() {
translateWidgets(leftWidth, left, middle, right);
ObjectAnimator.ofInt(this, "middleWidth", leftWidth,
middleWidthNormal).setDuration(ANIM_DURATION)
.start();
}
public void setMiddleWidth(int value) {
middle.getLayoutParams().width=value;
requestLayout();
}
private void translateWidgets(int deltaX, View... views) {
for (final View v : views) {
v.setLayerType(View.LAYER_TYPE_HARDWARE, null);
v.animate().translationXBy(deltaX).setDuration(ANIM_DURATION)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
v.setLayerType(View.LAYER_TYPE_NONE, null);
}
});
}
}
private void resetWidget(View v, int width) {
LinearLayout.LayoutParams p=
(LinearLayout.LayoutParams)v.getLayoutParams();
p.width=width;
p.weight=0;
}
}

Cependant, au moment de l'exécution, peu importe comment vous avez créée à l'origine pour la largeur, la largeur de la gestion est prise en charge par ThreePaneLayout la première fois que vous utilisez hideLeft() pour passer de montrer que la question posée comme des Fragments A et B à des Fragments B et C. Dans la terminologie de la ThreePaneLayout -- qui n'a pas des relations spécifiques avec des fragments -- les trois morceaux sont left, middle, et right. Au moment de l'appel hideLeft(), nous enregistrons les tailles de left et middle et zéro tous les poids qui ont été utilisés sur l'un des trois, de sorte que nous pouvons contrôler complètement les tailles. Au moment de hideLeft(), nous avons fixé la taille de right à la taille d'origine de middle.

Les animations sont de deux ordres:

• Utiliser un ViewPropertyAnimator pour effectuer une traduction des trois widgets vers la gauche par la largeur de left, à l'aide d'une couche matérielle
• Utiliser un ObjectAnimator sur un custom pseudo-propriété de middleWidth pour changer le middle la largeur de ce qu'il a commencé avec de la largeur d'origine de left

(il est possible que c'est une meilleure idée d'utiliser un AnimatorSet et ObjectAnimators dans tous ces cas, bien que cela fonctionne pour l'instant)

(il est également possible que le middleWidth ObjectAnimator nie la valeur de la couche matérielle, puisque ça demande assez continue d'invalidation)

(c'est certainement possible que j'ai encore des lacunes dans mon animation à la compréhension, et que j'aime entre parenthèses consolidés)

L'effet net est que left glisse hors de l'écran, middle glisse vers la position d'origine et la taille de left, et right se traduit en droit derrière middle.

showLeft() renverse simplement le processus, avec le même mélange d'animateurs, juste avec les directions inversées.

L'activité utilise un ThreePaneLayout de tenir une paire de ListFragment widgets et un Button. Choisir quelque chose dans la gauche fragment ajoute (ou met à jour le contenu de) le milieu fragment. La sélection de quelque chose dans le milieu fragment définit la légende de la Button, plus exécute hideLeft() sur le ThreePaneLayout. En appuyant sur le DOS, si nous avons caché le côté gauche, exécute showLeft(); sinon, sorties de l'activité. Ce n'est pas l'utilisation FragmentTransactions pour affecter les animations, nous sommes coincés de la gestion de cette "pile de retour" de nous-mêmes.

Le projet lié à ci-dessus utilisant les fragments et les natifs de l'animateur-cadre. J'ai une autre version du même projet qui utilise le Soutien Android fragments de backport et NineOldAndroids pour l'animation:

https://github.com/commonsguy/cw-omnibus/tree/master/Animation/ThreePaneBC

Le backport fonctionne très bien sur une 1ère génération de Kindle Fire, si l'animation est un peu saccadé compte tenu de la baisse des spécifications matérielles et le manque de matériel de support de l'accélération. Les deux implémentations semble lisse sur une Nexus 7 et d'autres en cours de génération de tablettes.

Je suis tout à fait ouvert pour des idées sur la façon d'améliorer cette solution, ou d'autres solutions qui offrent des avantages indéniables par rapport à ce que j'ai fait ici (ou ce que @weakwire utilisé).

Merci encore à tous ceux qui ont contribué!

Construction d'un des exemples que vous avez associé (http://android.amberfog.com/?p=758), comment sur l'animation de la layout_weight propriété? De cette façon, vous pouvez animer le changement de poids de la 3 fragments, ET vous obtenez le bonus qu'ils ont tous diapositive bien ensemble:

Commencer avec une mise en page simple. Depuis nous allons animer layout_weight, nous avons besoin d'un LinearLayout que la vue de la racine pour les 3 panneaux.:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/container"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/panel1"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="match_parent"/>
<LinearLayout
android:id="@+id/panel2"
android:layout_width="0dip"
android:layout_weight="2"
android:layout_height="match_parent"/>
<LinearLayout
android:id="@+id/panel3"
android:layout_width="0dip"
android:layout_weight="0"
android:layout_height="match_parent"/>
</LinearLayout>

Puis la démo de classe:

public class DemoActivity extends Activity implements View.OnClickListener {
public static final int ANIM_DURATION = 500;
private static final Interpolator interpolator = new DecelerateInterpolator();
boolean isCollapsed = false;
private Fragment frag1, frag2, frag3;
private ViewGroup panel1, panel2, panel3;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
panel1 = (ViewGroup) findViewById(R.id.panel1);
panel2 = (ViewGroup) findViewById(R.id.panel2);
panel3 = (ViewGroup) findViewById(R.id.panel3);
frag1 = new ColorFrag(Color.BLUE);
frag2 = new InfoFrag();
frag3 = new ColorFrag(Color.RED);
final FragmentManager fm = getFragmentManager();
final FragmentTransaction trans = fm.beginTransaction();
trans.replace(R.id.panel1, frag1);
trans.replace(R.id.panel2, frag2);
trans.replace(R.id.panel3, frag3);
trans.commit();
}
@Override
public void onClick(View view) {
toggleCollapseState();
}
private void toggleCollapseState() {
//Most of the magic here can be attributed to: http://android.amberfog.com/?p=758
if (isCollapsed) {
PropertyValuesHolder[] arrayOfPropertyValuesHolder = new PropertyValuesHolder[3];
arrayOfPropertyValuesHolder[0] = PropertyValuesHolder.ofFloat("Panel1Weight", 0.0f, 1.0f);
arrayOfPropertyValuesHolder[1] = PropertyValuesHolder.ofFloat("Panel2Weight", 1.0f, 2.0f);
arrayOfPropertyValuesHolder[2] = PropertyValuesHolder.ofFloat("Panel3Weight", 2.0f, 0.0f);
ObjectAnimator localObjectAnimator = ObjectAnimator.ofPropertyValuesHolder(this, arrayOfPropertyValuesHolder).setDuration(ANIM_DURATION);
localObjectAnimator.setInterpolator(interpolator);
localObjectAnimator.start();
} else {
PropertyValuesHolder[] arrayOfPropertyValuesHolder = new PropertyValuesHolder[3];
arrayOfPropertyValuesHolder[0] = PropertyValuesHolder.ofFloat("Panel1Weight", 1.0f, 0.0f);
arrayOfPropertyValuesHolder[1] = PropertyValuesHolder.ofFloat("Panel2Weight", 2.0f, 1.0f);
arrayOfPropertyValuesHolder[2] = PropertyValuesHolder.ofFloat("Panel3Weight", 0.0f, 2.0f);
ObjectAnimator localObjectAnimator = ObjectAnimator.ofPropertyValuesHolder(this, arrayOfPropertyValuesHolder).setDuration(ANIM_DURATION);
localObjectAnimator.setInterpolator(interpolator);
localObjectAnimator.start();
}
isCollapsed = !isCollapsed;
}
@Override
public void onBackPressed() {
//TODO: Very basic stack handling. Would probably want to do something relating to fragments here..
if(isCollapsed) {
toggleCollapseState();
} else {
super.onBackPressed();
}
}
/*
* Our magic getters/setters below!
*/
public float getPanel1Weight() {
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams)     panel1.getLayoutParams();
return params.weight;
}
public void setPanel1Weight(float newWeight) {
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) panel1.getLayoutParams();
params.weight = newWeight;
panel1.setLayoutParams(params);
}
public float getPanel2Weight() {
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) panel2.getLayoutParams();
return params.weight;
}
public void setPanel2Weight(float newWeight) {
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) panel2.getLayoutParams();
params.weight = newWeight;
panel2.setLayoutParams(params);
}
public float getPanel3Weight() {
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) panel3.getLayoutParams();
return params.weight;
}
public void setPanel3Weight(float newWeight) {
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) panel3.getLayoutParams();
params.weight = newWeight;
panel3.setLayoutParams(params);
}
/**
* Crappy fragment which displays a toggle button
*/
public static class InfoFrag extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle     savedInstanceState) {
LinearLayout layout = new LinearLayout(getActivity());
layout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
layout.setBackgroundColor(Color.DKGRAY);
Button b = new Button(getActivity());
b.setOnClickListener((DemoActivity) getActivity());
b.setText("Toggle Me!");
layout.addView(b);
return layout;
}
}
/**
* Crappy fragment which just fills the screen with a color
*/
public static class ColorFrag extends Fragment {
private int mColor;
public ColorFrag() {
mColor = Color.BLUE; //Default
}
public ColorFrag(int color) {
mColor = color;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
FrameLayout layout = new FrameLayout(getActivity());
layout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
layout.setBackgroundColor(mColor);
return layout;
}
}
}

Aussi cet exemple n'utilise pas FragmentTransactions pour atteindre les animations (plutôt, il anime les points de vue les fragments sont rattachés), de sorte que vous devez faire tous les backstack/fragment opérations vous-même, mais par rapport à l'effort d'obtenir les animations fonctionne parfaitement, ce qui ne marche pas ressembler à un mauvais compromis 🙂

Horrible basse-résolution vidéo de lui en action: http://youtu.be/Zm517j3bFCo

Je suis en train d'essayer de faire quelque chose comme ça, sauf que le Fragment B de l'échelle de prendre l'espace disponible et que le 3 volet peuvent être ouvertes en même temps si il y a assez de place. Voici ma solution jusqu'à présent, mais je ne sais pas si je vais rester avec elle. J'espère que quelqu'un aura une réponse de montrer Le Droit Chemin.

Au lieu d'utiliser un LinearLayout et de l'animation du poids, j'utilise un RelativeLayout et d'animer les marges. Je ne suis pas sûr que c'est le meilleur moyen, car il nécessite un appel à requestLayout() à chaque mise à jour. Il est lisse sur tous mes appareils mais.

Donc, j'anime la mise en page, je ne suis pas à l'aide de fragments de transaction. J'gérer le bouton manuellement pour fermer le fragment C si elle est ouverte.

FragmentB utilisation layout_toLeftOf/ToRightOf à garder aligné à fragment A et C.

Lorsque mon application déclencher un événement pour afficher le fragment C, j'ai glisser dans le fragment C, et je coulissant, le fragment A, dans le même temps. (2 animations). Inversement, lorsqu'Un Fragment de l'ouvrir, je ferme C en même temps.

En mode portrait ou sur le petit écran, j'utilise une mise en page légèrement différente et faites glisser le Fragment C au dessus de l'écran.

D'utiliser le pourcentage de la largeur du Fragment A et C, je crois que vous avez pour le calculer au moment de l'exécution... (?)

Ici est l'activité de mise en page:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rootpane"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- FRAGMENT A -->
<fragment
android:id="@+id/fragment_A"
android:layout_width="300dp"
android:layout_height="fill_parent"
class="com.xyz.fragA" />
<!-- FRAGMENT C -->
<fragment
android:id="@+id/fragment_C"
android:layout_width="600dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
class="com.xyz.fragC"/>
<!-- FRAGMENT B -->
<fragment
android:id="@+id/fragment_B"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="0dip"
android:layout_marginRight="0dip"
android:layout_toLeftOf="@id/fragment_C"
android:layout_toRightOf="@id/fragment_A"
class="com.xyz.fragB" />
</RelativeLayout>

L'animation de glisser FragmentC ou arrière:

private ValueAnimator createFragmentCAnimation(final View fragmentCRootView, boolean slideIn) {
ValueAnimator anim = null;
final RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) fragmentCRootView.getLayoutParams();
if (slideIn) {
//set the rightMargin so the view is just outside the right edge of the screen.
lp.rightMargin = -(lp.width);
//the view's visibility was GONE, make it VISIBLE
fragmentCRootView.setVisibility(View.VISIBLE);
anim = ValueAnimator.ofInt(lp.rightMargin, 0);
} else
//slide out: animate rightMargin until the view is outside the screen
anim = ValueAnimator.ofInt(0, -(lp.width));
anim.setInterpolator(new DecelerateInterpolator(5));
anim.setDuration(300);
anim.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
Integer rightMargin = (Integer) animation.getAnimatedValue();
lp.rightMargin = rightMargin;
fragmentCRootView.requestLayout();
}
});
if (!slideIn) {
//if the view was sliding out, set visibility to GONE once the animation is done
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
fragmentCRootView.setVisibility(View.GONE);
}
});
}
return anim;
}