Aprile 2018

Volume 33 Numero 4

Il presente articolo è stato tradotto automaticamente.

Visual Studio per Mac - Programmazione per watchOS con Xamarin e Visual Studio per Mac

Dal Dawid Borycki

Dispositivi indossabile di piccole dimensioni, ad esempio rilevazioni attività personali e le espressioni di controllo smart (ad esempio Microsoft banda, usura Android o Apple Watch) stanno diventando più diffusi. Questi wearables sono dotati di vari sensori, che controllano i parametri relativi all'integrità del ferimento in tempo reale. Molti wearables dispongono anche di interfacce di comunicazione, in modo che i dati del sensore possono essere facilmente trasmessi ai servizi cloud dedicato o personalizzato (ad esempio Microsoft Health) per l'archiviazione o di elaborazione avanzati. Di conseguenza, l'indossabile può fungere da un endpoint aggiuntivo di un ecosistema di Internet delle cose (IoT). Questo, a sua volta, consente sanità personali avanzamento a un nuovo livello, in cui gli algoritmi predittivi IoT possono informare l'utente emergenti in anticipo problemi di integrità.

Wearables è anche possibile eseguire le applicazioni personalizzate. Gli sviluppatori vengono forniti con SDK dedicato. Tuttavia, come avviene per molti dispositivi mobili, ogni piattaforma presenta un proprio API specifico, che è possibile accedere tramite gli strumenti e linguaggi di programmazione specifici della piattaforma. Per semplificare l'operazione, Xamarin offre supporto per Android usura e watchOS all'interno delle librerie di xamarin. Android e xamarin. IOS, rispettivamente. È possibile sviluppare applicazioni indossabile in modo simile come App per dispositivi mobili, utilizzando la comune .NET codebase, cui viene fatto riferimento nei progetti specifici della piattaforma.

In questo articolo, è possibile mostreremo come utilizzare tale approccio per compilare l'app watchOS rappresentato figura 1. Quando si esegue questa app, inizia il recupero della raccolta di oggetti dal servizio Web REST. Questa raccolta è composta da foto falsa, ognuno dei quali ha un titolo e una bitmap (immagine monocromatica). In questa fase, l'applicazione viene illustrato solo un pulsante con l'elenco di Get didascalia. Questo pulsante è disabilitato fino a quando non viene scaricati i dati, come illustrato nella prima riga della figura 1.

Anteprima di watchOS App
Figura 1 anteprima di watchOS App

Toccare il pulsante e un foglio di azione (seconda riga della figura 1) verrà visualizzato un avviso che è costituito da diversi pulsanti, definiti come azioni o pulsanti di azione (bit.ly/2EEUZpL). In questo esempio, il foglio di azione fornisce i pulsanti di azione, il cui didascalie contengono l'intervallo di foto da visualizzare. Quando si tocca un'azione, foto selezionate vengono visualizzate nel controllo tabella (bit.ly/2Caq0nM) sotto il pulsante di elenco Get come illustrato nell'ultima riga nella figura 1. Questa tabella è scorrevole, pertanto è possibile scorrere verso il basso l'elenco per visualizzare tutte le foto nel gruppo.

È possibile la comunicazione con il servizio Web viene implementato in una libreria di classi Standard .NET separato (bit.ly/2HArfMq). In seguito la documentazione di riferimento, .NET Standard è una specifica formale delle API .NET progettata per realizzare un accesso uniforme per le interfacce di programmazione disponibili in tutte le implementazioni di .NET. Uno dei principali vantaggi di questo approccio è che una libreria condivisa possa essere consultata facilmente nei progetti .NET per ridurre o eliminare la compilazione condizionale di codice condiviso. Di conseguenza, la libreria di classi .NET Standard può essere implementata una volta e farvi riferimento in vari progetti .NET, come destinazione della piattaforma UWP (Universal Windows), .NET Core, ASP.NET Core, xamarin. IOS, xamarin. Android, xamarin. Forms e così via senza la necessità di Recompile per ogni piattaforma.

In questo caso, illustrato come riutilizzare il codice comune nell'app watchOS. Per il servizio Web si utilizzerà il server dell'API REST falsi JSONPlaceholder (jsonplaceholder.typicode.com), che fornisce risorse diverse, tra cui la risorsa di foto impiegata nell'app di esempio. La risorsa ne archivia una raccolta di immagini falsa, ognuno dei quali è rappresentato come oggetto JSON seguente:

{
  "albumId": 1,
  "id": 1,
  "title": "accusamus beatae ad facilis cum similique qui sunt",
  "url": "http://placehold.it/600/92c952",
  "thumbnailUrl": "http://placehold.it/150/92c952"
}

Ciascuna foto presenta un id associato, album foto, titolo e due URL che punta a una bitmap e la relativa anteprima. Per questo esercizio, la bitmap è semplicemente un'immagine di un colore con un'etichetta che mostra le dimensioni di bitmap.

Tutto ciò che viene visualizzato di seguito viene creato con Visual Studio per Mac. È possibile trovare il codice di esempio completo per questo progetto in GitHub all'indirizzo github.com/dawidborycki/Photos.

App padre e il codice condiviso

Infine, il ButtonDisplayPhotoList_Activated viene definito come segue: Per creare e presentare un foglio di azione, è possibile utilizzare PresentAlertController. Questo metodo accetta quattro argomenti: Titolo indica il titolo dell'avviso. Messaggio specifica il testo da visualizzare nel corpo dell'avviso. PreferredStyle specifica lo stile del controller di avviso. Stile è rappresentato da uno dei valori, definiti nell'enumerazione WatchKit.WKAlertControllerStyle: Un avviso, SideBySideButtonsAlert o ActionSheet.

In sono riepilogate le differenze tra di essi apple.co/2GA57Rp. Le azioni sono una raccolta di pulsanti di azione da includere nell'avviso. Si noti che il numero di azioni dipende lo stile dell'avviso come descritto nella documentazione di riferimento. In questo caso, titolo e messaggio vengono impostate su stringa. Vuoto, mentre lo stile dell'avviso è impostato su ActionSheet.

Di conseguenza, verranno visualizzati solo i pulsanti di azione (si riferiscono nuovamente ai figura 1). Per garantire che alertActions pronti prima che l'utente tocca il pulsante di elenco Get, è possibile recuperare le foto e i titoli all'interno del metodo Awake (come illustrato figura 7): Figura 7 recuperare foto e i titoli È ora possibile eseguire l'app.

Quando album foto vengono recuperati dal server remoto, il pulsante viene abilitato. Fare clic per attivare il foglio di azione (illustrato nella parte centrale della figura 1). Per completare questa implementazione, è necessario creare la tabella di visualizzazione che mostra il gruppo selezionato di foto. A tale scopo è possibile aprire la finestra di progettazione dello storyboard e dalla casella degli strumenti trascinare il controllo tabella scena (sarà posizionarlo sotto il pulsante di elenco Get). Nel passaggio successivo, è necessario definire il layout della cella.

Per impostazione predefinita, il layout presenta un singolo controllo:

