Tips‎ > ‎Tips‎ > ‎

ViewSwicher sample

画面遷移は Activity の遷移だぁ なんて事はないんです。
View を切り替えるだけの簡単サンプルを紹介します。

ViewSwicher は2つの View を簡単に切り替えることができます。
3つ以上なら、、、ViewFliper (スペル間違えてたらごめんなさい)というのを使えば簡単です。

どんなものかというのは動画を見てください。



ソースコードはこちらに置きました。
http://code.google.com/p/gaematsu/source/browse/#svn/trunk/ViewSwicherSample

SVN でチェックアウトする場合はこちら
http://gaematsu.googlecode.com/svn/trunk/ViewSwicherSample



MainActivity.java

package jp.caldroid.sample.viewswicher;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ViewSwitcher;

public class MainActivity extends Activity {

    private ViewSwitcher mSwitcher;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mSwitcher = (ViewSwitcher) findViewById(R.id.ViewSwitcher01);

    }

    public void onClickButton(View v) {
        mSwitcher.showNext();
    }

}

太字にした2カ所が今回のポイント!
mSwitcher.showNext() で 二つのViewを切り替えてます。
二つのViewを切り替えるしかできませんが、LinearLayout なども1つとしてカウントされるので
LinearLayout の中に複数の View を配置すれば、まとめて View を更新!というのができます。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
   
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
       
    <ViewSwitcher
        android:id="@+id/ViewSwitcher01"
        android:layout_height="0dip"
        android:layout_width="fill_parent"
        android:layout_weight="1"
        android:inAnimation="@anim/in_animation"
        android:outAnimation="@anim/out_animation">
   
        <ImageView
            android:id="@+id/ImageView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/img029_02"
            android:layout_gravity="center"/>
       
        <ImageView
            android:id="@+id/ImageView02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/img043_01"
            android:layout_gravity="center"/>
   
    </ViewSwitcher>
   
   
    <Button
        android:text="@+id/Button01"
        android:id="@+id/Button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:onClick="onClickButton" />
       
</LinearLayout>

in_animation.xml

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

out_animation.xml

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

Comments