Como trabalhar com tabelas no iOS Designer

Os storyboards são uma maneira WYSIWYG de criar aplicativos iOS e têm suporte no Visual Studio no Mac e no Windows. Para obter mais informações sobre Storyboards, consulte o documento Introdução aos Storyboards . Os storyboards também permitem editar os layouts de célula na tabela, o que simplifica o desenvolvimento com tabelas e células

Ao configurar as propriedades de uma exibição de tabela no iOS Designer, há dois tipos de conteúdo de célula que você pode escolher: Conteúdo de protótipo dinâmico ou estático.

Conteúdo de protótipo dinâmico

Um UITableView conteúdo com protótipo destina-se normalmente a exibir uma lista de dados em que a célula do protótipo (ou células, como você pode definir mais de uma) são reutilizadas para cada item na lista. As células não precisam ser instanciadas, elas são obtidas no GetView método chamando o DequeueReusableCell método de seu UITableViewSource.

Conteúdo Estático

UITableViews com conteúdo estático permitem que as tabelas sejam projetadas diretamente na superfície de design. As células podem ser arrastadas para a tabela e personalizadas alterando propriedades e adicionando controles.

Criando um aplicativo orientado por storyboard

O exemplo StoryboardTable contém um aplicativo mestre-detalhe simples que usa os dois tipos de UITableView em um Storyboard. O restante desta seção descreve como criar um pequeno exemplo de lista de tarefas que terá a seguinte aparência quando concluído:

A interface do usuário será construída com um storyboard, e ambas as telas usarão um UITableView. A tela principal usa conteúdo de protótipo para esquematizar a linha, e a tela de detalhes usa conteúdo estático para criar um formulário de entrada de dados usando layouts de célula personalizados.

Passo a passo

