ViewSwitcherで２つのViewをなめらかに切り替える

完成イメージ

こんなんができる

使いドコロ

• 同じ画面内で親リストビュー→子ビューの遷移をスムーズに行う場合
  • 特にダイアログでやる場合は助かる

ViewSwitcherなので今回は２画面ですが、複数画面使いたいならViewFlipperや大元のViewAnimatorを使うのもあり

構成

関係ないところは省略。

• src/main/java/com.example
  • MainActivity.java # プログラム本体
• src/main/res
  • anim
    • slide_in_from_left.xml # 左からスライドインするアニメーション
    • slide_out_from_right.xml # 右にスライドアウトするアニメーション
    • slide_in_from_right.xml # 右からスライドインするアニメーション
    • slide_out_from_left.xml # 左にスライドアウトするアニメーション
  • layout
    • activity_main.xml # ViewSwitcherのレイアウト定義

実態

MainActivity.java

public class MainActivity extends Activity {

    private ViewSwitcher viewSwitcher;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewSwitcher = (ViewSwitcher) findViewById(R.id.viewSwitcher1);
    }

    public void nextClick(View v) {
        viewSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_in_from_left));
        viewSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_out_to_right));
        viewSwitcher.showNext();
    }

    public void prevClick(View v) {
        viewSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_in_from_right));
        viewSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_out_to_left));
        viewSwitcher.showPrevious();
    }
}

slide_in_from_left.xml

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

slide_out_to_right.xml

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

slide_in_from_right.xml

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

slide_out_to_left.xml

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

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout0"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ViewSwitcher
        android:id="@+id/viewSwitcher1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="New Button"
            android:id="@+id/leftb"
            android:layout_gravity="right"
            android:layout_weight="1"
            android:background="#33ff00" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="New Button"
            android:id="@+id/rightb"
            android:layout_gravity="right"
            android:layout_weight="1"
            android:background="#ffee00" />

    </ViewSwitcher>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical">

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="prev"
            android:id="@+id/button"
            android:layout_weight="1"
            android:onClick="prevClick" />

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:onClick="nextClick"
            android:text="next"
            android:layout_weight="1" />
    </LinearLayout>

</LinearLayout>

小さい画面をうまく活用できるのでおすすめです