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;

2 Yorum

Android – ListView Kullanımı dedi ki:

2 Temmuz 2014, 22:06

[…] veri göstermek için kullanılan en basit bileşenler olan TextView ve ImageView‘i önceki yazılarımda anlatmıştım. ListView, TextView ve […]

Cevapla
Android – WebView Kullanımı dedi ki:

29 Ekim 2014, 16:44

[…] ImageView […]

Cevapla
Android – TextView ve EditText Kullanımı dedi ki:

29 Ekim 2014, 16:57

[…] ImageView […]

Cevapla
Android – Toast Kullanımı dedi ki:

30 Ekim 2014, 15:25

[…] ImageView […]

Cevapla
Android – ProgressBar Kullanımı | Kod5.org dedi ki:

15 Haziran 2015, 17:16

[…] ImageView […]

Cevapla
Android – Button ve StateListDrawable Kullanımı | Kod5.org dedi ki:

15 Haziran 2015, 17:19

[…] ImageView […]

Cevapla
Android – CheckBox Kullanımı | Kod5.org dedi ki:

15 Haziran 2015, 17:20

[…] ImageView […]

Cevapla
Android – SeekBar Kullanımı | Kod5.org dedi ki:

15 Haziran 2015, 17:58

[…] ImageView […]

Cevapla
kemal dedi ki:

10 Eylül 2016, 00:05

Çok teşekkür ederim.

Cevapla
Barış Tosun dedi ki:

24 Mart 2019, 17:15

ileri ve geri butonu ekleyerek resim değişmesini hangi kodlarla sağlarım android eğitimi hakkında tek sağlam site sizinki allah razı olsun

Cevapla

Örnek Uygulama

Tasarım

Kodlama (MainActivity)

Ekran Görüntüleri -1

Uygulamanın 2. Aşaması

Ekran Görüntüleri -2

Kaynak Kodlar

Benzer Yazılar

Benzer Yazılar

2 Yorum

Yorum Yap X