How To Use Gridview Layout in Android


gridviewAndroid içerisinde GridView farklı amaçlar için kullanılabiliyor. Mesela en çok bilinen olarak resim galerisi örneğini verebiliriz. Veya bir tablo içeresinde istatistiksel verileri göstermek için kullanabiliriz. Ya da kullanım amacına bağlı olarak değişir. Bu örnekte küçük bir resim galerisi oluşturacağız ve seçili resim diğer sayfada tam ekran olarak görünecek. Aşağıda kullandığım resimleri vereceğim, tabi siz istediğiniz farklı resmi kullabilirsiniz. Toplamda 21 tane resim var 480 X 800 boyutlarında. Yeni bir proje oluşturalım ve adı da AndroidGridLayout olsun. Projeyi bu şekilde oluşturunca main activity isimi de otomatik olarak AndroidGridLayoutActivity.java şeklinde oluşturuluyor. Yukarıda da bahsettiğim gibi dilediğiniz kadar resmi res/drawable-hdpi dizinine aktarın. Aşağıda bunları kaynak olarak göstereceğiz. Öncelikle kullancağımız gridview ile başlayalım. res/layout/ dizinine grid_layout.xml adında dosya oluşturalım ve içerisini aşağıdaki gibi yazalım.

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/grid_view"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:numColumns="auto_fit"
	android:columnWidth="90dp"
	android:horizontalSpacing="5dp"
	android:verticalSpacing="5dp"
	android:gravity="center"
	android:stretchMode="columnWidth" >  

</GridView>

Şimdi ImageAdapter.java adında yeni bir class oluşturacağız ve BaseAdapter class ından extend edeceğiz. Bunun için öncelikle src/paketAdi sağ tık -> New -> Class yaparak yeni bir class oluşturuyoruz. Daha sonra içeriğini aşağıdaki gibi değiştirelim:
ImageAdapter.java

package paketAdi;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
	private Context mContext;

	// Bütün resimleri bir Integer array in içine alıyoruz.
	public Integer[] mThumbIds = {
			R.drawable.image01, R.drawable.image02,
			R.drawable.image03, R.drawable.image04,
			R.drawable.image05, R.drawable.image06,
			R.drawable.image07, R.drawable.image08,
			R.drawable.image09, R.drawable.image10,
			R.drawable.image11, R.drawable.image12,
			R.drawable.image13, R.drawable.image14,
			R.drawable.image15, R.drawable.image16,
			R.drawable.image17, R.drawable.image18,
			R.drawable.image19, R.drawable.image20,
			R.drawable.image21,
	};

	// Yapılandırıcı metod
	public ImageAdapter(Context c){
		mContext = c;
	}

	@Override
	public int getCount() {
		// Eleman sayısını getiriyor.
		return mThumbIds.length;
	}

	@Override
	public Object getItem(int position) {
		// Seçili elemanın konumunu getiriyor.
		return mThumbIds[position];
	}

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

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {			
		ImageView imageView = new ImageView(mContext);
		imageView.setImageResource(mThumbIds[position]);
		imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
		imageView.setLayoutParams(new GridView.LayoutParams(150, 150));
		return imageView;
	}

}

Şimdi ise main activity dosyamızı yani AndroidGridLayoutActivity.java yı açalım ve aşağıdaki gibi değişiklik yapalım.
AndroidGridLayoutActivity.java

package paketAdi;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;

public class AndroidGridLayoutActivity extends Activity {

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

		GridView gridView = (GridView) findViewById(R.id.grid_view);
		
		// Instance of ImageAdapter Class
		gridView.setAdapter(new ImageAdapter(this));

	}
}

Bu haliyle çalıştırdığınızda aşağıdaki ekran görüntüsünü elde edeceksiniz:

screen7-1

Şimdi de her hangi bir resim seçildiğinde başka bir ekranda tam ekranda seçilen resmi göstereceğiz. Bunun için de yeni bir sayfa tasarlamalıyız. Yani yeni bir xml file ve yeni bir activity (class).
Öncelikle res/layout dizinine xml dosyamızı yazalım adı da full_image.xml olsun.

<?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" >

	<ImageView android:id="@+id/full_image_view"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"/>

</LinearLayout>

Bu oluşturulan tam ekran gösterilecek resim içindi. Şimdi bunun için bir de java dosyası (activity, class) yazacağız.
src/paketAdi dizinine java dosyamızı yazalım adı da FullImageActivity.java olsun.

package paketAdi;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;

public class FullImageActivity extends Activity {
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.full_image);

		// Önceki sayfada oluşturulan intent id'yi al.
		Intent i = getIntent();

		// Seçilen resmin id'sin konumunu al.
		int position = i.getExtras().getInt("id");
		ImageAdapter imageAdapter = new ImageAdapter(this);

		ImageView imageView = (ImageView) findViewById(R.id.full_image_view);
		imageView.setImageResource(imageAdapter.mThumbIds[position]);
	}

}

Artık yapmamız gereken sadece main activity dosyamızda, (AndroidGridLayoutActivity.java) biraz değişiklik yapmak. Resim seçildikten sonra diğer sayfayı açıp seçili resmin id’sini gönderen bir Intent oluşturacağız. AndroidGridLayoutActivity.java :

package paketAdi;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;

public class AndroidGridLayoutActivity extends Activity {
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.grid_layout);

		GridView gridView = (GridView) findViewById(R.id.grid_view);
		
		// ImageAdapter Class ından bir instance oluşturduk.
		gridView.setAdapter(new ImageAdapter(this));

		// Gridview in her hangi bir elemanı seçildiği zaman...
		gridView.setOnItemClickListener(new OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView<?> parent, View v,
					int position, long id) {
				
				// FullScreenActivity.java sayfasına gidecek bir Intent tanımla.
				Intent i = new Intent(getApplicationContext(), FullImageActivity.class);
				// resmin id'sini Intent e ekle.
				i.putExtra("id", position);
				// Sayfayı çağır.
				startActivity(i);
			}
		});
	}
}

Son olarak da AndroidManifest.xml dosyasını açalım ve aşağıdaki değişikleri yapalım:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="paketAdi"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="8" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:label="@string/app_name"
            android:name=".AndroidGridLayoutActivity" >
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        
        <!-- FullImageActivity.java sayfasını tanımladık. -->
        <activity android:name=".FullImageActivity"></activity>
    </application>

</manifest>

Son olarak projeyi çalıştırdığımızda oluşan ekran görüntüsü:
screen7-1

screen7-2

Kullanılan resimler:
image01image02image03image04image05image06image07image08image09image10image11image12image13image14image15image16image17image18image19image20image21

Reklamlar

28 Ara 2012 tarihinde Android içinde yayınlandı ve , , olarak etiketlendi. Kalıcı bağlantıyı yer imlerinize ekleyin. Yorum yapın.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: