androidでViewFlipperを利用して画面を切り替える
フリックして画面を切り替えたいけど
よくわからないので自動切り替えからやってみる
実装
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"> <TextView android:text="View Flipper Test" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView" /> <ViewFlipper android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/viewFlipper" android:layout_centerVertical="true" android:layout_centerHorizontal="true"> <include android:id="@+id/layout01" layout="@layout/layout01" /> <include android:id="@+id/layout02" layout="@layout/layout02" /> <include android:id="@+id/layout03" layout="@layout/layout03" /> </ViewFlipper> </RelativeLayout>
layout01.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Layout01" android:id="@+id/textView21" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView21" android:src="@drawable/janken_gu" /> </LinearLayout>
layout02.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Layout02" android:id="@+id/textView22" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView22" android:src="@drawable/janken_choki" /> </LinearLayout>
layout03.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Layout03" android:id="@+id/textView23" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView23" android:src="@drawable/janken_par" /> </LinearLayout>
MainActivity
package jp.mshige1979.app.sampleviewflipper01; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.Menu; import android.view.MenuItem; import android.view.animation.AnimationUtils; import android.widget.ViewFlipper; public class MainActivity extends ActionBarActivity { private ViewFlipper flipper; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); flipper = (ViewFlipper)findViewById(R.id.viewFlipper); flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_in_from_right)); flipper.setAutoStart(true); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } }
res/anim/slide_in_from_right.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:fromXDelta="100%p" android:toXDelta="0%p" android:fromYDelta="0%p" android:toYDelta="0%p"> </translate> </set>
結果
参考
AndroidでViewFlipperを利用して、Viewを切り替える方法/Getting Started | Tech Booster
Android ViewFlipperのページ移動をフリックで行う - epian-wiki
所感
アニメーションをやっただけフリック入力の挙動の方法は別途調べ直す。
この方法で表示方法が増えるのでやり方に幅が広がるかも…