2011年1月9日日曜日

【android アプリ 開発】 Gallery 作成








■Gallery 作成

Galleryはイメージアイテムを水平スクロールでき、選択したアイテムを中央に表示するビュー(view)です。

まず、Gallery 実行画面を確認します。

[ Gallery 実行画面 ]


1.次のようにEclipseから新しいプロジェクトを生成します。



2.次のイメージをローカルに保存し、res -> drawable-hdpi フォルダにドラッグアンドドロップします。







ドラッグアンドドロップしたら、次のようになります。



3.res -> layout -> main.xml を変更します。


<?xml version="1.0" encoding="utf-8"?>
<Gallery xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gallery"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
/>


4.res -> values に attr.xml を生成します。次の画を参照してください。

まず values フォルダでマウス右クリックで次のように New -> Other を選択します。



次は XMLを選択します。



ファイル名は attr.xml で保存します。


生成された attr.xmlを編集します。


<?xml version="1.0" encoding="utf-8"?>
<resources>
   <declare-styleable name="Gallery1">
        <attr name="android:galleryItemBackground" />
    </declare-styleable>
</resources>



5.src -> my.HelloGallery -> HelloGallery.javaを次のように編集します。


package my.HelloGallery;

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.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
public class HelloGallery extends Activity {
    /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
     Gallery g = (Gallery) findViewById(R.id.gallery);
     g.setAdapter(new ImageAdapter(this));
     g.setOnItemClickListener(new OnItemClickListener() {
         public void onItemClick(AdapterView parent, View v, int position, long id) {
             Toast.makeText(HelloGallery.this, "" + position, Toast.LENGTH_SHORT).show();
         }
     });
 }

 public class ImageAdapter extends BaseAdapter {
     int mGalleryItemBackground;
     private Context mContext;
     private Integer[] mImageIds = {
             R.drawable.f1,
             R.drawable.f2,
             R.drawable.f3,
             R.drawable.f4,
             R.drawable.f5,
             R.drawable.f6
     };
     public ImageAdapter(Context c) {
         mContext = c;
         TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
         mGalleryItemBackground = a.getResourceId(
                 R.styleable.Gallery1_android_galleryItemBackground, 0);
         a.recycle();
     }
     public int getCount() {
         return mImageIds.length;
     }
     public Object getItem(int position) {
         return position;
     }
     public long getItemId(int position) {
         return position;
     }
     public View getView(int position, View convertView, ViewGroup parent) {
         ImageView i = new ImageView(mContext);
         i.setImageResource(mImageIds[position]);
         i.setLayoutParams(new Gallery.LayoutParams(150, 100));
         i.setScaleType(ImageView.ScaleType.FIT_XY);
         i.setBackgroundResource(mGalleryItemBackground);
         return i;
     }
 }
}


ソースコードの太字の部分がattr.xml に定義されている Gallery1を適用する部分です。att1.xml コードの太字の部分と比較してみましょう。


6.Ctrl + F11 で実行します。


実行後イメージを選択すると下にイメージのindexが出力されます。

Blog Archive