gruppo. È possibile usare questo come elemento padre per altri controlli, ma prima è necessario assicurarsi che il controllo del gruppo sia attivo. In tal caso, è possibile fare clic sul riquadro Struttura documento (visibili nella parte inferiore della figura 4) e quindi fare clic sul gruppo di controllo sotto la riga di tabella /. Successivamente, è possibile trascinare i controlli immagine e l'etichetta nella tabella. Immagine e l'etichetta verrà visualizzata nella visualizzazione tabella e anche nella struttura documento.

  • Come indicato di seguito configurerà tutte le proprietà di controllo:
  • Immagine (nome:
  • ImagePhotoPreview; Dimensioni:
  • Sono state corrette larghezza e altezza pari a 50 px), etichetta (nome: LabelPhotoTitle), tabella (nome:

TablePhotos), gruppo (dimensioni: L'altezza di 50 fissata px). È importante impostare in modo esplicito i nomi dei controlli in modo è possibile fare riferimento a essi è facilmente dal codice. Dopo aver specificato il nome del controllo, Visual Studio apporta una dichiarazione appropriata nel file InterfaceController.designer.cs. In watchOS ogni riga dispone di un controller riga dedicato, che consente di controllare l'aspetto di riga.

In questo caso, si utilizzerà questo controller per specificare il contenuto per l'immagine e l'etichetta di ogni riga. Per creare il controller di riga, selezionare la riga della tabella nel riquadro Struttura documento e quindi aprire la scheda proprietà, in cui si digita PhotoRowController nella casella di testo (classe). Verrà aggiunto un nuovo file, PhotoRowController.cs.

private static HttpClient httpClient;
static PhotosClient()
{
  httpClient = new HttpClient()
  {
    BaseAddress = new Uri("https://jsonplaceholder.typicode.com/")
  };
}

Contiene la classe con lo stesso nome.

  • GetByAlbumId: La definizione di questa classe è possibile quindi integrare da un altro metodo, come indicato di seguito: La funzione SetElement accetta un argomento di tipo foto per visualizzare un'anteprima della foto con titolo foto in alla riga pertinente della visualizzazione tabella.
  • GetImageData: Quindi, per effettivamente caricare e configurare le righe della tabella, è possibile estendere la definizione del InterfaceController utilizzando il metodo seguente: RowSelection viene passato al metodo DisplaySelectedPhotos per fornire le informazioni necessarie relative alle righe da visualizzare.

In particolare, proprietà di conteggio delle righe viene utilizzata per impostare il numero di righe da aggiungere alla tabella (TablePhotos.SetNumberOfRows).

public static async Task<IEnumerable<Photo>> GetByAlbumId(int albumId)
{
  var response = await httpClient.GetAsync($"photos?albumId={albumId}");
  var photoCollection = new List<Photo>();
  try
  {
    CheckStatusCode(response);
    photoCollection = await DeserializeResponse<List<Photo>>(response);
  }
  catch(Exception ex)
  {
    Console.WriteLine(ex.Message);
  }
  return photoCollection;
}
public static async Task<byte[]> GetImageData(Photo photo)
{
  var imageData = new byte[0];
  try
  {
    Check.IsNull(photo);
    imageData = await httpClient.GetByteArrayAsync(photo.ThumbnailUrl);
  }
  catch(Exception ex)
  {
    Console.WriteLine(ex.Message);
  }
  return imageData;
}

Successivamente, DisplaySelectedPhotos iterazione di righe della tabella per impostare il contenuto per ogni riga. A ogni iterazione ottenere innanzitutto un riferimento a PhotoRowController associato alla riga corrente. Dato che fanno riferimento a è possibile richiamare il metodo PhotoRowController.SetElement per ottenere i dati dell'immagine e titolo, vengono visualizzate nella cella della tabella.

private static void CheckStatusCode(HttpResponseMessage response)
{
  if (!response.IsSuccessStatusCode)
  {
    throw new Exception($"Unexpected status code: {response.StatusCode}");
  }
}

Infine, dopo aver eseguito l'app, si otterrà i risultati illustrati in precedenza in figura 1. Conclusione In questo articolo, è stato illustrato come sviluppare App watchOS con Xamarin, Visual Studio per Mac e un codice di Visual c# .NET condiviso basa implementata in libreria di classi .NET Standard.

private static async Task<T> DeserializeResponse<T>(HttpResponseMessage response)
{
  var jsonString = await response.Content.ReadAsStringAsync();
  return JsonConvert.DeserializeObject<T>(jsonString);
}

Lungo il percorso è possibile sono stati illustrati alcuni degli elementi più importanti delle App watchOS, tra cui la struttura dell'app, i controller di interfaccia e selezionato controlli dell'interfaccia utente (pulsante, foglio di azione, visualizzazione tabella). Poiché la base di codice condiviso viene implementata mediante lo stesso approccio utilizzato con le App per dispositivi mobili, è possibile estendere facilmente la soluzione per dispositivi mobili per wearables intelligente di destinazione. È possibile ottenere altre informazioni su watchOS da Apple nel apple.co/2EFLeaL, nonché documentazione dettagliata Xamarin alla bit.ly/2ohSwLU. Photos.Common/Helpers/Check.cs).

Dawid Borycki è un tecnico del software e ingegno biomedica altoparlante conferenze e autore.

Ama nuove tecnologie per la sperimentazione software e la creazione di prototipi di apprendimento.

Blog di Brad Umbaugh Brad Umbaugh scrive iOS e la relativa documentazione per il team di Xamarin presso Microsoft. Viene visualizzato un elenco di modelli di progetto, da cui è possibile scegliere WatchKit App c# modello di progetto. Per garantire che alertActions pronti prima che l'utente tocca il pulsante di elenco Get, è possibile recuperare le foto e i titoli all'interno del metodo Awake (come illustrato figura 7):

Figura 7 recuperare foto e i titoli
È ora possibile eseguire l'app.

