m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

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>

結果

所感

アニメーションをやっただけフリック入力の挙動の方法は別途調べ直す。
この方法で表示方法が増えるのでやり方に幅が広がるかも…