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

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

GridViewを使って画像を表示していく

Displaying Images Using the GridView

GridViewは二次元にスクロールするグリッドのアイテムを表示します。
一連の画像を表示するためにImageViewと一緒にGridViewを
使うことができます。
どのように使うかは以下に示します。
ImageSwitcherを使って画像の変更をアニメーション化のように
この例はres/drawable-mdpiフォルダに一連の画像が
あるものと想定してます。
GridViewを使うためには、ユーザインターフェースに
<GridView>を加え、acrivity_main.xmlを以下のように
変更します。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
　 xmlns:tools="http://schemas.android.com/tools"
　 android:layout_width="match_parent"
　 android:layout_height="match_parent" >

　 <GridView
　　 android:id="@+id/gridview"
　　 android:layout_width="fill_parent"
　　 android:layout_height="fill_parent"
　　 android:columnWidth="90dp"
　　 android:gravity="center"
　　 android:horizontalSpacing="10dp"
　　 android:numColumns="auto_fit"
　　 android:StretchMode="columnWidth"
　　 android:verticalSpacint="10dp" />
</RelativeLayout>

アクティビティのコードは以下のようになります。

package net.learn2develop.grid;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity{
　 //---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.drawavle.pic7;
　 };

　 @Override
　 public void onCreate(Bundle savedInstanceState){
　　 super.onCreate(savedInstanceState);
　　 setContentView(R.layout.activity_main);

　　 GridView gridview = (GridView) findViewById(R.id.gridview);
　　 gridView.setAdapter(new ImageAdapter(this));

　　 gridView.setOnItemClickListener(new OnItemClickListener(){
　　　 public void onItemClick(AdapterView<?> parent,
　　　 View v, int position, long id){
　　　　 Toast.makeText(getBaseContext(),
　　　　　 "pic" + (position + 1) + " selected",
　　　　　 Toast.LENGTH_SHORT).show();
　　　 }
　　 });
　 }

　 public clas ImageAdapter extends BaseAdapter{
　　 private Context context;
　　 public ImageAdapter(Context c){
　　　 context = c;
　　 }

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

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

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

　　 //---returns an ImageView view---
　　 public View getView(int position, View convertView,
　　　　 ViewGroup parent){
　　　 ImageView imageView;
　　　 if (convertView == null){
　　　　 imageView = new ImageView(context);
　　　　 imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
　　　　 imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
　　　　 imageView.serPadding(5,5,5,5);
　　　 }else{
　　　　 imageView = (ImageView) convertView;
　　　 }
　　　 imageView.serImageResource(imageIDs[position]);
　　　 return imageView;
　　 }
　 }
}

ImageSwitcherを使って画像の変更をアニメーション化のように
ImageAdapterクラスを作り、結果、一連のImageView viewと
GridViewをバインドできます。
アプリケーションを走らせる時には、画面に画像を並べることが出来ます。



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