() translation by (you can also view the original English article)
iOS 11 ha elevado iOS, en especial para el iPad, en una verdadera plataforma multitarea, gracias a Arrastrar y Soltar. Esto promete difuminar los límites entre aplicaciones, lo que permite el contenido ser compartido fácilmente. Aprovechando múltiples tocar iOS 11 permite contenido se muevan de una manera natural e intuitiva, llevar dispositivos móviles de Apple más cercano a paridad con la riqueza de sus usuarios de escritorio y portátiles.
Esta característica esperada le permite arrastrar elementos a otra ubicación en la misma aplicación, o a otra aplicación. Esto funciona ya sea a través de una disposición de pantalla dividida o mediante el muelle, con un gesto continuo. Además, los usuarios no restringidos a sólo seleccionar elementos individuales, pero pueden arrastrar varios elementos al mismo tiempo. Muchas de las aplicaciones, incluyendo aplicaciones de sistema como fotos y archivos, toman ventaja de múltiple selección y arrastrar varios archivos.
Objetivos de Este Tutorial
Este tutorial presentamos para arrastrar y soltar y luego sumergirse más profundo en la arquitectura y la estrategia de usar el nuevo arrastrar y soltar SDK en una aplicación de impulsado ver tabla. Quiero ayudar a los desarrolladores como a ti mismo para conformar sus aplicaciones al comportamiento de la interfaz de usuario emergente que se convertirá en estándar en aplicaciones de iOS futuros.
En este tutorial, abarcaremos lo siguiente:
- Comprensión Arrastrar y Soltar
- Implementar Arrastrar y Soltar en una Vista de Tabla
- Arrastrar y Soltar, las Mejores Prácticas
En la segunda mitad de este tutorial, nos dirigiremos a través de las medidas prácticas de permitir a una aplicación de vista de tabla simple de arrastrar y soltar, a partir de plantillas de vista de la tabla por defecto de Apple eso es disponible cuando se crea un nuevo proyecto en Xcode 9. Seguir adelante y clonar el repositorio de GitHub del tutorial si quiere seguir.
Conocimiento Asumido
Este tutorial asume que usted tiene experiencia como desarrollador de iOS y ha utilizado UIKit bibliotecas en Swift o Objective-C, incluyendo UITableView, y que tienes cierta familiaridad con los delegados y los protocolos.
Comprensión Arrastrar y Soltar
Utilizando nomenclatura de Apple, un elemento visual se arrastra desde la ubicación de origen y coloca en la ubicación de destino. Esto se llama una actividad de arrastre, con la actividad o que ocurre dentro de una sola aplicación (iPad y iPhone compatible), o a través de dos aplicaciones (sólo disponibles en iPad).
Durante una sesión de arrastre, aplicaciones el origen y el destino son todavía activas y funcionar normalmente, apoyando las interacciones del usuario. De hecho, a diferencia de macOS, iOS apoya múltiples actividades de arrastre simultáneo con múltiples dedos.
Pero centrémonos en un elemento de arrastre solo, y cómo utiliza una promesa como un contrato para sus representaciones de datos.
Arrastrar Elementos como Promesas
Cada elemento de arrastre puede considerarse como una promesa, una representación de datos independiente que se arrastra y coloca desde un origen hasta su destino. El elemento de arrastre utiliza un proveedor de artículo, poblando su registeredTypeIdentifiers con identificadores de tipo uniforme, que son representaciones de datos individuales que se comprometerá a entregar a su destino junto con una imagen de vista previa (que es fijado en el tacto del usuario punto visual), como se ilustra a continuación:
El elemento de arrastre se construye a través de la UIDragInteractionDelegate de la ubicación de origen y maneja la ubicación de destino a través de la UIDropInteractionDelegate. La ubicación de origen debe cumplir con el protocolo de NSItemProviderWriting, y la ubicación de destino debe cumplir con el protocolo de NSItemProviderReading.
Es un resumen básico de nominar una vista como un elemento de arrastre, a través de promesas. Vamos a ver cómo implementamos un origen de arrastre desde el vista, antes de establecer el destino de la gota.
Implementación de un Origen de Arrastre
Centrando nuestra atención en la primera parte de la drag & drop, el origen de arrastre — que necesitamos para llevar a cabo los siguientes pasos cuando el usuario inicia una actividad de arrastre:
- Se ajusta la vista para el protocolo de
UIDragInterationDelegate. - Declarar los elementos de datos que formarán la promesa del artículo, a través de
dragInteraction(_:itemsForBeginning:). - Complete la sesión de arrastre con los elementos de arrastre en la preparación del usuario arrastrar los elementos hacia el destino de la gota.
Lo primero que debe hacer es cumplir la vista nominada en el protocolo de UIDragInterationDelegate, creando una nueva instancia de UIDragInteraction y asociándola a la de la vista de addInteraction su ViewController así como su delegado, como a continuación:
1 |
let dragInteraction = UIDragInteraction(delegate: dragInteractionDelegate) |
2 |
view.addInteraction(dragInteraction) |
Después de declarar su origen de arrastre, proceder a la creación de un elemento de arrastre, esencialmente una promesa de representación de los datos, mediante la implementación de la dragInteraction(_:itemsForBeginning:) del método de delegado, que el sistema llama para devolver una matriz de una o más arrastrar elementos a rellenar la propiedad items de la sesión arrastre. En el ejemplo siguiente se crea un NSItemProvider de una promesa de la imagen, antes de devolver una matriz de elementos de datos:
1 |
func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] {
|
2 |
guard let imagePromise = imageView.image else {
|
3 |
return [] //By returning an empty array you disable dragging. |
4 |
} |
5 |
let provider = NSItemProvider(object: imagePromise) |
6 |
let item = UIDragItem(itemProvider: provider) |
7 |
return [item] |
8 |
} |
El método delegado anterior responde a una petición de arrastre cuando el usuario comienza a arrastrar el elemento, con el gesto reconocedor (UIGestureRecognizer) enviando un mensaje "comenzó a arrastrar" hacia el sistema. Esto es lo esencialmente inicializa la "sesión de arrastre".
A continuación, se procede con la implementación del destino de la gota, para manejar el conjunto de elementos de arrastre iniciado en la sesión.
Implementación de un Destino de Caída
Además, para conformar la vista nominada para aceptar y consumir datos como parte del destino de la gota, necesitará completar los siguientes pasos:
- Crear una instancia de un
DropInteraction. - Declarar los tipos de elemento de datos (si existe) se acepta, con
dropInteraction(_:canHandle:). - Implementar una propuesta de gota utilizando el método de protocolo de
dropInteraction(_:sessionDidUpdate:), indicando si usted se copia, mueve, negarse o cancelar la sesión. - Por último, consumir los elementos de datos mediante el método de protocolo de
dropInteraction(_:performDrop:).
Tal como configuramos nuestra opinión para permitir arrastrar, simétricamente configuraremos nuestra opinión nominado para aceptar objetos de una sesión de arrastre, utilizando el UIDropinteractionDelegate y aplicación de su DropInteraction delegan de método:
1 |
let dropInteraction = UIDropInteraction(delegate: dropInteractionDelegate) |
2 |
view.addInteraction(dropInteraction) |
Para designar una visión capaz de aceptar elementos de arrastre o se niega, implementamos el método de protocolo de dropInteraction(_:canHandle:). El siguiente método permite nuestro juicio indica al sistema si pueden aceptar los artículos, indicando el tipo de objetos que pueden recibir, en este caso UIImages.
1 |
func dropInteraction(_ interaction: UIDropInteraction, canHandle session: UIDropSession) -> Bool {
|
2 |
// Explicitly state the acceptable drop item type here |
3 |
return session.canLoadObjects(ofClass: UIImage.self) |
4 |
} |
Si el objeto de vista no acepta ninguna interacción de gota, debe devolver false por este método.
A continuación, enlazar una propuesta de gota para aceptar datos de la sesión de la gota. Aunque este es un método opcional, se recomienda encarecidamente que implementar este método, puesto que proporciona señales visuales en cuanto a si la gota se traducirá en copiar el elemento, moverla, o si la caída se rechazará en conjunto. Aplicando el método de protocolo de dropInteraction(_:sessionDidUpdate:), que devuelve un UIDropProposal, indica el tipo de propuesta con el tipo de la operación específica de la enumeración (UIDropOperation). El podría volver los tipos válidos son:
cancelarprohibidocopiamovimiento
1 |
func dropInteraction(_ interaction: UIDropInteraction, sessionDidUpdate session: UIDropSession) -> UIDropProposal {
|
2 |
// Signal to the system that you will move the item from the source app (you could also state .copy to copy as opposed to move) |
3 |
return UIDropProposal(operation: .move) |
4 |
} |
Y finalmente, consumir el elemento de datos contenido dentro de su lugar de destino, se implementa el método de protocolo de dropInteraction(_:performDrop:) en la cola de fondo (en lugar de en la cola principal, esto asegura la capacidad de respuesta). Esto se ilustra a continuación:
1 |
func dropInteraction(_ interaction: UIDropInteraction, performDrop session: UIDropSession) {
|
2 |
// Consume UIImage drag items |
3 |
session.loadObjects(ofClass: UIImage.self) { items in
|
4 |
let images = items as! [UIImage] |
5 |
self.imageView.image = images.first |
6 |
} |
7 |
} |
Hemos demostrado cómo implementar arrastrar y soltar en una vista personalizada, así que ahora vamos a pasar a la parte práctica de este tutorial e implementar arrastrar y soltar en una aplicación con una vista de tabla.
Implementar Arrastrar y Soltar en una Vista de Tabla
Hasta ahora, hemos estado debatiendo cómo implementar arrastrar y soltar en vistas personalizadas, pero Apple también ha hecho fácil aumentar la mesa y las vistas de colección con arrastrar y soltar. Vistas y campos de texto automáticamente apoyan arrastrar y soltar de las vistas de cuadro, tabla y colección exponen propiedades para personalizar su arrastre, delegados y métodos específicos y comportamientos de la gota. A echar un vistazo en este poco tiempo.
Comience por crear un nuevo proyecto en Xcode 9, asegurando que selecciona Master-Detail App de la ventana de la plantilla:
Antes de empezar a trabajar en el resto de los pasos, seguir adelante y construir y ejecutar el proyecto y jugar con él un poco. Verás que genera una nueva fecha de fecha y hora cuando se selecciona el más (+) botón. Vamos a mejorar en esta aplicación por que permite al usuario arrastrar y ordenar las marcas de hora.
Arrastrar y colocar es compatible con la tabla vistas (como colecciones) a través de APIs especializadas que permiten arrastrar y soltar con filas, conformando nuestra vista de tabla para adoptar protocolos de la UITableViewDragDelegate y UITableViewDropDelegate. Abrir el archivo MasterViewController.swift y agregue lo siguiente al método viewDidLoad():
1 |
override func viewDidLoad() {
|
2 |
super.viewDidLoad() |
3 |
... |
4 |
self.tableView.dragDelegate = self |
5 |
self.tableView.dropDelegate = self |
6 |
... |
Como hicimos con vistas personalizadas, tenemos que manejar la nueva sesión de arrastre cuando el usuario arrastra una fila seleccionada o selecciones de filas múltiples. Hacemos esto con la tableView(_:itemsForBeginning:at:) del método delegado. Dentro de este método, usted o devolver una matriz poblada que comienza arrastrando de las filas seleccionadas o una matriz vacía para evitar al usuario arrastrar el contenido de ese camino de índice específico.
Agregue el método siguiente al archivo MasterViewController.swift:
1 |
func tableView(_ tableView: UITableView, itemsForBeginning session: UIDragSession, at indexPath: IndexPath) -> [UIDragItem] {
|
2 |
|
3 |
let dateItem = self.objects[indexPath.row] as! String |
4 |
|
5 |
let data = dateItem.data(using: .utf8) |
6 |
let itemProvider = NSItemProvider() |
7 |
|
8 |
itemProvider.registerDataRepresentation(forTypeIdentifier: kUTTypePlainText as String, visibility: .all) { completion in
|
9 |
completion(data, nil) |
10 |
return nil |
11 |
} |
12 |
|
13 |
return [ |
14 |
UIDragItem(itemProvider: itemProvider) |
15 |
] |
16 |
} |
Algunos del código añadido ya deben conocer a usted de la sección anterior, pero básicamente lo que estamos haciendo es crear un elemento de datos del objeto seleccionado, envolver en una NSItemProvider y volver en un DragItem.
Dirigiendo nuestra atención junto a habilitar la sesión de caída, continuar con la adición de los dos métodos siguientes:
1 |
func tableView(_ tableView: UITableView, canHandle session: UIDropSession) -> Bool {
|
2 |
return session.canLoadObjects(ofClass: NSString.self) |
3 |
} |
4 |
|
5 |
func tableView(_ tableView: UITableView, dropSessionDidUpdate session: UIDropSession, withDestinationIndexPath destinationIndexPath: IndexPath?) -> UITableViewDropProposal {
|
6 |
|
7 |
if tableView.hasActiveDrag {
|
8 |
if session.items.count > 1 {
|
9 |
return UITableViewDropProposal(operation: .cancel) |
10 |
} else {
|
11 |
return UITableViewDropProposal(operation: .move, intent: .insertAtDestinationIndexPath) |
12 |
} |
13 |
} else {
|
14 |
return UITableViewDropProposal(operation: .copy, intent: .insertAtDestinationIndexPath) |
15 |
} |
16 |
} |
El primer método le indica al sistema que puede manejar tipos de datos String como parte de su sesión de gota. El segundo método de delegado, tableView(_:dropSessionDidUpdate:withDestinationIndexPath:), pistas de la ubicación potencial de caída, notificando el método con cada cambio. También muestra información visual para que el usuario sepa si una ubicación concreta es prohibido o aceptable, con un taco pequeño icono visual.
Por último, que la gota de la manija y consumen el elemento de datos, llamar a tableView(_:performDropWith:), buscando la fila del elemento de datos arrastrados, actualizar origen de datos de la vista de nuestra tabla e insertar las filas necesarias en la tabla.
1 |
func tableView(_ tableView: UITableView, performDropWith coordinator: UITableViewDropCoordinator) {
|
2 |
let destinationIndexPath: IndexPath |
3 |
|
4 |
if let indexPath = coordinator.destinationIndexPath {
|
5 |
destinationIndexPath = indexPath |
6 |
} else {
|
7 |
// Get last index path of table view. |
8 |
let section = tableView.numberOfSections - 1 |
9 |
let row = tableView.numberOfRows(inSection: section) |
10 |
destinationIndexPath = IndexPath(row: row, section: section) |
11 |
} |
12 |
|
13 |
coordinator.session.loadObjects(ofClass: NSString.self) { items in
|
14 |
// Consume drag items. |
15 |
let stringItems = items as! [String] |
16 |
|
17 |
var indexPaths = [IndexPath]() |
18 |
for (index, item) in stringItems.enumerated() {
|
19 |
let indexPath = IndexPath(row: destinationIndexPath.row + index, section: destinationIndexPath.section) |
20 |
self.objects.insert(item, at: indexPath.row) |
21 |
indexPaths.append(indexPath) |
22 |
} |
23 |
|
24 |
tableView.insertRows(at: indexPaths, with: .automatic) |
25 |
} |
26 |
} |
Más Lectura
Para obtener más información acerca drag y drop en su punto de vista de la tabla, consulte documentación del propio desarrollador de Apple en Apoyo Arrastrar y Soltar en Vistas de Tabla.
Arrastrar y Soltar las Mejores Prácticas
El contenido cubierto debe ayudar a implementar arrastrar y colocar en sus aplicaciones, permitiendo a los usuarios de forma interactiva y visualmente moverse contenido dentro de sus aplicaciones existentes, así como a través de aplicaciones.
Junto con el conocimiento técnico de cómo implementar arrastrar y colocar, sin embargo, es imperativo que usted tome el tiempo para considerar cómo sería implementar arrastrar y colocar, siguiendo las mejores prácticas por Apple en su Human Interface Guidelines (HIG), en orden proporcionar a los usuarios con el mejor iOS posible la experiencia del usuario 11.
Para terminar, a tocar en algunos de los aspectos más importantes a considerar, a partir de pistas visuales. Según la HIG, la experiencia fundamental con arrastre y gota es que cuando un usuario interactúa con algunos contenidos, indicaciones visuales indican al usuario activo arrastre sesión, por tener el aumento del elemento de contenido, junto con una tarjeta de identificación para indicar cuándo está cayendo o no es posible.
Ya hemos utilizado esta práctica mejor en los ejemplos anteriores, cuando se incluyeron el método tableView(_:dropSessionDidUpdate:withDestinationIndexPath:), indicando si el destino de la gota es un movimiento, copia, o prohibido. Debe asegurarse con vistas personalizadas y las interacciones que mantiene el conjunto esperado de comportamientos que otros iOS 11 aplicaciones, especialmente aplicaciones de sistema, soporte.
Otro aspecto importante a tener en cuenta es decidir si su sesión de arrastre dará lugar a un movimiento o una copia. Como regla general, Apple sugiere que, cuando se trabaja dentro de la misma aplicación, generalmente debe resultar en un movimiento, que tiene más sentido para copiar el elemento de datos cuando se arrastra entre diferentes aplicaciones. Si bien hay excepciones, por supuesto, el principio subyacente es que si tiene sentido para el usuario, y qué esperan que suceda.
Usted también debe pensar en términos de orígenes y destinos, y si tiene sentido para arrastrar algo o no.
Echemos un vistazo a algunas de las utilidades del sistema de Apple. Notas, por ejemplo, permite seleccionar y arrastrar contenido de texto a otros lugares dentro de la aplicación, o a través de otras aplicaciones en el iPad, a través de pantalla dividida. La aplicación de recordatorios permite mover artículos de recordatorio de una lista a otra lista. Pensar en términos de funcionalidad al momento de decidir sobre cómo los usuarios utilizan su contenido.
Guía de Apple es que todo el contenido es editable debe apoyo aceptar contenido cayó y cualquier contenido que sea seleccionable debe aceptar contenido desplazable, además de copia y pegar los tipos de elementos. Mediante el aprovechamiento de vistas de texto de sistema estándar y campos de texto, puede contar con soporte para arrastrar y caer fuera de la caja.
Usted debe también apoyar varios elemento arrastrar y colocar, en lugar de sólo apoyar a elementos individuales, por el que los usuarios pueden utilizar más de un dedo para seleccionar varios elementos simultáneamente, apilar los elementos seleccionados en un grupo a ser caído de sus destinos previstos. Un ejemplo de esto en acción es la selección de varias imágenes en la aplicación de fotos, o varios archivos en lo archivos de la aplicación.
Una pauta final es proporcionar a los usuarios con la capacidad de invertir una acción o una gota de "deshacer". Los usuarios han sido acostumbrados por mucho tiempo el concepto de deshacer una acción en la mayoría de las aplicaciones populares, y arrastrar y soltar no deben ser ninguna excepción. Los usuarios deben tener la confianza para poder iniciar un arrastre y deje caer y ser capaz de revertir esa acción si se cae el elemento en el destino equivocado.
Más Lectura
Hay muchos más arrastrar y soltar directrices sobre prácticas idóneas más allá de lo que hemos mirado, incluyendo cómo apoyar a caído señales indicador visual, mostrando acciones cayó fallidos, e indicadores de progreso por instante no arrastre las sesiones, como las transferencias de datos. Consulte el iOS Human Interface Guidelines en arrastrar y soltar, para la lista completa de las mejores prácticas.
Conclusión
En este tutorial, ha aprendido cómo enriquecer su iOS apps con arrastrar y soltar, cortesía de iOS 11. En el camino, exploramos cómo habilitar vistas personalizadas y vistas de tabla como fuentes de arrastrar y soltar los destinos.
Como parte de la evolución de iOS hacia una interfaz de usuario más basada en el gesto, sin duda arrastrar y soltar rápidamente será una característica prevista para usuarios en todo el sistema, y como tal, también deben ajustarse todas las apps de terceros. Y tan importante como la aplicación de arrastrar y soltar, usted tendrá que aplicar derecho, por lo que se convierte en segunda naturaleza para los usuarios, que abarca la sencillez y funcionalidad.
Y mientras estés aquí, algunos de nuestros otros posts sobre desarrollo de aplicaciones iOS!
