Pengantar Bahasa Format Visual

Indonesian (Bahasa Indonesia) translation by Yanti Baddolo (you can also view the original English article)

Auto Layout telah tersedia selama beberapa lama, namun dengan iPhone 6 dan 6 Plus ini menjadi salah satu kebutuhan untuk sebuah proyek. Meskipun tidak selalu mudah digunakan, Xcode telah terus meningkatkan Interface Builder untuk mempermudah pengintegrasian Auto Layout lebih mudah. Dalam tutorial ini, Anda akan belajar bagaimana menggunakan Bahasa Format Visual menggunakan Swift untuk membuat constraint Auto Layout dalam kode.

Pendahuluan

Tutorial ini mengasumsikan bahwa Anda memiliki pengetahuan tentang Auto Layout. Jika Anda baru mengenal Auto Layout, maka saya ingin Anda untuk membaca pendahuluan oleh Joyce Echessa terlebih dahulu.

Visual Format Language adalah bahasa deklaratif yang digunakan untuk mendefinisikan constraint Auto Layout untuk view. Sintaksnya ekspresif dan mudah dimengerti saat Anda membaca kodenya. Constraint yang diharapkan harus langsung jelas hanya dari membaca pernyataan bahasa format visual dan mereka mengalir seperti kalimat.

Constraint Auto Layout dengan prioritas yang berbeda, tata letak vertikal, jarak, dan dimensi dapat dibuat dengan menggunakan sintaks Bahasa Format Visual. Ini didefinisikan di dalam variabel string dan kemudian diteruskan ke metode kelas constraintsWithVisualFormat:options:metrics:views: dan
constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant: dari kelas NSLayoutConstraint .

Bahasa Format Visual dapat sangat berguna saat Interface Builder bukan merupakan pilihan untuk menambahkan contraint Auto Layout, misalnya, ketika bagian dari antarmuka pengguna aplikasi Anda perlu dibuat secara pemrograman.

Membuat Projek Baru

Mari buat proyek baru di Xcode untuk melihat bagaimana Bahasa Format Visual digunakan dan bagaimana proyek Anda dapat memanfaatkannya.

Langkah 1: Template Projek

Buka Xcode dan pilih New> Project ... dari menu File. Pilih Single View Application dari daftar template iOS Application dan klik Next.

Langkah 2: Konfigurasi Projek

Selanjutnya, beri nama proyek Anda dan masukkan nama dan organisasi identifier Anda. Pilih Universal dari daftar Devices, klik Next, dan pilih lokasi untuk menyimpan proyek. Pilih Swift sebagai bahasa pemrograman.

3. Membuat Constraint untuk Single View

Langkah 1: Definiskan Variabel

Untuk memulai, buat tiga variabel tipe UIView. Buka ViewController.swift dan tambahkan kode berikut di atas metode viewDidLoad:

1	var vwBlue:UIView!
2	var vwRed:UIView!
3	var vwGreen:UIView!

Langkah 2: Inisialisasi Views

Buat fungsi yang disebut initViews di bagian bawah kontroller view void sebagai tipe return-nya. Fungsi ini akan menginisialisasi views dan menambahkannya ke hierarki views. Pastikan untuk memanggil fungsi ini di viewDidLoad setelah memanggil metode superclass viewDidLoad.

func initViews() -> Void
{
    //Initialize
    vwRed = UIView()
    vwBlue = UIView()
    vwGreen = UIView()
    
    //Prep auto layout
    vwRed.setTranslatesAutoresizingMaskIntoConstraints(false)
    vwBlue.setTranslatesAutoresizingMaskIntoConstraints(false)
    vwGreen.setTranslatesAutoresizingMaskIntoConstraints(false)
    
    //Coloring
    vwRed.backgroundColor = UIColor.redColor()
    vwBlue.backgroundColor = UIColor.blueColor()
    vwGreen.backgroundColor = UIColor.greenColor()
    
    //Add them to the view
    self.view.addSubview(vwRed)
    self.view.addSubview(vwBlue)
    self.view.addSubview(vwGreen)
}

Bila menggunakan Auto Layout pada tampilan yang dibuat dalam kode, ada beberapa peringatan yang harus diperhatikan. Yang pertama terkait dengan nilai properti translatesAutoresizingMaskIntoConstraints. Properti ini true secara default, yang berarti constraint Auto Layout akan dibuat berdasarkan autoresizing mask view. Kita ingin view untuk mengikuti constraint Auto Layout yang akan kita tambahkan sehingga properti ini harus diubah menjadi false.

