Android – ImageView Kullanımı

Görsel bileşenleri tanımaya devam ediyoruz. Bu yazıda inceleyeceğimiz bileşen, ImageView. Bu bileşen, uygulamalarda resim görüntülemek amacıyla hazırlanmış bir bileşen olup sıkça kullanılmaktadır.

Örnek Uygulama

Şimdi ImageView‘i tanımak için basit bir uygulama hazırlayalım. Uygulamamızda bir tane Button bir tane de ImageView yer alsın. Button ile, resmin görünürlüğünü ayarlayalım. Button‘a basınca resim görünür hale gelsin, tekrar basınca görünmez hale gelsin.

Yine işlemlerimizi MainActivity sınıfını ve activity_main xml dosyasını kullanarak gerçekleştireceğiz.

Tasarım

İlk olarak aşağıdaki resimleri ya da kendi istediğiniz başka iki resmi res klasörü altındaki drawable klasörü içerisine koyalım. Yanda resimleri nereye koyduğumuzu görebilirsiniz.

Ardından activity_main dosyası içerisine bir tane ImageView bir tane de Button ekleyip konumlarını ayarlıyoruz.

activity_main.xml dosyasının içeriği aşağıdaki gibi oldu.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/resim1" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Göster / Gizle" />

</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<ImageView

android:id="@+id/imageView1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_above="@+id/button1"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true"

android:src="@drawable/resim1" />

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:text="Göster / Gizle" />

</RelativeLayout>

Kodlama (MainActivity)

Şimdi kod kısmına geçelim. MainActivity sınıfımızda, bileşenlerimizi tanıttıktan sonra imageView’in görünürlüğünü kapatıyoruz. Bu işlemi setVisibility() metoduyla yapıyoruz.

Ardından button‘umuzun onClick metoduna resmin görünürlüğünü açıp kapatmak için gerekli kodları yazıyoruz. Böylece MainActivity sınıfımız aşağıdaki gibi oluyor.

package org.kod5.android;


import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity {

	//Bu kısımda bileşenlerimizi tanımlıyoruz.
	private ImageView imageView;
	private Button button;
	
    @Override
    protected void onCreate(Bundle savedInstanceState) { //Bu metod uygulama açıldığında çalıştırılan metod.
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Bu kısımda yukarıda tanımladığımız bileşenlerle xml olarak hazırladığımız bileşenleri birbirlerine bağlıyoruz. 
        imageView = (ImageView)findViewById(R.id.imageView1);        
        button = (Button)findViewById(R.id.button1);
        
        imageView.setVisibility(View.INVISIBLE);//resmin görünürlüğünü kapatıyoruz.
        
        button.setOnClickListener(new OnClickListener() {  
			
			@Override
			public void onClick(View v) { //Burada Buttona tıklandığında çalıştırılacak kodlar yer alıyor.
			  
				int kontrol = imageView.getVisibility();
				if(kontrol==0)
					imageView.setVisibility(View.INVISIBLE);
				else
					imageView.setVisibility(View.VISIBLE);
				  			
			}
		});
    }
}

package org.kod5.android;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.ImageView;

public class MainActivity extends Activity {

//Bu kısımda bileşenlerimizi tanımlıyoruz.

private ImageView imageView;

private Button button;

@Override

protected void onCreate(Bundle savedInstanceState) { //Bu metod uygulama açıldığında çalıştırılan metod.

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//Bu kısımda yukarıda tanımladığımız bileşenlerle xml olarak hazırladığımız bileşenleri birbirlerine bağlıyoruz.

imageView = (ImageView)findViewById(R.id.imageView1);

button = (Button)findViewById(R.id.button1);

imageView.setVisibility(View.INVISIBLE);//resmin görünürlüğünü kapatıyoruz.

button.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) { //Burada Buttona tıklandığında çalıştırılacak kodlar yer alıyor.

int kontrol = imageView.getVisibility();

if(kontrol==0)

imageView.setVisibility(View.INVISIBLE);

else

imageView.setVisibility(View.VISIBLE);

}

});

}

Uygulamamızın ilk aşaması hazır. Uygulamamız şuan asağıdaki gibi görünüyor.

Ekran Görüntüleri -1

Uygulamanın 2. Aşaması

Uygulamımızın ikinci aşamasında, ImageView‘in tıklanma özelliğini kullanacağız. Ekranda görünen resme tıkladığımızda resim değişecek.

Bu işlem için kodumuzu aşağıdaki gibi revize ediyoruz.

