Pełna próbka robocza Trójczłonowego scenariusza animacji Gmaila?

Uploaded my proposal at github (Działa ze wszystkimi wersjami Androida, choć akceleracja sprzętowa widoku jest zdecydowanie zalecana dla tego rodzaju animacji. W przypadku urządzeń bez akceleracji sprzętowej implementacja buforowania bitmap powinna pasować lepiej)

Demo wideo z animacją jest tutaj (wolna liczba klatek na sekundę powoduje rzucanie ekranu. Rzeczywista wydajność jest bardzo fast)

Użycie:

layout = new ThreeLayout(this, 3);
layout.setAnimationDuration(1000);
setContentView(layout);
layout.getLeftView();   //<---inflate FragmentA here
layout.getMiddleView(); //<---inflate FragmentB here
layout.getRightView();  //<---inflate FragmentC here

//Left Animation set
layout.startLeftAnimation();

//Right Animation set
layout.startRightAnimation();

//You can even set interpolators

Explaination :

ThreeLayout pobiera wagę lewego panelu jako param, zakładając, że drugi widoczny Widok ma weight=1.

Więc new ThreeLayout(context,3) tworzy nowy widok z 3 dzieci i lewy panel z Mają 1/3 całkowitego ekranu. Drugi widok zajmuje wszystkie dostępne miejsce.

Oblicza szerokość w czasie wykonywania, bezpieczniejszą implementacją jest to, że wymiary są obliczane po raz pierwszy w draw(). zamiast in post ()

Skalowanie i tłumaczenie animacji faktycznie zmienia rozmiar i przesuwa widok, a nie pseudo - [skaluj, przesuń]. Zauważ, że fillAfter(true) nie jest nigdzie używany.

View2 is right_of View1

I

View3 is right_of View2

Po ustawieniu tych zasad RelativeLayout zajmuje się wszystkim innym. Animacje zmieniają margins (w ruchu) i [width,height] w skali

Aby uzyskać dostęp do każdego dziecka (aby można było nadmuchać go swoim fragmentem, można zadzwonić

public FrameLayout getLeftLayout() {}

public FrameLayout getMiddleLayout() {}

public FrameLayout getRightLayout() {}

Poniżej przedstawiono 2 animacje

Stage1

---na ekranie----------!----- OUT - - - -

[View1] [_____View2_____][_____View3_____]

Stage2

--OUT-!-------- Na ekranie - - - - - - -

[View1][View2] [_____View3_____]

Zbudowaliśmy bibliotekę o nazwie PanesLibrary, która rozwiązuje ten problem. Jest jeszcze bardziej elastyczny niż wcześniej oferowany, ponieważ:

• każdy panel może mieć dynamiczny rozmiar
• pozwala na dowolną liczbę paneli (nie tylko 2 lub 3)
• fragmenty wewnątrz szyb są prawidłowo zachowywane przy zmianach orientacji.

Możesz to sprawdzić tutaj: https://github.com/Mapsaurus/Android-PanesLibrary

Oto demo: http://www.youtube.com/watch?v=UA-lAGVXoLU&feature=youtu.be

To w zasadzie pozwala łatwo dodać dowolną liczbę dynamicznie wielkości paneli i dołączyć fragmenty do tych paneli. Mam nadzieję, że okaże się to przydatne! :)

Budowanie na podstawie jednego z przykładów, z którymi się łączyłeś ( http://android.amberfog.com/?p=758 ), a może ożywimy obiekt layout_weight? W ten sposób możesz animować zmianę wagi 3 fragmentów razem, a otrzymasz bonus, że wszystkie ładnie się ze sobą ślizgają: {]}

Zacznij od prostego układu. Ponieważ będziemy animować layout_weight, potrzebujemy LinearLayout jako głównego widoku dla 3 paneli.:

<?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>

Następnie Klasa demo:

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;
        }
    }
}

Również ten przykład nie używa FragmentTransactions, aby uzyskać animacje (raczej animuje widoki, do których są dołączone fragmenty), więc musisz wykonać wszystkie transakcje backstack / fragment samodzielnie, ale w porównaniu z wysiłkiem poprawienia działania animacji, nie wydaje się to złym kompromisem:)]}

Straszne wideo o niskiej rozdzielczości w akcji: http://youtu.be/Zm517j3bFCo

To nie jest użycie fragmentów.... To niestandardowy układ z trójką dzieci. Po kliknięciu na wiadomość, przesuwa się 3 dzieci za pomocą offsetLeftAndRight() i animatora.

W JellyBean możesz włączyć "Pokaż granice układu" w Ustawieniach "Opcje programisty". Po zakończeniu animacji slajdu nadal można zobaczyć, że menu po lewej stronie nadal istnieje, ale pod środkowym panelem.

Dodatkowo, ViewPager trzeciego dziecka jest kolejną wskazówką tego zachowania: ViewPager zazwyczaj używa fragmentów (wiem, że nie muszą, ale nigdy nie widziałem implementacji innej niż Fragment), A ponieważ nie można używać Fragments wewnątrz innego Fragment dzieci te prawdopodobnie nie są fragmentami....

Obecnie staram się zrobić coś takiego, poza tym, że skala fragmentu B zajmuje dostępną przestrzeń i że okno 3 może być otwarte w tym samym czasie, jeśli jest wystarczająco dużo miejsca. Oto moje rozwiązanie na razie, ale nie jestem pewien, czy będę się go trzymać. Mam nadzieję, że ktoś udzieli odpowiedzi wskazującej właściwą drogę.

Zamiast używać LinearLayout i animować wagę, używam RelativeLayout i animować marginesy. Nie jestem pewien, czy to najlepszy sposób, ponieważ wymaga połączenia requestLayout() przy każdej aktualizacji. Jest gładka na wszystkich moich urządzeniach.

Więc animuję układ, nie używam transakcji fragmentów. Obsługuję przycisk Wstecz ręcznie, aby zamknąć fragment C, jeśli jest otwarty.

FragmentB użyj layout_toLeftOf / ToRightOf, aby zachować jego wyrównanie do fragmentu A i C.

Kiedy moja aplikacja uruchomi zdarzenie, aby wyświetlić fragment C, wsuwam fragment C, a wsuwam fragment a w tym samym czasie. (2 osobne animacje). Odwrotnie, gdy Fragment a otwarty, i Zamknij C w tym samym czasie.

W trybie portretowym lub na mniejszym ekranie, używam nieco innego układu i przesuwam Fragment C po ekranie.

Aby użyć procentu dla szerokości fragmentu A i C, myślę, że będziesz musiał go obliczyć w czasie wykonywania... (?)

Oto układ działania:

<?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>

Animacja do przesuwania FragmentC wewnątrz lub na zewnątrz:

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;
}