Работа с таблицами в конструкторе 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. Выполните следующие действия:
Выберите панель в нижней части контроллера представления и удалите ее.
Перетащите контроллер навигации и контроллер представления таблицы на раскадровку с панели элементов.
Создайте переход с корневого контроллера представления на второй контроллер представления таблицы, который был только что добавлен. Чтобы создать segue, Control+drag from the Detail cell to the new added UITableViewController. Выберите параметр "Показать" в разделе "Выбор segue".
Выберите созданную segue и присвойте ему идентификатор для ссылки на этот сеге в коде. Щелкните продолжение и введите
TaskSegueидентификатор на панели свойств, как показано ниже.
Затем настройте два представления таблиц, выбрав их и используя панель свойств. Не забудьте выбрать представление и не контроллер представления. Для выбора можно использовать структуру документа.
Измените корневой контроллер представления на содержимое: динамические прототипы (представление на поверхности конструктора будет помечено содержимое прототипа):
Измените новый UITableViewController на содержимое: статические ячейки.
Новый UITableViewController должен иметь его имя класса и набор идентификаторов. Выберите контроллер представления и введите TaskDetailViewController для класса на панели свойств. Это создаст новый
TaskDetailViewController.csфайл на панели решения. Введите раскадровку как подробные сведения, как показано в приведенном ниже примере. Это будет использоваться позже для загрузки этого представления в коде C#:
Теперь область конструктора раскадровки должна выглядеть следующим образом (название элемента навигации корневого контроллера представления изменено на "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раскадровки непосредственно с помощью метода.