适用于linearlayout的Android幻灯片动画

Question

One activity of my Android-app uses a linearlayout with a couple of textviews and one imageview. the textviews and the imageview get the data from a sqlite-database. i also have two buttons (prev, next) to navigate back and forth through the database. works fine.

Now i want to add animation to my app: when i push the next-button the linearlayout (with the textviews and the image) should slide to the left and a linearlayout containing data from the next row should slide in from the right. the other way round for the prev-button.

Any idea how to solve this?

Answer 1

You can achieve this using the translate tween animation.

Place the linearlayout holding the textviews, imageview and buttons in a parent Linear/Relative layout:

<LinearLayout android:id="@+id/parent_layout">
    <LinearLayout android:id="@+id/container_layout">
        <Textview />

        <ImageView />

        <Buttons />
    </LinearLayout>
</LinearLayout>

Define two translate tween animations in res/anim folder, one for previous and the other for next

 `previous.xml` -

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXDelta="-100%p"
    android:toXDelta="0">
</translate>

`next.xml` -

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXDelta="100%p"
    android:toXDelta="0">
</translate>

Initialize the animations and get a reference of the "container" layout in the onCreate() method of the activity:

Animation previousAnim = AnimationUtils.loadAnimation(MainMenuActivity.this, R.anim.previous);
Animation nextAnim = AnimationUtils.loadAnimation(MainMenuActivity.this, R.anim.next);
LinearLayout containerLayout = (LinearLayout) findViewById(R.id.container_layout);

When next and prev are clicked, navigate through the db, update the textviews,imageviews etc and fire the animations

previousButtonOnClick {
    //navigate db and update views 
    containerLayout.startAnimation(previousAnim);
}

nextButtonOnClick {
    //navigate db and update views 
    containerLayout.startAnimation(nextAnim);
}