Scrolling Activity в Android Studio — структура шаблона, пример работы | Дизайн андроид приложений

Автор Sergei Plotnenko
Scrolling Activity в Android Studio — структура шаблона, пример работы | Дизайн андроид приложений

я.

Приветствую всех на канале startandroid с вами. Виталий непочатов и — это очередной урок из серии видео по дизайн Android приложений и мы продолжаем рассматривать шаблоны Android Studio создание приложений открываем Android Studio. Сегодня мы рассмотрим такой шаблон как scrolling Activity создаем новый проект при создании проекта выберем шаблон scrolling Activity чтобы он scrolling Activity позволяет создавать приложение с экраном на котором большое количество контента например текст который не помещается в весь экран и поэтому по умолчанию он имеет возможность прокрутки.

Кроме того чтобы они scrolling Activity реализована особенность из библиотеки дизайн которая называется collapsingtoolbar.

Сейчас я запущу приложение которое сон по умолчанию с помощью шаблона scrolling Activity. И продемонстрирую вам эту особенность я запущу приложение на эмуляторе genymotion 5 версии запустилась нашей мы видим Toolbar которые имеют увеличенный размер видимой Action там у которого по умолчанию настроена действия видим большой текст который не помещается в экран и при скрутке мы видим эффект сжатия тулбара и уменьшение текста — это эффект называется collapsingtoolbar то есть мы видим здесь исчезает кнопка Action Button текст на не уменьшается. Давайте теперь рассмотрим поподробнее структуру этого шаблона класса главного Activity всё в общем-то стандартно здесь инициализированы компоненты Floating Action Button Toolbar snackbar. Ну в общем-то стандартный набор для обновлённых шаблонов больше интерес представляют макеты макет Content scrolling как. Понятно из его название содержит основной контент здесь при ошибке можно автоматически добавить отсутствующее атрибуты то есть убираем первую ссылку из подсказок. Это должно исправить ошибку и так посмотрим, что здесь у нас здесь в корневой элемент nestedscrollview из библиотеки поддержки версия 4 nestedscrollview — это улучшенный с кровью из библиотеки поддержки которые обеспечат и как на старых так и на новых версиях устройств скроллинг вложенных элементов когда родительских компонентов атрибут вы отдыхаете как раз и обеспечивает координацию скроллинга компонента. Акбар который находится у нас в макете скроллинг где корневым элементом является координатор я вот вы его уже знаете. Это компонент который как раз и координирует синхронность действий он сам дочерние компоненты appbarlayout который содержит свою очередь компонент collapsingtoolbarlayout этот компонент отвечает. Как раз за эффект collapsing. А который я вам начале видео. Здесь есть такой интересный атрибут Content Scream который содержит ссылку на Color primary Color primary у нас — это синий цвет атрибут Content Scream реализует обрезку холста и заливку его цветом colorprimary прокладки когда экран прокручивается вверх чтобы было понятнее. Я сейчас вам — это покажу на примере. Давайте добавим фоновое изображение для нашего тулбара. Я подготовил картинку png размером 480 по ширине и 220 по высоте копируем её папку дрогнул и теперь дочерним элементам collapsingtoolbarlayout то добавим компоненты Magic параметры высоты и ширины матч-поинт и добавим атрибут src со ссылкой на наш изображение вот таким образом изображение у нас заполнил наш тулбар. Давайте теперь. Запусти мы посмотрим, что получилось как — это будет выглядеть на работающем приложение запускаем опять же на версии 5 изображение становилось фоном на, но выглядит она не очень хорошо во-первых она не подходит по размеру по высоте она упирается в статус бар. Давайте исправим эту проблему нам нужно добавить два атрибута для imageview 1 атрибут — это Fit System Windows со значением True атрибут Fit System Windows с параметром шоу обеспечит нам эффект заполнения изображением всей области в системах Android выше 50 таким образом статус будет прозрачным и он будет отображаться поверх изображения сейчас мы запустим и вы — это увидите, но пока добавим еще один атрибут этот атрибут Style Type со значением centercrop атрибут SQL Type управляет способом отображение картинки внутри imageview означение центр краб-система будет масштабировать картинку таким образом чтобы она заполняла всё пространство макета меньшей стороне в данном случае у нас — это высота. Давайте запустим приложение и посмотрим как оно будет отображаться в работающем приложение. Как видите изображение заполняет всё пространство Bar layout изображение находится под табором. А в процессе скроллинга у нас Toolbar iOS statusbar заполняют цветами приложения если запустить — это приложение на четвёртой версии то всё будет выглядеть ним так версия ниже 5 Android не поддерживает прозрачность статус бара и как вы видите не позволяют компоненту appbarlayout под statusbar. Теперь давайте откроем файл макета Content scrolling и посмотрим на textview приложение мы увидели большой массив текста. Весь этот текст хранится в строковых ресурсов если мы откроем файл strings.xml мы увидим там строковый ресурс large Text который содержит текста каждая строка текста заключено в кавычки. А некоторые строки заканчиваются обратным слешем с буквой. Н — это символы форматирования текста обратный слеш он — это перевод строки он обозначает новый абзац.

0 комментариев
0

Читайте также