Скачать "Android - View в Android"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FYEcVkUN6caw%252Fmaxresdefault.jpg&w=1139&q=75)
Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.
Похожие ролики из нашего каталога
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FBXfFePVNDSc%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FGMlSEXUQbE0%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FsJq7tFYmQyc%252Fmaxresdefault.webp&w=1139&q=75)
Теги видео
Субтитры
Английский
00:00:00
[музыка]00:00:08
Всем привет У нас сегодня вторая лекция00:00:11
из курса школы мобильной разработки00:00:12
сегодня с вами в онлайне студенты школы00:00:15
мобильной разработки Ольга слушатели из00:00:17
Яндекса и слушатели открытого лектория и00:00:20
сегодня мы с вами поговорим про00:00:21
интерфейсную часть Android приложений И00:00:23
в частности proview меня зовут Даниил я00:00:26
буду вести лекцию Я разработчик Android00:00:28
приложение сейчас занимаюсь разработкой00:00:31
клиентского приложения яндекс.гол по00:00:33
ходу лекции вас возможно будут вопросы00:00:35
вы их можете смело задавать Ваха слайдс00:00:37
ссылка будет в чате трансляции вопросы00:00:40
кстати можно не только задавать но и00:00:42
лайкать00:00:43
цели нашей лекции будет являться00:00:45
систематизация знаний по реализации00:00:47
интерфейсного слоя приложений по итогам00:00:50
лекции мы разберем00:00:51
составляющую интерфейсного слоя и00:00:53
научимся создавать интерфейс приложения00:00:57
по плану лекции у нас будет 5 блоков00:00:58
начнем с View далее будет группы00:01:02
жизненный цикл View tochi и residerview00:01:05
и буквально пару слов про формат лекции00:01:08
лекция будет состоять Как из теории00:01:11
такие практики на практике мы рассмотрим00:01:13
две задачи мы будем отталкиваться от00:01:16
реальных задач и на их примере00:01:17
знакомиться с теорией также после каждой00:01:20
секции нас будут00:01:22
пара минут на вопросы которые постараюсь00:01:24
ответить00:01:26
надеюсь нас будет отлично00:01:29
Ну что давайте начнем И начнем мы с00:01:32
определения интерфейсного слоя00:01:34
приложения интерфейс приложения это все00:01:36
то что видит и с чем взаимодействует00:01:37
пользователь приложения Также можно00:01:40
сказать что это состояние приложения на00:01:41
уровне слоя данных к задачам интерфейса00:01:45
приложения можно отнести отображение00:01:47
данных для пользователя то есть00:01:48
информацию которую мы хотим предоставить00:01:50
и получение информации от пользователя00:01:52
то есть с помощью кликов с помощью ввода00:01:54
информации свайпов и других жестов на00:01:58
примере видео справа на слайде можно00:02:00
увидеть что00:02:01
нас пользователь Яндекс пытается00:02:04
заказать такси соответственно Мы00:02:06
предоставляем ему информацию о статусе00:02:07
заказа и00:02:10
о водителя о цене поездки то есть эта00:02:14
информация которую мы предоставляем с00:02:16
помощью нашего интерфейса А вот00:02:18
пользователям мы получаем информацию о00:02:20
том откуда и куда он поедет и получаем00:02:24
информацию о том что он хочет заказать00:02:26
такси00:02:27
наш интерфейс также стоит упомянуть что00:02:30
состоит из виджетов то есть уже и00:02:32
знакомых нам View00:02:34
Ну что начнем с некоторого описания View00:02:36
это строительный блок для компонентов00:02:39
интерфейса это все то что вы видите на00:02:41
экране и без View у нас бы не получилось00:02:43
бы ничего отобразить То есть это любой00:02:45
текст любая картинка это все View также00:02:48
View это абстрактный класс И стандартной00:02:50
библиотеки Android это нектора пик00:02:52
которая предоставляет нам разработчики00:02:53
Андроида00:02:54
также View Это больше чем это больше 3000:02:59
тысяч строк кода задача View можно00:03:01
отнести отображение данных и обработку00:03:03
событий от пользователя00:03:06
и тут еще буквально пару слов скажем о00:03:09
том Почему в 23 году все еще изучаем00:03:12
View any compose View это все-таки00:03:14
фундаментальная вещь которая00:03:17
незнание которое достаточно критично для00:03:19
Android разработчиков у нас все еще00:03:21
большинство проектов написано View не00:03:24
все проекты полностью переехали на00:03:26
котлин то есть некоторых проектов еще00:03:27
остаются остается код на Java как мы00:03:30
знаем пророк00:03:31
комфосли фреймворк плюс у нас есть00:03:35
различия в навигации у нас полностью00:03:37
меняется парадигмы построение навигации00:03:39
в приложении если раньше мы меняли00:03:42
экраны с помощью фрагментов то сейчас в00:03:45
компоузе мы это делаем с помощью00:03:48
и у нас также есть различия в жизненном00:03:50
цикле00:03:52
наша первая секция с вопросами буквально00:03:54
минута Можете писать в чат будем00:03:57
отвечать00:04:15
Ну кажется у нас вопросов Пока нет00:04:18
Думаю все отлично и Давайте перейдем к00:04:22
основной части нашей лекции начнем мы00:04:24
сразу с постановки задачи нам нужно00:04:26
отрисовать следующий экран достаточно00:04:28
простой и стандартный экран авторизации00:04:30
и перед написанием кода Мы можем для00:04:34
начала импозировать задачу мы можем00:04:37
посмотреть на то из чего состоит наш00:04:40
дизайн экрана у нас есть Back Button00:04:44
который изображен в виде картинки У нас00:04:47
есть заголовок и подсказки которые00:04:50
представляют собой представляют из себя00:04:52
текст есть поле ввода есть кнопка00:04:55
и тут есть небольшое предисловие View00:04:58
Это не единственный компонент который00:04:59
нам предоставляют разработчики Андроида00:05:01
у нас есть целая библиотеки с наиболее00:05:04
часто используемыми компонентами00:05:06
и вот начнем с первой библиотеки со00:05:10
стандартной библиотеки Андроидом00:05:12
разработчики Андроида добавили в неё00:05:14
дефолтные View без стилей которые мы00:05:17
можем уже использовать как готовые в00:05:18
вихи мы можем их расширять00:05:20
модифицировать00:05:21
Сюда можно отнести текст View Button00:05:24
editext00:05:26
и Эта библиотека у нас подключается00:05:29
сразу из коробки то есть ее не нужно00:05:31
подключать отдельной зависимостью00:05:34
вот здесь у нас представлено достаточно00:05:36
объемная иерархия вьюн и стандартные00:05:39
библиотеки Андроида Ну наверное это по00:05:41
большей части все виды юг которые нам00:05:44
предоставляются в качестве API от00:05:47
разработчиков00:05:48
здесь добавил иерархию поменьше здесь00:05:51
уже представлены которые мы чаще всего00:05:53
используем в работе Вот слева не00:05:55
отмечены это текст you Button editex00:05:59
Box Switch и Progress Bar00:06:02
также есть библиотека которая служит для00:06:05
поддержки функционала добавлено более00:06:07
новых версиях Андроида для его поддержки00:06:10
на старых версиях платформы название00:06:13
библиотеки от compad И она из коробки не00:06:17
предоставляется то есть ее нужно00:06:18
подключать отдельной зависимостью00:06:21
также есть готовые стилизованные вьюхио00:06:24
от Гугла Они находятся в библиотеке00:06:26
материал дизайн может возникнуть Хороший00:06:29
вопрос почему добавили еще одну00:06:31
библиотеку Зачем нам столько много00:06:34
это попытка говоря про материал дизайн00:06:37
это попытка привести все компоненты к00:06:39
единому стилю на Андроиде то есть как-то00:06:41
унифицировать00:06:43
интерфейс Android приложений00:06:45
и еще небольшой факт что материал дизайн00:06:48
под капотом использует библиотеку Up00:06:50
compat00:06:52
Давайте вернемся к нашей задаче начнем00:06:55
мы с отрисовки заголовка на экране это00:06:58
обычный текст и взглянув на иерархию00:07:01
поменьше У нас есть такой компонент как00:07:03
textview и по названию вроде достаточно00:07:05
очевидно что это View который отображает00:07:08
текст на экране00:07:10
так Ну хорошо мы с компонентом00:07:12
определились и Давайте определимся Как00:07:15
нам добавить VIN на экран как на неё00:07:16
отобразить пользователю сделать это00:07:19
можно двумя способами через язык00:07:21
разметки xml и программно00:07:24
xml это язык разметки где мы через теги00:07:27
задаем объекты и с помощью атрибутов Мы00:07:30
также задаем свойства этим объектам00:07:32
можно здесь привести сравнение00:07:35
совмещенным HTML и CSS00:07:38
и Давайте попытаемся получить Наш первый00:07:40
результат отобразить наш заголовок на00:07:42
экране В данном случае мы файле Activity00:07:45
main.xml определяем тег текст View и00:07:48
задаем некоторые атрибуты видео ID00:07:50
высоты ширины и дальше в методе oncreate00:07:54
класса mainactivity мы находим View с00:07:57
помощью метода findview BYD и с этим00:08:00
есть свойство текст и получаем00:08:02
соответствующий результат как на00:08:03
фотографии справа00:08:06
здесь на код можно особо не смотреть мы00:08:08
его разбирать не будем просто хотелось00:08:10
показать что такую живью такой же00:08:13
заголовок мы могли отобразить с помощью00:08:15
котлин кода то есть программным для00:08:18
этого мы создаем объект рамсов создаем00:08:21
объект textview далее с этим некоторые00:08:24
свойства для тех здаю и добавляем в юный00:08:27
кран с помощью00:08:30
в целом У нас появился экран у нас00:08:33
появился заголовок на экране Но кажется00:08:35
он отличается от нашего первоначального00:08:37
дизайна Давайте разбираться чего не00:08:39
хватает00:08:41
как мы сказали ранее xml это язык00:08:43
разметки где через теги задаются объекты00:08:46
А через атрибуты создаются свойства00:08:48
объектом00:08:49
У нас есть пространство атрибутов00:08:51
Android в котором уже есть различные00:08:53
модификации00:08:54
наших Как видно на фрагменте кода мы00:08:59
добавили несколько атрибутов и получили00:09:01
соответствующий результат на фотографии00:09:03
справа который достаточно близок00:09:07
и Начнем с того что начнем рассмотрение00:09:10
этих атрибутов и Начнем с того что у нас00:09:12
атрибуты делятся на две группы первая00:09:15
группа она влияет непосредственно на00:09:17
отображение View И вот она сейчас00:09:20
отображена на экране более ярким00:09:22
выделена на экране более ярким цветом00:09:25
вторая группа влияет на отображение View00:09:27
внутри родительского контейнера Сюда00:09:29
можно отнести00:09:30
атрибуты размерности00:09:32
внешний отступы также позиционирование00:09:36
и давайте начнем рассмотрение с первой00:09:39
группы атрибутов И в частности с ID мы00:09:42
его уже затрагивали00:09:44
слайдами ранее еще раз пройдемся по00:09:47
этому атрибуту А идея это уникальное00:09:50
значение для View в текущем xml файле00:09:52
для его идентификации Для чего Нам нужен00:09:56
он нам нужен для того чтобы мы через код00:09:58
смогли обратиться к этой View и задать00:10:03
ей некоторые свойства для00:10:05
динамического изменения представления00:10:09
атрибуты которые мы добавили к заголовку00:10:11
это текст Color Texas и Text Style то00:10:16
есть благодаря этим атрибутам у нас наш00:10:18
заголовок стал похож на заголовок с00:10:21
дизайном00:10:22
по названию здесь достаточно очевидно00:10:24
что текст отвечает за текст который мы00:10:27
видим на экране текст скалы за цвет00:10:29
текста текст сайт за размер текста и00:10:32
текст ставил за стиль текста00:10:36
давайте рассмотрим Еще парочку других00:10:38
часто используемых атрибутов можно00:10:41
начать физиобилити атрибут избилити00:10:44
может принимать три типа значений это00:10:47
visible Invisible Gun может возникнуть00:10:50
Хороший вопрос Чем отличаются значения00:10:53
Invisible Gun если Мы отмечаем00:10:57
убью везде билете типа Invisible то View00:11:00
не видна пользователю но она Занимает00:11:03
место на экране Ганжа в свою очередь не00:11:06
Занимает место на экране00:11:08
перейдем к следующему атрибутам это00:11:10
Gravity и layout Гравити Гравити он00:11:14
отвечает за отображение контента внутри00:11:16
View я вот Гравити за отображение View00:11:19
внутри своего контейнера и можно00:11:22
рассмотреть небольшой пример у нас есть00:11:25
экран с тремя текст задержками00:11:29
эти квадраты это все еще текст просто00:11:32
заданными высотой шириной и у Красного00:11:34
квадрата мы отметили Гравити топ Что00:11:37
означает что контент Наш текст даю а00:11:40
Контент textview это сам текст Он00:11:42
располагается верхней границы00:11:44
соответственно зеленого квадрата мы00:11:46
отметили00:11:47
Гравити баттом и текст располагается в00:11:51
Нижней грани00:11:53
желтый для желтого квадрата для объекта00:11:56
желтого квадрата мы задали00:11:59
и соответственно этот квадрат появился с00:12:02
правой стороны экрана00:12:05
и поговорим еще немного про расположение00:12:07
View на нашем экране для начала хочется00:12:11
Уточнить что любое View это00:12:13
прямоугольник наверное с виду это не00:12:16
всегда кажется правдой например при00:12:17
работе с текстом но как можно было00:12:20
заметить на предыдущем слайде даже текст00:12:22
обладает прямоугольным бэкграундом также00:12:25
говоря про координатную сетку00:12:27
координатная сетка в Андроиде берет свое00:12:29
начало в левом верхнем углу начинается00:12:31
от нуля и идет слева направо для оси X И00:12:36
сверху вниз для оси Y00:12:39
также у каждого есть такие координаты00:12:41
как Left Top Right Button и Start00:12:45
их представление можно увидеть на00:12:47
фотографии справа на слайде давайте00:12:49
рассмотрим как у нас высчитывается За00:12:51
что отвечает значение Left Left это00:12:54
координата по оси X для левой грани00:12:58
нашей View ну и соответственно другие00:13:01
Стороны также высчитываются00:13:04
есть еще такие свойства00:13:09
Y которые используются для анимации00:13:11
передвижения объекта они просто говорят00:13:14
они задают конечные точки куда должна00:13:16
встать пока она не встанет на это место00:13:19
она анимируется ассимилируются плавный00:13:21
переход00:13:23
а также у View есть такие координаты как00:13:27
X Y00:13:28
формулы Вы можете сейчас увидеть на00:13:30
экране00:13:31
по сути X и Y это координаты левого00:13:35
верхнего угла View00:13:38
и Пару слов про размерность виджетов00:13:40
любой виджет должен обладать высотой и00:13:44
шириной для определения ширины мы00:13:47
применяем форму райт минус Left для00:13:50
определения высоты мы применяем формулу00:13:52
bata - стоп00:13:55
еще убью есть такие параметры как и00:13:59
magics они отвечают тоже за высоту и00:14:03
ширину но они отвечают уже за реальную00:14:04
высоту то есть людей которые мы задали00:14:06
как разработчики эти значения обычно00:14:11
совпадают и но некоторых случаях00:14:15
некоторых кейсах они могут все-таки00:14:16
отличаться о них мы поговорим немного00:14:18
позже00:14:19
также есть00:14:21
параметры паддинга и марджана которые00:14:24
отвечают за отступы сейчас мы рассмотрим00:14:27
подробнее чтобы понять что такое марджан00:14:30
Давайте посмотрим на фотографию с правым00:14:32
можно заметить что при добавлении00:14:34
атрибутов00:14:36
некоторым значением у нас вся View00:14:39
сдвинулась на некоторое значение вправо00:14:42
то есть и текст и background00:14:45
То есть это маржин это внешний отступ00:14:49
[музыка]00:14:51
падинг же в свою очередь это внутренний00:14:54
отступ для контента View и на фото можно00:14:56
увидеть что теперь отодвинулся именно00:14:58
текст внутри прямоугольника сам00:14:59
прямоугольник то есть background остался00:15:01
на месте00:15:04
следующая тема которой хочется00:15:06
поговорить Это rtl rtl это зеркальное00:15:10
отображение нашего экрана условно Левое00:15:13
и право на каждом смартфоне Но одно но00:15:15
начало отображения элементов может00:15:17
отличаться в зависимости от языка это00:15:20
свойственно рабскому персидскому и00:15:23
другим языкам из этой группы Поэтому в00:15:27
Андроиде ввели поддержку rtl с 17 API и00:15:32
ввели специальные атрибуты которые00:15:33
полностью соответствуют тем в которые00:15:36
были слова lefter Ride То есть у нас00:15:38
было margin Left теперь у нас появился00:15:40
magen Старт у нас был паддинг райт00:15:42
появился паддинг and Ну также со00:15:44
значением Left Right нас появились00:15:47
значения Start and00:15:50
и тут мы плавно переходим ко второй00:15:52
группе вторая группа относится к рамсом00:15:56
это некоторые даты класс которые хранят00:15:58
данные о том как располагать внутри00:16:00
своего контейнера00:16:01
основными атрибутами относящимися к этой00:16:04
группе являются атрибуты размерности то00:16:07
есть00:16:09
также атрибуты отступов позиционирование00:16:12
и другие специальные атрибуты00:16:16
Вот и давайте начнем рассмотрение с00:16:19
атрибутом высоты и ширины это has они00:16:24
могут принимать следующие значения00:16:26
которые сейчас отображены на слайде У00:16:29
нас есть специальное значение Match00:16:30
parent которое говорит о том что View00:16:32
занимает все пространство родителя также00:16:35
у нас есть значение00:16:37
Rap conten которое говорит нам о том что00:16:39
бью занимает только необходимое для00:16:42
отображения пространства00:16:44
мы можем также задать размерность00:16:46
пикселях в дэнсити пикселях в Skill и на00:16:51
пикселях и есть у нас еще специальное00:16:53
значение 0 дипик которое говорит нам о00:16:55
том что занимает либо нулевое00:16:57
пространство либо у нас есть00:17:00
альтернативные способы задания00:17:02
размерности в частности это уэйд то есть00:17:05
с помощью весов которых мы поговорим00:17:06
немножко позже00:17:09
Давайте попытаемся сейчас отрисовать00:17:11
кнопку назад из нашего00:17:14
на нашем экране для этого мы можем00:17:16
использовать соответствующий элемент00:17:18
imageview00:17:19
задав значение для высоты ширины в 20dp00:17:23
но00:17:25
результаты на экране Сейчас нет Потому00:17:28
что потому что мы не задали источник для00:17:30
картинки для этого мы можем определить00:17:33
атрибут Source src и передать значение00:17:38
дать ссылочку на drawble File и также00:17:42
задать некоторые значения остров маржин00:17:44
старт и маржин доп по итогам мы получаем00:17:46
наш00:17:50
для подсказки с текстом email также00:17:53
используем текст добавляем некоторые00:17:56
стили с помощью атрибутов и выставляем00:17:58
маржин топ 142 DP Вы можете еще заметить00:18:02
что у нас с добавлением каждой00:18:05
будет увеличиваться значение маржин топа00:18:08
то есть мы как бы отталкиваемся от00:18:09
верхней грани нашего интерфейса чтобы00:18:12
расположить View в правильном порядке00:18:16
для ввода e-mail мы используем элементы00:18:18
текст также задаем стандартные атрибуты00:18:21
и добавляем маржин топ который можно00:18:23
заметить что увеличился00:18:25
а00:18:27
[музыка]00:18:28
далее00:18:30
можно заметить что у нас появился00:18:34
новый атрибут background00:18:37
background это атрибут который задает00:18:39
цвет для фона View но здесь можно00:18:42
разглядеть что у нас задается не цвет а00:18:45
какой-то дрова пол Я думаю мы поговорим00:18:48
об этом в Advance секции в одной из00:18:51
следующих лекций но сейчас можно00:18:53
представлять себе что способ задания00:18:54
background с помощью дроуда был файла00:18:56
это00:18:57
способ задать только цвет нашему фону но00:19:02
и форму То есть у нас как можно здесь00:19:05
увидеть на примере00:19:07
задается не только цвет с помощью тега00:19:10
Solid но и00:19:12
радиус углов с помощью тега корнерс 12dp00:19:19
также используем текст для подсказки00:19:22
которые находятся под полем воды email и00:19:25
также представляем маржин топ который00:19:26
уже равняется 19 пи00:19:29
далее Нам необходимо отрисовать кнопку00:19:32
для этого мы можем использовать такой00:19:34
компонент как Button мы задаем00:19:38
тоже атрибуты texcolor текст задаем00:19:42
отступы и здесь у нас бэкграунд тоже00:19:46
проставлен с помощью drawl файлом00:19:49
Как можно увидеть у нас кнопка далее Это00:19:53
не прямоугольник это такой прямоугольник00:19:56
закругленными углами Вот И для этого мы00:19:58
также используем dropbal File где00:20:00
обозначаем00:20:01
радиус углов 42 DP00:20:07
для подсказки под кнопкой все также00:20:10
используем объект textview и здесь можно00:20:14
заметить что у нас начинаются некоторые00:20:16
проблемы при отображении подсказки у нас00:20:19
не хватает места для00:20:20
проставления отступов между кнопкой и00:20:23
текстом и между нижней гранью интерфейса00:20:26
и подсказки00:20:29
Ну вроде на нашем телефоне все было00:20:32
достаточно хорошо за исключением пары00:20:35
моментов Но если включить наш код на00:20:39
других девайсах например на планшете с00:20:42
диагональю 994 дюйма то можно заметить00:20:44
существенное различия00:20:46
Если же включить на00:20:48
устройстве с диагональю 3.2 дюйма то у00:20:53
нас совсем пропадает кнопка далее без00:20:55
которой мы наверное даже не сможем00:20:56
авторизоваться в приложении00:20:59
и Давайте поговорим про проблемы В00:21:03
текущей реализации00:21:04
можно заметить что для позиционирования00:21:07
в юноэкране мы как бы отталкивались от00:21:10
верхнего края нашего девайса с00:21:13
использованием то есть мы использовали00:21:14
маржин топы как бы отталкиваясь от00:21:16
проставляя отступы при использовании00:21:19
маржин топов у нас уже начали появляться00:21:22
проблемы Даже на нашем устройстве когда00:21:24
мы попытались отобразить подсказку под00:21:26
кнопкой00:21:28
также нас могут возникать проблемы при00:21:32
добавлении нового элемента на экран нам00:21:35
придется редактировать00:21:36
все объекты которые уже были определены00:21:39
на экране00:21:42
плюсом ко всему у нас могут быть разные00:21:44
размеры устройств нас могут быть часы у00:21:47
нас могут быть планшеты у нас могут быть00:21:49
телефоны с диагональю 5 дюймов могут00:21:52
быть диагональю 32 дюйма поэтому00:21:56
[музыка]00:21:58
значение00:22:00
в маржанах это достаточно плохой пример00:22:04
позиционирования на экране00:22:06
плюсом ко всему у нас нет структурного00:22:09
подхода при расположении на экране Вот00:22:12
для этого у нас используется v-группы00:22:15
которых мы поговорим в следующей секции00:22:17
пока у нас вопросами можете задавать00:22:21
кажется уже есть вопросы00:22:29
я их пока немножко быстро изучу и00:22:32
попытаюсь ответить на самые интересные00:22:40
вопрос про скоро перестанут писать в00:22:43
vixamily скорее Нет с нами вьюшки еще00:22:47
надолго XL тоже надолго00:22:51
кастом View делать не будем скорее всего00:22:54
это будет в Advance секции00:23:15
есть вопрос про важность регулирования00:23:18
подсказок от Android студии00:23:21
вопрос состоит в том00:23:24
насколько часто нужно слушать00:23:28
предупреждение Android студии о частично00:23:30
перекрытие при определенных форматах00:23:32
экрана00:23:33
я честно говоря не смогу сейчас00:23:35
прикинуть такой пример но могу сказать00:23:39
точно Что00:23:41
если появляются какие-то предупреждения00:23:44
студии их нужно лечить если не00:23:47
получается то должны быть веские00:23:49
обоснования00:23:53
Jetpack навигацию будем использовать в00:23:55
домашках00:23:57
наверное нет мы все-таки сейчас будем00:24:01
домашнее задание Если не ошибаюсь писать00:24:03
на00:24:04
вьюшках поэтому00:24:05
компост мы пока что оставим00:24:09
пользуются ли еще линеру яутом еще все00:24:12
еще пользуется00:24:17
и был также вопрос про background teent00:24:20
у кнопки это00:24:24
способ определения цвета бэкграунда00:24:27
когда мы задаем background с помощью00:24:29
дров был файлом у нас немножко страдает00:24:33
фон кнопки То есть у нас выставляется00:24:36
нас не всегда выставляется верный фон00:24:39
Поэтому в данном случае пришлось бы00:24:42
пришлось добавить атрибут background00:24:44
Teen Вы можете сами поэкспериментировать00:24:46
с кодом он будет представлен дальше00:24:50
[музыка]00:24:56
так вопрос с навигацией был про00:25:00
навигацию из набора00:25:07
Вопрос немножко не понятен я думаю можно00:25:11
будет написать мне в Telegram он будет в00:25:14
конце лекции00:25:15
постараюсь ответить00:25:19
Так ну что давайте перейдем к следующей00:25:21
секции00:25:23
тут мы плавно переходим от вьюшек к00:25:27
нашему группам Давайте поговорим про то00:25:29
зачем нам нужны контейнеры для View00:25:32
группы это особые View которые могут00:25:35
хранить другие То есть дочерние View и00:25:39
задачам View к задачам В группе будут00:25:44
относиться будет относиться расположение00:25:46
View в заданном порядке на экране в00:25:49
Европе не только располагается в00:25:51
каком-то порядке Но они их также00:25:53
замеряют и пытаются расположить наиболее00:25:55
корректным способом также в Европе00:25:57
отвечают за диспетчеризацию касаний на00:26:00
экране и являются базовым классом для00:26:04
контейнеров то есть тоже некоторые от00:26:06
разработчиков Android00:26:08
здесь представлены основные группы это00:26:17
сделаем небольшое отступление поговорим00:26:19
про layout-файлы00:26:21
Lead файлы это xml файлы которые00:26:24
определяют интерфейс нашего приложения00:26:26
либо его часть первый раз layout-файла00:26:29
мы встречаемся при создании приложения с00:26:31
пустым активити у нас появляется файл00:26:33
Activity main.xml и тут возникает вопрос00:26:37
В какой момент мы связываем наш xml-код00:26:40
то есть наши объекты которые мы00:26:42
определили в xml и наш котлин код какой00:26:46
момент бьюхи из xml начинают появляться на00:26:49
экране все это Начинает появляться00:26:52
методом Create класса mainactivity00:26:57
с помощью такого метода как сет00:26:59
контен-вью Почему именно в методе on00:27:02
Create Это происходит потому что этот00:27:04
колбек отрабатывает практически на00:27:05
старте приложения точнее на старте наши00:27:09
Activity00:27:10
метод отрабатывает до того как интерфейс00:27:15
появится на экране00:27:17
и второй момент файла которым Хотелось00:27:20
бы поговорить Это00:27:21
тот факт что нашел файлы должны иметь00:27:26
только одну корневую то есть одну группу00:27:29
или View первого уровня в иерархии00:27:32
поэтому почти всегда мы начинаем00:27:34
верстать с помощью групп чтобы была00:27:38
возможность расположить и скомпоновать00:27:41
объекты на экране00:27:43
далее перейдем к подробному изучению00:27:45
каждой каждого layoutin начнем с фрейму00:27:49
яутом фрейму я вот это стек с дочерними00:27:52
вьюшками которые накладываются друг на00:27:54
друга и самый00:27:57
фреймул считается самым легковесным00:27:59
контейнером лиховесный в плане наименее00:28:01
ресурсозатратный00:28:04
плюсом ко всему можно отметить что у00:28:07
дочерних элементов появится00:28:09
атрибут layout Gravity который отвечает00:28:11
за позиционирование элементов в этом00:28:13
контейнере00:28:14
говоря про применение фреймул яута можно00:28:17
сказать можно выделить два кейса это00:28:20
отрисовка простого экрана где у нас есть00:28:23
одна или две вьюшки и управление00:28:25
происходит с помощью атрибутов Гравити и00:28:28
второй кейс применение00:28:31
нескольких в одном месте то есть мы00:28:35
скрываем одну View visibility и00:28:38
показываем другую00:28:40
также у нас есть такой Объект00:28:45
который порядочивает своих детей00:28:47
горизонтально в строку либо вертикально00:28:50
в колонку для этого мы задаем линеру00:28:53
яуту такой атрибут как rentation который00:28:56
может принимать значения вертикал и00:28:58
хризонту00:29:00
также у линерал яута есть возможность00:29:04
указать размерность дочерних элементов с00:29:07
помощью весов то есть00:29:09
относительном эквиваленте00:29:12
говоря про применение00:29:16
применение у линейного яута достаточно00:29:18
простой это упорядочные элементов либо00:29:20
горизонтально либо вертикально и00:29:22
расположение элементов на экране без00:29:25
знания их размерности то есть с00:29:27
использованием весов о которых мы00:29:29
поговорим далее00:29:31
Вот ну как мы сказали00:29:35
аута есть возможность работы с Весами00:29:37
объектов например Чтобы отобразить экран00:29:42
фотографии справа мы можем использовать00:29:45
функционал00:29:46
линерал Ялта для этого мы прописываем00:29:49
наш тег линерал я вот и задаем00:29:52
атрибут сумм равный четырём здесь сумма00:29:56
здесь это значение равняется четырем00:29:59
далее думаю вы поймете Почему именно 400:30:04
вот дальше внутри линерал я вот там00:30:07
располагаем00:30:08
дочерние View и проставляем ему я вот00:30:11
уэйт соответствующий и можно заметить00:30:15
что00:30:16
layout with то есть ширина объекта00:30:18
равняется нулю нулю с атрибутом DP то00:30:24
есть 0 DP00:30:25
говоря про цифру 4 Почему именно 4 можно00:30:29
заметить что средняя View занимает00:30:32
примерно половину экрана не считая00:30:34
отступы соответственно она занимает 5000:30:37
процентов экрана два из четырех это как00:30:40
раз таки 50 процентов и соответственно00:30:42
левая и правая бью занимают00:30:46
половину00:30:48
средней вьюшки соответственно они00:30:50
занимают 1/4 и имеют соответствующий00:30:53
соответствующее значение в атрибуте00:30:55
равная единица00:31:00
говоря вот он предназначался для00:31:04
уменьшения вложенности при отрисовке00:31:06
экрана и является устаревшей версией00:31:09
констроента00:31:10
это группа скорее осталась как Legacy и00:31:14
рассматривать её подробно не имеет00:31:17
смысла00:31:18
теперь переходим к инструменту00:31:20
constraint layout это наиболее гибкий00:31:23
инструмент для позиционирования дочерних00:31:25
View на экране из названия здесь следует00:31:28
что constrain выставляет одну View00:31:31
относительно другой То есть как бы00:31:32
constraining одну к другой И вот на00:31:35
фотографии справа на слайде можно00:31:36
увидеть что наша View Con стремится00:31:39
верхней гранью к нижней грани вьюшки а00:31:42
управление00:31:44
constrant происходит с помощью00:31:45
соответствующих атрибутов которые00:31:47
соответствуют парадигме00:31:49
атрибуты которые отображен на экране это00:31:51
constrain Top Tube томов там также есть00:31:54
различные вариации constraint Button00:31:56
Total of conster Ну и так далее00:32:02
ступит нам доступен нам с 9p и00:32:06
подключается отдельная библиотекой про00:32:09
применение00:32:11
концентри достаточно обширное применение00:32:13
но можно выделить что этот группа нам00:32:16
нужна для уменьшения влажности объектов00:32:19
Так как при больших при большой00:32:22
вложенности у нас может очень сильно00:32:24
страдать00:32:25
[музыка]00:32:27
наш интерфейс то есть мы00:32:30
очень сильно страдает производительность00:32:32
нашего приложения00:32:35
также constraint layout предоставляет00:32:37
возможность делать так называемые00:32:39
цепочки извьюшек с некоторым заданным00:32:41
позиционированием00:32:43
к этим стильным позиционирования можно00:32:45
отнести00:32:46
спредчи с preda Insight Wait packchain и00:32:50
packchaint BIOS00:32:52
применение цепочек показано сейчас на00:32:54
слайде на фотографии по бокам у этих00:32:58
цепочек можно представлять себе что00:33:00
находится либо границы смартфона либо00:33:03
другие00:33:05
давайте рассмотрим каждую по отдельности00:33:08
начнем точнее каждую цепочку По00:33:10
отдельности начнем00:33:14
он00:33:16
Этот стиль при котором она Свободное00:33:19
пространство распределяется равномерно00:33:21
между элементами и краями00:33:25
родителям сайт распределяет00:33:29
свободные Свободное пространство между00:33:31
элементами а00:33:33
крайние элементы прижимаются родителя у00:33:37
этой чей цепочка в которой мы задаем вес00:33:39
нашим00:33:42
нашим юшкам и патчейн это00:33:47
цепочка в которой Свободное пространство00:33:49
распределяется между крайними элементами00:33:51
и границами родителя говоря Pro00:33:54
packchain with BIOS цепочка расположение00:33:58
которой мы выравниваем по оси с00:34:00
использованием значения float которое00:34:02
может быть от 0 до единицы00:34:06
вот здесь представлены атрибуты которые00:34:08
как раз таки отвечают за стилистику00:34:11
цепочек в конценте00:34:14
Вот и наконец-то возвращаясь к нашей00:34:17
задаче Мы можем с уверенностью сказать00:34:19
что мы выбираем constrant layout в00:34:22
качестве корневой v-группы так как у нас00:34:24
достаточно много элементов на экране и00:34:26
элементы расположены как верхние так и в00:34:29
нижней части экрана00:34:30
плюсом к использованию constraint00:34:33
является то что при добавлении нового00:34:36
элемента на экран нам не придется менять00:34:40
верстку Нам нужно будет внедрить просто00:34:44
новые элементы с использованием constra00:34:45
Intel00:34:46
[музыка]00:34:48
результат с использованием мы получили00:34:51
следующие фотографии справа00:34:53
код можно будет глянуть в githubby и00:34:57
перейдя по ссылке либо по qr-коду и вот00:35:00
здесь хочется разобрать небольшой00:35:01
фрагмент кода с использованием00:35:03
constraint lauta из нашего приложения00:35:07
хочется показать как00:35:11
встретились друг другу на примере00:35:14
заголовка и на примере бэкбатана00:35:19
бэкбаттена мы определили constrain00:35:22
startu Start of parent и constrain Top00:35:24
Top of pare то есть Мы00:35:26
приезжали к верхней грани экрана и к00:35:29
левой грани экрана00:35:31
а текст View который отвечает за00:35:34
заголовок00:35:35
мы уже прижали не мы сделали00:35:42
мы поставили отступ У нашего заголовка00:35:47
не от верхнего края экрана А уже вот00:35:50
Back Button и законостроение заголовок00:35:53
Button с помощью00:35:55
атрибута constrain Top Battle of00:35:58
Давай соответствующие00:36:02
соответственно это все про View группы00:36:06
сейчас у нас снова секция с вопросами00:36:10
если появились пишите будем отвечать00:36:15
есть хороший вопрос про большую00:36:18
влажность00:36:19
это зло и почему в принципе Большая00:36:23
влажность при использовании View это00:36:26
плохо потому что у нас очень сильно00:36:29
страдает производительность экрана то00:36:30
есть нас00:36:32
будут происходить постоянные перерисовки00:36:35
экрана что достаточно трудно Поэтому нам00:36:38
нужно избегать большой влажности с00:36:40
помощью инструментов00:36:44
Какой layout лучше использовать00:36:46
constrant или линер Ну тут все зависит00:36:49
от сложности00:36:51
сложности вашего экрана00:36:56
в плане производительности у них00:36:59
различий нет есть только производитель00:37:01
есть только различия в00:37:02
производительности при использовании00:37:03
линейного яута если мы используем00:37:06
проставление размерности убью с помощью00:37:09
весов то00:37:11
там будет в два раза больше проходов по00:37:15
жизненному циклу то есть по дереву View00:37:17
об этом еще поговорим немного позже в00:37:20
секции про жизненный цикл соответственно00:37:24
Если вы не используете веса у линейного00:37:27
Ялта то концентрики линеры они00:37:29
соответствуют00:37:31
ресурсы затратности если они вложены00:37:34
никуда дальше00:37:39
Как именно страдает производительность00:37:41
при большой вложенности это долгий00:37:43
партии из x-mail Нет это не долгий00:37:46
парсинг из xml тут00:37:48
проблема Начинает появляться когда мы00:37:53
про эти проблемы мы можем подробнее00:37:55
поговорить в секции про00:37:59
жизненный цикл вьюшек у нас00:38:03
каждая View проходит несколько этапов00:38:06
до ее появления на экране00:38:09
этап измерения этап расположения на00:38:14
экране и эта отрисовки и соответственно00:38:16
если у нас большая вложенность то у нас00:38:18
эти этапы могут дублироваться и расти по00:38:21
экспоненте00:38:33
Какая вложено считается уже большой00:38:35
Ну наверное если у Вас вложенность00:38:40
от трех то это уже много кажется что00:38:44
много00:38:45
зависит от экрана если приложение очень00:38:49
сложное то там могут быть00:38:53
вложение 5 6 уровня00:38:59
а также поступил вопрос про где про то00:39:04
где можно посмотреть ресурсы затратность00:39:05
яутинга мы об этом поговорим в следующей00:39:08
секции про перформанс и дебаггинг у нас00:39:11
есть специальные инструменты для этого в00:39:14
этом можно будет00:39:15
потом упомянуть00:39:20
есть мнение что constraint имеет смысл00:39:23
При количестве вложенных вьюг от 6 а00:39:26
менее лучше использовать линер я вот ну00:39:29
линейный layout не всегда дает00:39:32
необходимый эффект так как00:39:37
для того чтобы добиться00:39:41
того же интерфейса с помощью линейного00:39:44
яута нам потребуется Большая влажность00:39:47
нас будет один я должен в другую другой00:39:51
поэтому наверное00:39:55
[музыка]00:39:57
здесь немножко неверный с той стороны00:40:00
что00:40:05
нет какого-то определенного числа 600:40:08
все зависит от каждого интерфейса00:40:11
индивидуально00:40:13
Но если у вас просто идут элементы в ряд00:40:17
либо в колонку я не00:40:20
нужно задавать какую-то кастомную00:40:22
кастомный констренько то наверное можно00:40:25
использовать линер layout00:40:42
Ну что я думаю можно переходить к00:40:44
следующей секции00:40:45
сейчас мы поговорим как раз про00:40:48
жизненный цикл о котором мы уже00:40:50
упоминали00:40:51
жизненный цикл View начинается когда мы00:40:54
вызываем метод adview для показа в ее на00:40:57
экране может возникнуть вопрос Зачем нам00:40:59
нужен00:41:02
Есть некоторые этапы которые она00:41:04
проходит до ее появления пользователю00:41:06
или00:41:07
во время отображения уже пользователь на00:41:10
экране и разработчики платформы00:41:12
предоставляют нам возможность управлять00:41:14
этими стадиями отрисовки и layouting с00:41:19
помощью специальных колбеков которые00:41:20
сейчас у нас отображены на экране мы их00:41:24
можем переопределять в кастомных брюках00:41:27
и пытаться как-то манипулировать00:41:29
расположением00:41:30
измерением и дробингом00:41:35
жизненный цикл делится на следующие00:41:37
этапы на layout и троллинг layout свою00:41:41
очередь делится на mazu Pass и00:41:42
layoutpass00:41:44
Давайте поговорим про каждый этап по00:41:47
отдельности начнем с рассмотрения layout00:41:50
layout этап отрисовки00:41:53
layout этап включает в себя Major Pass00:41:56
layoutpass00:41:58
Major Pass отвечает за преобразование00:42:01
различного рода значений по типу much00:42:03
parent или Rap conten у размер у00:42:06
размеров вьюшек в более понятные для00:42:09
системы Android размеры00:42:10
то есть пиксели00:42:13
очередь отвечает за расположение View00:42:16
внутри в ее группы на основе полученных00:42:19
значений из предыдущего паса00:42:22
мы их измерили получили значение высоты00:42:28
ширины и дальше пытаемся расположить на00:42:30
экране00:42:35
Давайте подробнее рассмотрим каждый00:42:38
паспался для определения нестандартного00:42:42
поведения при измерении размеров View мы00:42:47
как разработчики можем переопределять00:42:49
метод он менеджеру у кастом навьюхе и00:42:52
тут представлены шаги00:42:54
о том как происходит межор ПАЗ менеджер00:42:58
пас проходит по дереву сверху вниз то00:43:01
есть фрутовые вьюшки к дочерним при этом00:43:04
родительская группа передает своим00:43:06
дочерним вьюшкам требования к размерам с00:43:10
помощью такого объекта как00:43:12
дальше рассчитывают свои размеры на00:43:16
основании00:43:17
данных из majorspack и на основании00:43:20
данных которые были заданы разработчиком00:43:23
и сохраняет их внутренний стейт то есть00:43:26
значение между00:43:27
как мы как я и сказал ранее у нас00:43:33
эти значения могут немного отличаться00:43:35
потому что мы как разработчики мы не00:43:39
единственные кто можем задавать00:43:42
размерности у ёшек это также могут00:43:44
делать в группы для дочерних вьюшек с00:43:47
помощью данных smasurespack00:43:50
также не обязательным шагом но возможным00:43:55
является повторный пересчёт размеров00:43:57
из-за нехватки данных для расположения00:44:00
внутри контейнера нашей вьюшки условно00:44:04
это бывает двойной Major Pass обычно00:44:08
бывает00:44:09
линейро Ялта когда мы задаем размерности00:44:13
вьюшек с помощью весов то есть с помощью00:44:15
атрибутов Уайт в этом случае у нас00:44:18
происходит двойной Major Pass00:44:22
дальше переходим к layoutpassu во время00:44:26
паса мы снова проходим по дереву сверху00:44:29
вниз то есть отрутовый в юрских дочернем00:44:33
при этом на предыдущем шаге на пасе мы00:44:36
уже узнали значение который хочет занять00:44:38
вьюшка00:44:39
и пытаемся их как-то расположить на00:44:42
координатной сетке и для переопределения00:44:46
какого-то нестандартного поведения при00:44:49
расположении В контейнере мы можем00:44:52
определить метод00:44:54
и задать кастомную логику00:44:57
и последний этап это этап дровинг он00:45:00
отвечает за отрисовку View для00:45:04
определения нестандартного поведения00:45:06
Вью при отрисовке мы можем00:45:09
соответственно переопределить callback00:45:11
on Drom00:45:13
на схеме у нас также отображены два00:45:17
метода это requestlayout и invalidate00:45:20
они используются для ручной подсказки00:45:22
системе Android о том что у нас00:45:24
поменялись какие-то данные и нам нужно00:45:28
перерисовать нашу вьюшку То есть это00:45:30
могут быть00:45:32
текст00:45:33
нас могут поменяться текст нас мог00:45:36
поменяться бэкграунд У нас могли00:45:38
поменяться отступы00:45:39
и здесь на картинке справа на слайде00:45:42
видно что при вызове квест у нас00:45:46
вызывается метод жизненного цикла00:45:47
начиная с колбеком Major то есть мы00:45:50
просим еще раз измерить ее размерность и00:45:53
расположить на экране00:45:56
хочется отметить что при вызове квест00:46:00
вызовы метода этапа дробинг не00:46:03
гарантированы00:46:06
вот говоря про инвалидейт00:46:11
вызывает методы фазы дробинг то есть мы00:46:13
предполагаем что размеры в июне00:46:15
поменялись и расположение на экране00:46:17
поменялось какой-то поменялся какой-то00:46:18
внутренний стоит например это может быть00:46:21
цвет бэкграунда00:46:24
когда она может понадобиться инвалидейт00:46:27
Ну вот как я и сказал может понадобиться00:46:30
при изменении бэкграунда00:46:33
река слоя вот нам может понадобиться00:46:35
например при изменении отступов то есть00:46:39
при изменении маржинов00:46:42
еще важный момент про эти методы они не00:46:46
запускают перерисовку в тот же момент00:46:50
когда они были вызваны они лишь00:46:52
устанавливают флаг для системы Android и00:46:55
говорят о том что у нас что-то00:46:56
поменялось00:46:57
перерисую это как можно скорее поэтому00:47:00
не всегда количество вызовов этих00:47:01
методов равняется реальным запуском00:47:04
Вот и тут был вопрос00:47:07
в прошлой секции про то почему00:47:10
Большая влажность Это плохо здесь можно00:47:13
увидеть небольшую формулу что при00:47:17
большой вложенности у нас00:47:20
[музыка]00:47:22
происходит00:47:25
N00:47:27
Major passov потом за которым у нас идет00:47:32
layoutpass и который увеличивается00:47:34
назначение V которая равняется в00:47:37
ложности в югрупп файле То есть у нас00:47:41
[музыка]00:47:43
очень часто будут вызываться00:47:46
колбеки из жизненного цикла вьюшек00:47:49
поэтому нас будет соответственно очень00:47:53
очень у нас будет очень ресурсозатратный00:47:55
экран00:47:59
готов ответить на вопросы если они есть00:48:08
промоушен00:48:11
[музыка]00:48:13
тут просто рассказать про я вот наверное00:48:16
в данную лекцию не входит00:48:18
Я сейчас так сходу не вспомню потому что00:48:21
это00:48:23
необычный я вот который с которым не00:48:26
каждый день встречаешься00:48:29
[музыка]00:48:31
Будет ли Профит с точки зрения00:48:33
производительности с помощью разделения00:48:35
разметки на несколько файлов00:48:37
нет00:48:39
Профит не будет это просто уменьшает00:48:44
это просто делает XL файлы более00:48:46
понятными если тут имелось ввиду00:48:49
вложенность00:48:51
если тут имелась в виду разделение00:48:54
файлов и использование других файлов00:48:56
внутри00:48:57
других с помощью атрибута с помощью00:49:00
тегамерш Если вы про это00:49:05
Будут ли вызываться методы00:49:08
менеджер если мы вручную укажем размеры00:49:10
да00:49:12
то есть эти00:49:15
колбаки жизненного цикла Наше видео они00:49:18
будут вызываться вне зависимости от того00:49:20
что мы укажем это обязательно чекпоинты00:49:23
через которые мы будем проходить00:49:29
расскажите пожалуйста примеры Когда нам00:49:32
полезно переопределять метод00:49:36
[музыка]00:49:42
это нам нужно для переопределения00:49:44
какой-то кастомной логики Скорее это00:49:47
будет использоваться для Вью групп когда00:49:49
мы хотим задать00:49:52
кастомное расположение вьюшек на экране00:49:55
об этом была лекция упоминалось еще в 2100:49:59
году на похожей лекции про вьюшки Я00:50:02
думаю если будет интересно там00:50:04
приводился реальный пример00:50:06
где в лаве был написан код с кастомной00:50:10
группой где мы как раз переопределяли00:50:13
метод и задавали кастомное расположение00:50:16
стека00:50:32
Ну что давайте перейдем к следующей00:50:33
секции00:50:35
дальше Хотелось бы поговорить про точи00:50:38
по экрану про то что происходит в эти00:50:40
моменты про то как мы можем управлять00:50:42
кликами00:50:43
Давайте сразу рассмотрим следующую00:50:45
иерархию вьюшек в группу А у нас есть00:50:49
две группы А в которой вложена в игру по00:50:51
б и есть еще вьюшка дочерняя от00:50:55
пользователя нам поступает Клик по00:50:58
вьюшки соответственно каждую вьюшку то00:51:02
есть для группы Ави группы Б и вьюшку00:51:04
насыщенные00:51:06
Клик лица неры где мы00:51:09
логируем события00:51:12
и возникает вопрос при клике на вьюшку00:51:16
какой клик-листнер от работы какого00:51:20
объекта00:51:21
отработает00:51:23
в данном кейсе наверное ответ очевиден00:51:26
что отработает как лицнер у нашей View00:51:30
Давайте разбираться куда подевались00:51:33
обработчики для группы и группы Б И00:51:37
также мы с вами разберем как мы понимаем00:51:39
что кейсы мы с вами также разберем кейсы00:51:43
Когда у нас происходит свайпы либо00:51:46
двойные клики мы рассмотрим как мы00:51:48
понимаем что произошло именно в этот00:51:50
момент при касании экрана пользователям00:51:54
для того чтобы понять что произошло при00:51:56
даче Давайте сначала разберемся с таким00:51:59
понятием как motionland00:52:01
объект класса Motion Event используется00:52:04
для сообщения о событиях перемещения на00:52:06
экране этот класс содержит такие данные00:52:10
как координаты события на координатной00:52:12
сетке00:52:13
содержит данные о силе нажатия и типы00:52:17
события00:52:19
типы события бывают следующими00:52:22
экшн мув00:52:25
экшенап и экшн-консул00:52:28
экшен-даун это момент начала жеста когда00:52:31
пользователь опускает палец на экран00:52:33
самый первый момент когда мы касаемся00:52:36
экрана экшен момент когда что-то00:52:39
происходит на экране то есть экшен00:52:40
поступает после событий типа Action Down00:52:45
дальше у нас есть Action Up это00:52:48
терминальное событие жеста сообщает об00:52:51
успешном окончании жеста и экшен также00:52:54
терминальное событие которое00:52:56
говорит нам о том что же закончился00:52:58
неуспешно это бывает в кейсах когда мы00:53:01
прискроле выходим за границы экрана ну и00:53:05
соответственно Мы хотим отменить наш наш00:53:09
называется мы получаем00:53:12
тип события типа экшн-кансел00:53:15
Да это кстати не все события но это00:53:19
наиболее основные которые нам00:53:21
понадобятся в данной лекции00:53:23
Давайте вернемся к нашему примеру с00:53:25
кликом и обозначим из чего он будет00:53:27
состоять он будет состоять из трех типов00:53:31
событий Да это может показаться что это00:53:33
какая-то Ударная операция Но на самом00:53:35
деле Клик включает в себя три события00:53:37
Так что экшен00:53:40
Up Action происходит когда мы00:53:42
только-только начинаем свой Клик то есть00:53:43
касаемся пальцем экрана затем быстро00:53:48
происходит экшен который сам по себе не00:53:51
заметен и у нас00:53:54
по завершению клика происходит мы00:53:57
получаем тип события Action Up который00:53:59
говорит нам о том что00:54:00
события жестов произошло успешно00:54:05
и Давайте глянем на следующий год00:54:07
который00:54:10
соответствует нашему примеру с Европы00:54:14
Ави группы00:54:16
как мы сказали Мы на каждую на весь00:54:19
листнер00:54:21
где мы заблокировали события и блок Кати00:54:25
мы увидим соответствующее событие Типа00:54:27
clickt если пользователь кликнул по00:54:29
нашей00:54:31
но тут может возникнуть вопрос Куда00:54:34
подевалась обработка кликов у группы А и00:54:37
у группы Б И работают ли эти клики00:54:38
Работают ли клики по Европам в целом00:54:41
ответ да клики по v-группам работают ими00:54:45
можно управлять00:54:47
управление кликами происходит с помощью00:54:50
следующих коллегов которые вы видите на00:54:52
экране это он Touch Event и On intercept00:54:55
touch Event00:54:57
первый метод находится в классе View00:55:01
принимает на вход объект типа Motion00:55:04
Event и возвращает значение boolean00:55:06
метод колбек он Touch Event отвечает за00:55:10
обработку событий либо комбинации00:55:12
событий жеста для данной вьюшки00:55:16
возвращаем им значением мы сообщаем о00:55:19
том перехватил ли наше событие00:55:22
или же отказалась от обработки события00:55:26
и также мы сообщаем вызывающему методу о00:55:30
том будет перехватывать следующие00:55:32
события в рамках текущего жеста То есть00:55:35
можно привести пример если мы в данном00:55:39
методе будем возвращать значение false00:55:41
то на вход мы получим объект типа Action00:55:45
Down00:55:46
после которого нас по логики должны идти00:55:51
но если мы возвращаем значение false мы00:55:54
отказываемся обработки события00:55:56
то что в рамках этого жеста мы00:55:59
ничего делать не собираемся00:56:03
дальше переходим к методу on intercept00:56:05
touchwent00:56:07
метод intercepturevent отвечает за00:56:10
отслеживание событий происходящих на00:56:12
поверхности в югрупп00:56:14
и здесь имеется в виду также включение00:56:18
дочерних vue00:56:21
на вход в качестве параметра Мы также00:56:24
получаем событие типа Motion Event и00:56:27
возвращаем значение типа boolean00:56:29
возвращаемое значение говорит нам о том00:56:31
перехватило ли в группа событие00:56:34
и необходимы ли это событие опрокидывать00:56:37
вверх по иерархии об этом мы поговорим00:56:39
немножко позже на следующих слайдах00:56:42
Ну вот при создании лекции в голове00:56:45
появилось такая аналогия из мультфильма00:56:47
кунг-фу панды слева на гифки у нас00:56:49
пример перехваченного события мы00:56:52
получили событие сами его как-то00:56:54
обработали а справа на гифки мы получили00:56:57
события мы поняли что мы не хотим его00:56:58
обрабатывать и передали кому-то дальше00:57:01
Надеюсь что здесь стало понятие00:57:06
а также у нас есть небольшая схема00:57:08
обработки нашего клика из первого00:57:10
примера Давайте пройдемся по вьюшки00:57:13
посмотрим как бы наше приложение00:57:15
обработало отработала бы при00:57:17
переопределении двух этих колбеков00:57:21
допустим у нас произошел Клик от00:57:23
пользователя который нам поступил из00:57:25
Activity00:57:26
мы получаем этот событие сначала в метод00:57:30
On treset touch Event у00:57:33
родительской группы то есть группы А00:57:36
если же это vie группа захотела00:57:38
переходить события то мы возвращаем00:57:40
значение True в методе00:57:43
и далее У нас отрабатывает метод который00:57:48
[музыка]00:57:51
говорит нам о том работал ли в группа00:57:54
событие или нет Если же мы возвращаем00:57:56
True то наша группа00:57:59
Взяла на себя обязательства по обработке00:58:03
этого клика00:58:06
Если же группа методе он Touch Event00:58:09
вернул значение false то мы отказываемся00:58:12
от00:58:13
обработки события и мы отказываемся от00:58:16
получения дальнейших событий в рамках00:58:18
текущего жеста00:58:21
если мы не хотим перехватывать события00:58:25
в нашей группе А мы можем вернуть00:58:28
значение false в методе reset touchwent00:58:30
и тогда наше событие опрокинется в метод00:58:34
андерсепт Touch Event у viegurupe00:58:36
которая в свою очередь также может00:58:39
перехватить события И после этого будет00:58:42
вызван метод он touchi Event который00:58:45
может также вернуть значение True либо00:58:49
может вернуть значение false и в этом00:58:51
случае мы наш тип события прокинем вот В00:58:55
группе00:58:57
вернув значение foss в методе то есть мы00:59:00
как бы прокидываем тип события обратно в00:59:04
родительскую группу которая также свою00:59:06
очередь может либо обработать события00:59:07
либо нет00:59:10
а если же в игру по б отказалась от00:59:13
обработки события и вернул значение00:59:14
false то00:59:16
[музыка]00:59:18
наше событие прокидывается к дочерней00:59:22
View и отрабатывает метод On touch Event00:59:26
метод on touchivent также может вернуть00:59:29
у вьюшки значения либо True либо false и00:59:32
в зависимости от того что она вернула У00:59:36
нас есть различные сценарии обработки00:59:39
нашего события если мы возвращаем00:59:40
значение True то мы говорим то что наше00:59:43
видео обработало события и мы не00:59:45
Передаем этот жест Это тип события верх00:59:50
по иерархии мы сразу возвращаем00:59:52
возвращаемся условно в активите Если же00:59:55
мы возвращаем значение false то события00:59:58
прокидывается наверх в группе б и дальше01:00:01
на то же самое решает хочет она01:00:03
обрабатывать события или нет01:00:07
может возникнуть справедливый вопрос как01:00:10
обработать различные варианты комбинаций01:00:12
событий То есть у нас бывают различные01:00:15
кейсы по типу Long кликов дабл тапов01:00:19
скроллов и так далее Это все можно01:00:22
сделать переопределив вручную01:00:23
callbacking Touch Event и intercept01:00:26
Touch Event01:00:27
Но кажется что это достаточно трудно Вот01:00:31
и для этих кейсов У нас есть такие01:00:34
объекты как жест детектор жест детектор01:00:37
сам считает Когда произошло условно01:00:40
события двойного этапа он сам по01:00:43
внутренней логике высчитывает01:00:44
Что произошло при данном жесте и женский01:00:49
детектор нам предоставляется из коробки01:00:51
то есть подключать дополнительно ничего01:00:53
не нужно01:00:56
здесь представлены Шаги по работе жестов01:00:59
детектором они выглядят следующим01:01:01
образом для начала мы переопределяем01:01:03
метод Touch Event у нашей кастомное View01:01:06
далее Мы переопределяем колбэк-методы у01:01:10
интерфейса уже страницы отправляем01:01:12
каждое событие объект детектор лестер01:01:16
детектор на основании внутренней логики01:01:18
определяет Какое событие произошло и01:01:21
дальше соответственно производится01:01:23
обработка01:01:24
жеста в соответствии с коллегом из01:01:28
интерфейсом01:01:32
вот здесь представлены колбеки которые01:01:35
мы можем переопределить для01:01:39
реакции на различные жесты со стороны01:01:42
пользователя01:01:43
далее У нас секция с вопросами можно01:01:46
писать в чат и кажется вопрос есть01:01:58
вопрос про callback и перерисовки01:02:01
происходит я не каждый 16 секунд 1601:02:03
миллисекунд об этом Мы кстати тоже01:02:06
поговорим Вот как раз в следующей секции01:02:08
буквально через пару слайдов01:02:11
по дефолту01:02:14
у обоих групп метод01:02:18
имеет значение Это верно01:02:29
Ну кажется у нас вопросов больше нет01:02:32
мы можем переходить к следующей секции01:02:34
про performance и дебаггинг01:02:37
и говоря про performance мы как01:02:40
android-разработчики должны знать о01:02:41
таком значении как 60 FPS то есть 6001:02:45
фреймс pressecond эта цифра означает то01:02:48
что наш экран должен уметь01:02:49
перерисовываться за01:02:51
16,6 миллисекунд это значение мы01:02:54
получаем из деления тысячи на 60 то есть01:02:58
60 фреймс persecond это 60 кадров в01:03:01
секунду в секунде 1000 миллисекунд 100001:03:04
делим на 60 получаем 16 601:03:09
со стороны Android если говорить со01:03:11
стороны Андроида то01:03:13
вызов метода для каждой View не должен01:03:17
занимать больше 1601:03:19
и 6 миллисекунд01:03:22
здесь привел несколько рекомендаций для01:03:27
эффективной отрисовки интерфейса01:03:30
если мы определяем кастомный View то нам01:03:34
нужно позаботиться о том что мы01:03:35
эффективно реализовываем метод и также01:03:39
мы должны избегать большого количества01:03:44
а ниже есть еще рекомендации по01:03:47
написанию метода on Drom01:03:50
первый самый важный наверное пункт это01:03:52
не стоит создавать объекты в методе01:03:55
oндро так как это может повлечь за собой01:03:58
работу с коллектором потому что локация01:04:03
локация памяти для объекта01:04:06
дорогостоящий дорогостоящая операция01:04:08
соответственно нас Может начать01:04:10
отрабатывать сборщик мусора который01:04:12
может вызвать за собой01:04:15
и также не стоит производить сложные01:04:17
вычисления в методе oндро мы эти01:04:20
значения можем сделать до вызова метод и01:04:23
как-то передать их туда01:04:26
и на прошлом слайде Мы еще упомянули про01:04:28
овердром овердром отрисовка одного01:04:31
пикселя несколько раз во время отрисовки01:04:33
одного экрана01:04:34
плохо это не потому что у нас один01:04:37
пиксель перерисовывается по несколько01:04:39
раз плохо это потому что у нас плохо01:04:43
потому что это может говорить нам о том01:04:45
что у нас есть проблемы в иерархии01:04:49
например как я уже упоминал это01:04:52
вложенные группы01:04:53
и для отслеживания01:04:55
овердро мы01:04:59
можем использовать такие инструменты как01:05:03
дебагпу01:05:04
Спектр и профайл01:05:06
два ГПУ это инструмент который01:05:08
предоставляет возможность визуализации01:05:11
количества отрисовок пикселей с помощью01:05:14
цветового кодирования мы можем После01:05:17
включения опции два г по овердроу01:05:19
увидеть сколько раз перерисовывался01:05:21
каждый пиксель на примере справа на01:05:24
фотографии видно что текст01:05:25
перерисовывался больше 4 раз так красный01:05:30
цвет означает что01:05:33
перерисовка была четыре боли перерисовка01:05:36
производилась 4 или более раза01:05:38
соответственно01:05:40
это может нам подсказывать о том что у01:05:42
нас есть проблемы в иерархии потому что01:05:44
для определения одного текста кажется01:05:47
что это слишком много01:05:50
четыре вложенные группы01:05:54
но есть также инструмент Спектр Он01:05:57
позволяет просмотреть иерархию View для01:06:00
текущего запущенного приложения и найти01:06:03
это можно найти этот инструмент можно в01:06:06
Android Studio в тузах инспекторе и01:06:09
последний инструмент который мы01:06:11
поговорим это профайл GPU инструмент01:06:14
предоставляет информацию о том сколько01:06:15
времени тратит приложение на тот или01:06:18
иной вид операции с течением времени в01:06:21
виде гистограммы условно у нас01:06:23
горизонтальная ось отвечает за01:06:25
[музыка]01:06:28
наши01:06:30
моменты во времени а вертикальные01:06:34
Столбцы означают Сколько времени было01:06:37
потрачено в тот или момент времени01:06:39
сколько01:06:40
сколько времени сколько ресурсов01:06:43
приложения01:06:44
устройства было потрачено в тот или иной01:06:46
момент времени01:06:48
при этом у нас также здесь присутствует01:06:51
твое кодирование которое говорит нам о01:06:53
том01:06:54
на какой вид операции были затрачены01:06:58
наши ресурсы01:06:59
вот здесь можно привести пример с01:07:03
голубыми синим01:07:05
столбиком01:07:06
синий отвечает за ресурсы затраченные на01:07:10
отрисовку нашего экрана а голубой01:07:14
отвечает за networking работает сетью01:07:20
также у нас скоро будет секция с01:07:23
вопросами после которой мы уйдем на01:07:26
семиминутный перерыв01:07:28
Да сейчас вернемся к нашему пункту с01:07:32
овердром мы можем избегать овердрой нам01:07:35
нужно делать для того чтобы наша для01:07:37
того чтобы работа с интерфейсом была01:07:40
приятной для восприятия со стороны01:07:43
пользователя01:07:44
для того чтобы избегать овердром мы01:07:47
можем во-первых удалять невидимые01:07:49
невидимые бэкграунды layoutsy Мы можем01:07:52
упрощать01:07:53
иерархию с помощью таких групп как01:07:58
же мы можем мешать прозрачностью также01:08:01
что влияет что плохо влияет на01:08:03
производительность01:08:07
всех вопросами01:08:15
вот есть хороший вопрос про01:08:19
родительскую View может быть такое что01:08:22
View нет родителям Какая самая01:08:25
родительская View Нет убью обязательно01:08:29
должен быть01:08:31
родительский элемент01:08:33
если мы посмотрим на наш самый основной01:08:36
экран то есть который мы создаем в01:08:39
mainactivity мы01:08:41
с помощью метода setcontenview куда-то с01:08:44
этим наш01:08:46
интерфейс вот с этим мы его в такую01:08:50
в такой абстракцию которая называется01:08:52
Windows это все это вся абстракция01:08:56
находится01:08:57
внутри01:08:59
внутри Андроида внутренняя логика и по01:09:03
случаю нас для каждой Activity создается01:09:07
свой Windows где у нас есть одна01:09:11
родительская куда будут встретиться все01:09:13
остальные01:09:14
есть кстати очень небольшая интересная01:09:17
статья Я натыкался я если напомнить01:09:31
вопрос про constraint layout01:09:34
сильно ли он прожорливе чем другие л01:09:36
яуты01:09:37
Ну01:09:39
он прожорливе чем фрейму я вот но я не01:09:44
думаю что он прожорливичи линеру я вот в01:09:46
особенности если не Нервы Я вот был01:09:47
использован01:09:49
в совокупности с проставлением01:09:51
размерности с помощью весов01:10:05
Да тут не подсказывает еще про хореограф01:10:08
из локат01:10:10
про то что этот инструмент тоже Может01:10:12
помогать с воспроизведением проблем с01:10:15
отрисовкой01:10:16
Ну слышал но вообще не пользовался01:10:25
Угу Для чего в детекторе жестов то есть01:10:27
жестов детекторе Мы сначала01:10:28
переопределяем он Touch Event мы Для01:10:32
начала там переопределяем Touch Event01:10:34
потому что01:10:39
типа событий для жестов мы можем01:10:41
переопределять только создав свою01:10:44
кастомную01:10:45
и Для этого нам нужно создать свою01:10:48
унаследоваться от01:10:51
наследоваться вот абстрактного базового01:10:53
класса View и там дальше переопределить01:10:56
метод он Touch Event в котором мы будем01:10:59
получать эти события то есть мы в этом01:11:01
методе получаем события жестом01:11:08
Я думаю что с01:11:10
вопросами пока можем заканчивать у нас01:11:14
минутный перерыв Так что не отвечайте01:11:16
скоро вернемся01:20:02
давайте рассмотрим еще одну задачу01:20:05
необходимо отрисовать интерфейс для01:20:08
экрана с чатами в приложении Messenger01:20:10
Вот который мы видим сейчас на экране01:20:12
справа и наш экран состоит из бэкбаттена01:20:17
назад из заголовка и с фотографии из01:20:20
компонентов из элементов чата который01:20:24
каждый в свою очередь дублируется и01:20:26
содержит в себе фотографию профиля имя и01:20:28
последнее сообщение в чате01:20:31
давайте рассмотрим Из чего состоит наш01:20:33
интерфейс со стороны кода01:20:36
У нас есть родительская группа Это01:20:39
очевидно constrate layout У нас есть01:20:42
также список чатов и ввиду повторяющихся01:20:44
элементов которые идут друг за друга01:20:46
друг за другом вертикально можно сделать01:20:50
вывод что сюда подойдет линейный аут и у01:20:54
нас еще есть также01:20:55
отдельный элемент чат-превью который у01:20:59
нас постоянно дублируется и чтобы не01:21:01
писать все в одном файле чтобы не писать01:21:03
большую кучу кода01:21:05
дублировать в одном файле мы можем01:21:07
выделить01:21:09
файл с xml с чатом превью01:21:16
вот здесь можно посмотреть верст для01:21:19
[музыка]01:21:21
верстку для привлечь чата здесь01:21:24
достаточно мелко но там ничего сложного01:21:27
Мы также определяем01:21:33
далее мы определяем и мы живью и два01:21:37
текста которые как-то01:21:40
теперь отрисуем наш экран со списком01:21:43
чатов01:21:46
У нас есть наш constraitloyaut есть01:21:50
кнопка назад и заголовок соответственно01:21:55
соответственно мы используем для01:21:58
бэкбатана также imageview для заголовка01:22:00
текст View и для списка чатов определяем01:22:03
линейро я вот и задаем некоторые01:22:05
отступы и constraint и01:22:10
наполнение нашего будет состоять из клуб01:22:14
тегов которые будут ссылаться на01:22:17
layout-файл xml с помощью атрибута01:22:21
чтобы нам не писать весь тот громадный01:22:24
кусок кода в линию дублировать все друг01:22:27
за другом Мы можем01:22:29
просто сослаться01:22:33
на верстку с помощью01:22:37
вот это как раз было здесь описано нам01:22:41
позволяет ставить заранее подготовленный01:22:42
кусок разметки в другую разметку01:22:47
Ну по сути мы просто вставили несколько01:22:49
раз готовую верстку наш линейный layout01:22:52
и получили результат фотографии справа01:22:56
но у такого подхода есть проблемы и01:23:00
Начнем с того что01:23:02
зачастую у нас количество объектов в01:23:05
нашем списке оно не константу то есть мы01:23:07
даже не можем заранее знать это01:23:09
количество объектов так как они нам01:23:11
могут приходить условно с бэндом01:23:15
данные также могут включать несколько01:23:18
разновидностей разновидностей объектов01:23:20
на примере с чатами это могут быть чаты01:23:23
с сообщениями и видеочаты01:23:27
которые могут01:23:29
чередоваться друг за другом в списке01:23:32
также01:23:34
наши данные чатов могут меняться в01:23:36
режиме реального времени и могут01:23:38
требовать некоторые анимацию для того01:23:40
чтобы пользователь было понятно что01:23:41
сейчас произошло01:23:42
и тут становится очевидно что ли яут нам01:23:47
не способен дать требуемую гибкость01:23:49
сочетание с простотой пигментации01:23:52
списков например01:23:55
наш список чатами можно сделать с01:23:57
помощью это можно делать все программное01:23:59
можно добавлять программно достаточно01:24:02
много элементов01:24:05
добавлять анимацию но01:24:09
у такого подхода есть много минусов это01:24:12
много бойлер проектного кода и большая01:24:15
вероятность ошибки Ну и также это01:24:17
требует вообще колоссальных усилий01:24:20
то там на помощь может прийти01:24:22
представитель View которым наверное уже01:24:24
многие догадались01:24:27
представители View это инструмент для01:24:29
эффективного отображения больших наборов01:24:31
данных и также это является в Европой в01:24:34
базовом варианте01:24:35
ресайкер включает в себя такие объекты01:24:38
как beholder адаптер и layout-менеджер01:24:40
то есть минимальный набор из которого01:24:42
должен состоять ресайтлер но также он01:24:45
может включать и другие классы которые01:24:47
предназначены для кастомизации например01:24:50
этому аниматор айтом декарейшен И вообще01:24:53
таких классов примерно около 2501:24:56
штук в классе писателя View вот такое01:25:00
разнообразие появилось ввиду того что01:25:02
Достаточно мощный инструмент который01:25:05
позволяет реализовывать большое01:25:07
количество01:25:09
функциональностей и вот разработчики01:25:12
этого инструмента решили декомпозировать01:25:15
работу со списками достаточно четкий01:25:18
понятный класс Согласитесь что если01:25:21
вся наша кастомизация была бы01:25:23
располагалась в одном классе это было01:25:26
совсем неудобно с учетом того что у нас01:25:29
как минимум 2501:25:32
классов01:25:34
которые располагаются в классе01:25:36
ресайтливью01:25:39
Вот Но также хочется упомянуть что01:25:42
классы которые мы показывали На прошлом01:25:45
слайде они не являются единственными при01:25:48
работе с рисайкером у нас также есть01:25:52
классы для кастомизации ресеплеров01:25:54
пакете ресайкервью сюда может сюда можно01:25:57
отнести диффутиль Снаб хелпер также есть01:26:01
готовые реализации интерфейсов из класса01:26:03
review это01:26:05
линеры менеджер это симпатитом аниматор01:26:08
дефолтать нанимать аниматор и всего01:26:11
таких классов и интерфейсов примерно01:26:13
около 30 штук01:26:16
на этом слайде01:26:18
можно глянуть Что такое что на себя01:26:22
представляет01:26:23
это может быть обычный список из строк01:26:26
это может быть список из фотографий01:26:29
строк То есть это повторяющиеся элементы01:26:32
которые обычно стоят из которые обычно01:26:34
выглядят одинаково также есть интерфейс01:26:38
посложнее который взят из истории01:26:42
из истории поиска01:26:45
есть вот такой интерфейс посложнее он01:26:48
уже включает в себя функциональность по01:26:50
смахиванию01:26:53
есть еще следующий пример который01:26:55
наверное в принципе ломает все01:26:57
представление о ресайтере как об01:27:00
инструменте01:27:01
позиционирования вьюшек вот нас это все01:27:05
еще ресайтлер но он достаточно кастомный01:27:08
люди над ним очень долго трудились мне01:27:10
кажется01:27:12
дальше Давайте глянем на схему работы01:27:14
ресайтера сразу здесь оговорочка что это01:27:17
минимальная жизнь жизнеспособная схема01:27:19
работы01:27:21
то есть безразличного рода кастомизации01:27:23
списков сперва как и у любой бьющие01:27:28
отрабатывает метод01:27:30
время которого мы Обращаемся К менеджеру01:27:35
с помощью01:27:38
я вот менеджер обращается к адаптеру01:27:43
узнает количество элементов в списке01:27:45
узнает тип объектов в списке создает01:27:49
beholder для элемента в списке и бандит01:27:52
данные с их представлением по итогу мы01:27:55
получаем01:27:56
конечный список с фьюхами и возвращаем01:28:00
этот набор01:28:04
Давайте еще раз глянем что от нас01:28:06
требуется реализовать нам нужно01:28:09
отобразить следующий кран который сейчас01:28:10
можете увидеть на слайде01:28:12
нам нужно уметь отображать01:28:15
количество чатов вне зависимости от того01:28:18
какой какое число элементов нам пришло в01:28:20
списке и также нам нужно уметь01:28:22
поддерживать Scroll списка потому что01:28:25
количество чатов может быть достаточно01:28:27
большое и они могут не все влезть на01:28:31
экран смартфона01:28:33
Ну что у нас было достаточно много01:28:35
информации Давайте попробуем сначала01:28:38
писать Шаги по реализации01:28:41
ресайтлера и начнем мы01:28:44
с разметки01:28:47
с написанием разметки далее перейдем к01:28:50
модели данных то есть напишем нашу01:28:52
модель данных дата класс перейдем к01:28:55
написанию холдера далее будет адаптер и01:28:59
все это все это по итогам скомпонуем в01:29:02
одной сущности в сайте и это будет нашим01:29:06
так скажем01:29:08
будет писатель который уже функционирует01:29:11
Но в нем еще будут некоторые изъяны01:29:14
для того чтобы01:29:16
был условно проданным чтобы можно было01:29:20
показывать пользователям Нам нужно будет01:29:22
добавить01:29:23
некоторую декорацию Нам нужно будет01:29:26
найти файть элементы об их изменении01:29:30
Нам нужно будет добавить анимацию01:29:33
Мы также изучим менеджер и посмотрим01:29:36
работу с множественными типами вьюшек01:29:42
Давайте приступим для начала на Первом01:29:45
шаге как я обозначили мы файле01:29:47
Activity01:29:49
main.xml заменяем линеру яд на рестайлер01:29:52
View также оставляем его отступы и01:29:55
constraint и01:29:57
На дизайне Мы видим что у нас01:30:00
наши превью чатов они повторяются как01:30:04
уже было сказано ранее соответственно Мы01:30:07
также можем переиспользовать наш чат01:30:09
превью xml с прошлого примера то есть01:30:13
такая же такой же я вот файл01:30:16
[музыка]01:30:17
превью мы его не меняли01:30:20
на втором шаге мы должны подготовить01:30:22
модель данных моделью данных будет01:30:24
являться класс чат превью который будет01:30:27
хранить данные об ID01:30:30
User01:30:32
фотографии юзера типа drawble будет01:30:36
username и01:30:37
message то есть имя пользователя и01:30:40
последнее сообщение в чате01:30:42
переходим к третьему шагу это View01:30:44
Holder тут немножко будет теории01:30:47
вихолдер это объект который содержит01:30:50
ссылку на представление то есть навью01:30:53
на представление одного элемента в нашем01:30:56
списке и задачи холдера будет входить01:31:00
хранение ссылки на представление то есть01:31:02
навью хранение метаданных о расположении01:31:05
представления в списке01:31:07
например это может быть позиция элемента01:31:10
в списке и не обязательно пунктом но01:31:14
Вест он будет являться привязка данных01:31:16
из дата класса в представлении01:31:19
дальше мы дальше думаем поймем что01:31:23
имеется в виду здесь01:31:25
сейчас на экране Можно увидеть полный01:31:27
код нашего бьюхолдера мы его назвали01:31:30
чат-превью холдер унаследовали от01:31:32
базового бьюхолодера в конструкторе01:31:36
передали itembew типа View и01:31:39
с помощью методов findview BYD мы нашли01:31:43
мы нашли01:31:46
бьюхи которые нам нужно будет как-то01:31:49
менять то есть в User фото Нам нужно01:31:52
будет задать фотографию профиля01:31:54
пользователя01:31:55
в юзернейм типа текст нужно будет задать01:31:58
соответственно01:32:00
username и так далее и также мы01:32:04
реализовали метод онлайн куда на вход мы01:32:07
передали чат превью объект превью это01:32:11
объект То есть это наш дата класса01:32:13
Откуда мы получаем данные и после этого01:32:17
мы получили данные мы знаем куда мы эти01:32:20
данные можем применить и соответственно01:32:23
с этим данные в представлении01:32:26
переходим к следующему четвертому шагу01:32:29
это01:32:30
адаптер адаптер это класс который01:32:34
является посредником между набором01:32:36
данных и их представлением пару фактов01:32:38
про адаптер адаптер это абстрактный01:32:40
класс он является обобщенным И входит в01:32:44
классе писателей01:32:46
сейчас пошагово реализуем адаптер для01:32:50
чатов для начала мы наследуемся от01:32:52
базового адаптера из класса ресепфер01:32:56
View и01:32:57
указываем тип01:32:59
дженерик Type у адаптера типа чат01:33:03
превьюхолдер01:33:04
далее мы можем видеть ошибку в Android01:33:07
студии о том что нам не хватает01:33:09
имплементации некоторых методов как01:33:12
здесь показано фотографии на слайде01:33:16
эти методы это методом клиент-холдер это01:33:19
аккаунт и онлайн-вихолдер вот далее мы01:33:22
их имплементируем и Давайте поговорим01:33:26
про каждый метод в отдельности он перед01:33:28
холдер это метод который01:33:32
создает нам объект01:33:36
необходимый холдер01:33:39
Count метод который возвращает01:33:41
количество объектов в списке и онлайн01:33:44
холдер это метод который01:33:46
светит данные в представлении01:33:51
давайте начнем реализовывать адаптер01:33:54
начнем с метода getting Count01:33:57
по названию метода достаточно очевидно01:34:00
что метод возвращает количество объектов01:34:02
в списке тут возникает вопрос Где нам01:34:04
хранить этот список этот список можно01:34:06
хранить прям тут прям адаптере для этого01:34:09
мы создаем01:34:10
переменную типа чат01:34:13
точнее переменную чат типа01:34:16
лист с типом с женой жене Рик Китая01:34:20
помчат превью01:34:21
и в методе Китая там аккаунт мы01:34:24
возвращаем значение размерности этого01:34:28
списка01:34:29
далее реализуем метод geholder метод01:34:33
возвращает01:34:34
beholder нашего типа то есть чат превью01:34:37
холдер01:34:40
Давайте поговорим более подробно о том01:34:42
что делает этот метод этот метод с01:34:45
помощью01:34:46
такого объекта как01:34:48
флейтит нашу наш xml-код01:34:53
в представлении типа View с помощью01:34:57
Мы берем наш чат превью01:35:00
наш xml-код и создаем из него готовую01:35:04
игрушку которую мы можем потом01:35:05
использовать в коде и это вьюшка она01:35:09
передается в Конструктор нашего01:35:11
вихолдера01:35:12
прихолдер01:35:15
соответственно возвращается01:35:21
и тут следует обратить особое внимание01:35:23
на последний элемент точнее последний01:35:26
параметр в методе inflate01:35:28
atache to Root01:35:31
этот параметр обязательно должен быть в01:35:33
значении false Потому что писатель View01:35:37
он самостоятельно01:35:39
управляет01:35:41
самостоятельно управляет атачем вьюшек в01:35:45
списке на экран01:35:48
если мы передадим значение True01:35:52
параметр параметра tocht Root мы можем01:35:56
получить соответствующую ошибку которую01:35:57
мы видим студии Ну по названию здесь01:36:00
достаточно все понятно это название01:36:02
говорит нам о том что вьюне должны быть01:36:05
переотаточные к родителю при их создании01:36:08
и переходим к методу online veholder в01:36:12
этом методе мы должны обновить либо01:36:14
задать либо обновить данные для01:36:16
определенной View то есть на вход мы01:36:18
получаем на вход в этот колбек мы01:36:19
получаем наш холдер типа чат-превью01:36:22
холдер и позицию элементов в списке и01:36:25
далее мы вызываем метод online который01:36:28
мы определили в чат превью холдере01:36:30
передавая туда объект нужного типа из01:36:34
списка элементов Вот и тут хочется01:36:37
остановиться на01:36:39
том моменте Почему мы определили метод01:36:43
онлайн в методе в классе холдер наверное01:36:47
очевидно что01:36:49
если у нас была логика больше Если наша01:36:53
логика состояла больше чем из трех01:36:57
вьюшек в нашем чат превью01:37:00
то наш код выглядел бы достаточно01:37:05
массивным и отслеживать все эти01:37:08
изменения в методе Hold было бы01:37:11
достаточно трудно если к этому еще01:37:13
подключить01:37:17
представление различных вьющих в нашем01:37:19
списке01:37:20
то там вообще была каша01:37:24
дальше у нас происходит достаточно01:37:26
простые манипуляции с рисайкером мы ищем01:37:30
наш риса с помощью метода findview BYD01:37:33
создаем чат адаптер дальше создаем01:37:37
layout-менеджер о том что он означает мы01:37:40
поговорим немножко позже Сейчас можно01:37:42
представлять себе layout-менеджер как01:37:44
способ позиционирования на экране точнее01:37:46
в списке01:37:48
Ну и далее мы с этим адаптер01:37:52
соответствующее свойства у саййлера с01:37:55
этим менеджер и меняем01:37:58
[музыка]01:37:59
с этим данные в01:38:04
свойства чац эти данные для чатов мы01:38:07
получаем из репозиторий который по сути01:38:10
дублирует логику01:38:14
условно бэкент на минималках где мы01:38:18
возвращаем рандомное количество01:38:21
элементов списка01:38:24
результат можно увидеть на экране мы01:38:26
получили достаточно близкий дизайн01:38:28
интерфейс но у нас еще есть заметные01:38:30
различия нас как минимум не хватает01:38:33
в этом поговорим в следующей секции у01:38:37
нас закончилась01:38:43
вопросами можете их задавать01:38:45
постараюсь ответить01:38:57
Ну да тут задали Хороший вопрос почему01:39:00
не рисокеры View для прокрутки01:39:02
Ну как раз таки мы к этому и пришли01:39:16
есть такая возможность чтобы рисовать01:39:18
View сразу построил весь список01:39:21
и не во время прокрутки Чтобы избежать01:39:24
фризов когда элемент тяжелые01:39:28
Я думаю что01:39:31
вы не сможете01:39:34
заранее01:39:36
определить точнее создать все01:39:40
необходимые View условно из нас будет01:39:42
состоять список из тысячи элементов то01:39:45
это будет очень01:39:47
ресурсозатратно для нашего смартфона у01:39:50
которого ограниченные ресурсы Но этим01:39:53
можно управлять я об этом мы поговорим01:39:55
немного позже точнее я просто упомяну01:39:57
скорость но01:39:58
я думаю можете об этом почитать Я просто01:40:01
инструмент для работы для необходимых01:40:05
функциональности01:40:08
[музыка]01:40:15
а Будем ли сокращать вобью текст01:40:17
сообщения если он длиннее в рамках01:40:19
лекции я этого не делал01:40:21
Я думаю что это не нужно это достаточно01:40:24
простая функциональность01:40:27
Можно ли передавать список в01:40:29
конструкторе адаптера а не писать его в01:40:31
самом адаптере это сделать можно но01:40:35
вопрос01:40:36
как тогда мы будем менять данные в01:40:40
списке01:40:44
на один рестайл один адаптер01:40:48
или адаптер можно использовать несколько01:40:50
ресайтлов01:40:52
Ну01:40:54
один адаптер нас предназначен для одного01:40:58
ресайкла точнее объект одного адаптера01:41:01
предназначен для одного01:41:03
представил01:41:06
можно создать несколько объектов одного01:41:09
адаптера одного типа адаптера и01:41:11
использовать их в различных сценариях но01:41:13
один объект для одного рецептора01:41:21
Я думаю секция с вопросами можем01:41:24
заканчивать и переходим к нашей01:41:27
финальной к нашему финальному блоку01:41:32
давайте рассмотрим такой объект как01:41:34
айтом декарейшн этот объект позволяет01:41:37
добавить отрисовку для ресайтлера01:41:41
для нашего списка и добавить отступы01:41:44
определенным элементам в списке задачи01:41:47
этом decretion входят отрисовка фигурка01:41:50
Вверх ресайкера с помощью метода Over01:41:53
отрисовка фигур по адреса икером с01:41:55
помощью методам с помощью метода oндро и01:41:58
проставление отступа для каждого01:42:00
элемента с помощью метода гитаймов сет01:42:02
Давайте попробуем проставить наши01:42:05
представить отступы нашим элементам в01:42:07
списке к нам не хватало для этого01:42:10
создаем свой01:42:13
превью Куда в конструкторе мы Передаем01:42:17
сеты01:42:21
[музыка]01:42:24
далее мы переопределяем метод01:42:27
где мы с этим эти данные То есть сейчас01:42:30
это01:42:32
фигуре ал-трек А вот проект это фигура01:42:37
для01:42:39
прямоугольник для элементов списке01:42:42
прямоугольник для каждого для каждой01:42:44
девушки в списке01:42:45
и тут стоит помнить что этот метод01:42:49
принимает значение в пикселях Поэтому01:42:52
при создании01:42:55
элементы чат-превью при создании объекта01:42:58
чат previewset and decation в классе01:43:00
mainactivity Мы01:43:03
16dp01:43:05
16f превратили в пиксели и дальше уже их01:43:09
передали01:43:11
получили соответствующую соответствующий01:43:14
результат теперь наш список чатов стал01:43:16
пригоднее для использования01:43:17
пользователей наверное будет удобно01:43:18
более удобно для восприятия картинка01:43:23
в качестве примера01:43:25
зарезервированного класса можно привести01:43:29
он находится01:43:31
в пакете сайт интервью и этот класс01:43:34
добавляет разделители между элементами01:43:39
здесь Мы также добавили01:43:41
наш собственный01:43:46
снизу и сверху01:43:48
и скомпоновали эти два и получили01:43:51
соответствующий результат как сейчас у01:43:54
нас представлена на слайде наверное01:43:56
будет плохо видно но между элементами01:43:59
чата между элементами списка можно01:44:02
увидеть01:44:03
небольшой разделитель серого цвета01:44:07
что тоже является достаточно удобный01:44:09
функциональностью01:44:13
но списки в списке данных представителей01:44:16
они обычно не статичные Давайте01:44:18
попробуем добавить функциональность01:44:20
полутуре Фреш чтобы у нас при01:44:23
подтягивании чатов01:44:26
чтобы у нас встретились новые данные в01:44:29
этот список мы будем просто перезапрашивать данные01:44:32
из репозитории которые нам будет01:44:33
возвращать рандомное количество чатов01:44:36
то есть по сути после01:44:39
после01:44:42
у нас должно поменяться количество чатов01:44:44
в списке как сейчас приведено на слайде01:44:50
разметку мы меняем01:44:53
совсем совсем немного мы нашли01:44:57
оборачиваем такой объект01:45:00
и переносим отступы из рестайкеров врешь01:45:06
мы добавляем01:45:10
для объекта Refresh где мы01:45:15
Обращаемся из репозитория и с этим новые01:45:20
данные01:45:21
список чатов которые располагаются нашим01:45:25
адаптере01:45:27
Давайте попробуем запустить приложение и01:45:30
посмотреть на результат но здесь можно01:45:32
заметить что данные не обновляются01:45:34
да давайте разбираться почему так01:45:36
происходит когда мы меняем поле чат в01:45:39
адаптере мы просто меняем данные но мы01:45:42
никак не оповещаем адаптер о том что01:45:44
наши данные поменялись01:45:46
для того чтобы данные обновились нам01:45:49
нужно вызвать метод на тифай дата01:45:51
setchanged который мы можем вызвать в01:45:54
сеттере при проставлении нового значения01:45:56
для списка чатов01:45:59
запускаем приложение видим01:46:02
соответствующий результат теперь наши01:46:04
списки с чатами обновляются01:46:09
но01:46:10
если мы если мы напишем метод change01:46:15
адаптере мы можем заметить worlding01:46:18
Android Studio появляется предупреждение01:46:20
о том что01:46:22
рассчитывает на этот метод стоит как на01:46:25
самый последний вариант такое происходит01:46:27
из-за того что этот метод он достаточно01:46:30
неэффективен и он триггерит полный01:46:32
перепозиционирование и перерисовывание01:46:34
элементов в списке01:46:36
и он01:46:40
метод01:46:42
просто говорит нам о том что Давай еще01:46:44
раз заново перерисуем весь список вместо01:46:47
того чтобы сказать нам что именно01:46:49
поменялось01:46:50
и Для этого нам предлагают01:46:54
несколько других методов У нас есть01:46:58
методы которые могут идентифицировать об01:47:02
изменении в порядке элементов в списке и01:47:05
методы которые идентифицируют об01:47:07
изменениях данных в элементах Вот они01:47:10
соответственно сейчас представлены на01:47:11
экране01:47:13
давайте рассмотрим01:47:15
эти два примера на Первом видео у нас01:47:20
был реализован Адаптер с использованием01:47:22
метода01:47:24
на втором видео у нас приведено01:47:28
использование где мы передали количество01:47:32
элементов в новом списке и можно01:47:35
заметить что у нас01:47:37
на втором видео видна более плавная01:47:40
анимация Она наверное не очень сильно01:47:42
видна но далее мы видим ее в более01:47:48
ярком проявлении01:47:51
Да но тут возникает вопрос что вручную01:47:55
отслеживать изменения каждого элемента01:47:56
будет достаточно сложно Например можно01:47:58
представить себе большие списки в01:48:00
которых у нас поменялось около 5001:48:02
элементов у нас большая у нас появляется01:48:05
большая вероятность ошибки при ручном01:48:07
отслеживании изменений и появляется01:48:09
много более плотного кода для решения01:48:12
этой проблемы у нас есть такой элемент01:48:15
под названием диффутиль диффутиль это01:48:18
класс который предназначен для улучшения01:48:20
производительности ресеплера при01:48:22
обновлениях списком задачи диффутиля01:48:25
входят определение изменения положения01:48:28
элементов в списке также он определяет01:48:30
изменились ли данные в элементе в одном01:48:33
и том же элементе если положение в01:48:35
списке не поменялось и также01:48:38
диффутиль определяет01:48:40
те данные которые были изменены изменены01:48:44
изменены в одном и том же объекте01:48:46
старого и нового списка для их анимации01:48:49
для их точечной анимации01:48:52
Давайте теперь реализуем01:48:54
у нас есть четыре обязательных для01:48:57
переопределения метода это01:49:00
News01:49:04
и в самом начале Мы также конструктор01:49:07
нашего колбека диффутиля Передаем старый01:49:13
новый список01:49:17
Давайте попробуем реализовать метод01:49:19
метода Get Old лиса из Египет мюлисайз01:49:22
здесь мы просто возвращаем01:49:24
количество объектов в списке01:49:27
метод rything возвращает результат01:49:30
сравнения элементов из старого списка и01:49:33
нового и говорит нам о том01:49:37
один лето и тот же элемент из старого и01:49:41
нового списка Например если представить01:49:43
наш пример с чатами01:49:44
то имплементации этого метода будет01:49:47
сравнение01:49:48
чата из старого списка чата из нового01:49:50
списка по айдишнику01:49:53
в данном случае может быть уверены что01:49:55
это один и тот же чат01:49:58
вот в конструкторе мы Передаем callback01:50:01
для сравнения этих объектов в базовом01:50:04
варианте этот колбек будет сравнивать01:50:06
элементы по простому равенству и дальше01:50:09
методы мы01:50:11
находим элементы старого списка находим01:50:14
элементы нового списка и вызываем01:50:17
callback01:50:18
с использованием этих двух объектов и01:50:21
определяем является ли элементы старого01:50:24
списка является элемент из нового списка01:50:27
чем же01:50:28
каким он был старым списке01:50:33
а метод арконтон D7 в свою очередь01:50:37
вызывается только если метод орать там с01:50:40
DSM вернул значение True поэтому01:50:43
[музыка]01:50:45
метод arcontence DSM возвращает01:50:49
результат сравнения01:50:51
данных одного и того же элемента то есть01:50:53
элементы старого списка элементы из01:50:55
нового списка и он сообщает нам о том01:50:57
поменялось ли визуальное наполнение01:51:00
объекта Ну либо их01:51:03
наполнение на уровне слоя данных01:51:07
например с чатами Здесь нам пришлось01:51:11
сравнивать имя пользователя его аватарку01:51:14
и последнее сообщение01:51:18
и в конце используем наш итиль в01:51:20
адаптере при обновлении списка мы01:51:23
создаем соответствующий куда Передаем01:51:25
старый список и новый список и01:51:27
определяем колбэк для методам где мы01:51:30
сравниваем чаты по idшнику дальше мы01:51:34
высчитываем разницу с помощью01:51:36
и применяем изменения с помощью01:51:41
и результат применения диффутина можно01:51:44
сейчас увидеть на экране в сравнении с01:51:47
использованием01:51:49
сейчас у нас видно что если элемент если01:51:53
элемент в списке не поменялся но изменил01:51:56
свое положение он не перерисовывается он01:52:00
просто меняет свою позицию01:52:08
при каких-либо изменениях данных в01:52:11
списке условно При появлении элемента01:52:13
или его удаление или изменение мы можем01:52:16
добавить01:52:17
соответствующую анимацию на каждый вид01:52:21
на каждый вид действий с этим объектом01:52:24
Для этого нам предоставляется такой01:52:28
класс какая-то аниматор и01:52:30
соответствующий метод который сейчас01:52:31
представлены на экране соответственно01:52:34
анимирует появление объекта аниме01:52:37
дисперцы анимирует01:52:38
исчезновение объектов с экраном01:52:41
и другие тоже достаточно понятно по01:52:44
смыслу01:52:48
писатель View из коробки уже дефолту01:52:51
обладает этим аниматором01:52:55
за счет него происходит анимация при01:52:57
использовании диффутиля и при01:52:59
использовании методов01:53:04
и давайте рассмотрим еще одну задачу01:53:07
точнее под задачу Нам необходимо сделать01:53:10
так чтобы наши новые чаты при обновлении01:53:13
списка появлялись сверху и Приезжали01:53:18
анимировались в самый низ и вставали на01:53:21
свою позицию01:53:22
для этого мы создаем01:53:24
собственный собственную реализацию айтом01:53:28
аниматора чат аниматор наследуемся от01:53:31
дефолтайтом аниматора и переопределяя01:53:33
метод Animate pirance01:53:36
мы вызываем метод Animate Move и01:53:40
Передаем начальные координаты нашего01:53:42
объекта то есть 0001:53:44
и Передаем01:53:46
координаты элементы конечные координаты01:53:50
элементы он должен стать01:53:52
свою позицию01:53:55
далее мы просто задаем анимацию методе01:53:57
он клеит класса mainactivity делаем Это01:54:01
с помощью переопределения01:54:03
свойства айтом аниматор01:54:10
соответственно получили получили01:54:13
соответствующий результат который видели01:54:15
ранее01:54:17
Давайте поговорим про layout-менеджеры01:54:20
менеджер это класс который отвечает за01:54:23
измерение позиционирования элементов в01:54:25
списке а также за переиспользование01:54:28
View в списке layout-менеджеры бывают01:54:31
следующих видов это линеры Out Manager01:54:34
gridle я вот менеджер и 100 менеджер01:54:37
также у нас есть Также мы можем01:54:41
создавать свои кастомные имплементации01:54:42
менеджеров01:54:46
линеры менеджер он бывает вертикальной и01:54:50
горизонтальный чтобы название наверное01:54:51
достаточно очевидно Это здесь можно01:54:53
привести аналогию с линейного яопом Мы01:54:56
также позиционируем элементы либо01:54:57
вертикально либо горизонтально01:55:00
гриль менеджер позиционирует элементы по01:55:04
заданной сетке например мы определяем01:55:06
что у нас есть два столбца фотографии01:55:08
справа и дальше каждая строка будет01:55:11
иметь высоту равную больше высоте из01:55:15
двух соседних элементов01:55:18
говоря просто говорит менеджер он01:55:22
позиционирует элементы также как говорил01:55:25
менеджер но теперь вы 100 столбцов она01:55:29
столбцов не зависит от соседних01:55:31
элементов01:55:33
есть также кастомная имплементации01:55:35
layout-менеджеров которые Вы сейчас01:55:37
можете увидеть на экране это достаточно01:55:39
сложная имплементация но к счастью01:55:43
[музыка]01:55:45
различного рода Анимация Я очень01:55:49
элементов в списке01:55:51
уже реализованы за нас есть библиотека01:55:56
которую вы можете найти по qr-коду либо01:55:58
по ссылке01:55:59
точнее эта ссылка на github куда01:56:02
выкладываются не более такие необычные и01:56:05
в имитации кастомных лауд-менеджеров01:56:07
и Давайте дальше рассмотрим еще одну01:56:10
возможность01:56:12
ресеплеры это Последний пункт на сегодня01:56:15
допустим у нас есть задача отображать01:56:18
списке не только чаты01:56:20
только чаты сообщениями также видеочаты01:56:23
как на примере на слайде01:56:27
для этого мы Для начала создаем ход01:56:30
реализации примерно соответствует01:56:33
Наши первые имплементации01:56:35
для начала Мы также задаем некоторый01:56:38
файл видеочат превью01:56:41
в котором мы01:56:43
с помощью01:56:45
того же концентра выставляем 301:56:48
относительно друг друга далее добавляем01:56:52
еще одну модель данных это видеочат и01:56:55
выделяем общую модель данных типа чат01:56:58
куда мы Передаем01:57:02
дальше мы добавляем новый vehold типа01:57:06
видеочат beholder здесь алгоритм01:57:08
имплементации точно такой же как и на01:57:11
предыдущем шаге с ю-холдером01:57:15
Вот и теперь нам нужно изменить наш01:57:17
адаптер для начала мы меняем дженерик01:57:19
Type с чат превью холдер на обобщенный01:57:22
тип veholder потому что теперь у нас01:57:25
есть две вариации холдеров далее мы01:57:30
определяем в компанию object 2 константы01:57:33
типа int и задаем значение 0.101:57:36
и переопределяя метод gettype который01:57:40
говорит нам о том какую01:57:44
какой тип элементов в списке но сейчас01:57:47
нужно отобразить01:57:48
условно это либо чат превью в данном01:57:52
текущем случае либо видеочат либо01:57:55
элемент обычного чата либо элемент01:57:58
видеочата01:58:05
Далее в методе oncreadvi Holder Мы01:58:09
заменяем наш наша возвращаемое значение01:58:12
сейчас превью холдера на обобщенный Тип01:58:15
veholder и в зависимости от полученной01:58:18
константы на вход в callback то есть01:58:22
vitape мы реализуем различные01:58:25
вихолдеры если нам прилетел чат-превью01:58:28
Type то мы реализуем чат превью холдер01:58:31
если прилетает видеочат Type то мы01:58:33
реализуем Наш новый вихолдер видеохолдер01:58:39
внутренняя имплементация для каждого01:58:41
виходе остается такой же точно также с01:58:44
помощью представления01:58:51
методе холдер мы получаем01:58:56
также необходимый холдер01:59:01
здесь Мы также меняем превью холдер на01:59:04
видеохолдер и Передаем модель данных01:59:07
метод онлайн преобразуя перед этим в01:59:10
нужный тип либо видеочат01:59:15
и вот таким образом мы получили01:59:18
требуемый результат теперь у нас в01:59:21
списке есть не только01:59:23
элементы обычного чата но также видеочат01:59:26
весь код можно найти по ссылке либо по01:59:29
qr-коду01:59:30
обязательно его Гляньте01:59:33
Я думаю что мне нет ничего особо01:59:35
сложного01:59:37
видов жирности функционала у ресайтервью01:59:41
мы еще не все успели рассмотреть даже не01:59:45
рассмотрели половину01:59:47
здесь хотелось бы быстро пройтись потому01:59:51
что мы не успели затронуть про возможных01:59:53
оптимизацию списков У нас есть такой01:59:56
элемент02:00:00
это предоставляет возможность изменения02:00:03
элемента без его полного Перри02:00:05
рендеринга Как на примере Слева давайте02:00:09
рассмотрим пример слева для начала у нас02:00:11
при02:00:13
клике на иконку лайка у нас Перри02:00:17
рендривается вся карточка02:00:20
видео справа когда мы кликаем на кнопку02:00:23
лайк у нас02:00:25
обновляется только вьюшка с лайком то02:00:28
есть нас не моргает вся карточка02:00:31
есть также механизм prefetch это02:00:34
механизм настройки предзагрузки02:00:36
следующих элементов в списке которые02:00:38
подается кастомизации это как раз то что02:00:41
спрашивали на одной из Hyundai секций02:00:44
спрашивали Можем ли мы управлять при02:00:46
загрузке следующих элементов Да мы можем02:00:48
это делать но я думаю что02:00:52
не получится отобразить список где у нас02:00:55
1000 элементов 1000 при загруженных02:00:57
элементов02:00:59
также есть такой механизм как Snap02:01:02
Helper это функционал повода скролл02:01:04
списком Например если мы произвели02:01:06
изменения данных и мы хотим после02:01:08
обновления данных вернуться в начало02:01:10
списка можем использовать Stop Helper02:01:14
это класс который хранит в себе ссылки02:01:17
на представления для их при02:01:20
использовании02:01:21
основная логика этого класса заключается02:01:23
в том что мы когда скролим наш список и02:01:26
хотим показать следующие объекты вот те02:01:29
View которые мы видим которые появляются02:01:31
которые появляются при скроле это не02:01:35
Вновь за flage вьюшки это старое02:01:38
представление куда мы просто02:01:41
где мы просто обновляем данные мы просто02:01:44
с этим просто еще раз вызываем этот02:01:47
онлайн-вихолдер02:01:48
с помощью всяких пола мы можем гибко02:01:51
настраивать этот механизм работы02:01:57
последующих элементов и02:02:01
хранением этих элементов сохранение02:02:03
представлений02:02:05
и у нас есть02:02:07
адаптер это расширение базового адаптера02:02:11
который сразу также используют диффутиль02:02:13
то есть лист адаптер который02:02:15
требует который требует переопределения02:02:18
методов02:02:20
колбеков диффутиля и тут через важные02:02:24
замечания что этот адаптер он сравнивает02:02:26
делает свою работу по сравнению списков02:02:28
из нового из старого представления на02:02:32
фоновом потоке Что может быть достаточно02:02:35
полезным инструментом чтобы это все не02:02:37
производить собственноручно02:02:41
также про писатель рвю У нас есть02:02:44
отдельная лекция 21 года который Также02:02:47
можно глянуть и получить намного больше02:02:49
теоретических знаний то сейчас нас02:02:52
Скорее рассматривалась Скорее02:02:54
рассматривался рестайкеры со стороны02:02:56
практики Вот я думаю что там тоже02:02:59
понравится там очень много теории и02:03:03
очень много полезной теории02:03:05
тут можем остановиться ответить на ваши02:03:07
вопросы но в принципе тоже почти конец02:03:10
лекции Давайте перейдем к вопросам02:03:38
mvp здесь означает в плане минимум был02:03:42
продукт02:03:43
[музыка]02:03:45
Зачем нужно делать офсет программно если02:03:48
можно прописать pading02:03:50
Да вы правы По 1 в xml можно02:03:54
проставить для каждого элемента Но в02:03:58
данном случае мы поставим У нас есть как02:04:00
бы на примере с чатами У нас есть превью02:04:03
чатов где мы каждому элементу в списке02:04:07
проставим соответствующий падинг либо02:04:09
маржины но тут возникает вопрос Что02:04:12
делать если у нас02:04:13
будет патинг в конце списка то есть02:04:17
заканчивается список и нам не хотелось02:04:20
бы чтобы у нас снизу был какой-то02:04:22
промежуток Вот для этого мы можем02:04:24
задавать паддинги отдельно для каждого02:04:27
элемента02:04:30
в чем преимущество использования02:04:33
перед изменением xml-кода для02:04:36
отображения айтема02:04:42
в классе Мы можем02:04:44
работать с такими абстракциями как канал02:04:47
то есть мы можем задавать и02:04:50
прорисовывать определенные фигуры02:04:51
подрицательным или02:05:01
в методе есть вопрос про диффутиль в02:05:06
диффутиль колбеке есть метод getchange02:05:07
plate для чего он нужен и как его02:05:10
использовать Вот как раз таки про этот02:05:13
про этот метод getchange plate он не02:05:17
является обязательным для переопределения02:05:19
Вот02:05:22
про этот метод я рассказал на02:05:28
слайде про пейлоут Он нам нужен как раз02:05:31
таки для того чтобы мы могли не02:05:34
перерендеривать всю вьюшку всю карточку02:05:37
а для того чтобы могли указать Какие02:05:39
элементы в этой карточке поменялись02:05:41
чтобы их02:05:51
а какие есть альтернативы у02:05:54
использования ресайтлер View для02:05:55
построения сложных экранов с разными02:05:57
элементами например в карточке товара с02:05:59
подробной информацией в02:06:01
интернет-магазине02:06:02
скорее ответ02:06:05
альтернатив нет У нас есть устаревшие02:06:09
версии ресакера это listview но02:06:14
не очень удобен и он уже не02:06:16
поддерживается писатель View кажется что02:06:19
это наиболее пригодный хороший вариант02:06:22
он один но он унифицирован02:06:33
Я думаю можем заканчивать вопросами и в02:06:36
целом наша лекция02:06:38
подходит концу Всем спасибо всем удачи02:06:42
Приходите на Наши лекции будем рады02:06:45
здесь есть мой Telegram и ссылочка на02:06:49
гитхаб и qr-код Если будут вопросы смело02:06:52
задавайте в Telegram Я постараюсь02:06:54
ответить всем спасибоОписание:
На этой странице вы можете по ссылке скачать медиафайл «Android - View в Android» максимально возможного качества БЕЗ каких-либо ограничений на количество загрузок и скорость скачивания.
Готовим варианты загрузки
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах
Вопросы о скачивании видео
Как можно скачать видео "Android - View в Android"?
Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.
Какой формат видео "Android - View в Android" выбрать?
Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.
Почему компьютер зависает при загрузке видео "Android - View в Android"?
Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.
Как скачать видео "Android - View в Android" на телефон?
Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.
Как скачать аудиодорожку (музыку) в MP3 "Android - View в Android"?
Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.
Как сохранить кадр из видео "Android - View в Android"?
Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.
Сколько это всё стоит?
Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.