Uygulamanızın güzel görünmesi için çabalamaktan hiç yoruldunuz mu? Hem iPhone hemde iPad için arayüz hazırlamak sizi deliye çeviriyor mu? Eğer öyleyse sizin için iyi haberlerimiz var!!

Aynı boyuta sahip ekranlar için arayüz tasarlamak büyük bir problem değil. Ancak bazı durumlarda arayüzümüz kendini yeni boyutlara da uyarlamak zorunda kalabilir. Bugüne kadar eğer arayüzünüz
mantıklı bir nedenden ötürü karmaşık bir yapı taşıyorsa, ciddi miktarda kod yazmak zorunda kalıyorduk. Bu makalemizi okuyunca mutlu olacaksınız. iOS 6 iPhone ve iPad için yeni bir özellik taşıyor: Auto Layout.

Auto Layout sadece farklı ebatlardaki ekranlara destek vermekle kalmıyor ayrıca belli durumlar içinde globalleştirmeyide kendisi yapabiliyor.
Artık desteklenen her dil için farklı bir storyboard yapmak gerekmiyor ve ibranice ve Arapça gibi sağdan yazmalı diller içinde kolaylık sağlıyor.

Bu makale ile size Interface Builder ile Auto Layout hazırlanmasını göstereceğiz. Auto Layout ile ustalaşmaya hazır olun.

Springs ve Struts ile yaşanan problem

Şüphesiz “autosizing masks” yada bilinen adıyla “Struts and Struts”hakkında bilginiz var. Bu yöntem view’in boyutu değiştiğinde neler olduğunu yönetir. Ancak esnek ve denk kenar boşlukları (struts) var mı? veya boy ve genişlik değiştiğinde (springs) ne oluyor?

Örneğin esnek bir genişliğe sahip bir view, superview e göre kendini değiştirir ve sağ tarafa olan kenar boşluğu da her zaman superview’e bağlı kalır.

Eski autosizing sistemi basit durumlar için uygun olsada karışık arayüzlerde hemen sorun çıkarabiliyor. Örnekle biraz daha detaya bakalım.

Xcode’u açıp ve yeni bir Single View Application oluşturalım. Adınıda “SturtsProblem” olarak belirledikten sonra desteklenen cihazıda iPhone olarak seçelim:

ViewController.xib’a tıklayıp ve bu örnek için Auto Layout’u kapatalım. Bunu için File inspector’dan yapabiliriz:

“Use Autolayout” seçimi kaldıır. Şuanda eski model geçerli halde.

Ancak uygulamamızın aşağıdaki gibi görünmesini istiyoruz.

Gördüğünüz gibi autosizing masks istediğimizin ancak bir bölümünü bize gösterebiliyor. Autosizing’ın Sol-Üst köşe değerini aşağıdaki gibi değiştirelim:

Bu view’in Sol-Üst kenara yapışık kalde kalmasını ve( Ancak sağ ve alt bölüm için bir değişiklik belirlemiyor ) superview’e göre yatay ve dikey düzlemde boyutunun ayarlanmasını sağlayacaktır.

Benzer şekilde Sağ-Üst bölüm içinde aynı değişikliği yapalım.

Alt bölümüde ayarlayalım:

Uygulamamızı birkez daha çalıştıralım. Şimdi aşağıdaki görünümü almamız gerekiyor.

İstediğimize yakın. View’ler arasındaki padding değeri doğru değil. Bir diğer bakş açısıyla view’lerin sahip olması gereken genişlik değeri %100 doğru değil. Buradaki sorun autosizing özelliğinin view’a, Superview boyutunu değiştirdiğinde benzer güncellemeyi kendisi için yapmasını söylemesi ancak bunun ne kadar olacağını belirtmemesinden kaynaklanıyor.

Autosizing değerleri ile istediğimiz gibi oynama şansımız olsada kod yazmadan asla görüntülenmesini istediğimiz şekli alamayacağız.

Çözüm?

UIKit, view controller’a ekranın döndürülmesi başlamadan, devam ederken ve tamamlanmasından sonra çeşitli mesajlar gönderir. Bu mesajlara müdahale ederek arayüzdeki değişiklikleri yapabiliriz. Tipik olarak willAnimateRotationToInterfaceOrientation:duration: metodunu değiştirerek istediğimiz view’ı değiştirebiliriz. Ama bunu yapmadan önce outlet özelliklerini view’a refere etmemiz gerekiyor.

