画像をGridViewで格子状に表示するには

Androidのギャラリーなどのアプリでは下の画像のように画像を格子状に表示する機能がついていることがあります。

これはGridViewとBaseAdapterを使えば実装できます。

手順は次の通りです。

BaseAdapterを拡張する

初めにBaseAdapterを拡張してGridViewに設定するアダプターを実装します。

public class GridAdapter extends BaseAdapter 
{
    private LayoutInflater inflater;
    private int layoutId;
    private List<String> imgPathList;
    
    public GridAdapter(Context context,  int layoutId, List<String> imgPathList)
    {
        super();
        this.inflater = (LayoutInflater) context.getSystemService(
                Context.LAYOUT_INFLATER_SERVICE);
        this.layoutId = layoutId;
        this.imgPathList = imgPathList;
    }
    
    @Override
    public int getCount()
    {
        return imgPathList.size();
    }

    @Override
    public Object getItem(int position) 
    {
        return null;
    }

    @Override
    public long getItemId(int position)
    {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent)
    {
        String imgFilePath = imgPathList.get(position);
        
        if(convertView == null){
            convertView = inflater.inflate(layoutId, parent, false);
        }
        
        ImageView imageView = (ImageView) convertView.findViewById(
                                R.id.imageView);
         
        /** ImageViewに画像を設定 */
        if(imageView != null){
            Bitmap bitmap = BitmapFactory.decodeFile(imgFilePath);
            imageView.setImageBitmap(bitmap);
        }
        
        return convertView;
    }
}

GridViewのアイテムレイアウトの作成

GridViewの1つのアイテムレイアウトをgrid_item.xmlのような名前で作成します。

grid_item.xml

<?xml version="1.0"  encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center_vertical|center_horizontal" 
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView" 
        android:layout_width="90dp" 
        android:layout_height="90dp" 
        android:layout_margin="3dp" />
        
</LinearLayout>

アダプターをGridViewに設定する

GridViewを表示するActivityのレイアウトは次のようになります。

activity_grid.xml

<?xml version="1.0"  encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" >

    <GridView
        android:id="@+id/gridView" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:numColumns="3" >
    </GridView>

</LinearLayout>

GridViewの列数はデフォルトで3になっています。この値はアプリに応じて変えてください。

次がActivityの内容です。

public class GridActivity extends SherlockFragmentActivity 
{
    private String filePath;
    
    private GridView gridView;
    private GridAdapter gridAdapter;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid);
        
        /** GridViewの取得 */
        gridView = (GridView) findViewById(R.id.gridView);

        /** 画像フォルダから画像パスの一覧を取得する。 */
        List<String> imgFilePaths = new ArrayList<String>();
        File[] imgFiles = new File("画像フォルダパス").listFiles();
        for(File imgFile : imgFiles){
            imgFilePaths.add(imgFile.getAbsolutePath());
        }
        
        /** アダプターをGridViewに設定。 */
        gridAdapter = new GridAdapter(this, R.layout.grid_item, imgFilePaths);
        gridView.setAdapter(gridAdapter);
    }
}

これで格子状に画像を表示できるようになります。