День четвертый. Какая у вас ориентация?

Вступление

Пора поговорить о вашей ориентации. Если вы, разговария по телефону, держите его правой рукой, то вы ... обычный пользователь, который держит телефон в портретной ориентации (вертикально). Если вы смотрите на устройстве фотографии, то удобнее его развернуть горизонтально - это уже альбомная ориентация. О том, как в программах для Windows Phone 7 управлять обеими ориентациями, и будет посвящена сегодняшняя статья.

Ориентация

Вам необходимо запомнить, что существуют два положения экрана. Вертикальное расположение называется портретным (Portrait), а горизонтальное - альбомным (Landscape). По умолчанию, приложения на Silverlight запускаются в портретном режиме, а XNA-приложения запускаются в альбомном, так как игры лучше смотрятся именно в этом режиме (посмотрите на ваш монитор). Но вы можете управлять режимами исходя из ваших задач. Жесткой привязки к ориентации нет. Более того, часто необходимо поддерживать два режима одновременно.

Рекомендация по проектированию интерфейса

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

Существуют различные способы гарантировать правильное отображение содержимого как в портретной, так и в альбомной ориентации. Два основных метода — это прокрутка (scrolling) и сетка (grid layout). Эти методы могут использоваться отдельно или в сочетании друг с другом.

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

Управление ориентацией экрана в Silverlight

Если вы откроете предыдущие примеры на Silverlight и повернете устройство набок, то обнаружите, что изображение на экране не изменило свое расположение при смене ориентации. Это легко исправить. Посмотрите код в файле MainPage.xaml и найдите строчку:

SupportedOrientations="Portrait" Orientation="Portrait"

Данный код говорит о том, что проект поддерживает только портретный режим и в этом же режиме и запускается. Свойство SupportedOrientations поддерживает следующие режимы:

  • Portrait (по умолчанию)
  • Landscape
  • PortraitOrLandscape
Режимы ориентации

Достаточно заменить указанную выше строчку на SupportedOrientations="PortraitOrLandscape", и ваше приложение будет реагировать на смену режима автоматически.

Вероятно вы уже догадались, что свойство Orientation отвечает за начальный режим во время запуска приложения. Только вы не должны забывать о поддержке выбранного режима. Иными словами, если вы хотите, чтобы приложение запускалось в альбомном режиме, то у свойства SupportedOrientation должно быть значение Landscape или PortraitOrLandscape. Возможно, вас удивит, что свойство поддерживает целых шесть различных значений.

  • Landscape
  • LandscapeLeft
  • LandscapeRight
  • Portrait
  • PortraitDown
  • PortraitUp

Используя эти значения, вы можете даже задать портретный режим вверх тормашками (PortraitUp). PortraitDown - это обычный портретный режим, а Portrait - общее свойство для двух портретных режимов, когда уточнение не требуется. Аналогично справедливо и для альбомных режимов.

События изменения ориентации

Итак, вы можете настроить ориентацию экрана еще во время разработчки дизайна приложения через свойство SupportedOrientation. В этом случае система сама позаботится о нужном режиме. Тут нужно проявить аккуратность. Как правило, разработчик не препятствует пользователю вращать устройством во время работы с приложением. Но здесь может возникнуть одна небольшая неприятность. Взгляните на рисунки ниже. Предположим, вы написали программу-калькулятор, который красисо смотрится в портретном режиме. Вы ввели поддержку альбомного режима, и пользователь развернул телефон горизонтально. Как видите, нижняя часть интерфейса программы стала невидимой, уйдя за пределы экрана.

Два режимаДва режима

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


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Day4_DeviceOrientation
{
	public partial class MainPage : PhoneApplicationPage
	{
		// Constructor
		public MainPage()
		{
			InitializeComponent();
			this.OrientationChanged += 
			    new EventHandler<OrientationChangedEventArgs>(MainPage_OrientationChanged);
		}

		void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
		{
			if ((e.Orientation == PageOrientation.LandscapeRight)||(e.Orientation == PageOrientation.LandscapeLeft))
			{
				TitlePanel.Visibility = Visibility.Collapsed; // скрываем
			}
			else if ((e.Orientation == PageOrientation.PortraitDown) || (e.Orientation == PageOrientation.PortraitUp))
			{
				TitlePanel.Visibility = Visibility.Visible; // показываем
			}
		}
	}
}

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

Поддержка ориентации

Однако вернемся к ориентации. Итак, чтобы узнать текущее состояние ориентации, нам нужно использовать в обработчике события OrientationChanged перечисление Orientation:


private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
    MessageBox.Show(this.Orientation.ToString());
}
Режимы ориентации
Реклама