Обзор возможностей ConstraintLayout

#AndroidBroadcast #ConstraintLayout
Обзор возможностей самого мощного и гибкого layout в Android - ConstraintLayout
🔗 Поддержать проект taplink.cc/android_broadcast/...
🔗 Каналы "Android Broadcast" taplink.cc/android_broadcast
🔗 Репозиторием с кодом из видео github.com/androidbroadcast/C...
🔗 Документация ConstraintLayout bit.ly/37auBo1
🔗 Тренинг по ConstraintLayout bit.ly/3b6oKB4
🔗 Codelab по ConstraintLayout bit.ly/3af9UsS
0:00 Вступление
1:01 Постановка задачи
2:00 Типы размеров в ConstraintLayout. match_constraint (0dp)
5:23 Относительное расположение элементов, bias
9:48 layout_margin, goneMargin
11:55 Выравнивание View относительно другой View
15:16 Barrier
16:37 Flow: размещение виджетов с автоматическим переносом
22:26 Chain - аналог LinerLayout, предок Flow
25:19 Guideline - виртуальные линии
27:27 Group - группировка виджетов
29:23 Заключение

[@AndroidBroadcast]

💰 Поддержать проект bit.ly/3sratqQ 📰 Android Broadcast Telegram ttttt.me/android_broadcast 📰 Kotlin Broadcast Telegram ttttt.me/kotlin_broadcast

[@mukhtarbimurat5106]

Очень крутой формат, теперь нужно custom view

[@mikemoore7418]

+1

[@randomcommentator]

Это видео мне прямо глаза открыло на ConstraintLayout. Я, как новичок, в основном linear и relative использовал до этого :)

[@sergeycherednichenko301]

Красавчик, никогда раньше не юзал барьер вообще, очень полезно как оказалось

[@sergeykharuk5614]

да, походу это лучший формат канале. Давай дальше о CustomView. Потом о Сustom ViewGroup. А потом о Custom Layout Manager для RecyclerView ))) спасбо)

[@kafychannel]

давно хотел посмотреть, много интересного встретил, надеюсь буду юзать это на работе, thx! :))

[@loleckek2284]

Очень информативный выпуск, узнал много нового, спасибо. На ролике с собесом ты сказал что-то вроде по поводу ui, что неопытный накидает несколько лэйаутов, а не сделает всё в один уровень, что-то подобноее, могу ошибаться, было бы вообще классно узнать побольше о том как правильно верстать и хорошие практики

[@sergeyjoke]

Все четко и понятно. Спасибо.

[@user-jo4pu2tg3w]

Спасибо. Отличный формат видео. Побольше таких.

[@kovalzk1]

очень полезное видео было, спасибоо) хотелось поставить больше, чем один лайк. Хоть я и считаю себя относительно опытным разработчиком, но узнал для себя море нового

[@maksbragin]

Это было шикарно!!! Срочно видео такого характера про Recycler!!!

[@zmeytee]

Формат супер, спасибо. Коротко, понятно и наглядно

[@geroin2012]

Я готов несколько лайков этому видео поставить!! Настолько часто я к нему обращаюсь) спасибо

[@ozodsaidov7427]

Четко и ясно. Спасибо!

[@heroachilles]

Формат просто то что надо!!!!! Спасибо!

[@ProgBoost]

Большое спасибо за видео! Очень полезно✅

[@alexpodshivalov1010]

Узнал кое-что новое, например про Flow. Спасибо за вашу работу

[@Maribobah81]

Супер, большое спасибо. Хотелось бы побольше такого, например про CardView

[@user-zw5ps7jz2y]

Супер! Спасибо.

[@elenasharpilova6616]

Шикарно! Благодарю.

[@yaroslav_kior]

Это лучший видос по Constraint Layout! Спасибо

[@ancient-raccoon]

спасибо тебе Человек!!! очень доступно!)

[@05Sambist]

спасибо большое! очень полезная инфа!

[@user-qu6mb9il6w]

Ух, сколько нового узнал! Спасибо. Новый формат - огонь.

[@AndroidBroadcast]

Спасибо! Такого будет больше в будущем

[@trunker2010]

Спасибо, очень полезно) нашел ответы на многие вопросы

[@maxbury990]

Для меня было очень полезно и познавательно! Огромное тебе спасибо!

[@user-qw6qn5rj9p]

Спасибо, хороший материал и подача! Респект Кириллу и команде.

[@franciskodaskonia]

Крутой гайд, многих вещей нигде не видел, очень полезные штуки!

[@akvadecor]

Спасибо, очень полезная информация

[@user-cs4dl3kk8r]

Круто очень , спасибо !

[@jamesalexander1062]

супер! большое спасибо за детальный обзор

[@user-fo8zl2xw6z]

Спасибо за видео. Очень полезно

[@valeryklachkov7062]

Спасибо за видео! Хорошая подача, кратко и по делу по основному функционалу. В будущем хотелось бы увидеть уроки по оптимизации «тяжелых» списков, например, ленты социальной сети. И отдельно пожелание на урок по анимациям. Сейчас разбираться с ними очень неудобно, много частностей и классов для этого

[@AndroidBroadcast]

Принято!

[@user-gx8kb7hj5l]

Очень полезное видео, спасибо!

[@DmitryKatsubo]

спасибо! очень доступно все разжевал )

[@IT_business_in_Russia]

Супер полезно, спасибо!!

[@_ronix_]

Спасибо за инфу, отличный выпуск, узнал несколько новым моментов) 👍

[@user-jg4pk6bq2g]

Крутое видео! Можно использовать как руководство по применению)

[@andrewzakharov1352]

Спасибо. Сделал пару открытий для себя

[@user-ik1fj7qc2o]

Классный урок,было бы круто подобное по теме тестирования сделать

[@albinapavlenko9924]

Большое спасибо за видео, очень полезно. Даже новичку все понятно 🙃

[@user-fq8dj3vz2l]

Вау. Спасибо, брат. Только изучаю Андроид - и увидел много полезного, а главное: все просто и доступно, нормальным человеческим языком.

[@MsNikitoSz]

Спасибо, полезно! Действительно таких видео бы побольше, потому что вот вроде бы работаешь с констрейнт лайаут, а оказывается столько тонкостей ещё

[@AndroidBroadcast]

Много получилось для себя найти нового?

[@MsNikitoSz]

@@AndroidBroadcast бейз лайны знал, но как-то активно не юзал (забываю постоянно), а вот всё что связано с динамикой вьюшек (constraint gone параметры) было прям открытием)

[@oleksiizaitsev8809]

Браво, очень полезное видео получилось

[@KabukiWarrior369]

очень круто, спасибо!

[@d.mertsalov]

Спасибо!

[@agentr227]

Ждём видео на тему MotionLayout 😊

[@ayazka5248]

Класс, так держать!

[@Architect_Mobile]

Спасибо 👍🏻

[@SuperMarkwel]

топчик, спасибо

[@KO7MO7]

Думал включу, чтобы на фоне что-то играло пока ем, а потом стало так интересно, что поесть забыл

[@AndroidBroadcast]

Да, ConstraintLayout + Android Broadcast - это хорошая пища для мозга 💪

[@user-hl3br5qi6f]

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

[@AndroidBroadcast]

Спасибо. Я буду выпускать серию видео на канале, к которым можно будет получать доступ значительно раньше других. Все это происходит через донаты на Boosty (ссылочка в описании)

[@hueynews7489]

Ля ты пухляш был два года назад. Молодец, что работаешь над собой! Я посмотрев видео, пришёл к выводу, что к пониманию того, о чём ты говоришь сегодня, я приду спустя то время, что ты шёл по своему пути в истории видеороликов ;) Короче еще не скоро :D

[@oleg12395]

Очень годный видос , второй раз прохожу

[@oralbeksapar3299]

очень круто!

[@handleftman]

спасибо за видео, узнал , как джун что-то новое для себя. но что-то конечно придётся дочитывать и искать дополнительно для более глубокого погружения

[@Majjabee-np9nq]

Кирилл спасибо! Ты крут!

[@andrexer77]

Спасибо! Лайк, подписка, рекомендация друзьям!

[@belof]

Hello from Germany! Nice Video!

[@user-fo7jg5vt4c]

Очень крутое видео!

[@mihailkrysan1275]

Очень годный контент, с меня лайк!

[@audiserg]

Супер! Не знал про flow. С chain неочевидный момент, что стиль надо прописывать в первом элементе.

[@user-iv4gm8vt7f]

Круто

[@torskandinav4634]

воо новый формат крутой

[@stefanserkhir6478]

Прям очень понравилось видео! Надеюсь, будешь выпускать подобные видео про какие-либо другие штуки в Андроиде:)

[@AndroidBroadcast]

Конечно буду, дайте время устаканиться

[@thunderdoge]

Было бы круто про разные подходы к анимации в таком же формате сделать

[@evaristegalois450]

отлично

[@Alex-eu1os]

Круто! Можно так освещать технологии и показывать какие-то юзкейсы. Только технологий многовато))

[@AndroidBroadcast]

Почему многовато? Выпуск четко по одному Layout. Разбирать каждую фичу было бы очень уж атомарно

[@Alex-eu1os]

Я был бы только за если будешь рассказывать про разные технологии, используемые в разработке. Я это имел ввиду. Так да, всё классно по делу! Спасибо

[@AndroidBroadcast]

Не так смысл прочитал. То что технологий много - это хорошо. Всегда есть по чём делать контент

[@user-bn6ck9tm5y]

Всю круто, хорошо прошёлся по основным фичам. Единственное хотел бы отметить про Group, из опыта для видимости его лучше не применять, по сколько человек, который смотрит первый раз этот экран и не знает что есть группа, может пытаться изменить видимость одной View, которая в группе и у него это не получится. Так же не плохо было бы отменить про список актёров, что правильно это делать через Recycler, по сколько явно при разных данных будет разное количество актёров.

[@rysnurlanov8012]

Ты лучший 🤘🤘🤘

[@AndroidBroadcast]

😊😊😊

[@aratj]

лучше бы показывал новичкам, что отступы хорошо бы не не хардкодить , а через ресурсы юзать, захочешь ты их на 3 дюймовых экранах поменьше сделать, что бы площадь полезная чуть больше была. и вместо 3х минут, в сложных вьюхах час будет переделывать

[@AndroidBroadcast]

Согласен. В следующей раз буду все писать по правильному.

[@user-ok9tp5lx6n]

еще побольше тотуриалов спасибо

[@ki16or]

goneMargin и Flow было новым. А про group могу сказать, что если нужно будет работать в невидимостью с отдельными вьюхами внутри группы, то не получится. видизибили группы имеет приоритет.

[@MxMayers]

Нереальное видео! Так сжато, по делу и без воды я еще не видел!) все супер, а как быть с ID актерами 19:28 ведь по идеи они должны прилетать динамически? задавать их программно?

[@AndroidBroadcast]

На самом деле тут будет лучше использовать RecyclerView. Пример с актерами был показан как демонстрации возможности ConstraintLayout

[@user-cg8bv6xh6x]

Было бы неплохо снять видео по анимациям, material motion и все такое

[@user-fo7jg5vt4c]

Ещё интересна тема о профайлере

[@NikolayBychinin]

Очень классно, спасибо. Расскажи про garbadge collectors

[@AndroidBroadcast]

Не думаю что такое в обозримом будущем появится на канале. На эту тему рекомендую посмотреть доклад от Chet Haase kzbin.info/www/bejne/pn69nnd4rM-ErLM

[@olegsheliakin2041]

Отличное видео с хорошими примерами. Единственное хотелось бы поправить, что baseline не только у TextView, а у View класса. То есть любое View можно выравнивать по baseline. У View есть метод на строке c небольшим номером №25341 - getBaseline().

[@AndroidBroadcast]

Насколько я знал это всегда касательно только TextView применялось

[@Yank_Main]

про motionlayout пожалуйста )

[@sevenxp8858]

О хотел как раз узнать подробнее про констрейнт и тут коротко о главном))) Некоторые вещи для себя подчеркнул. Но с отступами, я бы не создавал группу для отступов, что то подсказывает, что обычный marginStart отработает быстрее Guideline если я ошибаюсь, то был бы рад узнать об этом, гуглить влом xD Но по логике это привязка + все равно остается Margin 0, - привязка и все. А для этих целей завожу base_margin = 16dp

[@user-cx2cm5yv4i]

Дуже дякую з відео. Багато дізнався, чого не знав.

[@user-oc7py1vy6s]

Знал и использовал все фишки из видео. Не упомянули в видео про возможность задавать соотношение сторон у view в constraint layout'e и возможность располагать view под углом относительно друг друга.

[@AndroidBroadcast]

Расположение под углом очень спорная возможность. Разве что для анимаций нужна, а вот про соотношение сторон тут согласен, стоило упомянуть.

[@MrKizup]

Классное видео, спасибо. Можно ещё добавить, что эти операции можно выполнять во вкладке Design, не всегда это удобно и понятно, но например перетащить constraint к границе экрана можно. Также ещё по своему опыту знаю, что не все знают основные хоткеи в студии, а в видео часто они используются. В свое время на столе лежала распечатанная таблица от Jetbrains. Вот тут можно скачать pdf под все OS resources.jetbrains.com/storage/products/intellij-idea/docs/IntelliJIDEA_ReferenceCard.pdf