Quando album foto vengono recuperati dal server remoto, il pulsante viene abilitato. Fare clic per attivare il foglio di azione (illustrato nella parte centrale della figura 1). Per completare questa implementazione, è necessario creare la tabella di visualizzazione che mostra il gruppo selezionato di foto.

A tale scopo è possibile aprire la finestra di progettazione dello storyboard e dalla casella degli strumenti trascinare il controllo tabella scena (sarà posizionarlo sotto il pulsante di elenco Get). Nel passaggio successivo, è necessario definire il layout della cella.

Per impostazione predefinita, il layout presenta un singolo controllo: gruppo. È possibile usare questo come elemento padre per altri controlli, ma prima è necessario assicurarsi che il controllo del gruppo sia attivo.

In tal caso, è possibile fare clic sul riquadro Struttura documento (visibili nella parte inferiore della figura 4) e quindi fare clic sul gruppo di controllo sotto la riga di tabella /.
Successivamente, è possibile trascinare i controlli immagine e l'etichetta nella tabella.

Immagine e l'etichetta verrà visualizzata nella visualizzazione tabella e anche nella struttura documento. Come indicato di seguito configurerà tutte le proprietà di controllo: Immagine (nome: ImagePhotoPreview; Dimensioni:

Sono state corrette larghezza e altezza pari a 50 px), etichetta (nome: LabelPhotoTitle), tabella (nome:

  • TablePhotos), gruppo (dimensioni: L'altezza di 50 fissata px). È importante impostare in modo esplicito i nomi dei controlli in modo è possibile fare riferimento a essi è facilmente dal codice.
  • WillActivate: Dopo aver specificato il nome del controllo, Visual Studio apporta una dichiarazione appropriata nel file InterfaceController.designer.cs. In watchOS ogni riga dispone di un controller riga dedicato, che consente di controllare l'aspetto di riga.
  • DidDeactivate: In questo caso, si utilizzerà questo controller per specificare il contenuto per l'immagine e l'etichetta di ogni riga. Per creare il controller di riga, selezionare la riga della tabella nel riquadro Struttura documento e quindi aprire la scheda proprietà, in cui si digita PhotoRowController nella casella di testo (classe).

Verrà aggiunto un nuovo file, PhotoRowController.cs. Contiene la classe con lo stesso nome.

public override void Awake(
  NSObject context)
{
  base.Awake(context);
  SetTitle("Hello, watch!");
}

La definizione di questa classe è possibile quindi integrare da un altro metodo, come indicato di seguito: La funzione SetElement accetta un argomento di tipo foto per visualizzare un'anteprima della foto con titolo foto in alla riga pertinente della visualizzazione tabella.

Quindi, per effettivamente caricare e configurare le righe della tabella, è possibile estendere la definizione del InterfaceController utilizzando il metodo seguente: RowSelection viene passato al metodo DisplaySelectedPhotos per fornire le informazioni necessarie relative alle righe da visualizzare. In particolare, proprietà di conteggio delle righe viene utilizzata per impostare il numero di righe da aggiungere alla tabella (TablePhotos.SetNumberOfRows). Successivamente, DisplaySelectedPhotos iterazione di righe della tabella per impostare il contenuto per ogni riga. A ogni iterazione ottenere innanzitutto un riferimento a PhotoRowController associato alla riga corrente. Dato che fanno riferimento a è possibile richiamare il metodo PhotoRowController.SetElement per ottenere i dati dell'immagine e titolo, vengono visualizzate nella cella della tabella.

Infine, dopo aver eseguito l'app, si otterrà i risultati illustrati in precedenza in figura 1.

Conclusione In questo articolo, è stato illustrato come sviluppare App watchOS con Xamarin, Visual Studio per Mac e un codice di Visual c# .NET condiviso basa implementata in libreria di classi .NET Standard. Lungo il percorso è possibile sono stati illustrati alcuni degli elementi più importanti delle App watchOS, tra cui la struttura dell'app, i controller di interfaccia e selezionato controlli dell'interfaccia utente (pulsante, foglio di azione, visualizzazione tabella). Poiché la base di codice condiviso viene implementata mediante lo stesso approccio utilizzato con le App per dispositivi mobili, è possibile estendere facilmente la soluzione per dispositivi mobili per wearables intelligente di destinazione. È possibile ottenere altre informazioni su watchOS da Apple nel apple.co/2EFLeaL, nonché documentazione dettagliata Xamarin alla bit.ly/2ohSwLU.

Dawid Borycki è un tecnico del software e ingegno biomedica altoparlante conferenze e autore. Ama nuove tecnologie per la sperimentazione software e la creazione di prototipi di apprendimento. Blog di Brad Umbaugh Brad Umbaugh scrive iOS e la relativa documentazione per il team di Xamarin presso Microsoft. Come illustrato figura 5, il metodo Create accetta tre argomenti:

  • Titolo definisce didascalia del pulsante di azione
  • Stile indica lo stile del pulsante di azione
  • Gestore specifica un metodo da eseguire quando l'utente tocca il pulsante di azione

Figura 5 partizionamento titoli delle foto

private const int rowsPerGroup = 10;
private IEnumerable<Photo> photos;
private WKAlertAction[] alertActions;
private void CreateAlertActions()
{
  var actionsCount = photos.Count() / rowsPerGroup;
  alertActions = new WKAlertAction[actionsCount];
  for (var i = 0; i < actionsCount; i++)
  {
    var rowSelection = new RowSelection(
      i, rowsPerGroup, photos.Count());
    var alertAction = WKAlertAction.Create(
      rowSelection.Title,
      WKAlertActionStyle.Default,
      async () => { await DisplaySelectedPhotos(rowSelection); });
    alertActions[i] = alertAction;
  }
}

In figura 5 tutte le azioni hanno uno stile predefinito, rappresentato come valore predefinito dell'enumerazione WatchKit.WKAlertStyle. Questa enumerazione definisce due valori (apple.co/2EHCAZr): Annullare e distruttivi. Il primo consente di creare un'azione che consente di annullare un'operazione senza alcuna modifica. Lo stile distruttivo deve essere applicato alle azioni che producono modifiche può essere annullate.

Il metodo CreateAlertActions figura 5 partiziona le foto in blocchi, ognuno dei quali contiene 10 elementi (costante rowsPerGroup). Per ottenere un gruppo selezionato di foto dalla raccolta, sono necessarie due indici, in cui il gruppo inizia (variabile beginIndex) e l'altra in cui termina (endIndex). Per calcolare questi indici, è possibile utilizzare la classe RowSelection, che viene usata anche per creare i titoli di elementi visualizzati nel foglio di azione. Classe RowSelection è implementata nel progetto Photos.iOS.WatchKitExtension (RowSelection.cs) e le parti più importanti vengono mostrate nella figura 6.

Figura 6 il calcolo degli indici con RowSelection (classe)

public int BeginIndex { get; private set; }
public int EndIndex { get; private set; }
public int RowCount { get; private set; }
public string Title { get; private set; }
private static string titlePrefix = "Elements to show:";
public RowSelection(int groupIndex, int rowsPerGroup, int elementCount)
{
  BeginIndex = groupIndex * rowsPerGroup;
  EndIndex = Math.Min((groupIndex + 1) * rowsPerGroup, elementCount) - 1;
  RowCount = EndIndex - BeginIndex + 1;
  Title = $"{titlePrefix} {BeginIndex}-{EndIndex}";
}

Infine, ogni pulsante del foglio di azione dispone di un gestore associato, che richiama il metodo DisplaySelectedPhotos. Questo metodo è responsabile per la presentazione nella tabella delle foto selezionate e verrà descritta più avanti.

Per attivare il foglio di azione innanzitutto un riferimento a progetto Photos.Common. A tale scopo, in Esplora soluzioni è possibile fare doppio clic su riferimenti del Photos.iOS.WatchKitExtension, selezionare i riferimenti di modifica, scegliere la scheda Project e selezionare Photos.Common. Una volta nel riferimento Manager I dovrà anche fare riferimento a libreria Newtonsoft.Json.dll per garantire che verranno copiato nella directory di output. Eseguo questo utilizzando la scheda Assembly .NET, fare clic sul pulsante Sfoglia e scegliendo Newtonsoft.Json.dll dal packages/Newtonsoft.Json/lib/netstandard20 cartella. Questa cartella viene creata dopo aver installato il pacchetto NuGet newtonsoft. JSON.

Questi passaggi sono necessari per accedere a una base di codice condiviso (tra cui PhotosClient che è stato implementato in precedenza) dall'app watchOS. È possibile modificare l'interfaccia utente utilizzando lo storyboard. Una descrizione dettagliata del funzionamento di layout in watchOS è reperibile in Apple (apple.co/2FlzADj) e la documentazione di Xamarin (bit.ly/2EKjCRM).

Dopo avere aperto la finestra di progettazione dello storyboard, è possibile trascinare il controllo pulsante dalla casella degli strumenti nella scena. Utilizzo del riquadro proprietà, è possibile impostare le proprietà di nome e il titolo del pulsante ButtonDisplayPhotoList e ottenere l'elenco, rispettivamente. Quindi, è possibile creare il gestore dell'evento, che viene eseguito ogni volta che l'utente tocca il pulsante. Per creare un gestore eventi, è possibile utilizzare il riquadro proprietà, facendo clic sulla scheda eventi e quindi digitando ButtonDisplayPhotoList_Activated nella casella di ricerca di azione. Dopo aver premuto il tasto INVIO, Visual Studio dichiara il nuovo metodo nella classe InterfaceController. Infine, il ButtonDisplayPhotoList_Activated viene definito come segue:

partial void ButtonDisplayPhotoList_Activated()
{
  PresentAlertController(string.Empty,
    string.Empty,
    WKAlertControllerStyle.ActionSheet,
    alertActions);
}

Per creare e presentare un foglio di azione, è possibile utilizzare PresentAlertController. Questo metodo accetta quattro argomenti:

  • Titolo indica il titolo dell'avviso.
  • Messaggio specifica il testo da visualizzare nel corpo dell'avviso.
  • PreferredStyle specifica lo stile del controller di avviso. Stile è rappresentato da uno dei valori, definiti nell'enumerazione WatchKit.WKAlertControllerStyle: Un avviso, SideBySideButtonsAlert o ActionSheet. In sono riepilogate le differenze tra di essi apple.co/2GA57Rp.
  • Le azioni sono una raccolta di pulsanti di azione da includere nell'avviso. Si noti che il numero di azioni dipende lo stile dell'avviso come descritto nella documentazione di riferimento.

In questo caso, titolo e messaggio vengono impostate su stringa. Vuoto, mentre lo stile dell'avviso è impostato su ActionSheet. Di conseguenza, verranno visualizzati solo i pulsanti di azione (si riferiscono nuovamente ai figura 1). Per garantire che alertActions pronti prima che l'utente tocca il pulsante di elenco Get, è possibile recuperare le foto e i titoli all'interno del metodo Awake (come illustrato figura 7):

Figura 7 recuperare foto e i titoli

public async override void Awake(NSObject context)
{
  base.Awake(context);
  SetTitle("Hello, watch!");
  // Disable button until the photos are downloaded
  ButtonDisplayPhotoList.SetEnabled(false);
  // Get photos from the web service (first album only)
  photos = await PhotosClient.GetByAlbumId(1);
  // Create actions for the alert
  CreateAlertActions();
  ButtonDisplayPhotoList.SetEnabled(true);
}

È ora possibile eseguire l'app. Quando album foto vengono recuperati dal server remoto, il pulsante viene abilitato. Fare clic per attivare il foglio di azione (illustrato nella parte centrale della figura 1).

Vista Tabella

Per completare questa implementazione, è necessario creare la tabella di visualizzazione che mostra il gruppo selezionato di foto. A tale scopo è possibile aprire la finestra di progettazione dello storyboard e dalla casella degli strumenti trascinare il controllo tabella scena (sarà posizionarlo sotto il pulsante di elenco Get).

Nel passaggio successivo, è necessario definire il layout della cella. Per impostazione predefinita, il layout presenta un singolo controllo: gruppo. È possibile usare questo come elemento padre per altri controlli, ma prima è necessario assicurarsi che il controllo del gruppo sia attivo. In tal caso, è possibile fare clic sul riquadro Struttura documento (visibili nella parte inferiore della figura 4) e quindi fare clic sul gruppo di controllo sotto la riga di tabella /. Successivamente, è possibile trascinare i controlli immagine e l'etichetta nella tabella. Immagine e l'etichetta verrà visualizzata nella visualizzazione tabella e anche nella struttura documento. Come indicato di seguito configurerà tutte le proprietà di controllo: Immagine (nome: ImagePhotoPreview; Dimensioni: Sono state corrette larghezza e altezza pari a 50 px), etichetta (nome: LabelPhotoTitle), tabella (nome: TablePhotos), gruppo (dimensioni: L'altezza di 50 fissata px).

È importante impostare in modo esplicito i nomi dei controlli in modo è possibile fare riferimento a essi è facilmente dal codice. Dopo aver specificato il nome del controllo, Visual Studio apporta una dichiarazione appropriata nel file InterfaceController.designer.cs.

In watchOS ogni riga dispone di un controller riga dedicato, che consente di controllare l'aspetto di riga. In questo caso, si utilizzerà questo controller per specificare il contenuto per l'immagine e l'etichetta di ogni riga. Per creare il controller di riga, selezionare la riga della tabella nel riquadro Struttura documento e quindi aprire la scheda proprietà, in cui si digita PhotoRowController nella casella di testo (classe). Verrà aggiunto un nuovo file, PhotoRowController.cs. Contiene la classe con lo stesso nome. La definizione di questa classe è possibile quindi integrare da un altro metodo, come indicato di seguito:

public async Task SetElement(Photo photo)
{
  Check.IsNull(photo);
  // Retrieve image data and use it to create UIImage
  var imageData = await PhotosClient.GetImageData(photo);
  var image = UIImage.LoadFromData(NSData.FromArray(imageData));
  // Set image and title
  ImagePhotoPreview.SetImage(image);
  LabelPhotoTitle.SetText(photo.Title);
}

La funzione SetElement accetta un argomento di tipo foto per visualizzare un'anteprima della foto con titolo foto in alla riga pertinente della visualizzazione tabella. Quindi, per effettivamente caricare e configurare le righe della tabella, è possibile estendere la definizione del InterfaceController utilizzando il metodo seguente:

private async Task DisplaySelectedPhotos(RowSelection rowSelection)
{
  TablePhotos.SetNumberOfRows(rowSelection.RowCount, "default");
  for (int i = rowSelection.BeginIndex, j = 0;
    i <= rowSelection.EndIndex; i++, j++)
  {
    var elementRow = (PhotoRowController)TablePhotos.GetRowController(j);
    await elementRow.SetElement(photos.ElementAt(i));
  }
}

RowSelection viene passato al metodo DisplaySelectedPhotos per fornire le informazioni necessarie relative alle righe da visualizzare. In particolare, proprietà di conteggio delle righe viene utilizzata per impostare il numero di righe da aggiungere alla tabella (TablePhotos.SetNumberOfRows). Successivamente, DisplaySelectedPhotos iterazione di righe della tabella per impostare il contenuto per ogni riga. A ogni iterazione ottenere innanzitutto un riferimento a PhotoRowController associato alla riga corrente. Dato che fanno riferimento a è possibile richiamare il metodo PhotoRowController.SetElement per ottenere i dati dell'immagine e titolo, vengono visualizzate nella cella della tabella.

Infine, dopo aver eseguito l'app, si otterrà i risultati illustrati in precedenza in figura 1.

Conclusione

In questo articolo, è stato illustrato come sviluppare App watchOS con Xamarin, Visual Studio per Mac e un codice di Visual c# .NET condiviso basa implementata in libreria di classi .NET Standard. Lungo il percorso è possibile sono stati illustrati alcuni degli elementi più importanti delle App watchOS, tra cui la struttura dell'app, i controller di interfaccia e selezionato controlli dell'interfaccia utente (pulsante, foglio di azione, visualizzazione tabella). Poiché la base di codice condiviso viene implementata mediante lo stesso approccio utilizzato con le App per dispositivi mobili, è possibile estendere facilmente la soluzione per dispositivi mobili per wearables intelligente di destinazione. È possibile ottenere altre informazioni su watchOS da Apple nel apple.co/2EFLeaL, nonché documentazione dettagliata Xamarin alla bit.ly/2ohSwLU.


Dawid Boryckiè un tecnico del software e ingegno biomedica altoparlante conferenze e autore. Ama nuove tecnologie per la sperimentazione software e la creazione di prototipi di apprendimento.

Grazie al seguente esperto tecnico per la revisione dell'articolo: Blog di Brad Umbaugh
Brad Umbaugh scrive iOS e la relativa documentazione per il team di Xamarin presso Microsoft. Aggiornarsi con lui su Twitter @bradumbaugh, in cui ha retweets principalmente puns non valida.


Viene illustrato in questo articolo nel forum di MSDN Magazine