package org.kod5.android;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity {

	//Bu kısımda bileşenlerimizi tanımlıyoruz.
	private ImageView imageView;
	private Button button;
	private int kontrol2=0;//hangi resim olduğunu kontrol etmek için 

    @Override
    protected void onCreate(Bundle savedInstanceState) { //Bu metod uygulama açıldığında çalıştırılan metod.
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Bu kısımda yukarıda tanımladığımız bileşenlerle xml olarak hazırladığımız bileşenleri birbirlerine bağlıyoruz. 
        imageView = (ImageView)findViewById(R.id.imageView1);        
        button = (Button)findViewById(R.id.button1);
        
        imageView.setVisibility(View.INVISIBLE);//resmin görünürlüğünü kapatıyoruz.
        
        button.setOnClickListener(new OnClickListener() {  
			
			@Override
			public void onClick(View v) { //Burada Buttona tıklandığında çalıştırılacak kodlar yer alıyor.
			  
				int kontrol = imageView.getVisibility();
				if(kontrol==0)
					imageView.setVisibility(View.INVISIBLE);
				else
					imageView.setVisibility(View.VISIBLE);
				  			
			}
		});
        
        imageView.setOnClickListener(new OnClickListener() {//resme tıklandığında çalışacak kodlar bu kısımda
			
			@Override
			public void onClick(View v) {
				
				if(kontrol2==0){
					imageView.setImageResource(R.drawable.resim2);
					kontrol2=1;
				}else{
					imageView.setImageResource(R.drawable.resim1);
					kontrol2=0;
				}
			}
		});
    }
}

package org.kod5.android;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.ImageView;

public class MainActivity extends Activity {

//Bu kısımda bileşenlerimizi tanımlıyoruz.

private ImageView imageView;

private Button button;

private int kontrol2=0;//hangi resim olduğunu kontrol etmek için

@Override

protected void onCreate(Bundle savedInstanceState) { //Bu metod uygulama açıldığında çalıştırılan metod.

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//Bu kısımda yukarıda tanımladığımız bileşenlerle xml olarak hazırladığımız bileşenleri birbirlerine bağlıyoruz.

imageView = (ImageView)findViewById(R.id.imageView1);

button = (Button)findViewById(R.id.button1);

imageView.setVisibility(View.INVISIBLE);//resmin görünürlüğünü kapatıyoruz.

button.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) { //Burada Buttona tıklandığında çalıştırılacak kodlar yer alıyor.

int kontrol = imageView.getVisibility();

if(kontrol==0)

imageView.setVisibility(View.INVISIBLE);

else

imageView.setVisibility(View.VISIBLE);

}

});

imageView.setOnClickListener(new OnClickListener() {//resme tıklandığında çalışacak kodlar bu kısımda

@Override

public void onClick(View v) {

if(kontrol2==0){

imageView.setImageResource(R.drawable.resim2);

kontrol2=1;

}else{

imageView.setImageResource(R.drawable.resim1);

kontrol2=0;

}

});

}

Yukarıda gördüğünüz gibi, resme tıklandığında yakalamak için bir Listener tanımlıyoruz ve içerisine gerekli kodları yazıyoruz.

Burada, kontrol2 adında bir değişkenimiz var. Bu değişken, resme tıklandıkça 0 ya da 1 değerlerini alıyor. Bu değişkene göre de iki resimden birini seçiyoruz. Değiştirme işlemini iki resim için yaptığımızdan dolayı bu basit işlem yeterli oldu. Fakat daha fazla resim için aynı işlemi yapmak istiyorsanız farklı yöntemler kullanmalısınız.

Ekran Görüntüleri -2

Uygulamamızın son hali aşağıdaki gibi oldu. Resme tıklandığında resim değişiyor. Button‘a tıklandığında ise resmin görünürlüğü değişiyor.

Böylece bir bileşeni daha tanımış ve incelemiş olduk. Başka bir bir yazıda görüşmek üzere. 🙂

Kaynak Kodlar

Uygulama dosyaları için: https://github.com/mursidyazar/Android-ImageView.git

Benzer Yazılar

Android Görsel Bileşenler;

Mürşid YAZAR

Yıldız Teknik Üniversitesi Bilgisayar Mühendisliği mezunudur. Java dilinin temellerine hâkimdir. iGones’da Mobil Uygulama Geliştirici olarak çalışmaktadır. Genellikle Android uygulamaları geliştiren ve bu alanda çalışırken başkalarına da yardımcı olmayı görev edinen bir YAZARdır.

http://kod5.org