[@AndroidBroadcast]

Я думал сделать отдельно видео про design editor если оно имеет востребованность

[@MrKizup]

@@AndroidBroadcast этот редактор странная штука. Вроде задумка неплохая, но xml намного нагляднее описывать

[@user-oi3sk5gn9y]

Я так и не разобрался как это делать в режиме design.

[@user-oi3sk5gn9y]

@@AndroidBroadcast было бы неплохо

[@volodymyrmedvediev2628]

Супер полезное видео! Спасибо! Подскажи плз, как покрасить теги вьюшек как у тебя?

[@AndroidBroadcast]

Наверное ты о плагине plugins.jetbrains.com/plugin/10080-rainbow-brackets

[@monkas2738]

отличное видео, только заставка громкая на 3:37 ты говоришь что нужно обязательно указать горизонтальный констрейнт, но разве есть в этом смысл если ширина view на весь parent? имеет ли это какое то значение сейчас, или это просто на случай если нужно будет что доделывать? чем match_constraint 0dp лучше match_parent в случае если мне надо вью растянуть с начала до конца parent?

[@AndroidBroadcast]

Указание constraint не является жестким требованием, но не использовать match_parent и указывать горизонтальный и вертикальный constraint избавит вас от ошибок, на которые я и другие разработчики успели убить в свое время по несколько часов своей работы.

[@antonlazarchenko2078]

Хороший разбор, спасибо. Интересно как это будет выглядеть при повороте экрана и как это все подгоняется после вертикальной верстки? Или такие дизайны обычно подразумевают отсутствие альбомной ориентации?

[@AndroidBroadcast]

Дизайн экрана не задумывался под альбомную ориентацию. Я его бы поменял, так как иначе оставлять много пустого места.

[@24Mrnobody]

Спасибо за видео, очень полезно. Возник вопрос, можно ли в коде динамически добавлять во flow_helper объекты типа view?

[@AndroidBroadcast]

Я не нашел такого API, но возможно стоит лучше покапаться

[@24Mrnobody]

@@AndroidBroadcast я вроде нашел кейс, буду тестировать)

[@AndroidBroadcast]

Будет хорошо если поделишься, но ссылки забанит

[@Alex-qz1dj]

Хотелось бы увидеть какой-нибудь макет посложнее в формате LiveCoding. Видео очень кстате)

[@AndroidBroadcast]

Я выбрал такой макет, чтобы продемонстрировать на нём все возможности и сделать это компактно по времени. Боюсь с более сложным layout мог убить много времени и все бы превратилось в кашу.

[@Alex-qz1dj]

@@AndroidBroadcast Так и было бы, это скорее как предложение на продолжение темы)

[@ivanchepelkin6347]

Отличное видео, спасибо! Подскажите, в чем основная разница между контсрэйнтами left и start, end и right?

[@AndroidBroadcast]

Это поддержка Right to Left - языков где написание происходит ни как в русском слева направо, а наоборот. Left, right будут всегда размещаться слева и справа соответственно, независимо от правил написания в локале. А вот start, end будут реагировать и менять расположение элементов UI Рекомендуется использовать именно start, end везде: отступы, паддинги, размещение, картинки и прочее

[@artemsidorov8116]

Можно ли во flow программно добавлять элементы? (например есть список актеров и хотим его засунуть во флоу)

[@AndroidBroadcast]

Да, все это редактируется через код. Туда добавляются id view, но лучше будет взять RecyclerView

[@MazdaDoc]

ну количество актеров может динамически меняться в зависимости от фильма для такого экрана, может там юзать что то типа recycler view или тут был использован flow чисто для примера что есть такой хелпер, из кода есть в него возможность динамически сетить актеров? как в таких случаях лучше делать?

[@AndroidBroadcast]

Я говорил что это пример для демонстрации возможности. В реальной задаче лучше использовать RecyclerView, но если количество актеров на экране фиксированное то вполне можно и добавить все эти View динамически. RecyclerView лучше использовать при очень большом количестве элементов либо когда они тяжелые и нужно их переиспользовать.

[@user-bm9qd6lj6v]

Вопрос (в начале 7-й минуты примерно): почему, когда указываешь относительно какого объекта размещаться (типа app:layout_constraintEnd_toEndOf="@id/banner"), Студия по умолчанию предлагает влепить плюс между @ и id и почему его оставлять там опасно? Чем именно опасно, ведь с плюсом тоже работает?

[@september669]

Попробуй удалить такую вью и посмотри, что получится

[@AndroidBroadcast]