Xcode toolbarı üzerinde görünümü ayarlayan bölümden Assistant Editor’ü seçelim ve Ctrl basıp her bir view’i viewController.h’ın için bırakalım. Örneğin bir label’ın property’sini oluşturduğumuz gibi.

Üç view’in property’leri aşağıdaki gibi viewController’imizde görünmeli:

@property (weak, nonatomic) IBOutlet UIView *topLeftView;
@property (weak, nonatomic) IBOutlet UIView *topRightView;
@property (weak, nonatomic) IBOutlet UIView *bottomView;

Aşağıdaki kodu ViewController.m’e ekleyelim:

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation
                                         duration:(NSTimeInterval)duration
{
    [super willAnimateRotationToInterfaceOrientation:toInterfaceOrientation duration:duration];
    if (toInterfaceOrientation == UIInterfaceOrientationLandscapeLeft
    ||  toInterfaceOrientation == UIInterfaceOrientationLandscapeRight)
    {
        CGRect rect = self.topLeftView.frame;
        rect.size.width = 210;
        rect.size.height = 120;
        self.topLeftView.frame = rect;
        rect = self.topRightView.frame;
        rect.origin.x = 250;
        rect.size.width = 210;
        rect.size.height = 120;
        self.topRightView.frame = rect;
        rect = self.bottomView.frame;
        rect.origin.y = 160;
        rect.size.width = 440;
        rect.size.height = 120;
        self.bottomView.frame = rect;
    }
    else
    {
        CGRect rect = self.topLeftView.frame;
        rect.size.width = 130;
        rect.size.height = 200;
        self.topLeftView.frame = rect;
        rect = self.topRightView.frame;
        rect.origin.x = 170;
        rect.size.width = 130;
        rect.size.height = 200;
        self.topRightView.frame = rect;
        rect = self.bottomView.frame;
        rect.origin.y = 240;
        rect.size.width = 280;
        rect.size.height = 200;
        self.bottomView.frame = rect;
    }
}

Bu metod view, yeni boyuta göre uyarlanırken tetiklenir. Böylece ekran döndürüldüğünde view istediğimiz gibi görünür. Uygulamayı çalıştırmadan önce 3 view’in autosizing değerlerini eski haline getirmemiz gerekiyor. Bunu yapmadığımızda uygulamamız hata verir.

Bunu tamamladıktan sonra uygulamamızı çalıştıralım ve ekranı döndürelim. Şimdi 3 view’da istediğimz gibi görünmeli.

Gördüğünüz gibi doğru bir görünüm için çok fazla kod yazmak zorunda kaldık. Daha karmaşık ve fazla sayıda view’iniz veya boyutları dinamik olarak değişen bir yapınız olduğunu düşünün. Ciddi bir çaba sarfetmek gerekiyor.

Auto Layout Kurtarmaya geldi!

Şimdi aynı örneği auto layout ile nasıl yapabileceğimizi göreceğiz. Öncelikle az önce değiştirdiğimiz willAnimateRotationToInterfaceOrientation:duration: metodunu ViewController.m’den kaldıralım. Çünkü bu koda gerek kalmayacak.

ViewController.xib’i File inspector’dan seçip açın. “Use AutoLayout” ı tıklayın.

Uygulamayı çalıştırıp ekranı döndürelim. Görünüm şuan eski ve hatalı şekilde karşımızda.

Auto Layout’u devreye almanın zamanı geldi. üstteki 2 view’i cmd tuşuna basılı tutup seçili hale getirin. Xcode editor menu’den Pin – Pin/Widths Equally’i seçin:

Aynı işlemi bu sefer Horizonal Spacing için tekrarlayın. ( İlk işlemden sonra her nekadar 2 view seçili dursada, ekranın başka bir bölümüne tıklayıp tekrar 2 view’i seçili hale getirmemiz gerekiyor. )

Document Outline’da yeni constraintlerin eklendiğini göreceksiniz. Bunlar AutoLayout’u seçtiğimiz zaman eklendi. Bir sonraki makalemizde bunlara değineceğiz. Şimdi “Horizontal Space (170)” silelim:

Şimdi uygulamayı çalıştırıp ekranı döndürelim. Görünüm daha iyi bir hale geldi. Ancak henüz istediğimize ulaşmadık:

Cmd tuşuna basılıp tutup 3 view’i de seçeli hale getirin. Editor menusundan Pin/Heights Equally i seçin. Aynı işlemi Vertical Spacing için tekrarlayın. Document Line’dan vertical space constrat’ini silelim.
Eğer 3 view’i de aynı anda seçtiyseniz aşağıdaki gibi görüntü olmalı:

Mavi T-bar view’in constraintlerini uygun ve basit şekilde gösteriyor.

Uygulamayı çalıştırın. Sonunda istediğimiz görüntüyü elde ettik. Hem de tek satır kod yazmadan!

Peki buraya yaptığımız tam olarak neydi? Satırlarca kod yazmaktansa Auto Layout bizim yerimize konumlandırmayı ve view’lar arasındaki ilişkiyi gayet doğru şekilde tamamlıyor.

Auto Layout’un doğru çalışabilmesi için view’lar arasındaki ilişkiyi – Constraint’ler olarak bilinir – belirtmemiz gerekiyor. Örneğimizde aşağıdaki adımları izledik:

• Sol-Üst ve Sağ-Üst view’lar her zaman aynı genişliğe sahip olmalı. (İlk yapıtğımız pinleme ile yani “Width equally” bunu sağladı)
• Sol-Üst ve Sağ-Üst view’ları arasında 20 birimlik boşluk (horizonal padding) var. (horizonal spacing pin’i ile yaptık)
• Tüm view’lar aynı boya sahip. (heights equally pin’i ile yaptık).
• Üst ve alt view’lar arasında yatayda 20 birimlik boşluk verdik. (vertical spacing).

Tüm bu işlemler Aut oLayout için gerekli bilgileri sağlamış oldu.

Tüm constraintleri Document Outline’dan görebiliriz. Herhangi bir tanesini tıkladığınızda view üzerinde konumu belirgin hale getirilir.Örnekteki gibi gölge efekti alır.

Constraintler NSLayoutConstraint sınıfından türemiş gerçek objelerdir ve kendi attribute’leri vardır. Örneğin üstteki 2 view arasındaki uzaklık (padding) değerini veren constraint’i seçin (Horizonal Space(20) yazan). Attributes inspector’a geçiş yapın. Bu bölümden uzaklık ayarını değiştirebilirsiniz.

Değeri 100 yapalım ve uygulamamızı çalıştıralım. Bu sefer aralığın daha geniş olduğunu görebiliyoruz.

Auto Layout, uygulamanız için view’lerinizi oluşturma sırasında eski yönteme oranla oldukça basit bir yöntem. Yazımıza biraz daha constraintleri inceleyerek devam edelim.

Auto Layout Nasıl Çalışıyor?

Örneğimizdende gördüğümüz üzere Auto Layout için en temel araç constraint. Bir constraint geometrik olarak 2 view arasındaki ilişkiyi gösterir. Örneğin bir constraint şunu söyler:

“A Label’ının sağ köşesi B Button’unun sol köşesiyle bağlantılıdır ve aralarında 20 birim boşluk vardır.”

Auto Layout bütün bu değerleri alıp matematiksel olarak yapacağı işlemlerle view için ideal pozisyonları belirler. Kendimizin frame’leri belirlemesine gerek kalmaz. Auto Layout bunu bizim için yapar ve tamamen constraint’lerin değerlerine göre çalışır.

Auto Layout’tan önce tüm işlemleri kodlayarak yapmamız gerekiyordu. Interface Builder’i ve initWithFrame metodunu kullanıyorduk.

örnekte yaptığımız uygulamamızdaki frame’lere bakalım:

Ayrıca autosizin için yönleride belirlemiştik:

Auto Layout’tan sonra bu artık ihtiyacımız olan bu:

View’in boyutu ve pozisyonu artık önemli değil. Önemli olan tek şey constraint. Tabiki yeni bir button veya label eklediğimizde boyutu veya pozisyonunu belirliyoruz. ancak bunu yapmamızdaki temel neden artık tasarımsal gerekler.

Anladığınız gibi tasarım yapmak

Constraint kullanmanın en büyük avantajı artık koordinatlarla uğraşmak zorunda olmamamız. Tek yapmamız gereken Auto Layout’a view’lerin nasıl görüneceğini söylemek. Geri kalanı bizim için Auto Layout hallediyor. Buna “Designing by Intent” deniyor. Bu yöntemde yapmamız gereken Nasıl bir görünüme ihtiyacımız var? bunu belirtmek. Bu görünümün oluşumununu belirlememiz gerekmiyor!

