Zauważyliście, że różni producenci stosują czasem różne animacje nowego activity w aplikacjach? Dzisiaj pokażę, jak ujednolicić animację, zwłaszcza wtedy kiedy tworzymy jakiś kreator, jest ona całkiem intuicyjna, zresztą, sami zobaczcie:
Dzisiejszy wpis będzie opowiadał o utworzeniu tej animacji od zera w nowym projekcie, tak aby początkujący poradzili sobie bez problemu, z kolei pro users, znajdą to, czego potrzebują.
Zaczynamy od utworzenia nowego projektu w AndroidStudio, ja pierwszą aktywność nazwałem FirstActivity.
public class FirstActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_first);
}
}
Po utworzeniu projektu, tworzymy następne Activity klikając File/New/Activity/Blank Activity. Nazwałem je SecondActivity. Kod jest analogiczny jak powyżej, oczywiście inna nazwa klasy i inny parametr metody setContentView.
Teraz przechodzimy do layoutu i dodajemy, można przez przeciąganie, button. Layout dla pierwszego Activity wygląda tak:
<RelativeLayout 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” android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
android:paddingBottom=”@dimen/activity_vertical_margin” tools:context=”.FirstActivity”>
<TextView android:text=”@string/hello_world” android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/textView2″ />
<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/next”
android:id=”@+id/nextBtn”
android:onClick=”nextClick”
android:layout_below=”@+id/textView2″
android:layout_alignParentLeft=”true”
android:layout_alignParentStart=”true” />
</RelativeLayout>
Layout dla drugiego Activity, jest oczywiście analogiczny, tylko tutaj zamiast next, mamy prev. Czyli pod wywołaniami onClick znajdują się metody nextClick i prevClick. Oto jak je zaimplementować:
public void nextClick(View view) {
Intent intent = new Intent(FirstActivity.this, SecondActivity.class);
startActivity(intent);
overridePendingTransition(0, 0);
}
Metoda overridePendingTransition, to właśnie ta metoda, która odpowiada za animacje pomiędzy Activity. Dokumentacja znajduje się tutaj:
overridePendingTransition doc
Jak widzimy, pod parametrami enter anim oraz exit anim mamy w tym momencie zero i zero. Oznacza to tyle, że nie będzie żadnej animacji przejścia, czyli taki oto efekt:
Ok, a teraz dodamy animacje przejścia ekranu.
Klikamy na folder res, wybieramy new i android resource directory. Nazwiemy sobie nasz katalog anim. Następnie, tworzymy w tym katalogu 4 pliki:
left_in.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<set xmlns:android=”http://schemas.android.com/apk/res/android”
android:interpolator=”@android:anim/linear_interpolator”>
<translate
android:fromXDelta=”0″
android:toXDelta=”100%p”
android:duration=”300″/>
</set>
left_out.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<set xmlns:android=”http://schemas.android.com/apk/res/android”
android:interpolator=”@android:anim/linear_interpolator”>
<translate
android:fromXDelta=”0″
android:toXDelta=”-100%p”
android:duration=”300″/>
</set>
right_in.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<set xmlns:android=”http://schemas.android.com/apk/res/android”
android:interpolator=”@android:anim/linear_interpolator”>
<translate
android:fromXDelta=”100%p”
android:toXDelta=”0″
android:duration=”300″/>
</set>
right_out.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<set xmlns:android=”http://schemas.android.com/apk/res/android”
android:interpolator=”@android:anim/linear_interpolator”>
<translate
android:fromXDelta=”-100%p”
android:toXDelta=”0″
android:duration=”300″/>
</set>
Teraz tak, w metodzie nextClick zamieniamy parametry na:
overridePendingTransition(R.anim.right_in, R.anim.left_out);
Z kolei w metodzie prevClick:
overridePendingTransition(R.anim.right_out, R.anim.left_in);
I już, gotowe 😉 Animacja działa, możemy ją zwolnić lub przyspieszyć parametrem duration, u mnie trwa 300ms. Albo zmienić sposób rozchodzenia się obrazów metodami fromX oraz toX.
Podaję jeszcze link na githuba z tą właśnie animacją:
github migellal
Pozdrawiam!