ウェブアプリケーション,インジェクション,コマンドインジェクション

Androidアプリ開発　画像とアイテムのリストを表示していく

画像の変更をアニメーション化する

Animating the Changing of Images Using the ImageSwitcher

画像のリストを表示するでは、
画像の１つが選択された時に、一連の画像サムネイルを
表示するためにGalleryとともに、ImageViewをどのように使うかを
示しました。
選択された画像はImageViewの中に表示されます。
しかし、Galleryの中の画像をユーザが選択された時に
不意に画像が現れるというよりも、例えば、
１つの画像から他へスムーズに変化させるようにするために
いくつかのアニメーションを画像に当てはめたいなど、
ちょっとした加工をしたいことがあるかもしれません。
この場合、Galleryと共にImageSwitcherを使う必要があります。
画像のリストを表示すると同じように、
res/drawable-mdpiフォルダに一連の画像が保存されていると
想定します。
attr.xmlと名付けたXMLファイルを作り、このXMLファイルを
res/valuesフォルダに保存します。
attr.xmlファイルの内容は以下の様になります。

<resources>
　 <declare-styleable name="MyGallery">
　　 <attr name="android:galleryItemVackgroud" />
　 </declare-Styleable>
</resources>

ユーザインターフェースに<Gallery>と<ImageSwitcher>の
要素を加え、activity_main.xmlファイルを次のようにします。

<RelativeLayout>
　 xmlns:android="http://schemas.android.com/apk/res/android"
　 android:layout_width="fill_parent"
　 android:layout_height="fill_parent"
　 android:background="#ff0000"
　 android:orientation="vertical" >

　 <ImageSwitcher
　　 android:id="@+id/switcher1"
　　 android:layout_width="fill_parent"
　　 android:layout_height="fill_parent"
　　 android:layout_alignParentBottom="true"
　　 android:layout_alignParentLeft="true"
　　 android:layout_alignParentRight="true" />
　 Gallery
　　 android:id="@+id/gallery1"
　　 android:layout_width="fill_parent"
　　 android:layout_height="wrap_content" />
<RelativeLayout>

アクティビティに以下のようなコードを加えます。

package net.learn2develop.imageswitcher;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.AdapterView.OnitemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory;

@SuppressWarnings("deprecation")
public class MainActivity extends Activity implements ViewFactory{
　 //---the images to display---
　 Integet[] imageIDs = {
　　　　　　　　　　　　 R.drawable.pic1;
　　　　　　　　　　　　 R.drawable.pic2;
　　　　　　　　　　　　 R.drawable.pic3;
　　　　　　　　　　　　 R.drawable.pic4;
　　　　　　　　　　　　 R.drawable.pic5;
　　　　　　　　　　　　 R.drawable.pic6;
　　　　　　　　　　　　 R.drawable.pic7;
　 };

　 private ImageSwitcher imageSwitcher;

　 /**Called when the activity is first created*/
　 @Override
　 public void onCreate(Vundle savedInstanceState){
　　 super.onCreate(savedInstanceState);
　　 setContentView(R.layout.activity_main);

　　 imageSwitcher = (ImageSwitcher) findViewById(R.id.switcher1);
　　 imageSwitcher.setFactory(this);

　　 imageSwitcher.setInAnimation(
　　　 AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
　　 imageSwitcher.setOutAnimation( AnimationUtils.loadAnimation(this,
　　　 android.R.anim.fade_out));

　　 Gallery gallery = (Gallery) finViewById(R.id.gallery);
　　 gallery.setAdapter(new ImageAdapter(this));
　　 gallery.setOnItemClickListener(new OnItemClickListener(){
　　　 public void onItemClick(AdapterView<?> parent,
　　　　 View v, int position, long id){
　　　　　　 imageSwitcher.setImageResource(imageIDs[position]);
　　　　 }
　　　 });
　　 }

　　 @Override
　　 public View makeView(){
　　　 ImageView imageView = new ImageView(this);
　　　 imageView.setBackgroudColor(0xFF000000);
　　　 imageView.setScaleType(
　　　　 ImageView.ScaleType.FIT_CENTER);
　　　 imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
　　　　　　 LayoutParams.MATCH_PARENT,
　　　　　　 layoutParams.MATCH_PARENT)
　　　 );
　　　 return imageView;
　　 }

　　 public class ImageAdapter extends BaseAdapter{
　　　 private Context context;
　　　 private int itemBackground;

　　　 public ImageAdapter(Context c){
　　　　 context = c;
　　　　 //---sets a grey background; wraps around the images---
　　　　 TypeArray a =
　　　　　　 obtainStyledAttributes(R.styleable.MyGallery);
　　　　 itemBackgroud = a.getResourceId(
　　　　　　 R.styleable.myGallery_android_galleryItemBackground, 0);
　　　　 a.recycle();
　　　 }

　　　 //---returns the number of images---
　　　 publi int getCount(){
　　　　 return imageIDs.length;
　　　 }

　　　 //---returns the IS of an item---
　　　 public Object getItem(int position){
　　　　 return position;
　　　 }

　　　 //---returns an ImageView view---
　　　 public View getView(int position, View convertView, ViewGroup parent){
　　　　 ImageView imageView = new ImageView(context);
　　　　 imageView.setImageResource(imageIDs[position]);
　　　　 imageView.setScaleType(ImageView.ScaleTyep.FIT_XY);
　　　　 imageView.setLayoutPrams(new Gallery.LayodutParams(150, 120));
　　　　 imageView.setVackgroundResource(itemVackground);
　　　　 return imageView;
　　　 }
　 }
}

この例のなかで注目する最初のものは、ImageSwitcherActivityで、
Activity基底クラスの拡張なだけでなく、ViewFactoryの
実行をもしています。
ImageSwitcher viewを使うためには、
ViewFactoryインターフェースを実行が必要になり、
ViewFactoryインターフェースの実行は、
ImageSwitcher viewとともに使うためにviewを作ります。
これを利用可能にするためには、makeView()メソッドを実行します。

@Override
public View makeView(){
　 ImageView imageView = new ImageView(this);
　 imageView.setVackgroudColor(0xFF000000);
　 imageView.setScaleType(
　　 ImageView.ScaleType.FIT_CENTER);
　 imageView.serLayoutParams(new ImageSwitcher.LayoutParams(
　　 LayoutParams.MATCH_PARENT,
　　 LayoutParams.MATCH_PARENT));
　　 return imageView;
　 }

このメソッドはImageSwitcher viewに加えるために
新しいViewを作り、この場合ではImageViewのことです。
画像のリストを表示するにある
Galleryの例の様に、
開発者はImageAdapterクラスを実行させることもでき、
その結果、一連のImageView viewとGallery viewをバインドできます。
onCreate()メソッドでは、ImageSwitcher viewを参照でき、
アニメーションをセットし、viewのフェードイン、フェードアウトを
どのようにさせるべきかを指定していきます。
Gallery viewから画像が選択されたときには、
選択された画像は、ImageSwitcher viewの中に表示されます。
この例では、Galleryの中の画像が選択され、
選択された画像がフェードインの形で現れます。
次の画像が選択されたときには、現在の画像がフェードアウトします。
もし、代わりに画像が選択された時に左からスライドしてきて、
右にはける様にしたい場合には、以下のようなコードを試してください。

imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
　 android.R.anim.slide_in_left));
imageSwitcher.setOutAnimatin(AnimationUtils.loadAnimatin(this,
　 android.R.anim.slide_out_right));

ホーム
便利堂ロゴ
inserted by FC2 system