素人のアンドロイドアプリ開発日記

ViewFlipperで簡単スライドショー

上記のサイトを参考にして、スライドショーを作成してみました。

 

ほぼサイトと同じ仕様で問題ありません。

※animをxmlなどで、管理しているので、かなり参考になります！

簡単にスライドショーが作成できました。

 

下記に問題提起と解決方法をしめしております。（ただのコピペではないのでご了承くださいm（_ _）m）

 

class自体はimageViewは利用してなかったので、下記のようでも問題ないはずです。

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class ViewFlipperActivity 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);
 findViewById(R.id.layout_first).setOnTouchListener(this);
 findViewById(R.id.layout_second).setOnTouchListener(this);
 }

 @Override
 public boolean onTouch(View v, MotionEvent event) {
 int x = (int)event.getRawX();
 switch(v.getId()) {
 case R.id.layout_first:
 case R.id.layout_second:
 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;
 }
}

なんですが、上記の簡単にスライドができるので、２０枚くらいに増やしてみようと思って、大量にmainXMLを増やして下記みたいにしてみました。

 

<?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">
 
 <LinearLayout
 android:id="@+id/layout_1"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <ImageView
 android:id="@+id/imageview_1"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:src="@drawable/sample1">
 </ImageView>
 </LinearLayout>
 
 <!--N番目
 <LinearLayout
 android:id="@+id/layout_N"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <ImageView
 android:id="@+id/imageview_N"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:src="@drawable/sampleN">
 </ImageView>
 </LinearLayout>
 -->
 <LinearLayout
 android:id="@+id/layout_20"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <ImageView
 android:id="@+id/imageview_20"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:src="@drawable/sample20">
 </ImageView>
 </LinearLayout>
 </ViewFlipper>
 
</LinearLayout>

上記みたいにlinerlayoutを２０個追加しました。

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;
 
public class ViewFlipperActivity extends Activity implements View.OnTouchListener {
 
 private ViewFlipper viewFlipper;
 private float firstTouch;
 private boolean isFlip = false;
 private ImageView firstImageView;
 private ImageView secondImageView;
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 viewFlipper = (ViewFlipper) findViewById(R.id.flipper);
 findViewById(R.id.layout_1).setOnTouchListener(this);
 //N番目：findViewById(R.id.layout_N).setOnTouchListener(this);
 findViewById(R.id.layout_20).setOnTouchListener(this);
 }
 
 @Override
 public boolean onTouch(View v, MotionEvent event) {
 int x = (int)event.getRawX();
 switch(v.getId()) {
 case R.id.layout_1:
 //N番目：case R.id.layout_N:
 case R.id.layout_20:
 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;
 }
}

上記のように設定をしてみたら、

落ちました。

 

画像のサイズにも寄るようですが、僕の場合には５枚くらいからで落ちてしまいました。

 

最初drawableのフォルダ内に大量の画像をいれたせいかと思いましたが違いました。。

原因としては、ひとつのIntent内に大量のデータを保持しているからだと思います。

 

解決方法に関しては、下記に示しておきますので、試してみてください。

ViewFlipperにおいて、中に保持するlinerlayoutは３枚程度にする。

各linerlayoutの内部にあるImageViewについて、

次へ、前へ。が実行される瞬間にResourceを入れ替える。

例）

５枚目がlinerlayoutの２つめに表示されていた時

次へをおされた場合には、３つめのlinerlayout内のImageViewの画像のResourceを６枚目に変更する。

前へをおされた場合には、１つめのlinerlayout内のImageViewの画像のResourceを４枚目に変更する。

 

ちょっと言葉で説明すると面倒くさくなってしまいますが、上記のだとViewFlipper内で保持している画像のデータが常に３枚になるので、

簡単にスライドショーができるようになりました。（２０枚ではいけました。）

 

以上です。