Latar Belakang & Cerpen Tentang Topik Ini

Sebagai pemula dalam mempelajari pengembangan aplikasi iOS, kita pasti sudah tahu atau belajar tentang membuat tampilan menggunakan storyboard dan tata letak otomatis. Pertama kali saya belajar tentang cara membuat aplikasi iOS, saya belajar menggunakan storyboard termasuk mengatur layout untuk komponen-komponen yang ada di view. Namun, Anda harus tahu bahwa menggunakan storyboard sangat tidak efektif untuk diimplementasikan dalam proyek yang cukup besar, apalagi jika pekerjaan tersebut dilakukan dengan tim. Dengan menggunakan storyboard, akan sulit bagi kita untuk menggabungkan & menyelesaikan konflik saat berkolaborasi, sulit untuk navigasi, sulit untuk refactor code, dan masih banyak lagi.

Saya akhirnya memutuskan untuk belajar bagaimana membuat UI secara terprogram menggunakan UIKit saat mengerjakan proyek saya dan ternyata jauh lebih mudah dalam hal kolaborasi. Untuk itu, saya mendalami beberapa hal, antara lain mempelajari cara mendeklarasikan komponen, menyesuaikan komponen, menempatkannya dalam tampilan sesuai kebutuhan, dan juga menyesuaikan tata letak berbagai komponen dalam tampilan.

Dari apa yang saya telusuri, ada berbagai pelajaran yang saya pelajari tetapi ada 2 hal yang kelihatannya sederhana tapi sangat bermanfaat, diantaranya terkait dengan pengaturan yang sebenarnya diperlukan untuk membuat label yang dapat memiliki baris baru secara otomatis sesuai dengan kontennya. dan juga tentang banyak cara mengatur tata letak untuk komponen dalam tampilan, tetapi sejauh ini bagi saya cara termudah yang pernah saya coba terapkan adalah menggunakan perpustakaan SnapKit.

Untuk itu, disini saya ingin berbagi cara untuk melakukannya dengan menjelaskannya melalui implementasi yang telah saya lakukan pada proyek tim saya.

Tentang Proyek Tim Saya

Jadi ini adalah aplikasi yang saya dan tim saya buat, namanya “Healo”.
Healo adalah aplikasi iOS chatting anonim yang menghubungkan orang-orang yang sedang berusaha sembuh dari luka orang tua (disebut sebagai Seeker) dengan seseorang yang dapat mendengarkan cerita yang mereka bagikan dan mengingatkan mereka untuk tetap termotivasi melakukan self-reparenting (disebut sebagai Listener ).

Ketika kita ingin menjadi pendengar, ada halaman penilaian yang berisi penjelasan tentang beberapa topik dan juga pertanyaan yang harus dijawab oleh mereka dan mereka harus lulus tes untuk memastikan bahwa mereka dapat diterima untuk menggunakan aplikasi tersebut.

Sebenarnya kita hanya perlu membuat satu halaman penilaian saja, namun isi label pada halaman tersebut akan menampilkan teks yang beragam dan juga berbeda-beda sesuai dengan nomor soalnya. Deskripsi dan pertanyaan ini sendiri diambil dari database dan tidak langsung ditulis dan disimpan di proyek Xcode. Oleh karena itu, tentunya isi teks dan jumlah kata juga akan berbeda-beda.

Sebenarnya kita bisa membuat penampilan kita rapi tanpa harus melakukan setting tertentu pada tampilan. Kita bisa melakukannya dengan mengaturnya pada data teks yang kita ambil dari database dengan menambahkan \n untuk teks tertentu yang harus ada di baris baru, misalnya seperti “Halo, \nSaya suka pemrograman.” Tapi itu sangat merepotkan jika banyak teks yang membutuhkan penambahan ini dan kami selalu harus melakukannya secara manual.

Untuk itu saya akan menunjukkan bagaimana cara saya melakukan setting pada label deskripsi sehingga berapapun panjang konten yang kita ambil dari database, akan ada baris baru yang ditambahkan secara otomatis jika panjang teks sudah melebihi batasan. tampilan label yang telah disetel menggunakan SnapKit.

Implementasi pada Proyek

Untuk menggunakan library SnapKit, sebelum kita mulai mengerjakan proyek, pastikan kita telah menginstal CocoaPods. ( Ini panduan untuk menginstal CocoaPods. )

Setelah kita menginstal CocoaPod, inilah langkah demi langkah cara menginstal SnapKit:
1. Kita harus pergi ke folder proyek Xcode kita dan membuka terminal dari sana (Klik Kanan + Pilih "Terminal Baru di Folder").
2. Setelah terminal terbuka, kita ketik "pod init" & itu akan membuat file pod baru di folder kita.

3. Buka Podfile itu dan ketik ini:

Kemudian, simpan Podfile

4. Kembali ke terminal dan ketik "pod install". Jika tidak ada error, berarti SnapKit sudah berhasil diinstal.

5. Buka file Xcworkspace dan mulailah membuat kode di sana.

Anda juga dapat membaca penjelasan lebih lanjut tentang pemasangan SnapKit di sini .

Saya menganggap Anda sudah tahu tentang penyiapan yang diperlukan untuk membuat seluruh antarmuka pengguna secara terprogram. Jika demikian, mari kita mulai segera.

Pertama , untuk memastikan Anda dapat menggunakan SnapKit untuk tata letak nanti, Anda perlu mengimpor pustaka tersebut ke file yang ingin Anda gunakan.

Kedua , kita hanya perlu mendeklarasikan label kita di dalam kelas pengontrol tampilan kita (Untuk proyek ini, saya masih membuat tampilan di dalam pengontrol tampilan dan bukan dalam file terpisah yang khusus didedikasikan untuk setiap tampilan). Selama deklarasi label, hal terpenting yang tidak boleh Anda lupakan adalah menambahkan label.numberOfLines = 0 dan label.lineBreakMode = .byWordWrapping.

Sebenarnya untuk apa benda-benda ini?

Berdasarkan apa yang saya baca di Dokumentasi Apple, inilah yang dapat saya bagikan:

Jumlah baris sebenarnya digunakan untuk mengontrol jumlah baris maksimum yang akan digunakan untuk memasukkan teks label ke dalam persegi panjang pembatasnya. Jika kita atur nilainya menjadi 0, itu berarti tidak ada batasan baris dan kita dapat menggunakannya sebanyak baris yang diperlukan tergantung pada konten teks.

Mode jeda baris sebenarnya digunakan untuk membungkus dan memotong teks label. Ada beberapa mode yang tersedia, namun untuk mode yang paling sering digunakan adalah NSLineBreakMode.byWordWrapping. Jika kita menggunakan mode ini, maka kata selanjutnya akan dipotong/dipindahkan ke baris baru jika kata tersebut tidak muat dalam 1 baris.

Anda dapat membaca lebih lanjut tentang ini di Dokumentasi Pengembang Apple: Penjelasan Jumlah Baris & Penjelasan Mode Istirahat Baris .

Selanjutnya, kita dapat membuat 3 fungsi seperti setupData, setupView, dan setupLayout. Inilah yang ada di dalam setiap fungsi (saya tidak menunjukkan secara menyeluruh, hanya menunjukkan apa yang relevan):

1. fungsi setupData:

2. fungsi setupView:

Di dalam fungsi ini, kita dapat mengatur warna latar belakang tampilan dan kita juga harus menambahkan label deskripsi ke tampilan untuk memastikannya muncul di tampilan kita.

3. fungsi setupLayout:

Di dalam fungsi ini, kita bisa mengatur tata letak label agar label berada pada posisi yang tepat (sesuai keinginan kita).

Berikut cara mengatur tata letak menggunakan SnapKit:
1. Ketikkan nama komponen yang ingin kita atur tata letaknya. Dalam hal ini saya ingin memberikan tata letak pada label topicDesc saya. Ini kodenya:

}

2. Tuliskan semua kendala yang kita inginkan. Dalam hal ini saya ingin membuat posisi label topicDesc berada di bawah judul topik (dengan jarak 21 piksel dari judul topik paling bawah). Ini kodenya:

topicDesc.snp.makeConstraints { buat di
make.top.equalTo(topicTitle.snp.bottom).offset(21)
}

Saya juga ingin membuat posisi label topicDesc berjarak 27 piksel dari kiri dan kanan superview . Ini kodenya:

topicDesc.snp.makeConstraints { buat di
make.top.equalTo(topicTitle.snp.bottom).offset(21)
make.left.equalToSuperview().offset(27)
make.right.equalToSuperview().offset(-27)
}

Beberapa tips tambahan dalam menggunakan SnapKit:

Nilai offset harus > 0 untuk top dan left / leading padding.
Nilai offset harus < 0 untuk padding bawah dan kanan/belakang.

Kita dapat menggunakan inset untuk kode dalam satu baris jika jaraknya sama, misalnya:
topicDesc.snp.makeConstraints { make in
make.left.right.equalToSuperview().inset(27)
}

Terakhir , kita harus memanggil semua fungsi yang sudah kita buat pada view did load dan menjalankan project untuk mengecek apakah semuanya sudah berjalan dengan baik dan sesuai keinginan.

Luar biasa! Kami akhirnya belajar tentang cara memasukkan baris baru secara otomatis untuk label sesuai dengan konten teks & mengatur tata letak menggunakan SnapKit di Aplikasi iOS. Menggunakan SnapKit sendiri sangat membantu saya untuk tata letak saat mengerjakan proyek saya dan Anda dapat mencobanya juga. Jika Anda penasaran dan ingin mengetahui lebih banyak tentang SnapKit, Anda dapat membaca selengkapnya di sini ).

Juga, jika Anda penasaran dan ingin tahu lebih banyak tentang proyek tim saya (Healo), Anda dapat menguji aplikasi kami di Testflight ( Klik di sini untuk menguji aplikasi kami ).

Saya harap artikel ini dapat bermanfaat bagi Anda dan jika demikian, tolong bantu untuk membagikan postingan ini kepada teman atau kolega Anda yang mungkin juga bermanfaat bagi mereka, dan juga jangan ragu untuk memberikan umpan balik atau komentar. Terima kasih.

© 2022 Elvina Jacia. Seluruh hak cipta.