Size to content(ver. 2.6)

Традиционно, верстка в BitMobile производится "от контейнера к содержимому", когда в первую очередь производится расчет размера контейнера, а потом, на его основе, высчитывается положение и размер его содержимого. Данная система не позволяет отображать на экране компоненты переменной ширины или высоты, например TextView(ver. 2.7) с неизвестным количеством строк. Для решения данной проблемы введен дополнительный атрибут auto для стилей width и height(ver. 2.6).

Основы

Рассмотрим экран "Список сообщений":

<?xml version="1.0" encoding="utf-8" ?>
<c:Screen xmlns:c="BitMobile.Controls" xmlns:s="BitMobile.ValueStack"
	StyleSheet="main.css">
	<c:DockLayout CssClass="root">		
		<c:ScrollView>
			<s:Iterator Id="report" Value="$LoadReports()">
				<c:Button Text="report" CssClass="header" OnClickAction="OpenReport($report)"/>				
				<c:HorizontalLine />
			</s:Iterator>
		</c:ScrollView>
	</c:DockLayout>
</c:Screen>

 .header{
	width: 50%;
	height: 30%;
	font: 50dp arial;
	white-space: normal;	
}

Запустив приложение, вы увидите список TextView(ver. 2.7) с жестко заданным размером. В таком случае часть текст будет просто невозможно прочитать.

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

 .header{
	width: 50%;
	height: 30% auto;
	font: 50dp arial;	
	white-space: normal;
}

Теперь TextView(ver. 2.7) занимают площадь, необходимую для отображения всего текста.

Теперь, поменяем значение width:

 .header{
	width: 100%;
	height: 30% auto;
	font: 10dp arial;	
	white-space: normal;
}

Как видите, теперь сообщения занимают меньше места по высоте.

Контейнеры

Все контейнеры (HorizontalLayout(ver. 2.7), DockLayout(ver. 2.7), SwipeVerticalLayout(ver. 2.7) и т.д.) могут содержать "растягиваемые" элементы. Так же, каждый из них, кроме ScrollView(ver. 2.7) может сам "растягиваться" .

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

<?xml version="1.0" encoding="utf-8" ?>
<c:Screen xmlns:c="BitMobile.Controls" xmlns:s="BitMobile.ValueStack"
	StyleSheet="main.css">
	<c:DockLayout CssClass="root">
		<c:ScrollView>
			<s:Iterator Id="report" Value="$LoadReports()">
				<c:DockLayout CssClass="row">
					<c:Button Text="#open#" CssClass="action" OnClickAction="$OpenReport($report)" />
					<c:TextView Text="$report" CssClass="header" />
				</c:DockLayout>
				<c:HorizontalLine />
			</s:Iterator>
		</c:ScrollView>
	</c:DockLayout>
</c:Screen>

.row{
	width: 100%;
	height: 20% auto;	
}
.action{
	width: 0% auto;
	height: 0% auto;
	dock-align: right;
}
.header {
	width: 100%;
	height: 0% auto;
	font: 50dp arial;
	white-space: normal;
}

Для того, что бы расположить кнопку слева от текста, не зная заранее размеры, мы использует контейнер DockLayout(ver. 2.7), указывая для кнопки dock-align(ver. 2.7): right. Сам контейнер сделаем растягиваемым, но установим минимальную высоту 20% из соображений дизайна. Обратите внимание, в стиле header ширина задана как 100%. В этом случае компонент ужмется по доступной соответствующей области.

Swipe Layout

Компоненты SwipeHorizontalLayout(ver. 2.7) и SwipeVerticalLayout(ver. 2.7) растягиваются, пока не смогут занять всю допустимую область. Если места не остается, увеличивается область прокрутки.

Рассмотрим экран "Сообщение":

<?xml version="1.0" encoding="utf-8" ?>
<c:Screen xmlns:c="BitMobile.Controls" xmlns:s="BitMobile.ValueStack"
	StyleSheet="message.css">
	<s:Push Id="report" Value="$param1" />
	<c:DockLayout CssClass="root">
		<c:Button Text="#back#" OnClickAction="$DoBack()" />
		<c:SwipeVerticalLayout>
			<c:TextView Text="$report" CssClass="header" />
			<c:Button Text="#accept#" OnClick="$Accept($report)"/>
		</c:SwipeVerticalLayout>
	</c:DockLayout>
</c:Screen>

svl {
	height: 0% auto;
	width: 100%;
}
Button {
	height: 200dp;
	dock-align: bottom;
}
.header {
	width: 100%;
	height: 0% auto;
	font: 100dp arial;
	white-space: normal;
}

Текст отчета мы помещаем в SwipeVerticalLayout(ver. 2.7) для обеспечения возможности просмотра длинных сообщений. После просмотра сообщения необходимо подтвердить это, нажатием на кнопку accept. Логично, что, в случае длинного текста, данная кнопка должна располагаться в конце области прокрутки. Обратите внимание, в случае небольшого по объему текста, кнопка подтверждения видна сразу и располагается ближе к верху экрана, в то время как для большого текста данная кнопка изначально вообще не видна. В данном случае SwipeVerticalLayout(ver. 2.7), по умолчанию занимает минимальный размер и растягивается в соответствии с размерами его содержимого. Но большие сообщения больше области просмотра экрана, так что компонент начинает прокручиваться и кнопка подтверждения скрывается внизу.