Amarengo

Articles and news

Como Construir um iOS Compartilhamento de Extensão em Swift

publicado Originalmente pela Scotty Fister em 30 de julho de 2016 24,887 lê

Nota: Atualizado para Swift 4.

para um dia de hack no trabalho, decidi tentar criar uma extensão de compartilhamento. Descobri que não havia um tutorial completo por aí e, como resultado, tive que reunir informações (muito disso atribuído, surpreendentemente, à documentação da Apple).

o objetivo

para salvar um URL de página da web como conteúdo rico em nosso aplicativo e permitir a configuração de algumas opções. Inicialmente, pensei que uma ação de extensão era o que era necessário-mas parece que é mais adequado para modificar o conteúdo (como remover o olho vermelho em uma foto com um toque). Parece que outros, incluindo a Apple, estão usando a extensão share para criar itens.

Isso é o que nós vamos ter construído até o final:

concluída a extensão

Como você pode ver personalizei o design um pouco, e acrescentou que é referido como um “item de configuração”, que são células na parte inferior da folha; comumente usado para selecionar a partir de contas ou outras opções. É usado aqui para selecionar entre os “Decks” existentes do Usuário para salvar. O que você não pode ver é que ele também está executando algum código JavaScript para buscar o URL atual do navegador, que enviamos para o servidor mais tarde. Vamos cobrir tudo isso à frente!

etapas iniciais

crie um novo projeto ou abra um existente ao qual você gostaria de adicionar a extensão. Em seguida, clique em arquivo > novo > alvo. Na guia iOS, selecione Compartilhar extensão e pressione Avançar. Dê um nome; optei pelo simples “ShareExtension”.

ele perguntará se você gostaria de ativar o esquema. Isso significa que quando você executa o aplicativo, ele permite que você abra diretamente no Safari ou semelhante para testar a extensão, em oposição ao seu aplicativo principal. Queremos isso-toque em Ativar.

teste o que você tem até agora executando o projeto Cmd + R — como mencionado, oferece opções de qual aplicativo testar, selecione Safari e toque em Executar.

a caixa de diálogo apresentada ao executar uma extensão.

quando o Safari abrir, Toque no ícone compartilhar e o nome da extensão com o ícone de espaço reservado deve aparecer na lista. Caso contrário, toque em mais e ative-o. Tocar no ícone apresentará a implementação padrão do SLComposeServiceViewController, que é bastante simples logo de cara.

obtendo o URL

a folha de compartilhamento recupera automaticamente o título da página e o define como o texto do corpo, mas geralmente você vai querer mais do que isso — seja o URL ou uma imagem na página. Para isso, você pode fazer com que o Safari execute um arquivo JavaSript para analisar o documento e recuperar o que precisarmos.

primeiro, clique com o botão direito na pasta extensões no Xcode e selecione Novo Arquivo. Você encontrará vazio dentro da outra guia, clique em Avançar e nomeie o arquivo “GetURL.js”.

você precisará editar suas informações de extensões.arquivo plist e no “NSExtension” há um outro dicionário chamado “NSExtensionAttributes” — adicione uma chave “NSExtensionJavaScriptPreprocessingfile” com o valor do nosso arquivo recém-criado, “GetURL” (note a ausência da extensão).

Também adicionar um dicionário de linha “NSExtensionActivationRule”, que deve conter a chave “NSExtensionActivationSupportsWeburlwithmaxcount”, com o número 1:

Como sua extensão Info.plist deve olhar quando visto como uma lista de propriedades

NSExtensionJavaScriptPreprocessingfile: isso permite que nosso aplicativo saiba de um arquivo JavaScript que deve ser executado na execução da extensão.

NSExtensionActivationRule: use este dicionário para adicionar chaves de extensão de ação que ajudam o sistema a determinar para quais tipos de conteúdo ativar sua extensão.

cole o seguinte em ” GetURL.js”:

juntamente com as chaves que definimos acima, o iOS agora procurará um objeto chamado “ExtensionPreprocessingJS” para executar em tempo de execução. Isso é explicado com mais detalhes na documentação da Apple.

para recuperar os dados raspados com o arquivo javascript acima, você precisará executar este bloco de código dentro do “ShareViewController.swift” viewDidLoad função:

