|
ViewFlipper
|
| １ | ２ | ３ | ４(a:ViewSwitcher) |
|
|
|
|
| | | ４(b:ViewSwitcher) |
| | |
|
基本的にどちらも同じですが、オプションとしての画面は ViewSwitcher で十分なのでこのような構成が現実的だと思います。
主な特記事項
ViewFlipper の 移動イベントは、どちらも MainActivity に implements View.OnClickListener する事によって、MainActivity 内のイベントとして処理しています。ボタンが複数ありますが、一つのイベントとして処理されるので、アニメーションの設定を両方に同じものを設定して簡潔になっています。
フェードインとフェードアウトのイベントは、Android に定義されているものと、ユーザ定義のものを両方使っています。どちらも定義上は大差無いのでほぼ同じ効果になります。ただ、ヨーザ定義は変更する事によって自由にアニメーションをカスタマイズできます。
メインの移動処理では、スライドインとスライドアウトを使用していますが、Android が定義しているのは片方向のみです。showPrevious に合わせた逆スライドは(必要であれば)ユーザ定義する必要があります。
package sample.lightbox.myapplication;
import android.app.Activity;
import android.os.Bundle;
import android.os.Environment;
import android.util.Log;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;
import android.widget.ViewSwitcher;
import java.io.BufferedReader;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStreamReader;
public class MainActivity extends Activity implements View.OnClickListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// MainActivity 内でリスナーを作成( implements View.OnClickListener )
MainActivity.this.findViewById(R.id.mainPrevious).setOnClickListener(this);
MainActivity.this.findViewById(R.id.mainNext).setOnClickListener(this);
// ViewSwitcher 内のボタン( 最初の View )
MainActivity.this.findViewById(R.id.switcherButton1).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ViewSwitcher vs = (ViewSwitcher) MainActivity.this.findViewById(R.id.viewSwitcher);
// Android の アニメーションを使用
vs.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_in));
vs.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_out));
vs.showNext();
}
});
// ViewSwitcher 内のボタン( 次の View )
MainActivity.this.findViewById(R.id.switcherButton2).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ViewSwitcher vs = (ViewSwitcher) MainActivity.this.findViewById(R.id.viewSwitcher);
// ユーザ作成 の アニメーションを使用
vs.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.in_effect));
vs.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.out_effect));
vs.showPrevious();
}
});
}
@Override
public void onClick(View v) {
// アニメーション設定
ViewFlipper vf = (ViewFlipper) MainActivity.this.findViewById(R.id.viewFlipper);
// Android の アニメーションを使用
vf.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.slide_in_left));
vf.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.slide_out_right));
// 使用されたボタンの id を取得
int id = v.getId();
if (id == R.id.mainPrevious) {
vf.showPrevious();
}
if (id == R.id.mainNext) {
vf.showNext();
}
}
}
画面定義
<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=".MainActivity">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/buttons"
android:focusableInTouchMode="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="前へ移動"
android:id="@+id/mainPrevious"
android:layout_weight="1"
android:layout_marginLeft="10dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="次へ移動"
android:id="@+id/mainNext"
android:layout_weight="1"
android:layout_marginLeft="20dp"
android:layout_marginRight="10dp" />
</LinearLayout>
<ViewFlipper
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewFlipper"
android:layout_below="@+id/buttons" >
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
android:src="@drawable/animal_mark_kirin" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView2"
android:src="@drawable/microphone1_boy" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView3"
android:src="@drawable/present_usagi" />
</LinearLayout>
<ViewSwitcher
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/viewSwitcher" >
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ViewSwitcher内ボタン"
android:id="@+id/switcherButton1" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ViewSwitcher内ボタン"
android:id="@+id/switcherButton2" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView4"
android:src="@drawable/skea1" />
</LinearLayout>
</ViewSwitcher>
</ViewFlipper>
</RelativeLayout>
in_effect.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromAlpha="0"
android:toAlpha="1.0"
/>
out_effect.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromAlpha="1.0"
android:toAlpha="0"
/>
