Galleryを使って横スクロールする

| 2010年11月27日 | アプリケーション | 3 Comments
Bookmark this on Hatena Bookmark

今回はGalleryを使って、ImageGalleryを作ってみます。

本サンプルは画像Imageのみをスクロールさせていますが、
作成するAdapter次第では複雑な物も使用出来ます。
それはまたの機会に。

具体的な実装方法は続きで紹介します。

Galleryを使用する為には、BaseAdapterを継承したクラスを
GalleryにsetAdapterする必要があります。

独自クラスの作成

まずは、BaseAdapterを継承した独自クラスImageAdapterを作成します。
注意しなければいけないのは、必ず以下4つのMethodの実装が必要なこと。
・int getCount
・Object getItem(int position)
・long getItemId(int position)
⇛これらについては、今回は深く関わらないので触れません。
・View getView(int position, View convertView, ViewGroup parent)
⇛後述

Gallery要素のBackGround

コンストラクタの中で、後述のattrs.xmlにて定義したGalleryBackImageの
リソースIDを取得し、getViewにおいてsetBackgroundResourceしています。

・obtainStyledAttributes

xmlで定義した値を読み出す。
今回は単にgalleryItemBackgroundのresIDを取得する為に。

1
2
3
4
5
6
7
public ImageAdapter(Context ctx) {
    mContext = ctx;
        TypedArray tmpArry = obtainStyledAttributes(R.styleable.GalleryBackImage);
        BackResId = tmpArry.getResourceId(
                R.styleable.GalleryBackImage_android_galleryItemBackground, 0);
        tmpArry.recycle();
    }

getView

・View getView(int position, View convertView, ViewGroup parent)

画面上に表示されるGalleryの数だけ「position」の値を変え呼ばれる。
positionはN個の要素を持つ場合、０ 〜 N-1まで。
各々の場合において、読み込むべきImageをSetしています。

・ImageView.setScaleType

画像Imageの表示方法を指定します。

CENTER 枠中央を基準にscaleせずに表示
CENTER_CROP 枠中央を基準に横方向へscaleし表示
CENTER_INSIDE 枠中央を基準に枠内へ表示されるようscaleし表示(拡大はしない)
FIT_CENTER 枠中央を基準に縦方向へscaleし表示
FIT_END 枠右端を基準に縦方向へscaleし表示
FIT_START 枠左端を基準に縦方向へscaleし表示
FIT_XY 枠全体にFITする様scaleして表示
MATRIX 枠左上を基準にscaleせずに表示

・ImageView.setLayoutParams

Gallery.LayoutParamsに指定する値は、Gallaryを表示する大きさを指定する。
例）Gallery.LayoutParams(fill_parent,100)
→横方向には１つのみ（横fullx縦100)画面が出る。

1
2
3
4
5
6
7
8
9
10
11
12
@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ImageView galleryView = new ImageView(mContext);
 
    galleryView.setImageResource(mImageIds[position]);
    galleryView.setScaleType(ImageView.ScaleType.FIT_XY);
    galleryView.setLayoutParams(new Gallery.LayoutParams(100, 100));
 
    galleryView.setBackgroundResource(BackResId);
 
    return galleryView;
}

attrs.xml

/res/valuesディレクトリにattrs.xmlを作成する。
Gallery内のリソース全てに適用されるstyleの定義をする。
今回は、プラットフォーム既存のgalleryItemBackgroundを指定している。

1
2
3
4
5
<resources>
    <declare-styleable name="GalleryBackImage">
        <attr name="android:galleryItemBackground" />
    </declare-styleable>
</resources>

SourceCode全体/その他

AdapterView.OnItemSelected

Galleryにリスナーとしてsetすることで、
現在FocusされているGalleryの要素のpositionが取得出来ます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
public class Main extends Activity implements AdapterView.OnItemSelectedListener{
    ImageView fullView;
 
    protected Integer[] mImageIds = {
            R.drawable.icon1,
            R.drawable.icon2,
            R.drawable.icon3,
            R.drawable.icon4,
            R.drawable.icon5
        };
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        Gallery gallery = (Gallery)findViewById(R.id.Gallery);
        gallery.setAdapter(new ImageAdapter(this));
        gallery.setOnItemSelectedListener(this);
 
        fullView = (ImageView)findViewById(R.id.ImageView_big);
    }
 
    @Override
    public void onItemSelected(AdapterView parent, View v, int position, long id){
        fullView.setImageResource(mImageIds[position]);
    }
 
    @Override
    public void onNothingSelected(AdapterView<?> arg0) {
    }
 
    class ImageAdapter extends BaseAdapter{
        int BackResId;
 
        private Context mContext;
 
        public ImageAdapter(Context cnt) {
            mContext = cnt;
            TypedArray a = obtainStyledAttributes(R.styleable.GalleryBackImage);
            BackResId = a.getResourceId(
                    R.styleable.GalleryBackImage_android_galleryItemBackground, 0);
            a.recycle();
 
        }
 
        @Override
        public int getCount() {
            return mImageIds.length;
        }
 
        @Override
        public Object getItem(int position) {
            return position;
        }
 
        @Override
        public long getItemId(int position) {
            return position;
        }
 
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView galleryView = new ImageView(mContext);
 
            galleryView.setImageResource(mImageIds[position]);
            galleryView.setScaleType(ImageView.ScaleType.FIT_XY);
            galleryView.setLayoutParams(new Gallery.LayoutParams(100, 100));
 
            galleryView.setBackgroundResource(BackResId);
 
            return galleryView;
        }
 
    }
}

About The Author

UpDown-G

3 Comments