“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.
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.
|
1 2 3 4 5 6 7 8 9 10 |
if (temp%3==0) { //birinci resmi yükleyeceğim } else if (temp%3==1) { //ikinci resmi yükleyeceğim } else if (temp%3==2) { //üçüncü resmi yükleyeceğim } temp++; |
- Ö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 : https://kod5.org/ios-image-view/
Kodumuzun soh haline bakacak olursak:
.h dosyamız:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// // ViewController.h // Scroll View // // Created by Muhammed on 23.05.2014. // Copyright (c) 2014 Muhammed. All rights reserved. // #import <UIKit/UIKit.h> @interface ViewController : UIViewController { int temp; } - (IBAction)btnRefreshImage:(id)sender; @property (weak, nonatomic) IBOutlet UIScrollView *scrollView; @end |
.m dosyamız:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
// // ViewController.m // Scroll View // // Created by Muhammed on 23.05.2014. // Copyright (c) 2014 Muhammed. All rights reserved. // #import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //Temp değişkenine ilk değer olarak 0 atıyorum. temp=0; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (IBAction)btnRefreshImage:(id)sender { //Yeni bir UIImageView oluşturuyorum UIImageView * imageView = [[UIImageView alloc] init]; //Yeni bir UIImage oluşturuyorum UIImage * resim =[UIImage imageNamed:@"resim1.jpg"]; if (temp%3==0) { //1. resmi atıyorum resim =[UIImage imageNamed:@"resim1.jpg"]; //imageview'in frameini ayarlıyorum imageView.frame=CGRectMake(0, 0, resim.size.width ,resim.size.height); imageview'e bu resmi ekliyorum imageView.image=resim; //scrollview'in frame'ini ayarlıyorıö _scrollView.contentSize=CGSizeMake(resim.size.width, resim.size.height); //image view'i scroll view'e ekliyorum. [_scrollView addSubview:imageView]; } else if (temp%3==1) { resim =[UIImage imageNamed:@"resim2.jpg"]; imageView.frame=CGRectMake(0, 0, resim.size.width ,resim.size.height); imageView.image=resim; _scrollView.contentSize=CGSizeMake(resim.size.width, resim.size.height); [_scrollView addSubview:imageView]; } else if (temp%3==2) { resim =[UIImage imageNamed:@"resim3.jpg"]; imageView.frame=CGRectMake(0, 0, resim.size.width ,resim.size.height); imageView.image=resim; _scrollView.contentSize=CGSizeMake(resim.size.width, resim.size.height); [_scrollView addSubview:imageView]; } temp++; } @end |
[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:
Uygulama dosyaları için : https://github.com/ozdemirmuhammed/Scroll-View
[…] Bir tane de temp adında integer değer tanımladım. Bu değeri resmi değiştirirken kullanacağım. Okumaya devam et… […]
[…] 10. Scroll View […]