Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS SDK

Cara Memperbarui Aplikasi Anda untuk iOS 11: Drag and Drop

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Final product image
What You'll Be Creating

iOS 11 telah meningkatkan iOS, khususnya untuk iPad, menjadi platform multi-tasking yang benar, berkat Drag and Drop. Ini menjanjikan untuk mengaburkan batas antara aplikasi, memungkinkan konten untuk dibagikan dengan mudah. Dengan memanfaatkan multi-touching, iOS 11 memungkinkan konten untuk dipindahkan secara alami dan intuitif, membawa perangkat seluler Apple lebih dekat ke paritas dengan kekayaan yang dinikmati oleh pengguna desktop dan laptopnya.

Drag and Drop on the iPad between Photos and Mail source Apple

Fitur yang lama ditunggu-tunggu ini memungkinkan Anda untuk menyeret item ke lokasi lain dalam aplikasi yang sama, atau ke aplikasi lain. Ini berfungsi baik melalui pengaturan layar terpisah atau melalui dok, menggunakan satu gerakan terus menerus. Selain itu, pengguna tidak terbatas hanya memilih satu item saja, tetapi dapat menyeret banyak item secara bersamaan. Banyak aplikasi, termasuk aplikasi sistem seperti Foto dan File, memanfaatkan multi-selecting dan menyeret banyak file.

iOS 11s Files App

Tujuan dari Tutorial ini

Tutorial ini akan memperkenalkan Anda untuk drag dan drop, dan kemudian menyelam lebih dalam ke dalam arsitektur dan strategi menggunakan Drag and Drop SDK baru dalam aplikasi yang didukung tampilan tabel. Saya ingin membantu pengembang seperti Anda sendiri untuk menyesuaikan aplikasi Anda dengan perilaku UI yang muncul yang akan menjadi standar di aplikasi iOS mendatang.

Dalam tutorial ini, kami akan membahas hal-hal berikut:

  • Memahami Drag and Drop
  • Menerapkan Drag dan Drop dalam Table View
  • Drag and Drop Praktik Terbaik

Pada paruh kedua dari tutorial ini, kita akan membahas langkah-langkah praktis untuk mengaktifkan aplikasi tampilan tabel sederhana untuk memanfaatkan drag dan drop, dimulai dengan salah satu templat tampilan-tayang Apple yang tersedia saat Anda membuat proyek baru di Xcode 9. Lanjutkan dan klon repositori GitHub tutorial jika Anda ingin mengikutinya.

Asumsi Pengetahuan

Tutorial ini mengasumsikan Anda memiliki pengalaman sebagai pengembang iOS dan telah menggunakan pustaka UIKit di Swift atau Objective-C, termasuk UITableView, dan bahwa Anda memiliki beberapa keakraban dengan delegasi dan protokol.

Memahami Drag and Drop

Menggunakan nomenklatur Apple, item visual diseret dari lokasi sumber dan dibuang di lokasi tujuan. Ini disebut aktivitas seret, dengan aktivitas yang terjadi dalam satu aplikasi (iPad dan iPhone yang didukung), atau di dua aplikasi (hanya tersedia di iPad).

Saat sesi seret sedang berlangsung, aplikasi sumber dan tujuan masih aktif dan berjalan seperti biasa, mendukung interaksi pengguna. Bahkan, tidak seperti macOS, iOS mendukung banyak aktivitas seret bersamaan dengan menggunakan banyak jari.

Namun, mari fokus pada satu item drag, dan bagaimana ia menggunakan janji sebagai kontrak untuk representasi datanya.

Drag Item sebagai Promises

Setiap item drag dapat dianggap sebagai janji, representasi data yang ada yang akan diseret dan dijatuhkan dari sumber ke tujuan. Item drag menggunakan penyedia item, mengisi registerTypeIdittersiers dengan pengenal jenis uniform, yang merupakan representasi data individual yang akan berkomitmen untuk mengirimkan ke tujuan yang dimaksudkan bersama dengan gambar pratinjau (yang disematkan di bawah titik sentuh pengguna secara visual), seperti yang diilustrasikan di bawah:

A UIDragItem source Apple

Item drag dibangun melalui UIDragInteractionDelegate dari lokasi sumber dan ditangani di lokasi tujuan melalui UIDropInteractionDelegate. Lokasi sumber harus sesuai dengan protokol NSItemProviderWriting, dan lokasi tujuan harus sesuai dengan protokol NSItemProviderReading.

Itu adalah ikhtisar dasar untuk menominasikan tampilan sebagai item drag, melalui janji. Mari kita lihat cara kami menerapkan sumber drag dari tampilan, sebelum menetapkan tujuan turun.

Mengimplementasikan Sumber Drag

Memfokuskan perhatian pada bagian pertama drag & drop—sumber drag—kita perlu menyelesaikan langkah-langkah berikut ketika pengguna memulai aktivitas drag:

  1. Sesuai pandangan ke protokol UIDragInterationDelegate.
  2. Deklarasikan item data yang akan membentuk janji item, melalui dragInteraction(_:itemsForBeginning:).
  3. Masukkan sesi drag dengan item-item drag sebagai persiapan bagi pengguna untuk menyeret item ke drop destination.
Implementing a Drag Source source Apple

Hal pertama yang perlu Anda lakukan adalah menyesuaikan tampilan yang dinominasikan ke protokol UIDragInterationDelegate, dengan membuat instance UIDragInteraction baru dan mengaitkannya dengan properti addInteraction tampilan ViewConfroller Anda serta delegasinya, sebagai berikut:

Setelah menyatakan sumber drag Anda, Anda melanjutkan untuk membuat item drag, pada dasarnya janji representasi data, dengan menerapkan metode delegasi dragInteraction(_:itemsForBeginning:), yang dipanggil sistem untuk mengembalikan array dari satu atau lebih item drag untuk mengisi properti item drag ini. Contoh berikut membuat NSItemProvider dari janji gambar, sebelum mengembalikan berbagai item data:

Metode delegasi di atas merespons permintaan seret yang dipicu saat pengguna mulai menyeret item, dengan Gesture Recognizer (UIGestureRecognizer) mengirim pesan "drag started" kembali ke sistem. Inilah yang pada dasarnya menginisialisasi "drag session".

Selanjutnya, kita lanjutkan dengan menerapkan drop destination, untuk menangani susunan item-item drag yang dimulai pada sesi.

Menerapkan Drop Destination

Demikian juga, untuk menyesuaikan tampilan yang Anda pilih untuk menerima dan menggunakan data sebagai bagian dari tujuan drop, Anda harus menyelesaikan langkah-langkah berikut:

  1. Instantiate DropInteraction.
  2. Deklarasikan jenis item data (jika ada) yang akan Anda terima, menggunakan dropInteraction(_:canHandle:).
  3. Menerapkan proposal penurunan menggunakan metode protokol dropInteraction(_:sessionDidUpdate:), menyatakan apakah Anda akan menyalin, memindahkan, menolak, atau membatalkan sesi.
  4. Akhirnya, mengkonsumsi item data menggunakan metode protokol dropInteraction(_:performDrop:).
Implementing a Drop Destination source Apple

Sama seperti kita mengkonfigurasi pandangan kita untuk mengaktifkan drag, kita akan secara simetris mengkonfigurasi pandangan yang kita nominasikan untuk menerima item yang hilang dari sesi drag, menggunakan UIDropinteractionDelegate dan mengimplementasikan metode delegasi DropInteraction:

Untuk menetapkan apakah suatu View mampu menerima item-item drag atau menolak, kami mengimplementasikan metode protocol dropInteraction(_:canHandle:). Metode berikut memungkinkan pandangan kami memberi tahu sistem apakah dapat menerima item, dengan menyatakan jenis objek yang dapat diterima—dalam hal ini UIImages.

Jika objek tampilan tidak menerima interaksi penurunan apa pun, Anda harus mengembalikan salah dari metode ini.

Selanjutnya, ikat proposal drop untuk menerima data dari sesi drop. Meskipun ini adalah metode opsional, sangat disarankan agar Anda menerapkan metode ini, karena memberikan isyarat visual, apakah drop akan menghasilkan menyalin item, memindahkannya, atau apakah drop akan ditolak sama sekali. Dengan menerapkan metode protokol dropInteraction(_:sessionDidUpdate:), yang mengembalikan UIDropProposal, Anda menunjukkan jenis proposal menggunakan tipe enumerasi operasi tertentu (UIDropOperation). Jenis valid yang dapat Anda kembalikan adalah:

  • batal
  • dilarang
  • salinan
  • memindah

Dan akhirnya, untuk mengkonsumsi konten data item dalam lokasi tujuan Anda, Anda menerapkan metode interaksi dropInteraction(_:performDrop:) di antrian latar belakang (bukan di antrian utama—ini memastikan respons). Ini diilustrasikan di bawah ini:

Kami telah menunjukkan bagaimana Anda akan menerapkan drag and drop dalam tampilan khusus, jadi sekarang mari kita lanjutkan ke bagian praktis dari tutorial ini dan menerapkan drag dan drop pada aplikasi dengan tampilan tabel.

Menerapkan Drag dan Drop dalam Table View

