今回は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を取得する為に。
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個の要素を持つ場合、0 〜 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)
→横方向には1つのみ(横fullx縦100)画面が出る。
@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を指定している。
<resources> <declare-styleable name="GalleryBackImage"> <attr name="android:galleryItemBackground" /> </declare-styleable> </resources>
SourceCode全体/その他
AdapterView.OnItemSelected
Galleryにリスナーとしてsetすることで、
現在FocusされているGalleryの要素のpositionが取得出来ます。
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; } } }