Hal kedua yang perlu diingat adalah life cycle dari view. Sebelum constraint Auto Layout dapat ditambahkan ke view, maka harus ditambahkan ke superview. Jika tidak, maka runtime exception akan terjadi. Ingatlah bahwa Auto Layout mendefinisikan di mana view diposisikan berdasarkan hubungan. Jika view tidak memiliki superview, sistem operasi tidak memiliki referensi untuk menghubungkan constraint Auto Layout.

Langkah 3: Membuat Contraints untuk Single View

Mari kita mulai dengan contoh sederhana dari Bahasa Format Visual. Untuk view merah, vwRed, kita akan menambahkan constraint Auto Layout yang membuatnya sama ukurannya dengan superview-nya. Ini sangat membantu dalam skenario di mana Anda menambahkan gambar latar belakang.

Sebelum Bahasa Format Visual dapat digunakan, semua view yang kita butuhkan harus dirujuk di dalam kamus. Ini adalah bagaimana view akan diidentifikasi oleh Bahasa Format Visual.

Buat fungsi dengan nama createConstraints dengan tipe return void di bagian bawah kelas view controller. Jangan khawatir dengan sintaksnya. Kita akan meninjau kembali implementasi fungsi createConstraints sebentar lagi.

func createConstraints() -> Void
{
    //Views to add constraints to
    let views = Dictionary(dictionaryLiteral: ("red",vwRed),("blue",vwBlue),("green",vwGreen))
    
    //Horizontal constraints
    let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|[red]|", options: nil, metrics: nil, views: views)
    self.view.addConstraints(horizontalConstraints)
    
    //Vertical constraints
    let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|[red]|", options: nil, metrics: nil, views: views)
    self.view.addConstraints(verticalConstraints)
}

Langkah 4: Build dan Jalankan

Panggil fungsi ini di akhir fungsi initViews yang telah kita buat tadi. Build dan jalankan proyek dengan menekan Command + R atau dengan mengklik tombol play di bagian kiri atas. Simulator iOS akan berjalan menampilkan view merah yang mengambil seluruh layar seperti yang diinginkan.

Menganalisa Sintaks Bahasa Formal Visual

Saat menggunakan Bahasa Format Visual, constraint Auto Layout didefinisikan secara horisontal atau vertikal. Anda juga dapat menentukan tinggi atau lebar tampilan saat Anda mendeklarasikan constraint vertikal dan horizontal. Mari kita lihat lebih dekat string pertama yang kita gunakan untuk menciptakan constraint horizontal.

"H:|[red]|"

Pertama, kita mengidentifikasi bahwa ini akan menjadi constraint horizontal dengan memulai string dengan huruf H. Horisontal adalah defaultnya, tapi praktik yang baik untuk menuliskannya agar lebih jelas. Arah constraint diikuti oleh titik dua.

| atau simbol pipa melambangkan view superview. Untuk menambahkan spasi di antara dua elemen, simbol - atau tanda hubung digunakan dan nilai integer dapat ditempatkan di antara keduanya untuk membuat jarak tetap atau variabel. View direferensikan oleh kunci yang ada dalam kamus dilewatkan ke constraintWithVisualFormat. Setiap view dibungkus dalam tanda kurung siku.

Perhatikan bagaimana seluruh string secara visual sesuai dengan gambar dari simulator. Ini ditulis seperti sebuah kalimat yang akan dibaca seperti "Secara horisontal, tampilan berwarna merah harus mengisi seluruh lebar superview-nya tanpa padding."

Membuat Constraints untuk Multiple Views

Sekarang setelah Anda memiliki pemahaman dasar tentang sintaks, kita akan mengedit fungsi createConstraints untuk menambahkan constraint Auto Layout ke dalam dua views.

Langkah 1: Edit Constraint Horisontal

Pada fungsi createConstraints, edit variabel horizontalConstraints seperti gambar di bawah ini.

//Horizontal constraints

let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|-10-[red(>=100,<=200)]-0-[blue(==red)]-10-|", options: nil, metrics: nil, views: views)

self.view.addConstraints(horizontalConstraints)

Potongan kode ini benar-benar menunjukkan fleksibilitas Bahasa Format Visual. Pernyataan di atas menciptakan sejumlah constraint Auto Layout untuk kita. Di samping nama view, ukuran horisontal didefinisikan dalam tanda kurung. Untuk view merah, ukurannya harus lebih besar dari atau sama dengan 100 point, tapi kurang dari atau sama dengan 200 point.

View biru menentukan bahwa ia harus memiliki ukuran horisontal yang sama seperti tampilan merah dengan menggunakan == red dalam tanda kurung. Ini adalah cara mudah untuk menentukan beberapa view harus memiliki ukuran yang sama. Build dan jalankan aplikasi di iOS Simulator. Hasilnya akan terlihat seperti gambar di bawah ini.

Langkah 2: Menambahkan Prioritas

Dengan aplikasi sedang berjalan di iOS Simulator, tekan Command + Left Arrow untuk mengubah orientasi Simulator iOS menjadi landscape. Sementara aplikasi masih berjalan dengan baik, sebuah peringatan akan muncul di konsol Xcode. Peringatan tersebut memberi tahu kita bahwa beberapa constraint Auto Layout tidak dapat ditampilkan. Meskipun hal ini tidak akan merusak aplikasi Anda, namun hal itu dapat menyebabkan hasil yang tidak diharapkan di dalam antarmuka pengguna aplikasi Anda

Hal ini terjadi karena dua tampilan yang kita buat tidak dapat memiliki lebar 200 point dan tidak memiliki spasi di antara keduanya saat perangkat atau Simulator iOS ada dalam posisi lansekap. Auto Layout memecahkan skenario jenis ini dengan menggunakan prioritas. Bahasa Format Visual memungkinkan Anda menentukan prioritas menggunakan simbol @. Edit variabel horizontalConstraints seperti ini:

1	//Horizontal constraints
2	let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:\|-10-[red(>=100,<=200@20)]-0-[blue(==red)]-10-\|", options: nil, metrics: nil, views: views)

Karena tampian merah dan biru sekarang memiliki prioritas rendah pada lebar constraint mereka, ditunjukkan oleh @20, sistem Auto Layout akan memecah constraint ini dan memberi mereka nilai yang benar saat runtime. Jalankan aplikasi lagi dan ubah orientasi ke landscape. Tampilan sekarang mengisi ruang ekstra dan Xcode tidak menghasilkan peringatan apapun.

Langkah 3: Menambahkan Constraint ke dalam Bottom View

Selanjutnya, kita akan menciptakan constraint untuk view hijau. Update implementasi fungsi createConstraints seperti yang ditunjukkan di bawah ini.

func createConstraints() -> Void
{
    //Views to add constraints to
    let views = Dictionary(dictionaryLiteral: ("red",vwRed),("blue",vwBlue),("green",vwGreen))
    
    //Horizontal constraints
    let horizontalConstraintsRedBlue = NSLayoutConstraint.constraintsWithVisualFormat("H:|-10-[red(>=100,<=200@20)]-0-[blue(==red)]-10-|", options: nil, metrics: nil, views: views)
    self.view.addConstraints(horizontalConstraintsRedBlue)
    let horizontalConstraintsGreen = NSLayoutConstraint.constraintsWithVisualFormat("H:|[green]|", options: nil, metrics: nil, views: views)
    self.view.addConstraints(horizontalConstraintsGreen)
    
    //Vertical constraints
    let verticalConstraintsRed = NSLayoutConstraint.constraintsWithVisualFormat("V:|[red]-10-[green(40)]|", options: nil, metrics: nil, views: views)
    self.view.addConstraints(verticalConstraintsRed)
    let verticalConstraintsBlue = NSLayoutConstraint.constraintsWithVisualFormat("V:|[blue]-10-[green(40)]|", options: nil, metrics: nil, views: views)
    self.view.addConstraints(verticalConstraintsBlue)
}

Karena constraint horizontalConstraintsGreen tidak ditentukan lebar atau jarak tertentu pada superview-nya, maka ini akan mengisi keseluruhan lebarnya. Constraint vertikal memastikan bahwa itu akan memiliki tinggi 40 point dengan jarak 10 point antara view merah dan biru.

Jika Anda menjalankan aplikasi sekali lagi, view hijau mencakup keseluruhan lebar layar dan view merah dan biru tetap di atasnya seperti sebelumnya. Ketika Simulator iOS diputar ke lanskap, view menjaga posisi mereka dan menyesuaikan ukurannya dengan tepat.

Langkah 4: Menambahkan Metrik

Untuk membuat semuanya lebih mudah dibaca, kita akan menggunakan kamus metrik dalam deklarasi constraint. Buat kamus seperti gambar di bawah ini, segera setelah mendeklarasikan kamus view.

1	let metrics = Dictionary(dictionaryLiteral: ("spacing", 10),("lowWidth",100),("highWidth",200),("priority",20),("redBlueSpacing",0),("greenHeight",40))

Sekarang, alih-alih menggunakan nilai hard-coded, kita dapat menggunakan nilai kamus metrik, yang membuat deklarasi constraint jauh lebih mudah dibaca. Edit fungsi createConstraints terakhir kali menggunakan kamus metrik baru.

func createConstraints() -> Void
{
    //Views to add constraints to
    let views = Dictionary(dictionaryLiteral: ("red",vwRed),("blue",vwBlue),("green",vwGreen))
    //Metrics for Visual Format string
    let metrics = Dictionary(dictionaryLiteral: ("spacing", 10),("lowWidth",100),("highWidth",200),("priority",20),("redBlueSpacing",0),("greenHeight",40))
    
    //Horizontal constraints
    let horizontalConstraintsRedBlue = NSLayoutConstraint.constraintsWithVisualFormat("H:|-spacing-[red(>=lowWidth,<=highWidth@priority)]-redBlueSpacing-[blue(==red)]-spacing-|", options: nil, metrics: metrics, views: views)
    self.view.addConstraints(horizontalConstraintsRedBlue)
    let horizontalConstraintsGreen = NSLayoutConstraint.constraintsWithVisualFormat("H:|[green]|", options: nil, metrics: nil, views: views)
    self.view.addConstraints(horizontalConstraintsGreen)
    
    //Vertical constraints
    let verticalConstraintsRed = NSLayoutConstraint.constraintsWithVisualFormat("V:|[red]-spacing-[green(greenHeight)]|", options: nil, metrics: metrics, views: views)
    self.view.addConstraints(verticalConstraintsRed)
    let verticalConstraintsBlue = NSLayoutConstraint.constraintsWithVisualFormat("V:|[blue]-spacing-[green(greenHeight)]|", options: nil, metrics: metrics, views: views)
    self.view.addConstraints(verticalConstraintsBlue)
}

Batasan dari Bahasa Format Visual

Anda mungkin bertanya-tanya mengapa tinggi view hijau didefinisikan dua kali. Ini karena Bahasa Format Visual bekerja pada baris dan kolom. Saat menggunakan Bahasa Format Visual, pertimbangkan untuk menambahkan constraint dari kiri ke kanan pada satu "baris" dari view untuk constraint horizontal. Untuk constraint vertikal, Anda perlu memikirkannya sebagai kolom.

Sebagian besar constraint Auto Layout yang akan Anda gunakan dapat dinyatakan dengan Bahasa Format Visual. Namun, ada beberapa yang tidak bisa. Misalnya, aspek rasio constraint tetap tidak dapat dibuat dengan menggunakan Bahasa Format Visual. Ini tidak bisa dilakukan dengan sintaks Bahasa Format Visual, karena string berikut tidak dapat diuraikan:

H:|imageView.width = 2 * imageView.height|

Anda masih bisa menggunakan Auto Layout dalam kode Anda untuk mencapai jenis constraint ini dengan menggunakan metode tradisional constraintWithItem.

Kesimpulan

Bahasa Format Visual bisa sangat membantu bila Anda ingin membuat constraint Auto Layout dalam kode. Alih-alih membuat constraint satu per satu, Bahasa Format Visual memungkinkan Anda membuat sejumlah constraint dengan satu baris kode.

Sebelum Auto Layout tersedia untuk pengembang, perhatikan bagaimana mengubah ukuran tampilan untuk berbagai kategori perangkat membutuhkan banyak pekerjaan. Dengan Auto Layout dan Bahasa Format Visual, sekarang lebih intuitif, membuat antarmuka pengguna lebih mudah di pelihara di seluruh perangkat.