Sejauh ini, kami telah membahas cara menerapkan drag dan drop dalam tampilan khusus, tetapi Apple juga mempermudah untuk menambah tampilan tabel dan tampilan koleksi dengan drag dan drop. Sedangkan bidang teks dan tampilan secara otomatis mendukung drag dan drop out dari kotak, tampilan tabel dan koleksi mengekspos metode spesifik, delegasi, dan properti untuk menyesuaikan perilaku drag and drop mereka. Kami akan melihat ini sebentar lagi.

Mulai dengan membuat proyek baru di Xcode 9, memastikan Anda memilih Aplikasi Master-Detail dari jendela template:

Creating a new Project in Xcode

Sebelum Anda mulai mengerjakan langkah-langkah selanjutnya, lanjutkan dan bangun dan jalankan proyek dan bermain-main dengannya sedikit. Anda akan melihat bahwa itu menghasilkan tanggal stempel waktu baru ketika Anda memilih tombol plus (+). Kami akan meningkatkan aplikasi ini dengan memungkinkan pengguna untuk drag dan order stempel waktu.

Drag dan drop didukung dalam table view (serta koleksi) melalui API khusus yang memungkinkan menyeret dan menjatuhkan dengan baris, dengan menyesuaikan tampilan tabel kami untuk mengadopsi protokol UITableViewDragDelegate dan UITableViewDropDelegate. Buka file MasterViewController.swift dan tambahkan yang berikut ke metode viewDidLoad():

Seperti yang kami lakukan dengan tampilan khusus, kami perlu menangani sesi seret baru saat pengguna menyeret baris yang dipilih atau beberapa baris / pilihan. Kami melakukan ini dengan metode delegasi tableView(_:itemsForBeginning:at:). Dalam metode ini, Anda mengembalikan array terpopulasi yang memulai menyeret baris yang dipilih, atau array kosong untuk mencegah pengguna menyeret konten dari jalur indeks tertentu.

Tambahkan metode berikut ke file MasterViewController.swift Anda:

Beberapa kode yang ditambahkan seharusnya sudah akrab bagi Anda dari bagian sebelumnya, tetapi pada dasarnya apa yang kita lakukan adalah membuat item data dari objek yang dipilih, membungkusnya dalam NSItemProvider, dan mengembalikannya dalam DragItem.

Mengubah perhatian kami di samping mengaktifkan sesi drop, lanjutkan dengan menambahkan dua metode berikut:

Metode pertama memberitahu sistem bahwa ia dapat menangani tipe data String sebagai bagian dari sesi drop-nya. Metode delegasi kedua, tableView(_:dropSessionDidUpdate:withDestinationIndexPath:), melacak lokasi drop potensial, memberitahukan metode dengan setiap perubahan. Ini juga menampilkan umpan balik visual untuk memberi tahu pengguna jika lokasi tertentu dilarang atau dapat diterima, menggunakan isyarat ikon visual kecil.

Terakhir, kami menangani penurunan dan mengonsumsi item data, memanggil tableView(_:performDropWith:), mengambil baris item data yang diseret, memperbarui sumber data tampilan tabel kami, dan menyisipkan baris yang diperlukan ke dalam tabel.

Bacaan lebih lanjut

Untuk informasi lebih lanjut tentang cara mendukung drag dan drop di tampilan tabel Anda, lihat dokumentasi pengembang Apple sendiri tentang Mendukung Drag dan Drop dalam Table View.

Drag dan Drop Praktik Terbaik

Konten yang kami bahas akan membantu Anda menerapkan seret dan letakkan di aplikasi Anda, memungkinkan pengguna untuk secara visual dan interaktif memindahkan konten di dalam aplikasi yang ada, serta di seluruh aplikasi.

Seiring dengan pengetahuan teknis tentang bagaimana menerapkan drag dan drop, bagaimanapun, adalah penting bahwa Anda meluangkan waktu untuk mempertimbangkan bagaimana Anda akan menerapkan drag and drop, mengikuti praktik-praktik terbaik yang dianjurkan oleh Apple dalam Human Interface Guidelines (HIG) mereka, di untuk memberikan pengalaman pengguna iOS 11 terbaik kepada pengguna.

Untuk menyelesaikannya, kami akan menyentuh beberapa aspek terpenting yang perlu dipertimbangkan, dimulai dengan isyarat visual. Menurut HIG, pengalaman mendasar dengan drag dan drop adalah ketika seorang pengguna berinteraksi dengan beberapa konten, isyarat visual menunjukkan kepada pengguna sebuah sesi drag aktif, dilambangkan dengan memiliki elemen konten naik, bersama dengan lencana untuk menunjukkan ketika menjatuhkan adalah atau tidak mungkin.

