Создание проекта, добавление макета TableLayout

1. Создайте новый проект с именем TipCalculator.

2. В автоматически созданном проекте с помощью окна Component Tree удалите текстовый элемент TextView. Для этого его нужно выделить с помощью правой кнопки мыши, а затем в контекстном меню выполните команду Delete.

3. Затем в окне представления переключитесь на вкладку Text и в файле XML активности замените префикс “Relative” в имени тегов <RelativeLayout> и </RelativeLayout> на префикс “Table”, чтобы в конечном итоге заменить в активности относительный контейнер RelativeLayout на табличный контейнер TableLayout.

Конфигурирование параметров объекта TableLayout

В окне представления переключитесь на вкладку Design, а затем в окне Component Tree выберите узел TableLayout, если он еще не выбран. В окне Properties требуется установить, значения следующих свойств:

id: @+id/tableLayout

background: #FFF

По умолчанию свойствам layout:width и layout:height присвоено значение match_parent, в результате чего макет занимает весь экран. Свойствам padding➤left, top, right и bottom с помощью констант в окне ресурсов (папка Dimensions) уже присвоены значения 16dp, в результате чего вдоль границы всего макета создается кайма шириной в 16 независимых от плотности пикселей.

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

На этом шаге с помощью окна Component Tree добавим шесть макетов TableRow в объект tableLayout. Выполните следующие действия:

1. В списке Layouts, находящемуся в панели Pallete левой части окна представления, зацепите мышкой контейнер TableRow, перетащите его в окно Component Tree на строку с контейнером TableLayout и, как только она подсветиться, отпустите левую клавишу мышки. В результате макет - контейнер TableRow будет помещен в макет - контейнер TableLayout в качестве очередной (или начальной) строки таблицы. Выделите добавленную строку и в окне Properties присвойте свойству id значение tableRow0.

2. Повторите этот процесс еще пять раз, поочередно присваивая свойству id значения tableRow1, tableRow2, tableRow3, tableRow4 и tableRow5.

Свойству id для каждого TableRow автоматически присваиваются значения от tableRow1 до tableRow6 соответственно. Поскольку нумерация строк начинается с 0, соответствующим образом лучше изменить и значения свойств id для TableRow, которые должны получить значения от tableRow0 до tableRow5 соответственно.

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

В строку 0 нужно включить компоненты Plain TextView и Plain Text:

1. Перетащите текстовое поле Plain TextView (billTextView) из раздела Widgets в панели Pallete на контейнер tableRow0, находящийся в окне Component Tree.

2. Перетащите поле редактирования текста Plain Text (billEditText) из раздела Text Fields палитры на tableRow0, находящийся в окне Component Tree.

3. Присвойте значения свойствам id и text для каждого компонента в соответствии надписями и текстами на рис. 3. 18%

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

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

1. Перетащите компонент TextView (tenTextView) на объект tableRow1, находящийся в окне Component Tree.

2. Повторите этот процесс, добавив компоненты fifteenTextView и twentyTextView.

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

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

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

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

2. Перетащите три компонента Plain Text (tip10EditText, tip15EditText и tip20EditText) на tableRow2 в окне Component Tree.

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

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

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

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

2. Перетащите три компонента EditText (total10EditText, total15EditText и total20EditText) на tableRow3 в окне Component Tree .

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

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

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

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

2. Перетащите компонент SeekBar (customSeekBar) из раздела Form Widgets палитры на tableRow4 в окне Component Tree.

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

4. Установите значения свойств id и text для компонентов TextView.