Плитки и индикаторы событий

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

В следующем видеоролике значки в приложениях iOS сравниваются с живыми плитками в универсальных приложениях Windows.

На значках многих приложений iOS числа-индикаторы событий отображают сводную информацию или динамический статус, причем пользователю не требуется запускать приложение. iOS поддерживает отображение до четырех разных чисел: например, число непрочитанных сообщений в почтовом приложении, число публикаций в приложении социальных сетей, число невыполненных задач из списка запланированных. Часто числа в индикаторах событий обновляются в ответ на push-уведомления, но возможно также обновление локальными уведомлениями или из программного кода.

В Windows 8 приложение на начальном экране представляется плиткой, которая может быть статической (static) или живой (live).

  • На статической (static) плитке всегда отображается содержимое по умолчанию, определенное в манифесте приложения.
  • Живая (live) плитка обновляется из программного кода и наглядно демонстрирует актуальную информацию. Живые плитки могут передавать пользователю разнообразную содержательную информацию без необходимости запускать приложение. Подобно индикатору событий в iOS живая плитка может обновляться в ответ на push-уведомление, локальное уведомление или из программного кода.

Живые плитки универсальных приложений Windows

Плитка по умолчанию для приложения Магазина Windows определяется в файле манифеста приложения (Package.appxmanifest). Разработчик может выбрать, будет ли отображаться логотип приложения, его имя либо ни то, ни другое. См. Краткое руководство. Создание плитки по умолчанию с помощью редактора манифестов Microsoft Visual Studio. После установки приложения содержимое плитки может обновляться в реальном времени с помощью уведомлений. См. Краткое руководство. Отправка обновления плитки.

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

Живые плитки Windows 8

Сравнение чисел в индикаторах событий для приложений iOS и живых плиток для универсальных приложений Windows

На значках ваших приложений iOS для отображения динамической информации использовались индикаторы событий. Живая плитка выполняет те же функции, а также многие другие.

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

ДействияiOSWindows 8
Создайте значок или плитку для приложения. Добавьте один или несколько значков в пакет приложения. Определите файлы значков при помощи ключа CFBundleIconFiles в файлах info.plist. Задайте файлы значков в области пользовательского интерфейса приложения в файле манифеста приложения в Visual Studio. См. Краткое руководство. Создание плитки по умолчанию с помощью редактора манифестов Microsoft Visual Studio.
Определите имя приложения.Задайте значение ключа CFBundleDisplayName (отображаемое имя пакета) в файле info.plist.Задайте краткое имя приложения в области пользовательского интерфейса приложения в файле манифеста приложения в Visual Studio. См. Краткое руководство. Создание плитки по умолчанию с помощью редактора манифестов Microsoft Visual Studio.
Обновите индикатор событий на значке или плитке приложения.Установите свойство applicationIconBadgeNumber текущего класса UIApplication.Получите XML-код шаблона индикатора событий из класса BadgeUpdateManager. Задайте в элементе Badge значение глифа и обновите его с помощью класса BadgeUpdateManager. См. Краткое руководство. Отправка обновления индикатора событий.
Измените изображение значка или плитке.Не применимо.Получите XML-документ, представляющий шаблон плитки, с помощью класса TileUpdateManager. Задайте в элементе image шаблона новое изображение. Создайте новое уведомление TileNotification и обновите его с помощью TileUpdateManager. См. Краткое руководство. Отправка обновления плитки.
Измените сообщение уведомления на плитке.Не применимо.Получите XML-документ, представляющий шаблон плитки, с помощью класса TileUpdateManager. Задайте в элементе text шаблона новое сообщение. Создайте новое уведомление TileNotification и обновите его с помощью TileUpdateManager.

 

Образец приложения

Создайте приложение.

В этом примере приложение создается на основе шаблона C# "Пустое приложение".

  • Запустите Microsoft Visual Studio.
  • В меню Файл выберите команду Создать проект.
  • Если еще не выбрана категория Магазин Windows, разверните элементы Установлено > Шаблоны > Visual C# и выберите категорию Магазин Windows.
  • Если еще не выбран шаблон Пустое приложение (XAML), выберите его.
  • В полях Имя и Расположение введите имя приложения (например, AppTile) и расположение либо оставьте значения по умолчанию.
  • Нажмите кнопку ОК.

Определите плитку по умолчанию для приложения.

  • Подготовьте два изображения: одно размером 150 на 150 пикселей (logo.png), а второе — 30 на 30 пикселей (logo_small.png).
  • В окне обозревателя решений Visual Studio перетащите оба изображения в каталог "Активы".
  • Дважды щелкните файл Package.appmanifest в окне обозревателя решений, чтобы открыть его.
  • На вкладке Интерфейс приложения введите Assets\logo.png в текстовое поле Значок, а Assets\logo_small.png — в текстовое поле Мелкий значок.
  • В поле Короткое имя введите, например, Садовые цветы.
  • Выберите команду Отладка > Начать отладку, чтобы запустить приложение.

    Живая плитка в действии

Обновите индикатор событий на плитке.

  • Выберите команду Отладка > Остановить отладку, чтобы остановить приложение.
  • В Visual Studio в файле MainPage.xaml добавьте между открывающим тегом <GridViewGrid.Row="0" Grid.Column="0" …> и закрывающим тегом </GridView> следующий XAML-код:
    
    
                <TextBlock HorizontalAlignment="Left" Margin="256,219,0,0" TextWrapping="Wrap"                        
    Text="This a simple app that shows you how to use Live Tile in Windows 8. Click below to update the tile." FontSize="30" VerticalAlignment="Top" Height="201" Width="851" />
                <Button Content="Update the tile" HorizontalAlignment="Left" Margin="256,425,0,0" VerticalAlignment="Top" Height="59" Width="194" FontSize="24" Click="UpdateTile_Click"/>
                <Button Content="Update the badge" HorizontalAlignment="Left" Margin="523,425,0,0" VerticalAlignment="Top" Height="59" Width="245" FontSize="24" Click="UpdateBadge_Click"/>
    
    
    
    

    В Visual Studio в файле MainPage.xaml.cs добавьте в класс MainPage следующий код:

    
           private void UpdateBadge_Click(object sender, RoutedEventArgs e)
            {
                XmlDocument badgeXml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);
                //Assign a value to badge
                XmlElement badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge");
                badgeElement.SetAttribute("value", "1");
                // Create the badge notification and send it to the badge.
                BadgeNotification badge = new BadgeNotification(badgeXml);
                BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);
            }
    private void UpdateTile_Click(object sender, RoutedEventArgs e)
            {
            }
    
    
    

    Добавьте следующий код в начало файла:

    
    using Windows.Data.Xml.Dom;
    using Windows.UI.Notifications;
    
    

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

    Живая плитка в действии

    Перейдите к начальному экрану. На плитке должна обновиться цифра индикатора событий (1):

    Живая плитка в действии

4. Измените изображение плитки и сообщение уведомления.

  • Выберите команду Отладка > Остановить отладку, чтобы остановить приложение.
  • Перетащите другое изображение размером 150 на 150 пикселей (Strelitzia.png) в папку "Активы" в обозревателе решений.
  • В Visual Studio в файле MainPage.xaml.cs замените метод UpdateTile_Click следующим кодом:
    
            private void UpdateLiveTile()
            {
                //Template for tile and retrieve its XML contents
                XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText03);
                XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
                tileTextAttributes[0].InnerText = "Strelitzia";
                tileTextAttributes[1].InnerText = "growing";
                tileTextAttributes[2].InnerText = "in my garden";
                //Add an image for notification
                XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
                ((XmlElement)tileImageAttributes[0]).SetAttribute("src", "Assets\\Strelitzia.png");
                ((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "Strelitzia");
                //Create the notification based on the XML content 
                TileNotification tileNotification = new TileNotification(tileXml);
                // Send the notification to the app tile
                TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
            }
    
    
    

    Для плитки мы используем шаблон TileSquarePeekImageAndText03. Можно выбрать разные шаблоны в зависимости от приложения и типа состояния, которое вы хотите показывать пользователю. (См. раздел Каталог шаблонов плиток.) Этот шаблон состоит из квадратной плитки с изображением без текста и текста из четырех строчек, который прокручивается вверх и вниз.

    Мы берем текстовый элемент из XML-кода шаблона и задаем его значение тремя строками, как показано выше. Также берем элемент изображения из XML-кода шаблона и задаем в атрибуте src файл Assets\Strelitzia.png. В атрибуте alt задаем текст Strelitzia.

    Затем создаем новый объект TileNotification и обновляем плитку с помощью класса TileUpdateManager. Также добавляем две строки в конструктор MainPage в файле MainPage.xaml.cs, как показано далее.

    
            public MainPage()
            {
                this.InitializeComponent();
                BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear();
                TileUpdateManager.CreateTileUpdaterForApplication().Clear();
            }
    
    
    

    Эти две строки очищают индикатор событий и уведомления во время повторных запусков приложения.

    Выберите команду Отладка > Начать отладку, чтобы снова запустить приложение. Нажмите кнопку Обновить плитку в приложении.

    Перейдите к начальному экрану. Плитка должна обновиться.

    Живая плитка в действии

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

Связанные разделы

Разделы для разработчиков iOS
Ресурсы для разработчиков iOS
Элементы управления Windows 8 для разработчиков iOS
Справочник по Windows 8 для разработчиков iOS
Разделы о плитках и индикаторах событий
Плитки, индикаторы событий и уведомления
Каталог шаблонов плиток
Краткое руководство. Отправка обновления плитки
Руководство и контрольный список по плиткам и индикаторам событий
Краткое руководство. Отправка обновления индикатора событий

 

 

Показ:
© 2015 Microsoft