Photos on iOS 11 source Apple

Kami telah menggunakan praktik terbaik ini dalam contoh kami sebelumnya, ketika kami menyertakan metode tableView(_:dropSessionDidUpdate:withDestinationIndexPath:), menyatakan apakah drop destination adalah langkah, salin, atau terlarang. Anda harus memastikan dengan tampilan dan interaksi khusus yang Anda pertahankan perilaku yang diharapkan dari aplikasi iOS 11 lainnya, terutama aplikasi sistem, dukungan.

Aspek penting lainnya yang perlu dipertimbangkan adalah memutuskan apakah sesi seret Anda akan menghasilkan langkah atau salinan. Sebagai aturan umum, Apple menunjukkan bahwa ketika Anda bekerja dalam aplikasi yang sama, umumnya harus menghasilkan bergerak, sedangkan lebih masuk akal untuk menyalin item data ketika Anda menyeret antara aplikasi yang berbeda. Meskipun ada pengecualian, tentu saja, prinsip yang mendasarinya adalah bahwa itu harus masuk akal bagi pengguna, dan apa yang mereka harapkan akan terjadi.

Anda juga harus berpikir dalam hal sumber dan tujuan, dan apakah masuk akal untuk menyeret sesuatu atau tidak.

Mari kita lihat beberapa utilitas sistem Apple sendiri. Catatan, misalnya, memungkinkan Anda untuk memilih dan menyeret konten teks ke lokasi lain di dalam aplikasi, atau menyeberang ke aplikasi lain di iPad, melalui layar terpisah. Aplikasi Pengingat memungkinkan Anda untuk memindahkan item pengingat dari satu daftar ke daftar yang lain. Pikirkan dalam hal fungsi ketika memutuskan bagaimana pengguna menggunakan konten Anda.

Panduan Apple adalah semua konten yang dapat diedit harus mendukung penerimaan konten yang dijatuhkan, dan konten apa pun yang dapat dipilih harus menerima konten yang dapat diseret, selain untuk mendukung salin dan tempel untuk jenis elemen tersebut. Dengan memanfaatkan tampilan teks sistem standar dan bidang teks, Anda akan mendapatkan dukungan untuk drag dan drop keluar dari hal umum.

Anda juga harus mendukung drag dan drop multi-item, bukan hanya mendukung item tunggal, di mana pengguna dapat menggunakan lebih dari satu jari untuk memilih beberapa item secara bersamaan, menumpuk item yang dipilih ke dalam grup untuk dimasukkan ke tujuan yang dimaksudkan. Contoh dari tindakan ini adalah memilih beberapa gambar di aplikasi Foto, atau beberapa file dalam aplikasi File.

Pedoman akhir adalah untuk memberikan pengguna kemampuan membalik suatu aksi, atau "membatalkan" drop. Pengguna telah terbiasa untuk waktu yang sangat lama untuk konsep membatalkan tindakan di sebagian besar aplikasi populer, dan drag and drop seharusnya tidak terkecuali. Pengguna harus memiliki kepercayaan diri untuk dapat memulai drag dan drop dan dapat membalikkan tindakan itu jika mereka menjatuhkan elemen di tujuan yang salah.

Bacaan lebih lanjut

Ada banyak lagi panduan praktik terbaik drag & drop di luar apa yang telah kami pelajari, termasuk cara mendukung isyarat indikator visual yang menurun, menampilkan tindakan yang gagal dijatuhkan, dan indikator kemajuan untuk sesi seret non-instan, seperti transfer data. Lihat Pedoman Antarmuka Manusia iOS Apple tentang drag and drop, untuk daftar lengkap praktik terbaik.

Kesimpulan

Dalam tutorial ini, Anda telah belajar cara memperkaya aplikasi iOS dengan drag dan drop, milik iOS 11. Di sepanjang jalan, kami menjelajahi cara mengaktifkan tampilan khusus dan tampilan tabel sebagai sumber seret dan menjatuhkan tujuan.

Sebagai bagian dari evolusi iOS menuju antarmuka pengguna yang digerakkan oleh gerakan, tidak diragukan lagi drag dan drop akan dengan cepat menjadi fitur yang diharapkan bagi pengguna di seluruh sistem, dan dengan demikian, semua aplikasi pihak ketiga juga harus sesuai. Dan sama pentingnya dengan menerapkan drag dan drop, Anda harus menerapkannya dengan benar, sehingga menjadi sifat kedua bagi pengguna, yang meliputi kesederhanaan dan fungsionalitas.

Dan saat Anda berada di sini, periksa beberapa pos kami yang lain di pengembangan aplikasi iOS!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.