Формирование ячеек строки tableRow5

Добавьте компонент TextView, EditText, другой компонент TextView и еще один компонент EditText в tableRow5, выполнив следующие действия:

1. Перетащите компонент TextView (tipCustomTextView) на tableRow5 в окне Component Tree.

2. Перетащите компонент EditText (tipCustomEditText) на tableRow5 в окне Component Tree.

3. Перетащите компонент TextView (totalCustomTextView) на tableRow5 в окне Component Tree.

4. Перетащите компонент Plain Text (totalCustomEditText) на tableRow5 в окне Component Tree.

5. Установите значения свойств id и Text для каждого компонента.

Настройка элементов графического интерфейса

После выполнения всех выше описанных действий графический интерфейс приложения должен выглядеть примерно так, как показано на рис. 4.

Рисунок 4. Графический интерфейс пользователя Tip Calculator перед настройкой свойств, других чем свойства id и text, для каждого компонента

При сравнении этого рисунка с рисунками 2 и 3 заметны следующие различия:

1. Компоненты billEditText и customSeekBar еще не охватывают несколько столбцов.

2. Текст для всех компонентов TextView отображается светло-серым цветом, что затрудняет его чтение.

3. Некоторые из компонентов не «попадают» в свой столбец. Например, компоненты TextView, имеющие заголовки 10%, 15% и 20%, не находятся в столбцах 2 - 4, а компонент TextView с заголовком 18% — в столбце 3. Последний компонент автоматически «попадет» в свой столбец, если объект customSeekBar будет охватывать два столбца.

4. Большая часть текста на рис. 2 выровнена по центру или по правому краю, а текст на рис. 4 выровнен по левому краю.

Изменение свойства textColor

В окне Component Tree можно одновременно выбрать несколько компонентов. Для этого нужно щелкать на каждом компоненте при нажатой клавише Ctrl. После завершения выделения в окне Properties отобразятся только общие свойства для выделенных компонентов. При изменении значения свойства для нескольких выделенных компонентов значение свойства изменится для каждого выделенного компонента. Чтобы улучшить читаемость текста для компонентов TextView, измените цвет текста на черный.

Для этого нужно одновременно изменить свойство Text Color для всех компонентов TextView, выполнив следующие действия:

1. Удерживая клавишу Ctrl, щелкайте на каждом компоненте TextView для его выделения.

2. В окне Properties найдите свойство textColor и присвойте ему значение #000.

Перемещение компонентов в требуемые столбцы

Как показано на рис. 2, заголовки столбцов 10%, 15% и 20% находятся во втором, третьем и четвертом столбцах соответственно. По умолчанию при добавлении компонентов в TableRow первый компонент помещается в первый столбец, второй компонент — во второй столбец и т. д. Чтобы переместить компонент в другой столбец, укажите номер столбца компонента.

Для этого нужно в окне Component Tree выделить компонент tenTextView и в окне свойств присвоить свойству layout:column значение 1.

То же самое можно сделать с помощью XML-разметки:

1. Чтобы перейти к просмотру XML-разметки, выберите в окне представления вкладку Text.

2. Выберите элемент <TextView>с атрибутом android:id, имеющим значение "@+id/tenTextView".

3. Имея ввиду, что нумерация столбцов в коде XML начинается с 0, в открывающий XML-тег компонента TextView добавьте следующую пару «атрибут/значение»:

android:layout_column="1"

В результате выполнения этой операции компонент TextView с заголовком 10% переместится во второй столбец. При этом остальные компоненты строки автоматически переместятся в последующие столбцы. Если нужно пропустить другие столбцы, установите значение свойства layout:column для каждого компонента в строке таким образом, чтобы определить каждый столбец, в котором будет отображаться компонент.