در این مقاله قصد داریم یک گالری تصاویر با استفاده از gridview درست نماییم که هر کدام دارای یک آیکون و متن زیر آیکون می باشد.

برای نمایش تصاویر کنار هم و مرتب قرار گرفتن آن ها بهتر است ما از یک gridview استفاده نماییم که داخل آن قرار است از متن و آیکون مورد نظر استفاده می شود

برای نمایش آن از یک arrayadapter استفاده می نماییم.

ابتدا در activity اول از یک gridview برای نمایش تصویر استفاده می نماییم.

<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"
                android:paddingBottom="@dimen/activity_vertical_margin"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                tools:context=".MainActivity" >
    <GridView
            android:id="@+id/gridView1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:columnWidth="80dp"
            android:gravity="center"
            android:numColumns="auto_fit"
            android:stretchMode="columnWidth" >
    </GridView>
</RelativeLayout>

برای activity دوم هم ما از یک متن و عکس برای نمایش آن داخل gridview استفاده می نماییم. به صورت زیر:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:orientation="vertical"
              android:padding="5dp" >
    <ImageView
            android:id="@+id/item_image"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginRight="10dp"
            android:src="@drawable/home" >
    </ImageView>
    <TextView
            android:id="@+id/item_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:textSize="15sp" >
    </TextView>
</LinearLayout>

حالا داخل کلاس اصلی عکس ها را تعریف می نماییم و آن ها را داخل gridview قرار می دهیم .

برای نمایش عکس ها هم از یک array adapter استفاده می نماییم.

package com.barnamenevisan.gidview;

import java.util.ArrayList;


import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.widget.GridView;
/**
 * 
 * @author manish.s
 *
 */

public class MainActivity extends Activity {
	GridView gridView;
	ArrayList<Item> gridArray = new ArrayList<Item>();
	 CustomGridViewAdapter customGridAdapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//set grid view item
		Bitmap homeIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.home);
		Bitmap userIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.personal);
		
		gridArray.add(new Item(homeIcon,"صفحه اصلی"));
		gridArray.add(new Item(userIcon,"کاربر"));
		gridArray.add(new Item(homeIcon,"صفحه اصلی"));
		gridArray.add(new Item(userIcon,"دوستان"));
		gridArray.add(new Item(homeIcon,"صفحه اصلی"));
		gridArray.add(new Item(userIcon,"صفحه شخصی"));
		gridArray.add(new Item(homeIcon,"صفحه اصلی"));
		gridArray.add(new Item(userIcon,"کاربران"));
		gridArray.add(new Item(homeIcon,"تماس با ما"));
		gridArray.add(new Item(userIcon,"محصولات"));
		gridArray.add(new Item(homeIcon,"صفحه اصلی"));
		gridArray.add(new Item(userIcon,"خدمات"));
		
		
		gridView = (GridView) findViewById(R.id.gridView1);
		customGridAdapter = new CustomGridViewAdapter(this, R.layout.row_grid, gridArray);
		gridView.setAdapter(customGridAdapter);



	}

}

حالا یک کلاس دیگر برای تعریف آرایه ها می سازیم و داخل آن arrayadapter را تعریف می نماییم این کلاس از کلاس آرایه ها ارث می برد.

package com.barnamenevisan.gidview;

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * 
 * @author manish.s
 *
 */
public class CustomGridViewAdapter extends ArrayAdapter<Item> {
	Context context;
	int layoutResourceId;
	ArrayList<Item> data = new ArrayList<Item>();

	public CustomGridViewAdapter(Context context, int layoutResourceId,
			ArrayList<Item> data) {
		super(context, layoutResourceId, data);
		this.layoutResourceId = layoutResourceId;
		this.context = context;
		this.data = data;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		View row = convertView;
		RecordHolder holder = null;

		if (row == null) {
			LayoutInflater inflater = ((Activity) context).getLayoutInflater();
			row = inflater.inflate(layoutResourceId, parent, false);

			holder = new RecordHolder();
			holder.txtTitle = (TextView) row.findViewById(R.id.item_text);
			holder.imageItem = (ImageView) row.findViewById(R.id.item_image);
			row.setTag(holder);
		} else {
			holder = (RecordHolder) row.getTag();
		}

		Item item = data.get(position);
		holder.txtTitle.setText(item.getTitle());
		holder.imageItem.setImageBitmap(item.getImage());
		return row;

	}

	static class RecordHolder {
		TextView txtTitle;
		ImageView imageItem;

	}
}

حالا یک کلاس جدید به نام item ایجاد نمایید و داخل آن متن و عکس را به صورت متد get بر می گرداند.

package com.barnamenevisan.gidview;

import android.graphics.Bitmap;

/**
 * 
 * @author manish.s
 *
 */

public class Item {
	Bitmap image;
	String title;
	
	public Item(Bitmap image, String title) {
		super();
		this.image = image;
		this.title = title;
	}
	public Bitmap getImage() {
		return image;
	}
	public void setImage(Bitmap image) {
		this.image = image;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	

}

در آخر خروجی به صورت زیر است: