Buat Tampilan Gulir Dengan Swift: 9 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:56

Beberapa bulan yang lalu, saya tidak tahu keberadaan Swift dan Xcode. Hari ini, saya dapat mengembangkan sebagian kecil dari aplikasi yang ingin saya buat. Saya dapat membuat sesuatu yang keren, yang ingin saya bagikan kepada Anda.

Dalam tutorial ini saya akan membawa Anda melalui proses membangun adegan tampilan gulir, di mana pengguna akan diarahkan ketika mereka ingin mendaftarkan akun baru. Sepanjang jalan, saya akan memastikan untuk memberi Anda beberapa penjelasan teoretis tentang hal-hal yang kami lakukan, sehingga Anda benar-benar dapat memahami apa yang sedang kami lakukan.

Sebelum kita melakukannya, mari kita bicara tentang apa itu Swift dan Xcode:

1. Swift adalah bahasa pemrograman yang kuat dan intuitif untuk macOS, iOS, watchOS, dan tvOS. Menulis kode Swift bersifat interaktif dan menyenangkan, sintaksnya ringkas namun ekspresif, dan Swift menyertakan fitur modern yang disukai pengembang. Kode Swift aman dari segi desain, namun juga menghasilkan perangkat lunak yang berjalan secepat kilat. Ini dirancang untuk bekerja dengan kerangka kerja Cocoa and Cocoa Touch Apple dan sebagian besar kode Objective-C yang ada yang ditulis untuk produk Apple. Itu dibangun dengan kerangka kompiler LLVM open source dan telah disertakan dalam Xcode sejak versi 6, dirilis pada 2014. Pada platform Apple, ia menggunakan pustaka runtime Objective-C yang memungkinkan kode C, Objective-C, C++ dan Swift untuk dijalankan dalam satu program.

2. Xcode adalah lingkungan pengembangan terintegrasi (IDE) untuk macOS yang berisi seperangkat alat pengembangan perangkat lunak yang dikembangkan oleh Apple untuk mengembangkan perangkat lunak untuk macOS, iOS, watchOS, dan tvOS.

Langkah 1: Unduh Xcode

Xcode 10 mencakup semua yang Anda butuhkan untuk membuat aplikasi luar biasa untuk semua platform Apple. Sekarang Xcode dan Instrumen tampak hebat dalam Mode Gelap baru di macOS Mojave. Editor kode sumber memungkinkan Anda mengubah atau memfaktorkan ulang kode dengan lebih mudah, melihat perubahan kontrol sumber di sepanjang baris terkait, dan dengan cepat mendapatkan detail tentang perbedaan kode upstream. Anda dapat membuat instrumen Anda sendiri dengan visualisasi khusus dan analisis data. Swift mengkompilasi perangkat lunak lebih cepat, membantu Anda memberikan aplikasi yang lebih cepat, dan menghasilkan binari yang lebih kecil. Test suite selesai berkali-kali lebih cepat, bekerja dengan tim lebih sederhana dan lebih aman, dan banyak lagi.

Xcode 10 menyertakan Swift 4.2, yang mengkompilasi perangkat lunak Anda lebih cepat, membantu Anda memberikan aplikasi yang lebih cepat, dan menghasilkan binari yang lebih kecil. Dibandingkan dengan Swift 4.0, kompiler Swift terbaru dapat membuat aplikasi besar lebih dari dua kali lebih cepat.* Dikombinasikan dengan sistem pembangunan baru Xcode, alur kerja pengeditan, pembuatan, dan pengujian harian Anda jauh lebih cepat. Dioptimalkan untuk perangkat keras Mac multi-inti terbaru, Xcode dan Swift membuat platform pengembangan secepat kilat.

Langkah 2: Mari Mulai

Jadi yang akan kita lakukan adalah membuka Xcode dan membuat proyek baru. Setelah kami mengklik proyek baru, aplikasi kami akan menjadi aplikasi tampilan tunggal. Bagi mereka yang tidak tahu, aplikasi tampilan tunggal berarti Anda harus memulai semuanya dari awal dan akan ada satu tampilan tunggal yang dapat kami program.

Beri nama produk Anda TutorialApp. Jika Anda adalah pengembang berpengalaman yang menerbitkan aplikasi di App Store, Anda mungkin akan memiliki tim, tetapi jika Anda baru dan belum memiliki aplikasi yang diterbitkan, Anda dapat melewati bidang ini. Dalam nama organisasi, Anda dapat menulis nama perusahaan jika Anda memilikinya, dalam kasus saya, saya hanya akan menyimpan MacBook Pro. Kemudian, Pengidentifikasi Organisasi dianggap sebagai sesuatu seperti pengidentifikasi unik proyek Anda, oleh karena itu, Anda dapat menulis apa pun yang Anda inginkan. Bahasa pasti akan cepat.

Jadi, tekan next dan mari kita simpan proyek di desktop agar mudah diakses.

Proyek baru ini terdiri dari tiga file, AppDelegate.swift, ViewController.swift, dan bintang dari tutorial ini: Main.storyboard. Under Deployment Info > Device Orientation di General project settings, set Devices to iPhone. Karena ini adalah aplikasi potret saja, hapus centang pada opsi Lansekap Kiri dan Kanan Lansekap. Buka Main.storyboard di navigator proyek untuk melihatnya di Editor Interface Builder:

Kami tidak akan membuat perubahan apa pun dalam konfigurasi dan kami akan langsung menuju storyboard utama. Karena kami membuat aplikasi tampilan tunggal, kami membuat tampilan tunggal, kosong, sederhana. Ini adalah sesuatu yang perlu kita kerjakan.

Langkah 3: Bekerja di UI

Terminologi storyboard resmi untuk pengontrol tampilan adalah "adegan", tetapi Anda dapat menggunakan istilah tersebut secara bergantian. Adegan mewakili pengontrol tampilan di storyboard.

Di sini Anda melihat pengontrol tampilan tunggal yang berisi tampilan kosong. Panah yang menunjuk ke pengontrol tampilan dari kiri menunjukkan pengontrol tampilan awal yang akan ditampilkan untuk storyboard ini. Merancang tata letak di editor storyboard dilakukan dengan menyeret kontrol dari Object Library (lihat pojok kanan atas) ke pengontrol tampilan Anda.

Untuk merasakan cara kerja editor storyboard, seret beberapa kontrol dari Object Library ke pengontrol tampilan kosong seperti yang terlihat di video.

Saat Anda menyeret kontrol, kontrol tersebut akan muncul di Document Outline di sebelah kiri.

Anda dapat membuat Antarmuka Pengguna yang Anda inginkan. Dalam kasus saya, saya menggunakan yang Anda lihat di gambar.

Langkah 4: Kembangkan Pengontrol Tampilan Kedua dan Inisiasi Segues (transisi)

Jadi, di aplikasi saya, ketika pengguna menekan tombol "Daftar Akun Baru", saya ingin dia diarahkan ke halaman daftar akun. Jadi untuk tujuan itu, setiap halaman adalah pemandangan baru, tampilan baru. Untuk alasan itu, kita harus membuat pengontrol tampilan kedua, yang dapat Anda temukan di perpustakaan objek.

Ketik pengontrol tampilan dan letakkan di sebelah pengontrol tampilan awal Anda. Adegan ini akan bertanggung jawab untuk pengontrol tampilan register. Pengalihan ke halaman tersebut dapat dilakukan dengan dua cara:

1. kita dapat melakukannya secara manual ketika kita membuat koneksi tindakan dari tombol ke kontrol tampilan lainnya
2. kita bisa melakukannya secara terprogram

Yang saya pilih adalah membuatnya secara manual. Ini sederhana seperti itu:

1. Buat satu klik kiri pada tombol Anda (dalam kasus saya, Daftarkan Akun Baru)
2. Tahan perintah dan klik kiri mouse untuk menyeretnya ke adegan kontrol register.
3. Lepaskan di sana dan pilih "Present Modally"

Langkah 5: Buat Kelas Pemrograman untuk Proses Pendaftaran

Jadi, sekarang kami ingin membuat kelas pengkodean khusus untuk adegan baru.

Untuk melakukannya, Anda perlu melakukan langkah-langkah berikut:

• klik kanan pada folder proyek Anda
• klik pada file baru bernama cocoa touch class
• di kelas tulis: RegisterVC
• SANGAT PENTING! Pastikan bahwa subkelas harus bertipe UIViewController
• bahasa harus cepat.
• klik berikutnya dan simpan kelas kakao Anda di dalam root utama proyek Anda.
• Klik pada papan cerita utama dan buka pengontrol tampilan baru
• klik pada tombol kuning yang ditempatkan di atasnya
• di sebelah kanan pergi ke inspektur kelas dan buat referensi ke Register VC (Costum class, class = RegisterVC

Langkah 6: Buat Gesek Horizontal Halaman

Di iOS, tampilan gulir digunakan untuk melihat konten yang tidak muat sepenuhnya di layar. Tampilan gulir memiliki dua tujuan utama:

Untuk memungkinkan pengguna menyeret area konten yang ingin mereka tampilkan, untuk memungkinkan pengguna memperbesar atau memperkecil konten yang ditampilkan menggunakan gerakan mencubit. Kontrol umum yang digunakan di aplikasi iOS – UITableView – adalah subkelas UIScrollView dan menyediakan cara yang bagus untuk melihat konten yang lebih besar dari layar.

Apa gunanya sub-halaman dalam gesekan horizontal?

Nah, jika saya membuat 6 halaman berbeda, itu berarti saya harus membuat kelas khusus untuk masing-masing halaman dan tidak nyaman untuk meneruskan informasi dari satu kelas ke kelas lainnya. Ketika misalnya saya mengetik email saya dan kemudian klik berikutnya, jika saya memiliki pengontrol tampilan yang berbeda, saya akan meninggalkan halaman pertama dari Pengontrol Tampilan dan kemudian yang kedua akan disajikan. Dalam hal ini, informasi pengontrol tampilan pertama, harus diteruskan ke pengontrol tampilan berikutnya dan kemudian lagi ke pengontrol tampilan ketiga dll. Ketika saya memiliki semua pengontrol tampilan yang saya butuhkan, saya harus mengumpulkan semua data dari semua halaman dan mengirimkannya ke server. Jadi, ini akan sangat kompleks.

Jadi, beralih ke pembuatan pengontrol tampilan ini, dalam kasus saya, saya memiliki 5 halaman yang ingin saya buat:

1. Surel
2. Nama lengkap
3. Kata sandi
4. Tanggal lahir
5. Jenis kelamin

Artinya, view controller yang akan kita buat harus 5 kali lebih besar dari yang kita buat sebelumnya.

Pilih pengontrol tampilan Anda dan pergi ke sudut kanan atas dan klik pada ikon penggaris dan edit Ukuran Simulasi. Anda akan memilih Freeform untuk menyesuaikan lebar dan tinggi. Lebar default layar yang cocok untuk iphone 8 adalah 375, jadi jika saya kalikan 375*5 = 1875. Dan ini dia, Anda memiliki pengontrol tampilan yang diperluas.

Demikian pula, Anda mengikuti proses yang sama untuk semua ponsel dan ukuran layar yang berbeda.

Untuk membuat tampilan gulir berfungsi, kita memerlukan objek tampilan gulir. Scroll View menyediakan mekanisme untuk menampilkan konten yang lebih besar dari ukuran jendela aplikasi. Klik pada objek ini, seret dan letakkan di sudut kiri atas pengontrol tampilan dan pastikan bahwa X dan Y berada pada posisi nol dan peregangan sesuai dengan pengontrol tampilan Anda.

Tampilan Gulir hanya memungkinkan kita untuk menggulir, tidak ada yang lain. Kemudian kita perlu menambahkan tampilan konten, yang akan menyimpan tampilan lain. Anda dapat menemukan UIView - ini mewakili wilayah persegi panjang tempat ia menggambar dan menerima peristiwa - di perpustakaan objek. Cukup, klik dan seret ke tampilan gulir dan sekali lagi, regangkan sesuai keinginan.

Pilih tampilan gulir dari panel kiri dan kami akan memanggil perataan 0, 0, 0, 0 dan menambahkan batasan. Lakukan hal yang sama untuk tampilan konten.

Langkah 7: Kembangkan Antarmuka Pengguna untuk Sub-halaman dari Gesek Horizontal

Pada langkah ini, Anda harus membuat UI sub-halaman Anda. Apa yang saya pilih untuk dilakukan, adalah membuat prototipe di Sketch dan kemudian membangunnya di Xcode.

Langkah 8: Implementasikan Desain di Xcode

Langkah selanjutnya adalah mengimplementasikan desain ini di Xcode. Untuk melakukannya, Anda harus membuat koneksi outlet untuk semua sub-halaman dan membuat satu lagi untuk "mother view", artinya, satu koneksi outlet untuk seluruh view controller.

Elemen dalam storyboard ditautkan ke kode sumber. Penting untuk memahami hubungan yang dimiliki storyboard dengan kode yang Anda tulis.

Dalam storyboard, sebuah adegan mewakili satu layar konten dan biasanya satu pengontrol tampilan. Pengontrol tampilan mengimplementasikan perilaku aplikasi Anda dan mengelola satu tampilan konten dengan hierarki subview-nya. Mereka mengoordinasikan aliran informasi antara model data aplikasi, yang merangkum data aplikasi, dan tampilan yang menampilkan data tersebut, mengelola siklus hidup tampilan kontennya, menangani perubahan orientasi saat perangkat diputar, menentukan navigasi dalam aplikasi Anda, dan menerapkan perilaku untuk menanggapi masukan pengguna. Semua objek pengontrol tampilan di iOS bertipe UIViewController atau salah satu subkelasnya.

Anda menentukan perilaku pengontrol tampilan Anda dalam kode dengan membuat dan mengimplementasikan subkelas pengontrol tampilan kustom. Anda kemudian dapat membuat koneksi antara kelas dan adegan tersebut di storyboard Anda untuk mendapatkan perilaku yang Anda tetapkan dalam kode dan antarmuka pengguna yang Anda tetapkan di storyboard Anda.

Xcode telah membuat satu kelas yang Anda lihat sebelumnya, ViewController.swift, dan menghubungkannya ke adegan yang sedang Anda kerjakan di storyboard Anda. Saat Anda menambahkan lebih banyak adegan, Anda akan membuat koneksi ini sendiri di inspektur Identitas. Inspektur Identitas memungkinkan Anda mengedit properti objek di storyboard Anda yang terkait dengan identitas objek tersebut, seperti kelas apa objek tersebut berada.

Create Outlets for UI ElementsOutlets menyediakan cara untuk mereferensikan objek antarmuka-objek yang Anda tambahkan ke storyboard-dari file kode sumber. Untuk membuat outlet, Control-seret dari objek tertentu di storyboard Anda ke file pengontrol tampilan. Operasi ini membuat properti untuk objek di file pengontrol tampilan Anda, yang memungkinkan Anda mengakses dan memanipulasi objek itu dari kode saat runtime

1. Buka storyboard Anda, Main.storyboard.
2. Klik tombol Asisten di toolbar Xcode di dekat sudut kanan atas Xcode untuk membuka asisten editor. Jika Anda ingin lebih banyak ruang untuk bekerja, ciutkan navigator proyek dan area utilitas dengan mengklik tombol Navigator dan Utilitas di toolbar Xcode.
3. Anda juga dapat menciutkan tampilan kerangka.

Di bilah pemilih editor, yang muncul di bagian atas asisten editor, ubah asisten editor dari Pratinjau ke Otomatis > ViewController.swift.

Klik sub-halaman dan seret ke kelas yang sesuai dalam kode.

Langkah 9: Integrasikan Gerakan Kustom

GESER GESER

Gerakan menggesek terjadi saat pengguna menggerakkan satu atau lebih jari di layar dalam arah horizontal atau vertikal tertentu. Gunakan kelas UISwipeGestureRecognizer untuk mendeteksi gerakan menggesek.

Implementasi gerakan menggesek

Langkah 1: Tambahkan Gesture Gesture(s) dalam metode viewDidLoad()

menimpa func viewDidLoad() { super.viewDidLoad()

biarkan swipeLeft = UISwipeGestureRecognizer(target: self, action: #selector(handleGesture)) swipeLeft.direction =.left self.view.addGestureRecognizer(swipeLeft)

biarkan swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(handleGesture)) swipeRight.direction =.right self.view.addGestureRecognizer(swipeRight)

biarkan swipeUp = UISwipeGestureRecognizer(target: self, action: #selector(handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer(swipeUp)

biarkan swipeDown = UISwipeGestureRecognizer(target: self, action: #selector(handleGesture)) swipeDown.direction =.down self.view.addGestureRecognizer(swipeDown) }

Langkah 2: Periksa deteksi gerakan dalam metode handleGesture() func handleGesture(gesture: UISwipeGestureRecognizer) -> Void { if gesture.direction == UISwipeGestureRecognizerDirection.right { print("Swipe Right") } else if gesture.direction == UISwipeGestureRecognizerDirection. kiri { print("Gesek ke Kiri") } else if gesture.direction == UISwipeGestureRecognizerDirection.up { print("Swipe Up") } else if gesture.direction == UISwipeGestureRecognizerDirection.down { print("Swipe Down") } }

Di aplikasi saya, saya ingin menggunakan swipeRight, tetapi jatuh bebas untuk menggunakan yang lebih sesuai untuk aplikasi Anda.

Sekarang, mari kita terapkan ini ke dalam kode kita.

Kami pergi ke registerVC.swift yang kami buat sebelumnya dan menulis kode seperti yang Anda lihat di gambar.

PENJELASAN KODE

biarkan current_x mendapatkan posisi ScrollView saat ini (posisi horizontal)biarkan screen_width mendapatkan lebar layar, kurangi ukuran ini biarkan new_x dari posisi scrollview saat ini, saya kembali dengan lebar layar jika current_x > 0 sampai kecuali lebih dari 0 - 0 adalah halaman pertama.

Dan kita selesai!

Kerja bagus!