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で簡単スライドショー
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 を設定する
Laravel 7 リリース
v-html でHTML表示する
Laravel で Vue コンポーネントを使う
Laravel で Nuxt.js を使ってみる(Docker環境)
いちから始める Docker -コンテナをビルド- (2020年)
いちから始める Docker -起動してみる- (2020年)
Mac で MySQL(8系)
composer で vendor がインストールできない
Eloquent の日付を Carbon で扱う
webpack 4 入門(npm編)
[Mac]容量を減らす
DIコンテナはじめ
freee SDKを Laravel で使ってみる
freee API を使ってみる
Segueを利用しない画面遷移
Xcode11.3 で XVim2 を利用する
Codable で JSONを読み込み
Webpack入門(yarn編)
MacからLaradock PostgreSQLで接続エラー
Dockerで不要なコンテナ・イメージを削除
Mac で Laradock の構築
yarn インストール&プロジェクト作成
Laravel 6.x 構築(Homestead編)
Composer インストール
nvm インストール
npm install が Mac でエラー
HTMLタグでカーソルが同時処理(ミラーリング)されてしまう
DI(依存性注入)
[Ubuntu]Let's Encryptで無料の証明書を利用する
[Apache]Apache2.4のアクセス制限が変更
[Ubuntu]rootのログインとsudo権限追加
タミヤ マイコンロボット工作セットをMacに接続してみた
pgAdimn4 でブラウザで開けなくなる
Java8 を HomebrewとjEnvで構築
Android Studio環境構築 2019
ロケールの再構築
vagrant グループに Apacheを追加