ＳＱＬの窓
<< Google+ に投稿する… | TOP | Google Chrome 45.0… >>

2015年09月13日


ViewSwitcher : 複数の画面または階層となる画面は、別 XML で定義して addView すると、Android Studio の Design で全ての画面をプレビューできます 

activity_main.xml


image_1.xml


ViewSwitcher は、二つの View を切り替える事のできる ViewGroup ですが、ViewSwitcher の中で表示する二つの View をひとつづつ XML で定義して ViewSwitcher の addView で実際の画面を追加します。

主な特記事項

フリックによる画面切り替えを行う為、Detecting Common Gestures で解説されている GestureDetector を使用しています。また、イベントは GestureDetector.SimpleOnGestureListener を使用してイベントの記述を簡潔にしています。

onFling で、event2.getX() - event1.getX() によって左右どちらほフリックしたかを確認しており、絶対値で移動距離を確認できます。

ViewSwitcher の画面が変わる時のアニメーションは、setInAnimation と setOutAnimation で Android で定義されているフェードイン・フェードアウトを使用しています

通常、初期画面は setContentView(R.layout.activity_main); で作成されますが、ここでは画面の意味を明確にする為に、LayoutInflater で全ての画面( View ) のインスタンスを作成しています

MainActivity

package sample.lightbox.viewswitch;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.GestureDetector;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.ViewSwitcher;

public class MainActivity extends Activity  {

	private ViewSwitcher vs = null;

	// https://developer.android.com/training/gestures/detector.html
	private GestureDetector mDetector;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		// 画面インスタンス作成用のオブジェクトをシステムから取得
		LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);

		// メイン画面定義のインスタンスを作成して表示する
		// http://y-anz-m.blogspot.jp/2012/04/android-viewgroup.html
		RelativeLayout root = (RelativeLayout) inflater.inflate(R.layout.activity_main, null);
		setContentView(root);
//		setContentView(R.layout.activity_main);

		// 戻るボタンの処理
		findViewById(R.id.button_p).setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				vs.showPrevious();
			}
		});
		// 進むボタンの処理
		findViewById(R.id.button_n).setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				vs.showNext();
			}
		});

		// レイアウト用の XML より View のインスタンスを作成
		// ( inflate( id, null ) では、ルートのクラスのインスタンスとなる  )
		LinearLayout image1 = (LinearLayout) inflater.inflate(R.layout.image_1, null);
		LinearLayout image2 = (LinearLayout) inflater.inflate(R.layout.image_2, null);

		// ViewSwitcher に 作成した View を追加する
		vs = (ViewSwitcher) root.findViewById(R.id.viewSwitcher);
		vs.addView(image1);
		vs.addView(image2);
		// アニメーションの設定
		vs.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_in));
		vs.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_out));

		mDetector = new GestureDetector(MainActivity.this, new MyGestureListener());

	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// この処理で、タッチイベントからジェスチャーが処理できるようになる
		mDetector.onTouchEvent(event);
		return super.onTouchEvent(event);
	}

	// フリックによる画面切り替えの為の定義
	class MyGestureListener extends GestureDetector.SimpleOnGestureListener {
		private static final String DEBUG_TAG = "Gestures";

		@Override
		public boolean onDown(MotionEvent event) {
			Log.i(DEBUG_TAG, "onDown: " + event.toString());
			return true;
		}

		@Override
		public boolean onFling(MotionEvent event1, MotionEvent event2,
							   float velocityX, float velocityY) {
			vs.showNext();
			Log.i("DEBUG_TAG", (event2.getX() - event1.getX() )+"" );
			return true;
		}
	}
}



activity_main.xml

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="戻る"
            android:id="@+id/button_p"
            android:layout_weight="1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="進む"
            android:id="@+id/button_n"
            android:layout_weight="1"/>
    </LinearLayout>

    <ViewSwitcher
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewSwitcher"
        android:layout_below="@+id/buttons"/>
</RelativeLayout>



image_1.xml

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:src="@drawable/kirin"/>
</LinearLayout>

image_2.xml は image_1.xml をコピーして画像を変更しています

参考ページ

Detecting Common Gestures

Android　カスタム ViewGroup 用XMLのルートタグを merge にする
【Android Studio 2の最新記事】
posted by lightbox at 2015-09-13 00:27 | Android Studio 2 | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり