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

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

2011.08.05

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枚ではいけました。)

 

以上です。

同じカテゴリの記事を紹介します

アプリ開発でもめない為に115000ダウンロードくらい累計でいったんだけど生活できない件アプリ制作でごはんを食べれるようになる為に考えなくてはいけないこと「ヒットアプリ開発者が実践する!『最新』スマホアプリ成功の秘訣」を聞いてアンドロイダーに掲載をされるまで。out of memoryが起きる機種、起きない機種Androidアプリのデザインをする上で注意したい点定番アンドロイドアプリを引きずり下ろす作戦[1話完結]指示系アプリを作ってみよう。(Threadを使う)ここにいるよアプリの失敗に学ぶ

カテゴリー:アプリ制作

公開中のアプリ、是非ダウンロードしてみてください

2chまとめのたね

RSSを利用してさまざまなブログの情報をキュレーションしてくれるアプリ

インストールする

ひらがな戦記

OPENGL ES2 を利用したカルタのソーシャルゲーム

インストールする