Подготовка к работе
Рекомендуется посетить сайт [ссылка на сайт] для получения кода, домашних заданий и дополнительной информации. Ссылка на этот урок указана в описании. Макет страницы, разработанный в Figma, доступен для скачивания по ссылке [ссылка на макет] (.fig).
Создадим страницу без функционала, сосредоточившись на дизайне. Функционал (кнопка «Добавить в корзину», обработка нажатия) будет реализован позже.
Создание новой Activity
Создайте новую Activity:
- Щёлкните правой кнопкой мыши на папке.
- Выберите «New» -> «Activity» -> «Empty Activity».
- Назовите Activity (например, «CoursePage»).
- Выберите Java.
- Нажмите «Finish».
Создастся страница и layout-файл (course_page.xml). Дождитесь обновления IDE.
Реализация дизайна
Боковая панель
Скопируйте боковую панель из основного дизайна и вставьте её на новую страницу. Дополнительные стили не требуются.
Изображение товара
Добавьте ImageView и перетащите на него изображение (например, изображение Java). Используйте атрибуты:
- android:layout_width="0dp" (растягивание на всю ширину).
- android:scaleType="centerCrop" (растягивание с обрезкой).
Установите высоту (например, 230dp) и идентификатор (например, course_page_image).
Задний фон
Добавьте к основному слою чёрный фон (background="#000000"). Цвет будет изменён в коде. Добавьте идентификатор (например, course_page_background).
Заголовок товара
Добавьте TextView для названия товара. Установите:
- textColor="#FFFFFF" (белый цвет).
- textSize="25sp" (размер шрифта 25 пикселей).
- fontFamily="Montserrat Bold" (шрифт Montserrat Bold).
- gravity="center" (центрирование текста).
- Идентификатор (например, course_page_title).
- contentDescription для доступности.
Используйте string ресурс для многострочного текста и android_gravity="center" для центрирования.
Описание товара
Скопируйте описание товара в strings.xml (например, course_description). Выведите его в TextView с идентификатором (например, course_page_description), белым цветом текста, шрифтом Montserrat, размером текста 14 пикселей.
Дополнительные элементы
Скопируйте готовый LinearLayout (или CardView) из исходного макета, удалив лишние элементы. Удалите отступы и установите прозрачный фон (backgroundTint="@android:color/transparent" или android_background="?android:attr/colorBackground"). Убедитесь в уникальности ID элементов. Настройте отступы и выравнивание. Центрирование текста в TextView «Старт обучения» осуществляется с помощью android_gravity="center" или отступов (android:layout_marginStart="50dp").
Кнопка «Добавить в корзину»
Экспортируйте изображение кнопки из Figma. Добавьте ImageButton, установите изображение, укажите идентификатор (например, course_page_button), прозрачный фон (background="@android:color/transparent") и отступы.
Дизайн страницы товара готов. В следующих уроках будет реализован функционал: переход на страницу, подстановка данных, обработка событий.