Você também vai precisar de importação para kUTTypePropertyList:

import MobileCoreServices

Executando a extensão agora deve imprimir com êxito a URL para o console!

nota lateral: adicione o seguinte trecho se quiser personalizar a barra de navegação como eu tenho (substituindo por sua própria imagem ou apenas um título).

Adicionar Configuração de Células

clichê que veio com a criação de seu compartilhamento de extensão vai ter incluído um método para, opcionalmente, fornecimento de itens de configuração (células na parte inferior da folha de compartilhamento)

override func configurationItems() -> ! {

Insira o trecho abaixo, que retorna um array de “SLComposeSheetConfigurationItem”:

Executar o aplicativo novamente e você verá uma célula no fundo agora.

um modelo para o item de configuração

crie um modelo básico chamado “Deck.swift”, que é usado à frente para passar dados entre os controladores de visualização.

o TableView

no gif no início, você terá notado ao tocar na célula de configuração que empurra para uma nova visualização com um tableview. Crie um novo arquivo que herda de ” UIViewController “chamado” ShareSelectViewController.rapido”. Crie uma propriedade tableview e adicione-a à visualização.

eu também defini o Título e a cor do título para esta visualização e prefiro manter constantes como identificadores de células em uma estrutura:)

crie uma propriedade para armazenar o deck passado do controlador de visualização original:

var userDecks = ()

E em conformidade com os protocolos necessários para a tableview:

de Volta a”ShareViewController.swift”, criar uma propriedade para armazenar alguns dados fictícios e preenchê-lo dentro de viewDidLoad:

por último, dentro do tapHandler para o item de configuração que criamos, criar uma instância da ShareSelectViewController e ter que empurrar toque, passando os decks em bem:

Executar o aplicativo. Tocar na célula de configuração deve empurrar para o tableview com os dados fictícios.

no entanto, você notará que a célula de configuração ainda está codificada para “título do Deck”. Para ter essa atualização, criar uma propriedade para armazenar o deck selecionado e selecione o primeiro por padrão:

E atualizar a configuração de célula dentro de configurationItems() para usá-lo:

deck.value = selectedDeck?.title 

Execute o aplicativo novamente e você vai vê-lo atualizado.

Um Protocolo para Atualizar Deck Selecionado

Você precisará de uma maneira de descartar de volta para o ShareViewController quando um novo Baralho é aproveitado, e ter que atualizar a INTERFACE do usuário. Um protocolo será suficiente. Adicione o seguinte ao seu ShareSelectViewController:

por último, de acordo com o ShareViewController para o protocolo feito apenas e garantir o delegado para o ShareSelectViewController está definido para auto:

Deck selecionado é atualizada, e os itens de configuração que são recarregadas para atualizar o valor. Em seguida, pop para voltar para a tela principal.

execute o aplicativo e agora você poderá alterar os decks que serão atualizados para mostrar o deck selecionado corretamente 🙂

Terminando

Tudo o que resta é enviar as informações coletadas para o seu servidor ou aplicativo para fazer algo, o que você pode fazer dentro de outro clichê método:

override func didSelectPost()

eu não vou entrar em detalhes sobre isso, mas eu usei um NSURLSession a postar em nosso servidor. Também substituí os dados fictícios por decks reais criando um grupo de aplicativos e usando um NSUserDefaults compartilhado para armazenar e recuperar dados recuperados anteriormente no aplicativo iOS principal.

let userDefaults = NSUserDefaults(suiteName: "some.group.name")
let decks = userDefaults?.objectForKey("userDecks") as? NSArray

por fim, você notará que minha extensão se chama “Vurb” na caixa de diálogo ação e tem um ícone. Você pode definir um ícone seguindo este post. E para alterar o nome, basta alterar “Nome de exibição” nas configurações do projeto para a extensão.

isso é tudo, se você achou isso útil, ajude os outros a encontrá-lo recomendando.

você pode ver o projeto na íntegra aqui.

Tags

Juntar Hacker Meio-dia

Crie sua conta gratuita para desbloquear o seu personalizada experiência de leitura.

Deixe uma resposta

O seu endereço de email não será publicado.