SQLの窓

2015年09月06日


ViewFlipper(複数ビュー) と ViewSwitcher(2つまでのビュー)


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"
    />



【2 Android Studioの最新記事】
posted by lightbox at 2015-09-06 00:17 | 2 Android Studio | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり