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


# 完成イメージ

こんなんができる

![1.gif](https://qiita-image-store.s3.amazonaws.com/0/40141/b55c3f92-fea0-c10d-1bb5-b7a53815d328.gif)


# 使いドコロ

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

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

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