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.

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.

    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:

//
//  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:

//
//  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