今回は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;
}
}
}