ViewFlipperクラスでスライドショーを作成する。

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;
 }
}

なんですが、上記の簡単にスライドができるので、20枚くらいに増やしてみようと思って、大量に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を20個追加しました。

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;
 }
}

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

落ちました。

 

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

 

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

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

 

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

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

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

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

例)

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

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

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

 

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

簡単にスライドショーができるようになりました。(20枚ではいけました。)

 

以上です。

前後の記事

前の記事:

次の記事:

関連の記事

コメント

:D Ueki

記事を拝見させて頂き、為になりました。
ありがとうございます。

1点、すみませんが、教えて頂いても宜しいでしょうか。

———————————-
ViewFlipperにおいて、中に保持するlinerlayoutは3枚程度にする。
各linerlayoutの内部にあるImageViewについて、
次へ、前へ。が実行される瞬間にResourceを入れ替える。
例)
5枚目がlinerlayoutの2つめに表示されていた時
次へをおされた場合には、3つめのlinerlayout内のImageViewの画像のResourceを6枚目に変更する。
前へをおされた場合には、1つめのlinerlayout内のImageViewの画像のResourceを4枚目に変更する。
—————————————

ここの対象方法としまして、
サンプルソースなどを頂く事は可能でしょうか。
実は、今アルバムアプリを作っていますが、
最大枚数のところで引っかかっております。
是非ご参考にさせて頂ければ幸いです。
宜しくお願いします。

コメントの投稿

  • サイト内検索

新作アプリの紹介

関連サイトの紹介

アンドロイドアプリ開発TIPS
きぐるみカメラ
ふらいぱん
アンドロイドのデザイン集
Page top↑