Бөлісу құралы:

Работа с таблицами в конструкторе iOS

Раскадровки — это способ создания приложений iOS и поддерживается в Visual Studio в Mac и Windows. Дополнительные сведения о раскадровки см. в документе "Введение в раскадровки ". Раскадровки также позволяют изменять макеты ячеек в таблице, что упрощает разработку с помощью таблиц и ячеек.

При настройке свойств представления таблицы в конструкторе iOS можно выбрать два типа содержимого ячейки: динамическое или статичное содержимое прототипа.

Содержимое динамического прототипа

Содержимое UITableView прототипа обычно предназначено для отображения списка данных, в которых прототип ячейки (или ячейки, как можно определить несколько) повторно используются для каждого элемента в списке. Ячейки не нужно создавать экземпляры, они получаются в методе GetView путем вызова DequeueReusableCell метода его UITableViewSource.

Статическое содержимое

UITableViews со статическим содержимым позволяет создавать таблицы прямо на поверхности конструктора. Ячейки можно перетаскивать в таблицу и настраивать, изменяя свойства и добавляя элементы управления.

Создание приложения на основе раскадровки

Пример Раскадровки содержит простое приложение master-detail, которое использует оба типа UITableView в раскадровки. Оставшаяся часть этого раздела описывает, как создать небольшой пример списка действий, который будет выглядеть следующим образом при завершении:

Примеры экранов

Пользовательский интерфейс будет создан с раскадровкой, и оба экрана будут использовать UITableView. Основной экран использует прототип содержимого для макета строки, а экран сведений использует статическое содержимое для создания формы ввода данных с помощью пользовательских макетов ячеек.

Пошаговое руководство

Создание решения в Visual Studio с помощью нового проекта ... > Приложение с одним представлением (C#) и вызовите его storyboardTables.

Диалоговое окно создания проекта

Решение откроется с некоторыми файлами C# и файлом, уже созданным Main.storyboard . Дважды щелкните Main.storyboard файл, чтобы открыть его в конструкторе iOS.

Изменение раскадровки

Раскадровка будет изменена в трех шагах:

  • Во-первых, встройте необходимые контроллеры представления и задайте их свойства.
  • Во-вторых, создайте пользовательский интерфейс, перетаскивая объекты в представление
  • Наконец, добавьте требуемый класс UIKit в каждое представление и присвойте различным элементам управления имя, чтобы на них можно было ссылаться в коде.

После завершения раскадровки можно добавить код, чтобы сделать все работает.

Макет контроллеров представления

Первое изменение раскадровки — удаление существующего представления сведений и замена его uiTableViewController. Выполните следующие действия:

  1. Выберите панель в нижней части контроллера представления и удалите ее.

  2. Перетащите контроллер навигации и контроллер представления таблицы на раскадровку с панели элементов.

  3. Создайте переход с корневого контроллера представления на второй контроллер представления таблицы, который был только что добавлен. Чтобы создать segue, Control+drag from the Detail cell to the new added UITableViewController. Выберите параметр "Показать" в разделе "Выбор segue".

  4. Выберите созданную segue и присвойте ему идентификатор для ссылки на этот сеге в коде. Щелкните продолжение и введите TaskSegue идентификатор на панели свойств, как показано ниже.
    Именование последовательности в панели свойств

  5. Затем настройте два представления таблиц, выбрав их и используя панель свойств. Не забудьте выбрать представление и не контроллер представления. Для выбора можно использовать структуру документа.

  6. Измените корневой контроллер представления на содержимое: динамические прототипы (представление на поверхности конструктора будет помечено содержимое прототипа):

    Задание свойства Content динамическим прототипам

  7. Измените новый UITableViewController на содержимое: статические ячейки.

  8. Новый UITableViewController должен иметь его имя класса и набор идентификаторов. Выберите контроллер представления и введите TaskDetailViewController для класса на панели свойств. Это создаст новый TaskDetailViewController.cs файл на панели решения. Введите раскадровку как подробные сведения, как показано в приведенном ниже примере. Это будет использоваться позже для загрузки этого представления в коде C#:

    Настройка идентификатора раскадровки

  9. Теперь область конструктора раскадровки должна выглядеть следующим образом (название элемента навигации корневого контроллера представления изменено на "Chore Board"):

    Область конструктора

Создание пользовательского интерфейса

Теперь, когда настроены представления и последовательности, необходимо добавить элементы пользовательского интерфейса.

Корневой контроллер представления

Сначала выберите ячейку прототипа в контроллере главного представления и задайте идентификатор как taskcell, как показано ниже. Это будет использоваться позже в коде для получения экземпляра этого UITableViewCell:

задание идентификатора ячейки

Затем необходимо создать кнопку, которая добавит новые задачи, как показано ниже:

Элемент кнопки панели навигации

Выполните следующие действия.

  • Перетащите элемент кнопки "Панель" из панели элементов в правую сторону панели навигации.
  • На панели свойств в разделе "Элемент кнопки панели" выберите идентификатор: добавьте (чтобы сделать его кнопкой + "плюс").
  • Присвойте ему имя, чтобы его можно было определить в коде на более позднем этапе. Обратите внимание, что необходимо предоставить контроллеру корневого представления имя класса (например , ItemViewController), чтобы можно было задать имя элемента кнопки "Панель".

Контроллер представления TaskDetail

Представление сведений требует гораздо больше работы. Ячейки представления таблицы необходимо перетащить в представление, а затем заполнить метками, текстовыми представлениями и кнопками. На снимках экрана ниже показан готовый пользовательский интерфейс с двумя разделами. Один раздел содержит три ячейки, три метки, два текстовых поля и один переключатель, а второй раздел имеет одну ячейку с двумя кнопками:

Макет представления сведений

Ниже приведены действия по созданию полного макета:

Выберите представление таблицы и откройте панель свойств. Обновите следующие свойства:

  • Разделы: 2
  • Стиль: сгруппировано
  • Разделитель: Нет
  • Выбор: нет выделения

Выберите верхний раздел и в разделе "Представление таблицы свойств>" измените строки на 3, как показано ниже:

Установка верхнего раздела на три строки

Для каждой ячейки откройте панель свойств и задайте:

  • Стиль: настраиваемый
  • Идентификатор: выберите уникальный идентификатор для каждой ячейки (например. "title", "notes", "done").
  • Перетащите необходимые элементы управления для создания макета, показанного на снимке экрана (поместите UILabel, UITextField и UISwitch на правильные ячейки и задайте метки соответствующим образом. Заголовок, заметки и готово).

Во втором разделе задайте для строк значение 1 и захватить дескриптор нижнего размера ячейки, чтобы сделать его более высоким.

  • Задайте идентификатор: для уникального значения (например. "Сохранить").

  • Задайте фон: очистить цвет .

  • Перетащите две кнопки в ячейку и задайте их заголовки соответствующим образом (т. е. сохранить и удалить), как показано ниже:

    Установка двух кнопок в нижнем разделе

На этом этапе также может потребоваться задать ограничения для ячеек и элементов управления, чтобы обеспечить адаптивный макет.

Добавление элементов управления "Класс UIKit" и "Именование"

Существует несколько заключительных шагов по созданию раскадровки. Сначала мы должны предоставить каждому из элементов управления имя в разделе "Имя удостоверения">, чтобы они могли использоваться в коде позже. Присвойте этому имени следующее:

  • Title UITextField : TitleText
  • Notes UITextField : NotesText
  • UISwitch : DoneSwitch
  • Delete UIButton : DeleteButton
  • Сохранение UIButton : SaveButton

Добавление кода

Оставшаяся часть работы будет выполнена в Visual Studio на Mac или Windows с помощью C#. Обратите внимание, что имена свойств, используемые в коде, отражают эти наборы в приведенном выше пошаговом руководстве.

Сначала мы хотим создать Chores класс, который предоставит способ получения и задания значения идентификатора, имени, примечаний и логического значения, чтобы мы могли использовать эти значения во всем приложении.

Chores В классе добавьте следующий код:

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

Затем создайте класс, наследующий RootTableSource от UITableViewSource.

Разница между этим и представлением таблицы, отличной от раскадровки, заключается в том, что GetView методу не нужно создавать экземпляры ячеек. theDequeueReusableCell Метод всегда возвращает экземпляр ячейки прототипа (с соответствующим идентификатором).

Приведенный RootTableSource.cs ниже код находится в файле:

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];
}

