TableView – это представление для отображения прокручиваемых списков данных или вариантов выбора, в которых есть строки, не имеющие общего шаблона. В отличие от ListView, в TableView отсутствует концепция ItemsSource, поэтому элементы должны быть добавлены в качестве дочерних вручную.
Примеры использования
TableView полезен при:
- представлении списка параметров;
- сбора данных в форме, или
- отображения данных, которые представляются по-разному от строки к строке (например, числа, проценты и изображения).
TableView справляется с прокруткой и выстраиванием строк в привлекательные секции, что часто требуется в описанных выше сценариях. Элемент управления TableView использует эквивалентное представление каждой платформы, когда оно доступно, создавая собственный вид для каждой платформы.
Структура
Элементы в TableView организованы в секции. В корне TableView находится TableRoot, который является родительским для одного или нескольких экземпляров TableSection. Каждый раздел TableSection состоит из заголовка и одной или нескольких ячеек ViewCell:
<TableView Intent="Settings"> <TableRoot> <TableSection Title="Ring"> <SwitchCell Text="New Voice Mail" /> <SwitchCell Text="New Mail" On="true" /> </TableSection> </TableRoot> </TableView>
Эквивалентный код на языке C# имеет вид:
Content = new TableView
{
Root = new TableRoot
{
new TableSection("Ring")
{
// TableSection constructor takes title as an optional parameter
new SwitchCell { Text = "New Voice Mail" },
new SwitchCell { Text = "New Mail", On = true }
}
},
Intent = TableIntent.Settings
};
Внешний вид
TableView раскрывает свойство Intent, которое может быть установлено в любой из членов перечисления TableIntent:
- Data – для использования при отображении записей с данными. Обратите внимание, что ListView может быть лучшим вариантом для прокручиваемых списков данных.
- Form – используется, когда TableView выступает в роли формы.
- Menu – для использования при представлении меню выбора.
- Settings – для отображения списка настроек конфигурации.
Выбранное значение TableIntent может повлиять на отображение TableView на каждой платформе. Даже если различия не очевидны, лучше всего выбрать значение TableIntent, которое наиболее точно соответствует тому, как вы собираетесь использовать таблицу.
Кроме того, цвет текста, отображаемого для каждого раздела таблицы, можно изменить, установив свойство TextColor в значение Color.
Встроенные ячейки
Xamarin.Forms поставляется со встроенными ячейками для сбора и отображения информации. Хотя ListView и TableView могут использовать все те же ячейки, SwitchCell и EntryCell наиболее актуальны для сценария TableView.
SwitchCell
SwitchCell – это элемент управления, который используется для представления и фиксации состояния «включено/выключено» или «истина/ложь». Он определяет следующие свойства:
- Текст – текст, отображаемый рядом с переключателем.
- On – отображается ли переключатель как включенный или выключенный.
- OnColor – цвет переключателя, когда он находится во включенном положении.
Все эти свойства являются привязываемыми.
SwitchCell также открывает событие OnChanged, позволяющее реагировать на изменения состояния ячейки.
EntryCell
EntryCell полезен в тех случаях, когда необходимо отобразить текстовые данные, которые пользователь может редактировать. Она определяет следующие свойства:
- Keyboard – клавиатура, которая будет отображаться при редактировании. Имеются опции для таких параметров, как числовые значения, электронная почта, номера телефонов и т.д. См. документацию по API.
- Label – текст метки, отображаемый слева от поля ввода текста.
- LabelColor – цвет текста метки.
- Placeholder – текст, отображаемый в поле ввода, если оно не заполнено или пусто. Этот текст исчезает, когда начинается ввод текста.
- Text – текст в поле ввода.
- HorizontalTextAlignment – выравнивание текста по горизонтали. Значения: по центру, слева или справа.
- VerticalTextAlignment – выравнивание текста по вертикали. Значения: начало, центр или конец.
EntryCell также раскрывает событие Completed, которое вызывается, когда пользователь нажимает кнопку «Готово» на клавиатуре во время редактирования текста.
Пользовательские ячейки
Когда встроенных ячеек недостаточно, можно использовать пользовательские ячейки для представления и сбора данных в том виде, который удобен для вашего приложения. Например, вы можете представить ползунок, позволяющий пользователю выбирать степень непрозрачности изображения.
Все пользовательские ячейки должны быть производными от ViewCell, того же базового класса, который используют все встроенные типы ячеек.
Это пример пользовательской ячейки:
В следующем примере показан XAML, используемый для создания TableView на скриншотах выше:
<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="DemoTableView.TablePage" Title="TableView"> <TableView Intent="Settings"> <TableRoot> <TableSection Title="Getting Started"> <ViewCell> <StackLayout Orientation="Horizontal"> <Image Source="bulb.png" /> <Label Text="left" TextColor="#f35e20" /> <Label Text="right" HorizontalOptions="EndAndExpand" TextColor="#503026" /> </StackLayout> </ViewCell> </TableSection> </TableRoot> </TableView> </ContentPage>
Эквивалентный код на языке C# имеет вид:
var table = new TableView();
table.Intent = TableIntent.Settings;
var layout = new StackLayout() { Orientation = StackOrientation.Horizontal };
layout.Children.Add (new Image() { Source = "bulb.png"});
layout.Children.Add (new Label()
{
Text = "left",
TextColor = Color.FromHex("#f35e20"),
VerticalOptions = LayoutOptions.Center
});
layout.Children.Add (new Label ()
{
Text = "right",
TextColor = Color.FromHex ("#503026"),
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.EndAndExpand
});
table.Root = new TableRoot ()
{
new TableSection("Getting Started")
{
new ViewCell() {View = layout}
}
};
Content = table;
Корневым элементом TableView является TableRoot, а непосредственно под TableRoot располагается TableSection. ViewCell определяется непосредственно под TableSection, а для управления расположением пользовательской ячейки используется StackLayout, хотя здесь может быть использован любой макет.
Примечание. В отличие от ListView, TableView не требует, чтобы пользовательские (или любые) ячейки были определены в шаблоне ItemTemplate.
Высота строки
Класс TableView имеет два свойства, которые могут быть использованы для изменения высоты строк ячеек:
- RowHeight – задает высоту каждой строки в виде int.
- HasUnevenRows – при установке значения true строки имеют разную высоту. Обратите внимание, что при установке этого свойства в true высота строк будет автоматически рассчитана и применена Xamarin.Forms.
При изменении высоты содержимого ячейки в TableView высота строки неявно обновляется на Android и Universal Windows Platform (UWP). Однако на iOS ее необходимо принудительно обновить, установив свойство HasUnevenRows в true и вызвав метод Cell.ForceUpdateSize.
В следующем примере XAML показан TableView, содержащий ячейку ViewCell:
<ContentPage ...> <TableView ... HasUnevenRows="true"> <TableRoot> ... <TableSection ...> ... <ViewCell x:Name="_viewCell" Tapped="OnViewCellTapped"> <Grid Margin="15,0"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Label Text="Tap this cell." /> <Label x:Name="_target" Grid.Row="1" Text="The cell has changed size." IsVisible="false" /> </Grid> </ViewCell> </TableSection> </TableRoot> </TableView> </ContentPage>
При нажатии на ячейку ViewCell выполняется обработчик события OnViewCellTapped:
void OnViewCellTapped(object sender, EventArgs e)
{
_target.IsVisible = !_target.IsVisible;
_viewCell.ForceUpdateSize();
}
Обработчик события OnViewCellTapped показывает или скрывает вторую метку в ячейке ViewCell, а также явно обновляет размер ячейки, вызывая метод Cell.ForceUpdateSize.
На следующих скриншотах показана ячейка до нажатия на нее:
На следующих скриншотах показана ячейка после нажатия на нее:
Важно. При чрезмерном использовании этой функции существует большая вероятность снижения производительности.