Eskiden “Button’nun Sol-üst köşesinin koordinatları (20,230)” derken, şimdi “Bu button yatayda superview’i merkezinde ve superview’in soluna belirlenmiş bir uzaklıkta yer alır”. Bu tanım ile Auto Layout otomatik olarak button’nun nerede bulunacağını hesaplar. Superview’in ebatları önemli değildir.

Auto Layout’a birkaç örnek daha verelim:

“Bu text alanı her zaman aynı boyutta olmalı.”
“Bu iki button herzaman beraber hareket etmeli.”
“Bu 4 label her zaman sağa dayalı halde olmalıdır.”

Bu yöntem tasarımlarımızın daha tanımlanabilir olmasını dağlar. Basitçe constraint’i belirler ve gerisini sistem kendisi otomatik olarak halleder.

İlk bölümde arayüzün doğru çalışabilmesi için üzerinde biraz çalışılması gerektiğini gördük. Auto Layout ile tüm bu işlerden kurtulmuş oldu. Eğer constraint’leri doğru belirlediyseniz, arayüz tam olarak hem normal hem de ekranı döndürdüğünüzde doğru şekilde çalışacaktır.Auto Layout’un bir diğer artısı globalleştirme kendini gösterir. Örneğin almanca bilmiyorsanız kelimeleri orantılamak ve görünümü ayarlamak son derece sorun vericidir. Neyseki Auto Layout bunu bizim için gerçekleştirir ve istediğimiz dil desteğini sunmamızda işimizi çok kolaylaştırır.

Auto Layout ile biraz daha oynap detaylarına bakalım.

Constraint Oluşturma

Bu örneği kapatım ve yeni bir single view application açalım. Adını da “Constraints” olarak belirleyelim. iPhone projesi olarak ve storyboard kullanmadan yapacağız. Ancak Automatic Reference Counting’i kullanacağız.

Xcode 4.5’ta açılan tüm yeni projeler standart olarak Auto Layout açık olarak gelir. Bu nedenle etkinleştirme için ayrıca birşey yapmayacağız.

ViewController.xib’e tıklayıp açın. Yeni bir Round Rect button ekleyin. Sürükleyip bırakırken noktaların mavi olduğunu hatırlayalım. Bunlara”guides” denir.

Ekranda sürükle bırak yaparken guides’dan yararlanıyoruz.

Daha önce Interface Builder’i kullandıysanız zaten guide’lar ile aşına olmuşsınızdur. Hizamala yaparken oldukça yararlıdır.

Auto Layout’u etkinleştirdiğimiz an guide’lar da başka görev almaya başlarlar. Hizalamanın yanı sıra posizyonu belirleyecek constraint’in de oluşmasını sağlarlar.

Button’umuzu Sol-Üst’e hizalanacak şekilde ekranda konumlandıralım:

Gördüğünüz gibi 2 tane mavi çizgi button’a bağlanmış durumda. Bu T-Bar’lar aslında bu button için tanımlanmış olan constraint’leri gösterirler. Document Outline’dan bunlara bakabiliriz:

Şuan 2 tane constraint bulunuyor. Bir tanesi ekranın üstü ile olan mesafeyi öbürü de sol bölüme olan uzaklığı gösterir. Buna göre tanımlamamız şöyle oldu:

“Bu button herzaman Sol-Üst’te yer alır.”

Şimdi button’u sağ köşeye kaydıralım. Guide’ların değiştiğini göreceksiniz:

Yatay alandaki mesafeyi belirleyen constraint değişti. Çünkü button artık sola değil sağa yaslanmış durumda.
Bir button veya view yerleştirdiğinizde default olarak HIG tarafından boyutu belirlenen bir constraint eklenir. HIG aslında Apple’ın geliştirdiği iOS Human Interface Guidelines’tır. Köşelere olan uzaklık standart olarak 20 birimdir.

Guide olmadan bir button bile yerleştirseniz her zaman onu tanımlayan bir yatay veya dikey constraint elde edersiniz.

Bir button sürükleyerek bunu deneyelim:

Yatay bir constraint var ancak öncekinden daha uzun. Artık Document Outline’da HIG tarafından belirlenen yerine bizim atadığımız bir constraint yer alır:

Ne çeşit bir constraint elde edeceğimizi buttonu nereye yerleştirdiğimiz belirliyor.

Bunların dışında birde merkez constraint’i var. Button’u ekranın altına sürükleyin:

Farketmemiz gereken şey yatay constraint yerine merkezi X düzleminde hizalayan bir constraint belirlenir. Dikey constraint hala duruyor.

Uygulamayı çalıştırıp ekranı döndürelim. Ekranı döndürdüğümüz halde bile button ekranın altında hizalı olarak durur:

İfade ile açıklarsak: Bu button herzaman altta ve ortada yer alır.

Farkettiyseniz buttonun koordinatlarıyla ilgili bir kod veya değer girmedik. Sadece ekrandaki yerini belirledik. Auto Layout ile artık bunlarla uğraşmamız gerekmiyor.

Autosizing ile Auto Layout arasındaki farklar:

Auto Layout’u kapadığınızda ekrandaki değerler view’ın pozisyonu ve büyüklüğüne göre değişecektir. Tekrar etkin hale getirdiğimizde bu değerler ile yine de oynama şansımız var. Ancak beklediğimiz sonucu alamayabiliriz. Interface Builder otomatik olarak gerekli hesaplamayı yapar. Ancak bizim eklediğimiz değerleri de dikkate alır.

Örneğin genişliği (width) 100 olarak değiştirelim. Görünüm aşağıdaki gibi değişmeli:

X merkez constraint’i kayboldu. Genişliği 100 olarak girdiğimiz için hesaplar artık 100 değerine göre yapılacak.

Document Outline’de yeni constraint i görebiliriz.

Diğer constraint’lerden farklı olarak width değeri sadece buttonun kendisine atanır. Superview’e herhangi bir atama yapılmaz.

Nutton’a ait bir genişlik değeri neden daha önce yoktu? Bu olmadan Auto Layout button’nun genişliğini nerden biliyordu? Bu sorular aklımıza gelebilecek ilk sorular. Aslında cevap basit: button’un kendisi, genişliği hakkında bilgi sahibidir. Bu bilgiye göre içerdiği text’i ve buna bağlı padding değerini hesaplar. Eğer button için arkaplan resmi eklerseniz onu da dikkate alır.

Buna intrinsic content size (default olarak gelen genişlik olarak düşünebiliriz. Sonuçta button’un kendisi de bir template) denir. Tüm kontrollerde bu özellik yok. Ancak UILabel gibi kontrollerde var. Eğer bir view kendi uygun boyutunu hesaplayabiliyorsa bizim ayrıca değer belirtmemiz gerekmiyor. Buna sonra değineceğiz.
Button’u ideal boyutuna getirmek için önce seçili hale getirelim ve sağdaki menuden “Size to Fit Content” i işaretleyelim. Bu buttondaki gereksiz olan genişliği değiştirecektir.

Her ikisi de sorumlu

Guide’lar sadece view ve superview arasında görünmez. View’ler arasında da görülebilir. Bunu denemek için yeni bir buttonu sürükleyip ekrana bırakalım. Yeni buttonu yeterinde uzağa bıraktıysanız kendisine yeni constraintler edinir. Ancak diğer buttona yaklaştırdığınızda her 2 buttonun constraintleri etkileşmeye başlar.

Yeni buttonu eskisine yakın bir yere bırakalım:

Yeni buttonun konumunu gösteren guide’ların tamamı constraint olarak atanmaz.

Buttonu bıraktıktan sonra constraint’ler aşağıdaki gibi görünürüz:

Yeni button’nun ekranın altı ile arasında bir dikey boşluk yer alıyor. Ayrıca diğer buttonla arasında da yatayda bağlantısı var. 2 button arasındaki fark ufak olmasına (8 birim) hatta ekranda görünmemesine rağmen orada olduğundan emin olabilirsiniz.

Document Outline’ndan “Horizontal Space constraint” i seçelim:

Bir constraint’i seçtiğinizde ekrandaki gibi belirgin hale gelir. Bu ufak constraint 2 button arasında yer alır. Özetlersek:

“2. button, 1. button’nun pozisyonu ne olursa olsun her zaman onun sağında yer alır.”

Soldaki button’u seçin ve text’ini aşağıdaki gibi değiştirelim. bunu yaptığınızda button otomaik olarak boyutunu ayarlar. 2. button olduğu yerde durmaya devam eder:

Kontrollerimizin boyutunu değiştirdiğimizde Interface Builder constraint’leri buna uygun şekilde tekrar hesaplar. Çoğunlukla doğru işlemi yapmasına rağmen bazen hatalı hesaplama yapabilir. Bizim istediğimiz text’i değiştirsekte button merkezde kalmaya devam etmesi.

buttonu tekrar merkeze hizalayın. Bakalım constraint’ler nasıl değişmiş:

Bu tam olarak istediğimiz şey değil. 2 Button artık birbiriyle bağlantılı değil. Ayrıca 2. button neredeyse ekranın sağına dayandı. 2 buttonun arasındaki mesafe ve bağlantıyı gösteren constraint artık yok. Ancak buttonları tekrar bağlama şansımız var.

Çnce Cmd-Z ile undo yapalım. Artık soldaki button merkeze hizalı değil. Şimdi buttonu seçelim ve Editor menusundan Align\Horizontal Center in Container i seçelim.Böylece 2 button beraber hareket ediyor olacak. Böylesi daha iyi!

Buttonlarla biraz daha oynayarak nasıl çalıştığını daha iyi anlayalım. Ufak buttonu seçelim ve diğerinin üzerine sürükleyelim. köşeleri hizalamak için uğraşmayın:

Çünkü dikey olarak 2 buttonu zaten hizaladık. HIG tarafından atanan standart değer (8 birim) ile constraint oluştu.

Tabiki bu standart değerler ile sınırlı değiliz. İstedğimiz gibi bu değerler ile oynayabiliriz.

Button’lar arasındaki dikey constraint’i seçelim. Bunun için aradaki T-Bar’ı seçin. Seçilmesi zor olduğundan en kolay yol Document Outline’dan constraint i seçmek:

Default olarak “Standart” seçili gelir. Buttonlar arasındaki boşluk 8 birim ve ekran kenarına olan değer ise 20 birim. Değeri 40 olarak değiştirelim. Ancak buttonlar hala birbirine bağlı:

Uygulamayı çalıştırıp ekranı döndürelim:

Buttonlar aralarındaki mesafeyi yatayda koruyorlar. Ancak yatayda böyle bir şey yok!

Ekrana bakarsanız üstteki button ile ekranın sol bölümü arasında bir aralık olduğunu göreceksiniz:

alttaki button düzgün şekilde yer alırken üstteki sadece aralarındaki mesafeyi koruyor.

Görünüm hatalı şekilde yer alıyor. Tanımı ise:

“Alttaki button her zaman yatayda merkezde yer alır, ancak üst button kendini ekranın soluna ve alt buttonun sol köşesine doğru hizalar.”

İlk tanım için constraint’imiz var. Ancak 2. durum için yok.
Interface Builder hizalama için guide’ları gösteriyor. Hemen üst buttonu alt buttonun solu ile hizalayalım:

Bu işlem 2 button arasındaki uzaklığı belirten constraint’i kaldırdı:

İstediğimiz şey tam olarak bu değil. bu durumda ne hissedeceğimiz ise aşağıdaki gibi:

Daha önce belirttiğim gibi view’ları sürüklemek eğer constraint’ler kaybolmasın istiyorsak uygun bir şey değil. Bu doğru yapabilmek için başka bir yöntem var.

Önce undo ile işlemi geri alalım.Sonra Cmd tuşuna basılı tutup 2 buttonuda seçelim. Editor menusundan Align\Left Edges i seçin. Bu Interface Builder’a her iki buttonunda sola hizalı olduğunu söyleyecek:

Gördüğünüz gibi eski constraint’ler yerinde duruyor. Ancak son işlem ile hizalamamıza yardımcı olacak bir constraint eklendi.

İpucu: Hizalama için her zaman bu yöntem gerekmiyor. Aşağıdaki buttona bastığınızda açılan menuden istediğinizi seçebilirsiniz:

Açılan menu:

Bu işlem için kısayol gibi.

Uygulamayı çalıştıralım. Bakalım doğru bir görünüm elde edecekmiyiz.

Bundan sonrası?

Şuan Auto Layout hakkındaki 1. yazımızı tamamladık. Alıştıkça uygulama yazmayı ne kadar kolaylaştırdığını sizlerde göreceksiniz.