Чтобы использовать RootTableSource класс, создайте новую коллекцию в конструкторе ItemViewController:

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}
    };

Передайте ViewWillAppear коллекцию в источник и назначьте представлению таблицы:

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

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

Если вы запускаете приложение сейчас, основной экран будет загружаться и отображать список двух задач. Когда задача коснулась последовательности, определенной раскадровкой, отобразится экран сведений, но в данный момент не будет отображаться никаких данных.

Чтобы отправить параметр в последовательном режиме, переопределите PrepareForSegue метод и задайте свойства ( DestinationViewController в TaskDetailViewController этом примере). Класс контроллера представления назначения будет создан, но еще не отображается пользователю. Это означает, что вы можете задать свойства для класса, но не изменять элементы управления пользовательским интерфейсом:

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
        }
      }
    }

В TaskDetailViewController методе SetTask присваиваются его параметры свойствам, чтобы их можно было ссылаться в ViewWillAppear. Свойства элемента управления не могут быть изменены, SetTask так как могут существовать, когда PrepareForSegue вызывается:

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;
    }

Теперь в segue откроется экран сведений и отображаются выбранные сведения о задаче. К сожалению, нет реализации кнопок "Сохранить и удалить ". Перед реализацией кнопок добавьте эти методы для ItemViewController.cs, чтобы обновить базовые данные и закрыть экран сведений:

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);
}

Затем необходимо добавить обработчик событий кнопки TouchUpInside в ViewDidLoad метод TaskDetailViewController.cs. Ссылка Delegate на ItemViewController свойство была создана специально, чтобы мы могли вызывать SaveTask и DeleteTaskзакрывать это представление как часть своей операции:

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);

Последний оставшийся элемент функциональности для сборки — создание новых задач. В ItemViewController.cs добавьте метод, который создает новые задачи и открывает представление сведений. Чтобы создать экземпляр представления из раскадровки, используйте InstantiateViewController метод с Identifier этим представлением в этом примере, который будет иметь значение "подробности":

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);
    }

Наконец, подключите кнопку в панели навигации в методе ItemViewController.csViewDidLoad, чтобы вызвать его:

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

После завершения примера раскадровки готовое приложение выглядит следующим образом:

Готовое приложение

В примере показано:

  • Создание таблицы с содержимым прототипа, в которой ячейки определены для повторного использования для отображения списков данных.
  • Создание таблицы со статическим содержимым для создания входной формы. Это включало изменение стиля таблицы и добавление разделов, ячеек и элементов управления пользовательского интерфейса.
  • Как создать segue и переопределить PrepareForSegue метод, чтобы уведомить целевое представление о любых необходимых параметрах.
  • Загрузка представлений Storyboard.InstantiateViewController раскадровки непосредственно с помощью метода.
  • Last updated on