+ в id это значит его создание. Т.е. ты можешь ссылаться на View, который олько что создал.

[@layoor]

Здравствуй, проходил стажировку по андройду и там говорили что bias не надо добавлять, а лучше избегать их. Как ты относишься к этому?

[@AndroidBroadcast]

Я им пользовался крайне редко, но причин вообще его не добавлять не знаю. Если сможешь описать конкретные причина, тогда дам больше информации

[@user-ju6td3un1n]

Использование Flow для списка актеров очень спорный момент, количество может быть разным, а добавить туда view в коде, тот еще костыль.

[@AndroidBroadcast]

Насколько помню, прямо в видео я говорил что на практике так делать не стоит. Flow использовался для демонстрации фичи

[@user-ju6td3un1n]

@@AndroidBroadcast аа ну сорри, не услышал, я просто ни разу им не пользовался, а после просмотра решил поиграть с ним иии так и не придумал, где бы я его смог использовать))) Кстати FlexboxLayout делает то же самое и даже с теми же самыми параметрами, только он при этом полноценный Layout.. ```implementation 'com.google.android:flexbox:2.0.1'```

[@user-cq2fv3zv5k]

Правильно ли говорят, если в Constraint Layout использовать другие вью группы (к примеру Linear Layout и т.д.), то это отрицательно влияет на производительность прилы?

[@AndroidBroadcast]

Вложенные layout всегда негативно влияют на производительность UI, но я допускаю что есть исключения, когда это может быть по другому

[@aratj]

если вьюха не слишком сложная, то одна вложенность ничего визуально не изменит. и сильно завист от задач, например всякие include , которые используются в разных экранах итд.

[@bolnoi8]

Интересный подход с Flow, странно что он не работает как ViewGroup, т.е. вьюшки находятся рядом, а не в нём. Не сбивает ли это с толку? Видим вьюшку в xml, а правил размещения у нее нет, т.к. за это отвечает Flow. Что насчёт best практик в этом случае? Сначала flow, а следом вьюхи которые он содержит или наоборот? Ещё не нравится ConstraintLayout из-за необходимости иметь id, которые нужны только для позиционирования других вьюх, в итоге если на экране много TextView, которые не нужны в коде, получаем textView1, textView2, textViewN. Тут ещё стоит вспомнить про особенность студии, когда при попытке рефакторинга id вьюхи в одном xml, он меняется во всех. ИМХО стоит добавить псевдо id, который виден в разметке, но недоступен в коде, в т.ч. в ViewBinding.

[@AndroidBroadcast]

Если бы во Flow можно было вкладывать другие View, он бы стал ViewGroup и мы бы получили вложенность с которой ConstraintLayout призван бороться.

[@AndroidBroadcast]

По поводу расположения Flow в XML интересный вопрос. Я не задумывался.

[@bolnoi8]

@@AndroidBroadcast Добавление Актёров наверно лучше сделать через какой-нибудь лист с адаптером, т.к. в коде будет некрасиво: создай view, вставь LayoutParams, сделай generateId(), добавь view сначала в layout, а уже потом во Flow. Это в целом и так понятно, ведь основная цель видео показать возможности contraintLayout, но стало интересно, как решить эту задачу правильно? Я джун и мне в голову ничего кроме RecycleView со своим layoutManager'ом не пришло. Но сам recycling нам вроде бы не нужен...

[@apbuzzz]

Почему 0dp лучше чем match_parent? Поидее layout_constraintStart_toStartOf="parent" и match_parent должен делать тоже самое, нет?

[@AndroidBroadcast]

Это разные значения. В видео я объяснил как это меняет поведение.

[@user-qr5iw3zr4q]

Сколько стоит заказать разметку?

[@user-rw8zs7vz9u]

Есть ли курсы строго по верстке приложений на XML, как в данном видео?

[@AndroidBroadcast]

Не знаю таких, да и обычных немного знаю

[@DaniilK-hq5go]

Не совсем понял в чём прикол Guidelines, ведь кода стало только больше, но ничего не поменялось (если правильно понял). Ещё не понял что имелось в виду под "реализацией сложных UI через собственный View", что может быть эффективней ConstraintLayout.

[@AndroidBroadcast]

Guidelines позволяют выравнивать несколько элементов сразу, причем делать это можно не только как padding контейнера, а в процентах. Удобство и не больше

[@AndroidBroadcast]

Раньше чтобы делать сложные UI без вложений могли прибегать к созданию собственной, View. ConstraintLayout дал возможность создавать сложные экраны без вложенности, но по производительности он не лучший