Crie uma nova solução no Visual Studio usando (Criar) Novo Projeto... > Single View App(C#) e chame-o de StoryboardTables.

A solução será aberta com alguns arquivos C# e um Main.storyboard arquivo já criado. Clique duas vezes no Main.storyboard arquivo para abri-lo no iOS Designer.

Modificando o storyboard

O storyboard será editado em três etapas:

• Primeiro, crie o layout dos controladores de exibição necessários e defina suas propriedades.
• Em segundo lugar, crie sua interface do usuário arrastando e soltando objetos em seu modo de exibição
• Finalmente, adicione a classe UIKit necessária a cada modo de exibição e dê um nome a vários controles para que eles possam ser referenciados no código.

Quando o storyboard estiver completo, o código pode ser adicionado para que tudo funcione.

Layout: os controladores de exibição

A primeira alteração no storyboard é excluir o modo de exibição Detalhe existente e substituí-lo por um UITableViewController. Siga estas etapas:

1. Selecione a barra na parte inferior do View Controller e exclua-a.

2. Arraste um Controlador de Navegação e um Controlador de Exibição de Tabela para o Storyboard a partir da Caixa de Ferramentas.

3. Crie uma sequência do Controlador de Exibição Raiz para o segundo Controlador de Exibição de Tabela que acabou de ser adicionado. Para criar a sequência, Control+arraste da célula Detail para a UITableViewController recém-adicionada. Escolha a opção Mostrar em Segue Selection.

4. Selecione o novo segue que você criou e dê a ele um identificador para fazer referência a esse segue no código. Clique no botão e digite TaskSegue o Identificador no Bloco de Propriedades, assim:
   

5. Em seguida, configure os dois modos de exibição de tabela selecionando-os e usando o Bloco de propriedades. Certifique-se de selecionar Exibir e não Exibir controlador – você pode usar a estrutura de tópicos do documento para ajudar na seleção.

6. Altere o Controlador de Exibição Raiz para Conteúdo: Protótipos Dinâmicos (a Exibição na Superfície de Design será rotulada como Conteúdo do Protótipo):

   

7. Altere o novo UITableViewController para Content: Static Cells.

8. O novo UITableViewController deve ter seu nome de classe e identificador definidos. Selecione o View Controller e digite TaskDetailViewController para a classe no painel de propriedades – isso criará um novo TaskDetailViewController.cs arquivo no painel de soluções. Insira o StoryboardID como detalhe, conforme ilustrado no exemplo abaixo. Isso será usado posteriormente para carregar essa exibição no código C#:

   

9. A superfície de design do storyboard agora deve ter a seguinte aparência (o título do item de navegação do Root View Controller foi alterado para "Chore Board"):

   

Criar a interface do usuário

Agora que as exibições e as sequências estão configuradas, os elementos da interface do usuário precisam ser adicionados.

Controlador de exibição de raiz

Primeiro, selecione a célula protótipo no Master View Controller e defina o Identificador como taskcell, conforme ilustrado abaixo. Isso será usado posteriormente no código para recuperar uma instância deste UITableViewCell:

Em seguida, você precisará criar um botão que adicionará novas tarefas, conforme ilustrado abaixo:

Faça o seguinte:

• Arraste um Item de Botão de Barra da Caixa de Ferramentas para o lado direito da barra de navegação.
• No Painel de Propriedades, em Item de Botão de Barra, selecione Identificador: Adicionar (para torná-lo um + botão de mais).
• Dê-lhe um nome para que ele possa ser identificado no código em um estágio posterior. Observe que você precisará dar ao Controlador de Exibição Raiz um Nome de Classe (por exemplo , ItemViewController) para permitir que você defina o nome do item do botão Barra.

Controlador de exibição TaskDetail

O Modo de Exibição de Detalhes requer muito mais trabalho. As células de exibição de tabela precisam ser arrastadas para o modo de exibição e, em seguida, preenchidas com rótulos, modos de exibição de texto e botões. A captura de tela abaixo mostra a interface do usuário concluída com duas seções. Uma seção tem três células, três rótulos, dois campos de texto e uma opção, enquanto a segunda seção tem uma célula com dois botões:

As etapas para construir o layout completo são:

Selecione o modo de exibição de tabela e abra o Bloco de propriedades. Atualize as propriedades a seguir:

• Seções: 2
• Estilo: Agrupado
• Separador: Nenhum
• Seleção: Sem seleção

Selecione a seção superior e, em Seção de exibição da tabela de propriedades>, altere Linhas para 3, conforme ilustrado abaixo:

Para cada célula, abra o Bloco de Propriedades e defina:

• Estilo: Personalizado
• Identificador: Escolha um identificador exclusivo para cada célula (por exemplo. "título", "notas", "feito").
• Arraste os controles necessários para produzir o layout mostrado na captura de tela (coloque UILabel, UITextField e UISwitch nas células corretas, e defina os rótulos adequadamente, ou seja. Título, Notas e Feito).

Na segunda seção, defina Linhas como 1 e pegue a alça de redimensionamento inferior da célula para torná-la mais alta.

• Defina o Identificador: para um valor exclusivo (por exemplo. "salvar").

• Defina o plano de fundo: Cor clara .

• Arraste dois botões para a célula e defina seus títulos adequadamente (ou seja , Salvar e Excluir), conforme ilustrado abaixo:

  

Neste ponto, você também pode definir restrições em suas células e controles para garantir um layout adaptável.

Adicionando classe UIKit e nomeando controles

Existem alguns passos finais na criação do nosso Storyboard. Primeiro, devemos dar a cada um de nossos controles um nome em Nome de identidade > para que eles possam ser usados no código mais tarde. Nomeie-os da seguinte forma:

• Title UITextField : TitleText
• Observações UITextField : NotesText
• UISwitch : DoneSwitch
• Excluir UIButton : DeleteButton
• Salvar UIButton : SaveButton

Adicionando código

O restante do trabalho será feito no Visual Studio no Mac ou Windows com C#. Observe que os nomes de propriedade usados no código refletem aqueles definidos no passo a passo acima.

Primeiro, queremos criar uma Chores classe, que fornecerá uma maneira de obter e definir o valor de ID, Name, Notes e Done Boolean, para que possamos usar esses valores em todo o aplicativo.

Em sua Chores classe, adicione o seguinte código:

public class Chores {
    public int Id { get; set; }
    public string Name { get; set; }
    public string Notes { get; set; }
    public bool Done { get; set; }
  }

Em seguida, crie uma RootTableSource classe que herda do UITableViewSource.

A diferença entre essa e uma exibição de tabela que não seja do Storyboard é que o GetView método não precisa instanciar nenhuma célula – theDequeueReusableCell o método sempre retornará uma instância da célula protótipo (com identificador correspondente).

O código abaixo é do RootTableSource.cs arquivo:

public class RootTableSource : UITableViewSource
{
// there is NO database or storage of Tasks in this example, just an in-memory List<>
Chores[] tableItems;
string cellIdentifier = "taskcell"; // set in the Storyboard

    public RootTableSource(Chores[] items)
    {
        tableItems = items;
    }

public override nint RowsInSection(UITableView tableview, nint section)
{
  return tableItems.Length;
}

public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
{
  // in a Storyboard, Dequeue will ALWAYS return a cell, 
  var cell = tableView.DequeueReusableCell(cellIdentifier);
  // now set the properties as normal
  cell.TextLabel.Text = tableItems[indexPath.Row].Name;
  if (tableItems[indexPath.Row].Done)
    cell.Accessory = UITableViewCellAccessory.Checkmark;
  else
    cell.Accessory = UITableViewCellAccessory.None;
  return cell;
}
public Chores GetItem(int id)
{
  return tableItems[id];
}

Para usar a RootTableSource classe, crie uma nova coleção no ItemViewControllerconstrutor 's:

chores = new List<Chore> {
      new Chore {Name="Groceries", Notes="Buy bread, cheese, apples", Done=false},
      new Chore {Name="Devices", Notes="Buy Nexus, Galaxy, Droid", Done=false}
    };

Ao ViewWillAppear passar a coleção para a origem e atribuir à exibição de tabela:

public override void ViewWillAppear(bool animated)
{
    base.ViewWillAppear(animated);

    TableView.Source = new RootTableSource(chores.ToArray());
}

Se você executar o aplicativo agora, a tela principal agora carregará e exibirá uma lista de duas tarefas. Quando uma tarefa é tocada, a sequência definida pelo storyboard fará com que a tela de detalhes apareça, mas não exibirá nenhum dado no momento.

Para 'enviar um parâmetro' em um segue, substitua o PrepareForSegue método e defina propriedades no DestinationViewController (o TaskDetailViewController neste exemplo). A classe Destination View Controller terá sido instanciada, mas ainda não é exibida ao usuário – isso significa que você pode definir propriedades na classe, mas não modificar nenhum controle de interface do usuário:

public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
    {
      if (segue.Identifier == "TaskSegue") { // set in Storyboard
        var navctlr = segue.DestinationViewController as TaskDetailViewController;
        if (navctlr != null) {
          var source = TableView.Source as RootTableSource;
          var rowPath = TableView.IndexPathForSelectedRow;
          var item = source.GetItem(rowPath.Row);
          navctlr.SetTask (this, item); // to be defined on the TaskDetailViewController
        }
      }
    }

SetTask No TaskDetailViewController método atribui seus parâmetros a propriedades para que eles possam ser referenciados em ViewWillAppear. As propriedades de controle não podem ser modificadas porque SetTask podem não existir quando PrepareForSegue é chamado:

Chore currentTask {get;set;}
    public ItemViewController Delegate {get;set;} // will be used to Save, Delete later

public override void ViewWillAppear (bool animated)
    {
      base.ViewWillAppear (animated);
      TitleText.Text = currentTask.Name;
      NotesText.Text = currentTask.Notes;
      DoneSwitch.On = currentTask.Done;
    }

    // this will be called before the view is displayed
    public void SetTask (ItemViewController d, Chore task) {
      Delegate = d;
      currentTask = task;
    }

Agora, o monitor abrirá a tela de detalhes e exibirá as informações da tarefa selecionada. Infelizmente, não há implementação para os botões Salvar e Excluir . Antes de implementar os botões, adicione estes métodos ao ItemViewController.cs para atualizar os dados subjacentes e fechar a tela de detalhes:

public void SaveTask(Chores chore)
{
  var oldTask = chores.Find(t => t.Id == chore.Id);
        NavigationController.PopViewController(true);
}

public void DeleteTask(Chores chore)
{
  var oldTask = chores.Find(t => t.Id == chore.Id);
  chores.Remove(oldTask);
        NavigationController.PopViewController(true);
}

Em seguida, você precisará adicionar o manipulador de TouchUpInside eventos do botão ao ViewDidLoad método de TaskDetailViewController.cs. A Delegate referência de propriedade para o ItemViewController foi criada especificamente para que possamos chamar SaveTask e DeleteTask, que fecham esta exibição como parte de sua operação:

SaveButton.TouchUpInside += (sender, e) => {
        currentTask.Name = TitleText.Text;
        currentTask.Notes = NotesText.Text;
        currentTask.Done = DoneSwitch.On;
        Delegate.SaveTask(currentTask);
      };

DeleteButton.TouchUpInside += (sender, e) => Delegate.DeleteTask(currentTask);

A última funcionalidade restante a ser compilada é a criação de novas tarefas. Em ItemViewController.cs adicione um método que crie novas tarefas e abra o modo de exibição de detalhes. Para instanciar um modo de exibição de um storyboard, use o InstantiateViewController método com o Identifier para esse modo de exibição - neste exemplo que será 'detalhe':

public void CreateTask () 
    {
      // first, add the task to the underlying data
      var newId = chores[chores.Count - 1].Id + 1;
      var newChore = new Chore{Id = newId};
      chores.Add (newChore);

      // then open the detail view to edit it
      var detail = Storyboard.InstantiateViewController("detail") as TaskDetailViewController;
      detail.SetTask (this, newChore);
      NavigationController.PushViewController (detail, true);
    }

Finalmente, conecte o botão na barra de navegação no método de ViewDidLoad ItemViewController.cs para chamá-lo:

AddButton.Clicked += (sender, e) => CreateTask ();

Isso completa o exemplo do Storyboard – o aplicativo concluído tem a seguinte aparência:

O exemplo demonstra:

• Criando uma tabela com Conteúdo de Protótipo onde as células são definidas para reutilização para exibir listas de dados.
• Criando uma tabela com conteúdo estático para criar um formulário de entrada. Isso incluiu alterar o estilo da tabela e adicionar seções, células e controles de interface do usuário.
• Como criar um segue e substituir o PrepareForSegue método para notificar a exibição de destino de quaisquer parâmetros necessários.
• Carregando visualizações de storyboard diretamente com o Storyboard.InstantiateViewController método.

Links relacionados

• Introdução ao Storyboards