İOS Obj-C

iOS Scroll View

“Scroll view, uygulamamızın ekranından büyük olan içerikleri göstermek için kullanılır. Zoom yapabilir, scroll view’in içeriğini sağa sola hareket ettirebilerek, içeriğin tamamını görebiliriz.”

Scroll view’i daha iyi anlayabilmek için, basit bir uygulama yapacağız. Bu uygulamamızda, büyük boyutta birkaç resmi bir scroll view içerisine yerleştirip, onları ayrıntılı bir biçime görebileceğiz.

 

Adım 1: Uygulamamızı oluşturalım, ekranımıza bir tane scroll view ekleyelim.

İlk olarak Scroll View isminde bir uygulama oluşturalım, bunu yaparken “Single View” uygulama türünü seçelim ki bize bir tane ekran ve onun controller class’ını otomatik olarak oluştursun.

Daha sonra ekranımıza sürükleyip bıraktığımız UI Scroll View’i IBOutlet olarak tanımlayalım. Ben ismine “scrollView” dedim, siz de istediğiniz bir ismi vererek tanımlayabilirsiniz.

Scroll view’den sonra ekranımıza bir tane de buton ekleyelim. Bu butonun işlevi, üzerinde tıklandığı zaman, scroll view içerisinde bulunan resmi değiştirmek olacak. Onu da “btnRefreshImage” adında IBAction olarak tanımlıyorum. Butonun başlığını da “Resmi Yenile” olarak değiştirdim.

Bir tane de temp adında integer değer tanımladım. Bu değeri resmi değiştirirken kullanacağım.

Adım 2 : İçeriklerimizi ekleyelim

Bunun için internetten bir kaç tane meyve resmi indirdim ve projeme ekledim. Butonuma bastıkça bu resimler değişecek.

Scroll View

Adım 3 : UIImageView tanımlama, UIImage tanımlama, resimleri scroll view’e yükleme

temp değişkenine viewDidLoad’da 0 değerini atıyorum. Uygulama açıldığı zaman temp’e ilk değer sıfır vermiş olacağız.

3 Tane resim olduğu için, %3 kullanarak küçük bir algoritma yazdım. (temp’in değerini sürekli artırıyorum ve 3 e göre modunu alıyorum). Bu algoritmaya göre, her if kontrolü altında farklı bir resmi yükleyeceğim.

  • Önceklikle resimleri ScrollView’a eklemek için bir tane UIImageView ve UIImage oluşturacağız.
  • Daha sonra UIImage’e resmi atacağız.
  • UIImageView’in resmi’ni UIImage olarak tanımlayacağız.
  • Ardından UIImageView’in frame’ini yüklediğim resimin genişlik ve yüksekliğine göre değiştireceğiz.
  • ScrollView’imizin contentSize yani içeriğini sığdırdığı alanıda ise resmin genişlik ve yüksekliğine göre değiştireceğiz.
  • En sonunda da image view’i scroll view’e ekleyeceğim. Bunu da addSubview metodunu çağırarak yapacağız.

İmageview hakkında ayrıntılı bilgi : http://kod5.org/ios-image-view/

Kodumuzun soh haline bakacak olursak:

 

.h dosyamız:

 

.m dosyamız:

 

[alert style=”red”]UIScrollView’i iyi anlayabilmek için, kodun içindeki açıklama satırlarını dikkatle okumalısınız.[/alert]

Butona bastıkça değişen ekranımızın görüntüleri:

ekran

 

Uygulama dosyaları için : https://github.com/ozdemirmuhammed/Scroll-View

 

 

Türk Telekom Şirketinde CRM Çözümlerinde Teknik Analist olarak görev yapmaktayım. Geçmişte ise iOS uygulama geliştirici olarak çalıştım. Bilginin ve paylaşmanın gücüne can-ı gönülden inanırım..