ViewFlipper で画面スライド

2011/04/20
画面を指で横にスライドさせる方法。 ScrollView あたりを使うのかな?と調べてみると、ViewFlipper なるものがある。

画面作成

layout/ に first.xml、second.xml、third.xml を作成し、main.xml に ViewFlipper として追加する。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
	<ViewFlipper android:id="@+id/flipper"
	   android:layout_width="fill_parent" android:layout_height="fill_parent">
	    <include android:id="@+id/firstlayout" layout="@layout/first" >
	    <include android:id="@+id/secondlayout" layout="@layout/second" >
	    <include android:id="@+id/thirdlayout" layout="@layout/third" >
	</ViewFlipper>
</LinearLayout>

アニメーションカスタマイズ

アニメーションは、R.anim に定義されているが、スライドを表現するには実現できないのでカスタマイズが必要となる。 以下の4ファイルを res/anim/ に作成する。 ■move_in_left.xml

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

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

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

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

ViewFlipper のアニメーション

[java] import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.animation.AnimationUtils; import android.widget.ViewFlipper; public class FlipperTestActivity extends Activity implements View.OnTouchListener { private ViewFlipper viewFlipper; private float firstTouch; private boolean isFlip = false; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); viewFlipper = (ViewFlipper) findViewById(R.id.flipper); viewFlipper.setAutoStart(false); findViewById(R.id.firstlayout).setOnTouchListener(this); findViewById(R.id.secondlayout).setOnTouchListener(this); findViewById(R.id.thirdlayout).setOnTouchListener(this); } public boolean onTouch(View v, MotionEvent event) { int x = (int)event.getRawX(); switch(v.getId()) { case R.id.firstlayout: case R.id.secondlayout: case R.id.thirdlayout: switch(event.getAction()) { case MotionEvent.ACTION_DOWN: firstTouch = event.getRawX(); return true; case MotionEvent.ACTION_MOVE: if(!isFlip) { if(x - firstTouch > 50) { isFlip = true; viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.move_in_left)); viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.move_out_right)); viewFlipper.showNext(); } else if(firstTouch - x > 50) { isFlip = true; viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.move_in_right)); viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.move_out_left)); viewFlipper.showPrevious(); } } break; case MotionEvent.ACTION_UP: isFlip = false; break; } } return false; } } [/java] View.OnTouchListener を implements して View のタッチイベントを登録する。 onTouch でタッチの状況を判別して ViewFlipper のアニメーションと画面切り替えをする。

参考サイト

ViewFlipperで簡単スライドショー
フォーム有効期限切れで Page Expired をリダイレクト
ログを日付でローテーションやクリアや削除
Homebrew で PHP8.0 から PHP7.4 にダウングレード
Big sur で zsh 移行と Homebrew アップグレード
Mac に minikube をインストール
途中から .gitignore に追加する
Larevel 6.x から Laravel 8.x にバージョンアップ
Composer で Allowed memory size (メモリ不足)エラー
Blade でカスタムクラスを利用する
git push git pull にブランチ指定せずに実行する
git pull や git push できなくなったとき
Docker のコンテナからホストOS に接続
Mac で ローカル IP アドレス(ipv4)のみを表示する
ホストOS から Docker の MySQLコンテナに接続
caching_sha2_password のエラー
node-config で環境設定ファイルを利用する
rootパスワードを初期化(再設定)する
Git から clone したときのエラー対処
Mac に MySQL をインストール
Mac に PostgreSQL をインストール
Laravel 環境構築 - Mac ネイティブ編
Firebase 入門 - Firebase とは
Firebase 入門 - CLI インストールとデータベースの設定
AWS 無料枠(t2.micro)で容量とメモリエラー
Cloud9 を起動する -初心者編-
gcloud で GCEインスタンスを起動してみる
AWS CLI と jq でインスタンス一覧を整形して表示
React と Laravel7 のプロジェクトを作成する
Homebrewインストール-2020年版
3直線で囲まれた範囲塗りつぶし
PuLP で線形最適化問題を解く
カスタムのペジネーションを作る
node-sass を使って sass をコンパイルする
Log ファサードでSQLログを分離して書き出す
いちから始める Docker - 複数のコンテナを使う - (2020年)
いちから始める Docker - docker-compose を使う - (2020年)
AWS ECR を使ってみる
Laravel7 でマルチ認証
Mac に AWS Client を設定する
Laravel7 リリース
v-html でHTML表示する
Laravel で Nuxt.js を使ってみる(Docker環境)
Laravel で Vue コンポーネントを使う
いちから始める Docker -コンテナをビルド- (2020年)
いちから始める Docker -起動してみる- (2020年)
Mac で MySQL(8系)
composer で vendor がインストールできない
Eloquent の日付を Carbon で扱う
webpack 4 入門(npm編)
[Mac]容量を減らす