{"id":305584,"date":"2020-06-18T21:00:54","date_gmt":"2020-06-18T21:00:54","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=305584"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=305584","title":{"rendered":"Litho: \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e UI \u0432 Android"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/jugru\/blog\/507130\/\">Litho \u2014 UI-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043e\u0442 Facebook, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0442\u044f\u0436\u0435\u043b\u043e\u0433\u043e UI \u0432 \u0442\u043e\u043f\u043e\u0432\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043c\u0438\u043b\u043b\u0438\u0430\u0440\u0434\u0430\u043c\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043e\u043a.<\/p>\n<p>  \u041a\u0430\u043a \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c, \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0438 \u0441 UI \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430?<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/jw\/-e\/nw\/jw-enw14grrsrqiet9z6fsfusgu.png\"><\/div>\n<p>  Cookbook \u043f\u043e Litho \u0432 \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u043a\u0435 \u043c\u043e\u0435\u0433\u043e \u0434\u043e\u043a\u043b\u0430\u0434\u0430 \u0441 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 Mobius 2019 Moscow \u043f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c. <a name=\"habracut\"><\/a>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/4F4HJcFrWEw?rel=0&amp;showinfo=1&amp;hl=en-US\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen scrolling=\"no\" allow=\"encrypted-media; accelerometer; gyroscope; picture-in-picture\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u0421 \u0432\u0430\u043c\u0438 \u0421\u0435\u0440\u0433\u0435\u0439 \u0420\u044f\u0431\u043e\u0432 \u2014 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u0437 \u041b\u043e\u043d\u0434\u043e\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u043d\u0430 \u043f\u0430\u0443\u0437\u0443 \u0441\u0432\u043e\u0439 \u043a\u043e\u0447\u0435\u0432\u043e\u0439 \u043e\u0431\u0440\u0430\u0437 \u0436\u0438\u0437\u043d\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0442\u0430\u043a\u043e\u0439 \u043b\u0438 \u0410\u043b\u044c\u0431\u0438\u043e\u043d \u0442\u0443\u043c\u0430\u043d\u043d\u044b\u0439, \u043a\u0430\u043a \u043e \u043d\u0451\u043c \u043b\u044e\u0431\u044f\u0442 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c. \u0418 \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 Native UI Frameworks \u043d\u0430\u0434 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c Litho. <\/p>\n<h2>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u043e\u0441\u0442\u0430:<\/h2>\n<p>  <\/p>\n<ul>\n<li><a href=\"#what\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Litho?<\/a>;<\/li>\n<li><a href=\"#api\">\u0414\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 API \u0432 Litho<\/a>;<\/li>\n<li><a href=\"#combine\">\u041a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 UI-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/a>;<\/li>\n<li><a href=\"#litho\">Litho: \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c<\/a>;<\/li>\n<li><a href=\"#ann\">\u0410\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u044f @MountSpec<\/a>;<\/li>\n<li><a href=\"#opt\">\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 Litho<\/a>;<\/li>\n<li><a href=\"#man\">\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c<\/a>;<\/li>\n<li><a href=\"#ani\">\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432 Litho<\/a>;<\/li>\n<li><a href=\"#incept\">\u041f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u0435 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435<\/a>;<\/li>\n<li><a href=\"#debug\">\u0414\u0435\u0431\u0430\u0433\u0433\u0438\u043d\u0433 \u0438 \u0442\u0443\u043b\u044b \u0432 Litho<\/a>;<\/li>\n<li><a href=\"#concl\">\u0420\u0435\u0437\u044e\u043c\u0435<\/a>;<\/li>\n<li><a href=\"#bonus\">\u0411\u043e\u043d\u0443\u0441: Litho \u0438 Kotlin<\/a>.<\/li>\n<\/ul>\n<p>  <a name=\"what\"><\/a>  <\/p>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Litho?<\/h2>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/6y\/gk\/0i\/6ygk0i2zls8r1z2r9jjme_ooae0.png\"><\/p>\n<p>  Litho \u2014 \u044d\u0442\u043e UI \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0443\u0436\u0435 \u0447\u0435\u0442\u044b\u0440\u0435 \u0433\u043e\u0434\u0430. \u0414\u0432\u0430 \u0433\u043e\u0434\u0430 \u043e\u043d \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0437\u0430\u0442\u0435\u043c \u0435\u0433\u043e \u0432\u044b\u0432\u0435\u043b\u0438 \u0432 \u043e\u043f\u0435\u043d\u0441\u043e\u0440\u0441, \u0438 \u0432\u043e\u0442 \u0443\u0436\u0435 \u0434\u0432\u0430 \u0441 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u043e\u0439 \u0433\u043e\u0434\u0430 \u043e\u043d \u0440\u0430\u0441\u0442\u0435\u0442 \u0438 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u043f\u0435\u043d\u0441\u043e\u0440\u0441\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e Litho \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0441\u044f \u0434\u043b\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Facebook, \u0445\u043e\u0442\u044f \u0435\u0441\u043b\u0438 \u0432\u0437\u044f\u0442\u044c \u0442\u0440\u0438 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 Litho \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e \u0438\u0437 \u043d\u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a Facebook. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0436\u0435 \u2014 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b Google. <\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u044d\u0442\u0430\u043f\u044b \u0440\u0430\u0431\u043e\u0442\u044b: Inflate, Measure, Layout, Draw. \u0412\u0441\u0435 \u044d\u0442\u0438 \u044d\u0442\u0430\u043f\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f UI \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u0432 16 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u043b\u043e. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0442\u044f\u0436\u0435\u043b\u044b\u0439 UI, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 16 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434: \u0432\u0441\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u044b, \u043c\u044b \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u0432\u044b\u0436\u0430\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438\u0437 \u043d\u0430\u0448\u0438\u0445 \u0432\u044c\u044e\u0448\u0435\u043a, \u043d\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u043b\u0430\u0433\u0430\u0435\u0442. \u041c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u0442\u044c\u0441\u044f \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 \u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0442\u043e\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Inflate, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u044f\u0436\u0435\u043b\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c AsyncLayoutInflater, \u0438\u0437 \u043d\u0430\u0431\u043e\u0440\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a Android Jetpack. <\/p>\n<p>  \u0417\u0430\u043c\u0435\u0442\u0438\u043c, \u0447\u0442\u043e AsyncLayoutInflater \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u044e\u0430\u043d\u0441\u044b: \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u044c\u044e\u0448\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441 Handler, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b LayoutParams \u0431\u044b\u043b\u0438 thread-safe \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435. \u041d\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e.<\/p>\n<p>  \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0435\u0449\u0435 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0438 \u0434\u0430\u0436\u0435 \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u0442\u0440\u0438 \u0441\u0442\u0430\u0434\u0438\u0438 \u0443\u0436\u0435 \u043d\u0435 \u0432\u043b\u0435\u0437\u0430\u044e\u0442 \u0432 16 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434. \u0412 \u0446\u0435\u043b\u044f\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0432 \u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0442\u043e\u043a \u2014 \u0441\u0440\u0430\u0437\u0443 \u0438 Measure, \u0438 Layout, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u044d\u0442\u043e \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0430\u0441\u0447\u0435\u0442\u044b, \u0438 \u043e\u043d\u0438 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u0432\u044f\u0437\u0430\u043d\u044b \u043e\u0442 Android. \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a \u043d\u0435\u043b\u044c\u0437\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 Android UI-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 Measure \u0438 Layout \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 View, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441 \u043d\u0438\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 UI-\u043f\u043e\u0442\u043e\u043a\u0435. <\/p>\n<p>  \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0438 \u043f\u0440\u0438\u0437\u0432\u0430\u043d \u0431\u044b\u043b \u0440\u0435\u0448\u0438\u0442\u044c Litho \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0432 \u0431\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434-\u043f\u043e\u0442\u043e\u043a, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0435\u0442\u044b, \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432 UI-\u043f\u043e\u0442\u043e\u043a\u0435 \u0438\u0445 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/pk\/3l\/qk\/pk3lqk_tmy1eem3b0gi0lqhmpja.png\"><\/p>\n<p>  Litho \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 View \u0432 \u0444\u0430\u0437\u0430\u0445 Measure \u0438 Layout \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0432\u0438\u0436\u043e\u043a Yoga, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u043e\u0436\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 Native UI Frameworks. \u0418 \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435, \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0441\u044e \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0443 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 \u0431\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434-\u043f\u043e\u0442\u043e\u043a. <\/p>\n<p>  \u041f\u043e\u0434\u043e\u0431\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442, \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0434\u0440\u0443\u0433\u043e\u0439 API \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 UI-\u043f\u043e\u0434\u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0443\u0436\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u044c\u044e\u0448\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e XML \u0438\u043b\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043a\u043e\u0434\u0435, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u043d\u044c\u0448\u0435. XML \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0439 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0440\u0438\u0440\u043e\u0434\u043e\u0439, \u043d\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435 \u0433\u0438\u0431\u043e\u043a. \u0410 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 UI \u0432 \u043a\u043e\u0434\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0432\u0441\u044e \u043c\u043e\u0449\u044c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043b\u044e\u0431\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439, \u043d\u043e View API \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0435 \u0431\u043b\u0435\u0449\u0435\u0442. \u041f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0442\u043e\u0433\u0434\u0430 \u043d\u0435 \u0432\u0437\u044f\u0442\u044c \u043b\u0443\u0447\u0448\u0435\u0435 \u0438\u0437 \u043e\u0431\u043e\u0438\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432? <br \/>  <a name=\"api\"><\/a>   <\/p>\n<h2>\u0414\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 API \u0432 Litho<\/h2>\n<p>  \u0414\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442, \u0447\u0442\u043e UI \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u0432\u0438\u0434\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043d\u0430\u0431\u043e\u0440\u0430 \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 (props) \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0435\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e UI. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u00ab\u0447\u0438\u0441\u0442\u043e\u0439\u00bb, \u043d\u0435 \u0438\u043c\u0435\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043a\u0440\u043e\u043c\u0435 \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0438 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c UI \u0434\u0430\u0436\u0435 \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435, \u043d\u0435 \u0431\u043e\u044f\u0441\u044c \u0437\u0430 \u043f\u043e\u0442\u043e\u043a\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c (thread-safety). <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-g\/xr\/wg\/-gxrwggqbzl7fjknswou1rvqspa.png\"><\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0434\u0432\u0443\u0445\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0439 \u0432\u044c\u044e\u0448\u043a\u0438 \u0432 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a: <\/p>\n<pre><code class=\"kotlin\">fun f(     title: String,     subtitle: String ): UI {   return Column.create()     .child(         Text.create()             .text(title))\t     .child(         Text.create()             .text(subtitle))     .build() }<\/code><\/pre>\n<p>  \u041f\u043e \u0432\u0445\u043e\u0434\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f title, subtitle \u0438 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0438\u0445 \u0432 Column, \u0442\u043e \u0435\u0441\u0442\u044c \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433\u0430. <br \/>  \u0412 Litho \u044d\u0442\u0430 \u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"kotlin\">@LayoutSpec object ListItemSpec {    @OnCreateLayout   fun onCreateLayout(       c: ComponentContext,       @Prop title: String,       @Prop subtitle: String   ): Component {     return Column.create(c)         .child(             Text.create(c)                 .text(title))         .child(             Text.create(c)                 .text(subtitle))         .build()    } }<\/code><\/pre>\n<p>  \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430\u0434 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u044f <b>@OnCreateLayout<\/b>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442, \u0437\u0430 \u0447\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f. \u0412\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0442\u043e\u0436\u0435 \u043f\u043e\u043c\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 <b><code>@Prop<\/code><\/b>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e \u043d\u0438\u043c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 Builder, \u0434\u043b\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f UI, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u0435\u0437\u0434\u0435 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 ComponentContext. \u0418 \u0432\u0441\u0451 \u044d\u0442\u043e \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043b\u0430\u0441\u0441 \u0441 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 <b><code>@LayoutSpec<\/code><\/b>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b. <\/p>\n<p>  \u042d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Kotlin, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f object, \u043d\u043e \u0435\u0441\u043b\u0438 \u0431\u044b \u043e\u043d \u0431\u044b\u043b \u043d\u0430 Java, \u0442\u043e \u043c\u0435\u0442\u043e\u0434 \u0431\u044b\u043b \u0431\u044b \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c. \u042d\u0442\u043e \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u043b\u0435\u043d\u043e \u0432\u044b\u0448\u0435\u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u043c \u0443\u043f\u043e\u0440\u043e\u043c \u043d\u0430 \u043f\u043e\u0442\u043e\u043a\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c. \u041c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c UI, \u0430 \u0442\u043e, \u0447\u0442\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c, \u043d\u0430 \u044d\u0442\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043f\u0440\u044f\u043c\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443 \u0448\u0430\u043d\u0441\u044b \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043e\u0448\u0438\u0431\u0438\u0442\u044c\u0441\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043b\u043e\u0445\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (state) UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f. <\/p>\n<p>  <a name=\"combine\"><\/a>  <\/p>\n<h2>\u041a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 UI-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h2>\n<p>  \u0423 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439 UI, \u0430 \u043a\u0430\u043a \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u0430 \u0435\u0435 \u043e\u0441\u043d\u043e\u0432\u0435 \u0447\u0442\u043e-\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0435? \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0441\u043b\u0435\u0432\u0430 \u043e\u0442 \u0442\u0435\u043a\u0441\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0442\u0430\u043a\u043e\u0439 header \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439: \u0435\u0433\u043e \u0430\u0432\u0430\u0442\u0430\u0440, \u0438\u043c\u044f \u0438 \u0434\u0430\u0442\u0430 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/xe\/e2\/ic\/xee2icsrx9abwjkhebmqvbnqaug.png\"><\/p>\n<p>  \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e LinearLayout, \u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ListItem, \u0437\u0430\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044f \u0438\u0445 \u0432 Row. \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0441\u044f \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0432\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>@Prop image<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u0430\u043c\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u0430 \u0442\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ListItem.<\/p>\n<p>  \u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043a\u043b\u0430\u0441\u0441\u0430\u0445 \u0441 \u0441\u0443\u0444\u0444\u0438\u043a\u0441\u043e\u043c Spec, \u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u043e\u0432 \u044d\u0442\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u044b \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u0443\u0444\u0444\u0438\u043a\u0441\u0430. \u0412\u0441\u0451 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e Litho \u043f\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c Spec-\u0444\u0430\u0439\u043b\u0430\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u043c\u043d\u043e\u0433\u043e\u043f\u043e\u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u043c API \u0432 \u0432\u0438\u0434\u0435 Builder-\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0432 UI-\u0441\u043f\u0435\u043a\u0435. <\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0438 Activity, \u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/on\/th\/tq\/onthtqn9rqeuxjto0ixuo0aafkg.png\"><\/p>\n<p>  \u0412 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u043c API Litho \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430 View \u2014 LithoView. \u042d\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0432\u0441\u0435\u0445 Litho-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0427\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c ComponentContext, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0435\u043c\u0443 Android Context, \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c LithoView, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0432 \u043c\u0435\u0442\u043e\u0434 create \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0438 \u0441\u0430\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0421 LithoView \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0451, \u0447\u0442\u043e \u0432\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0432\u044c\u044e\u0448\u043a\u0430\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u043c\u0435\u0442\u043e\u0434 setContentView \u0443 Activity.<\/p>\n<p>  \u0421 API \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Builder-\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043b\u0435\u0433\u043a\u043e, \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432\u044c\u044e \u0432 XML. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043b\u0438\u0448\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f XML-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0432\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u043c\u0435\u0442\u043e\u0434\u044b Builder-\u0430. \u041d\u043e \u0440\u0430\u0437 \u0443\u0436 \u044d\u0442\u043e \u0432\u0441\u0435 \u0442\u0430\u043a \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u0432\u044f\u0437\u0430\u043d\u043e \u043e\u0442 Android-\u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0442\u043e \u0447\u0442\u043e \u0436\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c?<\/p>\n<p>  <a name=\"litho\"><\/a>  <\/p>\n<h2>Litho: \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c<\/h2>\n<p>  \u0412\u043e\u0437\u044c\u043c\u0435\u043c ListItemWithImageSpec, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u044b \u0443\u0436\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b\u0438\u0441\u044c \u0440\u0430\u043d\u0435\u0435. \u0412 \u043d\u0451\u043c \u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: Row, Image \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 ListItem:<\/p>\n<pre><code class=\"kotlin\">@LayoutSpec object ListItemWithImageSpec {      \/\/ ...      Row.create(c)         .child(             Image.create(c)                   .drawable(image))         .child(             ListItem.create(c)                   .title(title)                   .subtitle(subtitle))         .build()   } }<\/code><\/pre>\n<p>  \u0418 \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0433\u043e \u0432 LithoView \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"kotlin\">setContentView(LithoView.create(c,     ListItemWithImage.create(c)         .image(user.avatar)         .title(user.name)         .subtitle(comment.formatDate())         .build())) <\/code><\/pre>\n<p>  \u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0432 \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0448\u0430\u0433\u0430:<\/p>\n<ol>\n<li>\u041f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 Internal Tree \u2014 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f UI.<\/li>\n<li>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 LayoutState \u2014 \u043d\u0430\u0431\u043e\u0440\u0430 Drawable \u0438 View, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435<\/li>\n<li>\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 LayoutState \u043d\u0430 Canvas-\u0435<\/li>\n<\/ol>\n<p>  <\/p>\n<h3>\u041f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 Internal Tree<\/h3>\n<p>  \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0441 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>ListItemWithImage<\/code>: <\/p>\n<ul>\n<li>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u0435\u0440\u0435\u0432\u0430, InternalNode, \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u0443\u0435\u043c \u0441 \u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>ListItemWithImage<\/code>. \u0422\u0430\u043a \u043a\u0430\u043a <code>ListItemWithImage<\/code> \u2014 \u044d\u0442\u043e \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u0435\u0440\u0442\u043a\u0430, \u0442\u043e \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435.<\/li>\n<li>\u0412\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 <code>onCreateLayout<\/code> \u0432 <code>ListItemWithImageSpec<\/code> \u043c\u044b \u043f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u043c Row. \u0410\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e \u0441 \u0442\u043e\u0439 \u0436\u0435 \u0441\u0430\u043c\u043e\u0439 \u043d\u043e\u0434\u043e\u0439.<\/li>\n<li>\u0423 Row 2 \u043f\u043e\u0442\u043e\u043c\u043a\u0430: Image \u0438 ListItem \u2014 \u0434\u043b\u044f \u043e\u0431\u043e\u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 InternalNode-\u044b. Image \u2014 \u044d\u0442\u043e \u043b\u0438\u0441\u0442\u043e\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0430 \u044d\u0442\u043e\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u0430 \u043e\u043a\u043e\u043d\u0447\u0435\u043d\u0430. <\/li>\n<li><code>ListItem<\/code> \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0442\u043e\u0436\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u043e\u0431\u0435\u0440\u0442\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u0441\u0443\u0442\u0438 \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u043c\u0435\u0442\u043e\u0434 onCreateLayout \u0435\u0433\u043e \u0441\u043f\u0435\u043a\u0438. \u0422\u0430\u043c \u043c\u044b \u0432\u0438\u0434\u0438\u043c Column, \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u0443\u0435\u043c \u0435\u0451 \u0441 \u0442\u043e\u0439 \u0436\u0435 \u043d\u043e\u0434\u043e\u0439.<\/li>\n<li>\u0423 <code>Column<\/code> \u0435\u0441\u0442\u044c 2 \u043f\u043e\u0442\u043e\u043c\u043a\u0430: Text \u0438 Text \u2014 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0434\u043b\u044f \u043d\u0438\u0445 \u0434\u0432\u0435 \u043d\u043e\u0432\u044b\u0435 \u043d\u043e\u0434\u044b. \u041e\u0431\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043b\u0438\u0441\u0442\u043e\u0432\u044b\u0435 \u2014 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 Internal Tree \u043e\u043a\u043e\u043d\u0447\u0435\u043d\u043e.<\/li>\n<\/ul>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0434\u0435\u0440\u0435\u0432\u043e: <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/yu\/pl\/44\/yupl441yrs4l5xfg2f1y7zqcoqm.png\"><\/p>\n<p>  \u0422\u0443\u0442 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043d\u043e\u0434\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043b\u0438\u0441\u0442\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a Image \u0438 Text, \u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a Row \u0438 Column. \u0422\u0430\u043a \u043c\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u043b\u0438 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e: \u0431\u044b\u043b\u043e \u0442\u0440\u0438 \u0443\u0440\u043e\u0432\u043d\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043e\u0440\u043d\u044f, \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u2014 \u0434\u0432\u0430. <\/p>\n<h3>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 LayoutState<\/h3>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c LayoutState. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0437\u043c\u0435\u0440\u0438\u043c Internal Tree \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Yoga. Yoga \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0445, y, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0443\u0437\u043b\u0443 \u0434\u0435\u0440\u0435\u0432\u0430. \u0417\u0430\u0442\u0435\u043c, \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u044d\u0442\u043e\u0439 \u043f\u043e\u043b\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 (\u0443\u0436\u0435 \u0437\u043d\u0430\u044f, \u0433\u0434\u0435 \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043e \u0438 \u043a\u0430\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430). <\/p>\n<p>  \u041f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u043c\u044b \u0441\u043d\u043e\u0432\u0430 \u043e\u0431\u0445\u043e\u0434\u0438\u043c Internal Tree, \u0438 \u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043d\u043e\u0434\u0443. Row \u043d\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043e\u043d \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0443\u0436\u0435\u043d \u0431\u044b\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. Image \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0433\u043e LayoutOutput \u0432 \u0441\u043f\u0438\u0441\u043e\u043a. Column \u0442\u043e\u0436\u0435 \u043d\u0443\u0436\u0435\u043d \u0431\u044b\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u0435\u0440\u044f\u0442\u044c \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0442\u0430\u043c \u043d\u0435\u0447\u0435\u0433\u043e, \u0430 \u0432\u043e\u0442 Text-\u044b, \u043a\u0430\u043a \u0438 Image, \u0442\u043e\u0436\u0435 \u0432\u0430\u0436\u043d\u044b \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438. <\/p>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u0432 \u0438\u0442\u043e\u0433\u0435 \u0441\u043f\u0438\u0441\u043e\u043a LayoutOutput-\u043e\u0432 \u2014 \u044d\u0442\u043e \u043d\u0430\u0448 LayoutState. <\/p>\n<h3>\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 LayoutState<\/h3>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 LayoutState \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0418 \u0442\u0443\u0442 \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0443\u0442\u044c, \u0447\u0442\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b Image \u0438 \u0434\u0432\u0430 Text-a \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u043d\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e View, \u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Drawable. \u0415\u0441\u043b\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b Android UI Toolkit, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0438 \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u0430\u043c\u0438 \u0442\u0438\u043f\u0430 Drawable, \u0442\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0438\u0445. \u0415\u0441\u043b\u0438 \u0436\u0435 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u043c\u0435\u0442\u044c \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u043a\u043b\u0438\u043a\u0438, \u0442\u043e \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e View, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 UI-\u0441\u043e\u0431\u044b\u0442\u0438\u0439.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fc\/92\/rw\/fc92rwuxr_seswxbpqxldamkwbo.png\"><\/p>\n<p>  \u0428\u0430\u0433 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u2014 \u044d\u0442\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u044d\u0442\u0430\u043f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0430 UI-\u043f\u043e\u0442\u043e\u043a\u0435, \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0430\u0433\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0432 \u0444\u043e\u043d\u0435. <\/p>\n<p>  \u041d\u0430 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043b\u0438\u0441\u044c \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438:<\/p>\n<ul>\n<li><code>@LayoutSpec<\/code> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043e\u043d\u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u044c\u044f \u0432 Internal Tree. \u0410\u043d\u0430\u043b\u043e\u0433 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 ViewGroup.<\/li>\n<li><code>Row<\/code> \u0438 <code>Column<\/code> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b, \u0441\u043b\u0443\u0436\u0430\u0449\u0438\u0435 \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f UI-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u042d\u0442\u043e \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b Flexbox \u2014 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e Layout Engine \u0432 Litho. \u0410 Yoga \u2014 \u044d\u0442\u043e \u0435\u0433\u043e \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 Litho, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u043f\u043e\u0434 Android, \u043f\u043e\u0434 iOS \u0438 \u0432 Web. <\/li>\n<li><code>@MountSpec<\/code> \u2014 \u044d\u0442\u043e \u0442\u0435 \u0441\u0430\u043c\u044b\u0435 \u043b\u0438\u0441\u0442\u043e\u0432\u044b\u0435 \u043d\u043e\u0434\u044b \u0432 Internal Tree \u2014 Image, Text \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u042d\u0442\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0442\u0438\u043f Spec, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Drawable \u0438\u043b\u0438 View. <\/li>\n<\/ul>\n<p>  \u041a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u043e\u0434 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 <code>@MountSpec-\u0438<\/code>? \u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a: <\/p>\n<pre><code class=\"kotlin\">@MountSpec object GradientSpec {    @OnCreateMountContent   fun onCreateMountContent(context: Context): GradientDrawable {       return GradientDrawable()   }    @OnMount   fun onMount(       c: ComponentContext,       drawable: GradientDrawable,       @Prop @ColorInt colors: IntArray) {       drawable.colors = colors   }   }<\/code><\/pre>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0431\u0435\u0440\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0412 \u0430\u043d\u0434\u0440\u043e\u0439\u0434\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430\u043c\u0438 \u0435\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 GradientDrawable. \u0418\u043c\u0435\u043d\u043d\u043e \u0435\u0433\u043e \u043c\u044b \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0418\u043d\u0441\u0442\u0430\u043d\u0441 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043d\u0443\u0436\u043d\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u0437 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e lifecycle-\u043c\u0435\u0442\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 <code>@OnCreateMountContent<\/code> \u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. <\/p>\n<p>  \u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043a\u0430\u043a <code>MountSpec<\/code>, \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435\u0433\u043e \u0434\u0432\u0430 \u0442\u0438\u043f\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430: View \u0438\u043b\u0438 Drawable. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u043e\u0433\u043e Drawable. \u041a\u0440\u043e\u043c\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434 \u0441 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 @OnMount \u0434\u043b\u044f \u0431\u0438\u043d\u0434\u0438\u043d\u0433\u0430 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0430\u043d\u0435\u0442 \u0432\u0438\u0434\u0438\u043c\u044b\u043c. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0446\u0432\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430 \u0432\u0445\u043e\u0434. \u0412\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 Litho \u0431\u0435\u0440\u0435\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 GradientDrawable c \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0446\u0432\u0435\u0442\u0430\u043c\u0438 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d. \u0414\u043b\u044f \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b, \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0435 <code>@OnCreateMountContent<\/code> \u0438 <code>@OnMount<\/code>, \u0441 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 <code>RecyclerView.Adapter<\/code> \u2014 <code>onCreateViewHolder<\/code> \u0438 onBindViewHolder \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<p>  <a name=\"ann\"><\/a>  <\/p>\n<h2>\u0410\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u044f @MountSpec<\/h2>\n<p>  \u0412 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0438 <code>@MountSpec<\/code> \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430: <\/p>\n<ol>\n<li>poolSize \u2014 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u043e, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u043e\u0432 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u043e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0438 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u043e \u0432 \u043f\u0443\u043b, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u0431\u044b\u0441\u0442\u0440\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044d\u0442\u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0440\u0430\u0432\u0435\u043d 3. <\/li>\n<li>isPureRender \u2014 \u044d\u0442\u043e \u0431\u0443\u043b\u0435\u0432\u044b\u0439 \u0444\u043b\u0430\u0433, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439, \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 Prop-\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0435\u0433\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0435\u0436\u043d\u0438\u043c. \u041f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 UI-\u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u043d\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u00ab\u0447\u0438\u0441\u0442\u044b\u0435\u00bb \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. <\/li>\n<\/ol>\n<p>  \u041a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0437\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0435. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 ImageSpec \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438:<\/p>\n<pre><code class=\"java\">@MountSpec (poolSize = 30, isPureRender = true) class ImageSpec {    @ShouldUpdate   static boolean shouldUpdate(...) {} }   public @interface MountSpec {   int poolSize() default 3;   boolean isPureRender() default false; }<\/code><\/pre>\n<p>  \u0423 \u043d\u0435\u0433\u043e \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 poolSize (30). C\u0435\u0433\u043e\u0434\u043d\u044f \u0442\u0438\u043f\u0438\u0447\u043d\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u043d\u0438\u0445 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0432 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435. \u0412 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f, \u0435\u0441\u043b\u0438 \u0432\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 Drawable, \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0442\u043e \u0438 \u0432\u044b\u0432\u043e\u0434 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0442\u043e\u0436\u0435 \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0444\u043b\u0430\u0433 isPureRender\u2026 \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f Prop-\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e equals(), \u0435\u0441\u043b\u0438 \u0436\u0435 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f, \u0442\u043e \u0435\u0451 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 <code>@ShouldUpdate<\/code>.<\/p>\n<p>  <a name=\"opt\"><\/a>  <\/p>\n<h2>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 Litho<\/h2>\n<p>  \u0412 Litho \u0435\u0441\u0442\u044c \u0434\u0432\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 Layout: <\/p>\n<ol>\n<li>Layout\/Mount Diffing \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b (measurements) \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c LayoutOutput-\u044b (\u0442\u043e, \u0447\u0442\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d) \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. <\/li>\n<li>IncrementalMount \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0430\u0448 UI \u0432 RecyclerView \u043d\u0430 \u0441\u0442\u0435\u0440\u043e\u0438\u0434\u0430\u0445 \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0438\u043b\u0438\u0439. <\/li>\n<\/ol>\n<p>  <\/p>\n<h3>Layout\/Mount Diffing<\/h3>\n<p>  \u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442? \u041f\u0440\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 Internal Tree \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u0430\u043a\u0436\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0435\u0441\u044f \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 Diff Tree \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0438 LayoutOutput-\u0430\u043c\u0438 \u0432\u0441\u0435\u0445 \u0443\u0437\u043b\u043e\u0432 \u0434\u0435\u0440\u0435\u0432\u0430. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/mb\/vq\/qx\/mbvqqxmtwf5t-93dolreo_t3bqm.png\"><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u0430 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c, \u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 LayoutOutput \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u043f\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438\u0437 Diff Tree \u0432 \u043d\u043e\u0432\u044b\u0439 Internal Tree, \u043c\u0438\u043d\u0443\u044f \u0448\u0430\u0433 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Yoga. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, LayoutState \u0433\u043e\u0442\u043e\u0432 \u0443\u0436\u0435 \u043a \u043a\u043e\u043d\u0446\u0443 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f Internal Tree. <\/p>\n<h3>IncrementalMount<\/h3>\n<p>  \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u044f \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u0441 \u043d\u043e\u0432\u043e\u0441\u0442\u043d\u043e\u0439 \u043b\u0435\u043d\u0442\u043e\u0439 \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438 UI-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0441\u0442\u0430\u043c\u0438 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c, \u0434\u0435\u0442\u0430\u043b\u0435\u0439. \u041d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 mount \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0438\u0441\u044c \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u0442\u044f\u0436\u0435\u043b\u043e\u0433\u043e UI \u043f\u043e\u0441\u0442\u0430, \u0441\u0440\u0430\u0437\u0443 \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0438\u0437-\u0437\u0430 \u043a\u0440\u0430\u044f \u044d\u043a\u0440\u0430\u043d\u0430. \u0415\u0441\u043b\u0438 mount \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0435 \u0443\u043b\u043e\u0436\u0438\u0442\u0441\u044f \u0432 16\u043c\u0441, \u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u0438\u0434\u0435\u0442\u044c \u0434\u0435\u0440\u0433\u0430\u043d\u044b\u0439 UI, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435.   <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">mount<\/b>                         <\/p>\n<div class=\"spoiler_text\">Mount \u2014 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 (View \u0438\u043b\u0438 Drawable) \u0438 \u0435\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e View  <\/div>\n<\/p><\/div>\n<p>  IncrementalMount \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043d\u043e\u0432\u043e\u0441\u0442\u043d\u043e\u0439 \u043f\u043e\u0441\u0442 \u043d\u0435 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u0430 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044f mount \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0442\u0435\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u0432\u0438\u0434\u0438\u043c\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0430. \u0410 \u0434\u043b\u044f \u0442\u0435\u0445 \u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043a\u0438\u0434\u0430\u044e\u0442 \u0435\u0451, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c unmount \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0438\u0445 \u0432 \u043f\u0443\u043b, \u043d\u0435 \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c, \u043f\u043e\u043a\u0430 \u0432\u0435\u0441\u044c \u043f\u043e\u0441\u0442 \u0441\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0437\u0430 \u043a\u0440\u0430\u0435\u043c \u044d\u043a\u0440\u0430\u043d\u0430, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u044d\u043a\u043e\u043d\u043e\u043c\u044f \u043f\u0430\u043c\u044f\u0442\u044c. \u0421\u043a\u0440\u043e\u043b\u043b \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442\u0441\u044f \u0437\u0430 \u0441\u0447\u0451\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0442\u044f\u0436\u0451\u043b\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430 \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0440\u0435\u0439\u043c\u043e\u0432. \u0412\u0441\u0451 \u044d\u0442\u043e \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 RecyclerView, \u043d\u043e \u0432 Litho \u0432\u0430\u043c \u043d\u0435 \u043d\u0430\u0434\u043e \u043a\u0430\u043a-\u0442\u043e \u043f\u043e-\u043e\u0441\u043e\u0431\u043e\u043c\u0443 \u043c\u0435\u043d\u044f\u0442\u044c UI \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2014 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438. <\/p>\n<h3>\u0412\u044b\u0432\u043e\u0434\u044b \u043d\u0430 \u0437\u0430\u043c\u0435\u0442\u043a\u0443:<\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0443\u044e MountSpec-\u0443, \u0442\u043e:<\/p>\n<ul>\n<li>\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 isPureRender \u0438 \u043c\u0435\u0442\u043e\u0434 @ShouldUpdate, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u044e\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. <\/li>\n<li>\u0437\u043d\u0430\u044f, \u0432 \u043a\u0430\u043a\u043e\u043c \u043e\u0431\u044a\u0451\u043c\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u043e\u0432 \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0432 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0443\u043b\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e poolSize.<\/li>\n<\/ul>\n<p>  <a name=\"man\"><\/a>  <\/p>\n<h2>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c<\/h2>\n<p>  \u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c UI, \u044d\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438 \u0435\u0441\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e \u0441\u0447\u0451\u0442\u0447\u0438\u043a\u043e\u043c \u0438 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0434\u043b\u044f \u0435\u0433\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ro\/kn\/rz\/roknrz_jryeixeomofcqjxlt88k.png\"><\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c State-\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u2014 count. \u041f\u043e \u043d\u0435\u043c\u0443 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f Builder-\u043c\u0435\u0442\u043e\u0434\u044b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0441\u043d\u0430\u0440\u0443\u0436\u0438, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 Prop-\u043e\u0432, \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u043c \u0438\u0437\u043d\u0443\u0442\u0440\u0438. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u0441\u0442\u0435\u0439\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c. <\/p>\n<p>  \u0417\u0430\u0442\u0435\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0435\u0439\u0442\u0430. \u041e\u043d \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 <code>@OnUpdateState<\/code> \u0438 \u043d\u0430 \u0432\u0445\u043e\u0434 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 \u0442\u043e\u0442 \u0436\u0435 \u0441\u0430\u043c\u044b\u0439 \u0441\u0442\u0435\u0439\u0442, \u043d\u043e \u043d\u0435 \u0432 \u0432\u0438\u0434\u0435 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0430 \u0437\u0430\u0432\u0435\u0440\u043d\u0443\u0442\u044b\u0439 \u0432 \u0445\u043e\u043b\u0434\u0435\u0440 <code>StateValue<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u0442\u0435\u0439\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c. <\/p>\n<p>  \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u043e \u0441 \u043d\u0430\u0436\u0430\u0442\u0438\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c event-\u0445\u0435\u043d\u0434\u043b\u0435\u0440\u044b: \u043c\u0435\u0442\u043e\u0434 \u0441 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 @OnEvent \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430 (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043b\u0438\u043a\u043e\u0432), \u0438 \u0432 \u043d\u0451\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0435\u0439\u0442\u0430 \u2014 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0441\u0447\u0451\u0442\u0447\u0438\u043a\u0430. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/lf\/ec\/or\/lfecorat8b_ovutt9gs8rkcuxws.png\"><\/p>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043d\u0430\u0431\u043e\u0440\u044b \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 \u0438 \u0432 \u043c\u0435\u0441\u0442\u0435 \u0435\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u043c\u0435\u0442\u043e\u0434, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0432 Spec-\u043a\u043b\u0430\u0441\u0441\u0435 \u043d\u0435 \u0440\u0443\u043a\u0430\u043c\u0438, \u0430 \u043d\u0435\u044f\u0432\u043d\u043e, \u0447\u0435\u0440\u0435\u0437 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0432 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c Component-\u043a\u043b\u0430\u0441\u0441\u0435, \u0438 \u0432\u0441\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f Spec-\u043c\u0435\u0442\u043e\u0434\u0430 (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, <code>StateValue<\/code>), Litho \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u0442 \u0441\u0430\u043c. <\/p>\n<p>  \u041a\u0430\u0436\u0434\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0435\u0439\u0442\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0442\u043e\u0442 \u0436\u0435 \u044d\u0444\u0444\u0435\u043a\u0442, \u0447\u0442\u043e \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u043d\u043e\u0432\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 Prop-\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432: \u0441\u043d\u043e\u0432\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c Internal Tree, \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c LayoutState \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d. <\/p>\n<p>  \u0410 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0430\u0440\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0440\u0430\u0437\u043d\u044b\u0435 \u0434\u043b\u044f \u043d\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f? \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0444\u0438\u043b\u044c \u0441\u0443\u043f\u0435\u0440\u0433\u0435\u0440\u043e\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0432\u0435\u0442 \u0438 \u0438\u043c\u044f. \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u0435\u043b\u0435\u043d\u043e\u0433\u043e \u0425\u0430\u043b\u043a\u0430 \u043d\u0430 \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e \u0416\u0435\u043b\u0435\u0437\u043d\u043e\u0433\u043e \u0427\u0435\u043b\u043e\u0432\u0435\u043a\u0430. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0435 \u00ab\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435\u00bb \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u2014 color \u0438 name, \u0438 \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0434\u0432\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0443\u0442\u0435\u043c \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445. <\/p>\n<pre><code class=\"kotlin\">@OnUpdateState fun changeColor(color: StateValue&lt;Color&gt;, @Param newColor: Color) {   color.set(newColor) }  @OnUpdateState fun changeName(name: StateValue&lt;String&gt;, @Param newName: String) {   name.set(newName) } ... RootComponent.changeColor(c, Color.RED) RootComponent.changeName(c, &quot;IronMan&quot;)<\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0432 \u043f\u0440\u043e\u0444\u0430\u0439\u043b\u0435\u0440\u0435, \u0442\u043e \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0439 \u0431\u043b\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0434\u0435\u0440\u0435\u0432\u043e \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 UI \u043d\u0430 \u044d\u043a\u0440\u0430\u043d, \u0430 \u043f\u043e\u0442\u043e\u043c \u0432\u0442\u043e\u0440\u043e\u0439 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u0431\u043b\u043e\u043a. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, UI \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0430 \u0440\u0430\u0437\u0430, \u0430 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0433\u0434\u0435-\u0442\u043e \u043f\u043e\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0425\u0430\u043b\u043a, \u043d\u043e \u0432\u0435\u0434\u044c \u0432\u0441\u0435 \u0436\u0435 \u0437\u043d\u0430\u044e\u0442, \u0447\u0442\u043e <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e \u0425\u0430\u043b\u043a\u0430 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442!<\/b>                         <\/p>\n<div class=\"spoiler_text\">\u041f\u043e\u0439\u043c\u0430\u043b\u0438 \u043f\u0430\u0441\u0445\u0430\u043b\u043a\u0443? \u0421 \u043c\u0435\u043d\u044f \u0441\u0442\u0438\u043a\u0435\u0440 \ud83d\ude09  <\/div>\n<\/p><\/div>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/jq\/bj\/l6\/jqbjl6soahdg7petc3ovxmmjo_4.png\"><\/p>\n<p>  \u041e\u0442\u0441\u044e\u0434\u0430 Best Practice: \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043f\u0440\u043e \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0443 State-\u0430\u043f\u0434\u0435\u0439\u0442\u043e\u0432. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e State-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u0430\u0445, \u043d\u043e \u0435\u0441\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u0445 \u0432\u043c\u0435\u0441\u0442\u0435, \u0442\u043e \u0441\u0442\u043e\u0438\u0442\u044c \u0437\u0430\u0432\u0435\u0441\u0442\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0438\u0445 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0446\u0435\u043b\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u043e\u0439 (\u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445).<\/p>\n<pre><code class=\"kotlin\">@OnUpdateState fun changeHero(     color: StateValue&lt;Color&gt;, name: StateValue&lt;String&gt;,     @Param newColor: Color, @Param newName: String) {   color.set(newColor)   name.set(newName) } ... RootComponent.changeHero(c, Color.RED, &quot;IronMan&quot;)<\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u043b\u0438\u0448\u044c \u043e\u0434\u0438\u043d \u0431\u043b\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 UI-\u0434\u0435\u0440\u0435\u0432\u043e. \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u044e \u0441 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u044f\u043c\u0438: \u043e\u0434\u0438\u043d \u043c\u0435\u0442\u043e\u0434 \u0441 @UpdateState \u2014 \u043e\u0434\u043d\u0430 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u044f \u043f\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e UI.<\/p>\n<h3>\u041e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/h3>\n<p>  \u0427\u0430\u0441\u0442\u043e \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0447\u0430\u0441\u0442\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. <br \/>  \u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0441\u043e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u043e\u043c. \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0435\u0433\u043e \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0448\u0430\u0433 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f count. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ul\/nl\/wr\/ulnlwrptudxxwch_dpelevsoivw.png\"><\/p>\n<p>  \u0414\u043b\u044f \u0448\u0430\u0433\u0430 \u0437\u0430\u0432\u0435\u0434\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 State-\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>step<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0435\u0433\u043e \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0432 \u043f\u043e\u043b\u0435 TextInput. \u0422\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u043d\u043e\u0432\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u0440\u0430\u0437\u0443, \u0442\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c UI \u0441 \u043d\u043e\u0432\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c step \u043d\u0435 \u043d\u0430\u0434\u043e, \u043d\u043e \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0444\u043b\u0430\u0433 <code>canUpdateLazily<\/code>, \u0434\u0430\u0432\u0430\u044f Litho \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 State \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f UI, \u00ab\u043b\u0435\u043d\u0438\u0432\u043e\u00bb. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043f\u043e\u043c\u0438\u043c\u043e \u0432\u0441\u0435\u0445 \u044f\u0432\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 <code>@UpdateState<\/code> \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u043c\u0435\u0442\u043e\u0434 \u2014 <code>lazyUpdateStep<\/code>, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0439 \u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u0430\u043a\u043e\u0435 \u00ab\u043b\u0435\u043d\u0438\u0432\u043e\u0435\u00bb \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 step. \u041f\u0440\u0435\u0444\u0438\u043a\u0441 <code>lazyUpdate<\/code> \u043e\u0431\u0449\u0438\u0439 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0442\u0430\u043a\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u0430 \u0441\u0443\u0444\u0444\u0438\u043a\u0441 (Step) \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043c\u0435\u043d\u0438 State-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439. <\/p>\n<pre><code class=\"kotlin\">@State(canUpdateLazily = true) step: Int  RootComponent.lazyUpdateStep(c, value)<\/code><\/pre>\n<p>  <\/p>\n<h3>\u0412\u044b\u0432\u043e\u0434\u044b \u043d\u0430 \u0437\u0430\u043c\u0435\u0442\u043a\u0443<\/h3>\n<ul>\n<li>\u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0435\u0439\u0442 \u0430\u043f\u0434\u0435\u0439\u0442\u044b, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a\u0438\u0435 \u043d\u0430\u0431\u043e\u0440\u044b State-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0443\u0434\u0443\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435. <\/li>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 Lazy State-\u0430\u043f\u0434\u0435\u0439\u0442\u044b \u0434\u043b\u044f State-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 UI. <\/li>\n<\/ul>\n<p>  <a name=\"ani\"><\/a>  <\/p>\n<h2>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432 Litho<\/h2>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043e\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f UI \u043a \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u2014 \u043a\u0430\u043a \u0432 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c API Litho \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438? <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ah\/em\/-z\/ahem-zrrwlksagr5ulymflbe8m4.png\"><\/p>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 <a href=\"https:\/\/youtu.be\/4F4HJcFrWEw?t=1712\">\u043f\u0440\u0438\u043c\u0435\u0440 (\u0432\u0438\u0434\u0435\u043e \u0434\u043e\u043a\u043b\u0430\u0434\u0430 28:33-28:44)<\/a> \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0432\u043e\u0451 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435. \u041e\u043d\u0430 \u043f\u0440\u0438\u0436\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0442\u043e \u043a \u043f\u0440\u0430\u0432\u043e\u043c\u0443, \u0442\u043e \u043a \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e, \u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u044d\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e, \u0441\u043a\u0430\u0447\u043a\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e \u2014 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e. <\/p>\n<p>  \u041e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0432\u0435 \u0432\u0435\u0449\u0438: \u043d\u0430\u0434\u043e \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c \u0442\u043e, <b>\u0427\u0422\u041e<\/b> \u043c\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c, \u0438 \u043e\u043f\u0438\u0441\u0430\u0442\u044c, <b>\u041a\u0410\u041a<\/b> \u043d\u0430\u0434\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041c\u044b \u0434\u0432\u0438\u0433\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0430\u0434\u0430\u0435\u043c \u0435\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>transitionKey<\/code>.<\/p>\n<pre><code class=\"kotlin\">Button.create(c)     .text(\u201cCatch me!\u201d)     .transitionKey(\u201cbutton\u201d)     .alignSelf(align)     .clickHandler(RootComponent.onClick(c))<\/code><\/pre>\n<p>  \u0417\u0430\u0442\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043c\u0435\u0442\u043e\u0434 \u0441 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 <code>@OnCreateTransition<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430\u043c\u0438 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, Transition \u043c\u0435\u0436\u0434\u0443 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c UI. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 Transition \u043f\u0440\u043e\u0441\u0442\u043e\u0439: \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0435\u0433\u043e \u0441 \u0442\u0435\u043c \u0436\u0435 transitionKey, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u043e\u043c\u0435\u0442\u0438\u043b\u0438 \u0446\u0435\u043b\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043d\u043e\u043f\u043a\u0443), \u0438 \u043f\u0440\u043e\u0441\u0438\u043c \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0446\u0435\u043b\u0438 \u2014 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b X \u043a\u043d\u043e\u043f\u043a\u0438. <a href=\"https:\/\/youtu.be\/4F4HJcFrWEw?t=1766\">\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043e\u043d\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f (\u0432\u0438\u0434\u0435\u043e \u0434\u043e\u043a\u043b\u0430\u0434\u0430 29:25-29.33)<\/a>.<\/p>\n<pre><code class=\"kotlin\">@OnCreateTransition fun onCreateTransition(c: ComponentContext): Transition {   return Transition.create(&quot;button&quot;)       .animate(AnimatedProperties.X) }<\/code><\/pre>\n<p>  \u0422\u0430\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u0442\u043b\u0438\u0447\u043d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u0447\u0435\u0442\u043a\u043e \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0432\u043d\u044b\u043c \u0432 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 layout-\u0435 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u0442\u043e \u0432 Litho \u0435\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 <code>Transition.allLayout()<\/code> \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439. \u042d\u0442\u043e \u043d\u0435\u0447\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u043d\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 animateLayoutChanges = true \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0441\u0435\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 ViewGroup.<\/p>\n<pre><code class=\"kotlin\">@OnCreateTransition fun onCreateTransition(c: ComponentContext): Transition {   return Transition.allLayout() }<\/code><\/pre>\n<p>  \u0412\u0430\u0436\u043d\u043e \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0443\u0442\u044c, \u0447\u0442\u043e \u043c\u0435\u0442\u043e\u0434 \u0441 @OnCreateTransition \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u043d\u0430\u0434\u043e \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430\u043c\u0438 UI. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 @OnCreateLayout, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. <\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0441\u0430\u043c\u0438\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u043d\u0430\u0434\u043e \u0438\u043b\u0438 \u043d\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>Diff<\/code> \u0434\u043b\u044f <code>Prop<\/code> \u0438 State-\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432. <\/p>\n<p>  <code>Diff<\/code> \u2014 \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u0445\u043e\u043b\u0434\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0435, \u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e Prop\/State, \u0434\u0430\u0432\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0445 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434, \u0441\u0442\u043e\u0438\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u043d\u0435\u0442.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/b2\/or\/af\/b2oraf3aaefdrxeqpo2vyszaxdy.png\"><\/p>\n<p>  \u0418 \u0435\u0441\u043b\u0438 \u0432\u0435\u0440\u043d\u0443\u0442\u044c null \u0438\u0437 <code>@OnCreateTransition<\/code>, \u0442\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d \u0432\u0435\u0441\u0442\u044c \u044d\u0442\u0430\u043f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0447\u0442\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0438 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0438, \u0438 \u0438\u043c\u0435\u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 Prop\/State \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c\u0438 \u0436\u0435, \u043a\u0430\u043a \u0432 <code>@OnCreateLayout<\/code>, \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043b\u0438\u0448\u044c \u0442\u0438\u043f \u0441 <code>T<\/code> \u043d\u0430 <code>Diff&lt;T&gt;<\/code>.<\/p>\n<h3>\u0412\u044b\u0432\u043e\u0434\u044b \u043d\u0430 \u0437\u0430\u043c\u0435\u0442\u043a\u0443<\/h3>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 Diff \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u043d\u043a\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 Prop \u0438 State.<\/p>\n<p>  <a name=\"incept\"><\/a>  <\/p>\n<h2>\u041f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u0435 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u0412\u0440\u044f\u0434 \u043b\u0438 \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043a\u0442\u043e-\u0442\u043e \u0440\u0435\u0448\u0438\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u0447\u0430\u0441\u044c\u0435 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0435\u0441\u044c UI \u043d\u0430 Litho. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e \u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b: \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0442\u044c \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u043f\u043e \u0447\u0430\u0441\u0442\u044f\u043c? \u041c\u043e\u0433\u0443\u0442 \u043b\u0438 Litho-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0436\u0438\u0442\u044c \u0431\u043e\u043a \u043e \u0431\u043e\u043a \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c Android UI? \u0418 \u0442\u0443\u0442 \u0443 \u043c\u0435\u043d\u044f \u0434\u043b\u044f \u0432\u0430\u0441 \u0445\u043e\u0440\u043e\u0448\u0438\u0435 \u043d\u043e\u0432\u043e\u0441\u0442\u0438! <\/p>\n<p>  \u0414\u0430, \u0432\u0430\u0448 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 UI \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 Litho \u043f\u043e \u0447\u0430\u0441\u0442\u044f\u043c: <\/p>\n<ul>\n<li>\u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Litho-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e UI \u043d\u0430 View. \u041c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 UI-\u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u044c\u044f \u0432 \u0432\u0430\u0448\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u043d\u0430 LithoView \u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0439 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u0435 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 UI \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u0435 \u0433\u043b\u0443\u0431\u0438\u043d\u0443 \u0434\u0435\u0440\u0435\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. <\/li>\n<li>\u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 View \u2014 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0438, \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u0440\u0443\u0433\u043e\u0432\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b, \u0432\u0438\u0434\u0435\u043e-\u043f\u043b\u0435\u0435\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u2014 \u0432 Litho-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u0445. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e View \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432 MountSpec-\u0443 (\u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u043c\u0435\u0442\u043e\u0434 \u0441 <code>@OnCreateMountContent<\/code> \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e Drawable, \u043d\u043e \u0438 View?), \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u0442\u043e\u043c \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/li>\n<\/ul>\n<p>  <a name=\"debug\"><\/a>  <\/p>\n<h2>\u0414\u0435\u0431\u0430\u0433\u0433\u0438\u043d\u0433 \u0438 \u0442\u0443\u043b\u044b \u0432 Litho<\/h2>\n<p>  \u0410 \u0447\u0442\u043e \u0436\u0435 \u043d\u0430\u043c \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c? \u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u0442\u043e \u0433\u0434\u0435 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b? \u041a\u0430\u043a \u043e\u0442\u043b\u0430\u0434\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430 Litho? \u041a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u043e \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u0438 \u0442\u044e\u043d\u0438\u0442\u044c UI? \u041e\u0431\u043e \u0432\u0441\u0451\u043c \u044d\u0442\u043e\u043c \u043d\u0438\u0436\u0435.<\/p>\n<h3>Yoga playground<\/h3>\n<p>  Litho \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e \u0438 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u044e Flexbox \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441 \u043d\u0435\u0439 \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b, \u0442\u043e \u0434\u043b\u044f \u0432\u0430\u0441 \u0435\u0441\u0442\u044c <a href=\"https:\/\/yogalayout.com\/playground\">Yoga Playground<\/a>. \u042d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430, \u0433\u0434\u0435 \u043d\u0430 \u0441\u0445\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 UI \u0441 \u0432\u0438\u0434\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438, \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043c\u0430\u043a\u0435\u0442 \u0432\u0430\u0448\u0435\u0433\u043e UI \u0438 \u0434\u0430\u0436\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0432\u0438\u0434\u0435 Litho-\u043a\u043e\u0434\u0430 \u043d\u0430 Java. <\/p>\n<h3>Flipper + Litho plugins<\/h3>\n<p>  \u0414\u043b\u044f Litho, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0432 UI Preview. \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 Layout Inspector \u0442\u043e\u0436\u0435 \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Litho. \u0412\u0441\u0451 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044d\u0442\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 Android View. \u041d\u043e \u043a \u0441\u0447\u0430\u0441\u0442\u044c\u044e \u043a\u043e\u043b\u043b\u0435\u0433\u0438 \u0438\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u044b UI Tools \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0439 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u2014 <a href=\"https:\/\/fbflipper.com\">Flipper<\/a>. <a href=\"https:\/\/fbflipper.com\/docs\/features\/layout-plugin\">Layout-\u043f\u043b\u0430\u0433\u0438\u043d<\/a> \u0434\u043b\u044f Flipper \u0443\u043c\u0435\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e UI-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430, \u0438 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0451\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0435 View, \u043d\u043e \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Litho. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043f\u0440\u0438 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u043a\u0430\u043a\u043e\u0433\u043e-\u043b\u0438\u0431\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0432 \u0431\u043e\u043a\u043e\u0432\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432 Props \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435. \u042d\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u0439\u043a\u0443 UI, \u0432\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u0437\u0430\u043c\u0435\u043d\u044f\u044f UI Preview.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ip\/i7\/sa\/ipi7saq8zwas_n_1uou0-hjhxt0.png\"><\/p>\n<p>  \u0414\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0432\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 <a href=\"https:\/\/youtu.be\/4F4HJcFrWEw?t=2192\">\u0434\u0435\u043c\u043a\u0443<\/a> \u0438\u0437 \u0434\u043e\u043a\u043b\u0430\u0434\u0430. \u0421\u043f\u0440\u0430\u0432\u0430 \u0441\u044d\u043c\u043f\u043b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u043e\u043c, \u0430 \u0441\u043b\u0435\u0432\u0430 \u2014 Flipper. <\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d <a href=\"https:\/\/fblitho.com\/docs\/flipper-plugins#sections-plugin\">Sections<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u043d\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435: \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u043a\u0430\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c, \u0430 \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/5y\/ey\/ju\/5yeyju25e_usj-kqy9ev184uj5u.png\"><\/p>\n<p>  \u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435 \u0432\u0438\u0434\u043d\u044b \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f UI-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044d\u0442\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043b\u0435\u0433\u043a\u043e \u043e\u0442\u043b\u0430\u0434\u0438\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u0430\u043c\u0438: \u043f\u043e\u0439\u043c\u0430\u0442\u044c \u0438\u0437\u043b\u0438\u0448\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f UI, \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0431\u044b\u043b\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u044b, \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b, \u043f\u043e\u043d\u044f\u0442\u044c, \u0432 \u0447\u0451\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u043d\u0435\u0432\u0435\u0440\u043d\u043e\u0433\u043e UI \u2014 \u0432 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u043b\u0438 \u0432 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 \u0432 \u0441\u0430\u043c\u0438\u0445 UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. <\/p>\n<h3>Litho IntelliJ plugin<\/h3>\n<p>  \u0412 Litho \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u043e\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e UI, \u0441\u0432\u043e\u0438 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u0438 lifecycle-\u043c\u0435\u0442\u043e\u0434\u044b \u2014 \u043c\u043d\u043e\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e. \u0415\u0441\u0442\u044c, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f, \u043d\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u043d\u043e\u0432\u043e\u0439 Spec-\u0438 \u043d\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043d\u0435\u0439 \u0434\u043b\u044f \u0443\u0442\u043e\u0447\u043d\u0435\u043d\u0438\u044f \u043b\u044e\u0431\u044b\u0445 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432, \u0430 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u043e, \u043d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 IntelliJ \/ Android Studio \u043f\u043b\u0430\u0433\u0438\u043d. \u041e\u043d \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f LayoutSpec \u0438 MountSpec, \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 lifecycle-\u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 Spec-\u043a\u043b\u0430\u0441\u0441\u043e\u043c \u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043f\u043e \u043d\u0435\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/yh\/kp\/xv\/yhkpxvxlgi8jdf5lke1abtzhzrk.png\"><\/p>\n<p>  \u041f\u043b\u0430\u0433\u0438\u043d \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/plugins.jetbrains.com\/plugin\/14468-litho\">IntelliJ Plugin Marketplace<\/a>.<\/p>\n<h3>Lithography Sample app<\/h3>\n<p>  \u041d\u0443 \u0430 \u043a\u0440\u043e\u043c\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u044b\u0448\u0435\u043d\u0430\u0437\u0432\u0430\u043d\u043d\u043e\u0433\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u0435\u0441\u0442\u044c sample-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 Lithography. \u0412 \u043d\u0451\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u0435\u0446\u0435\u043f\u0442\u044b \u043f\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432: \u0441\u043e\u0437\u0434\u0430\u0442\u044c UI \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438, \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438\u0437 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c Fast Scroll. \u0415\u0441\u0442\u044c \u0446\u0435\u043b\u044b\u0435 \u0441\u0435\u043a\u0446\u0438\u0438 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u0430\u043c\u0438, \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.<\/p>\n<p>  \u041e\u0434\u0438\u043d \u0438\u0437 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u2014 <a href=\"https:\/\/github.com\/facebook\/litho\/blob\/master\/sample\/src\/main\/java\/com\/facebook\/samples\/litho\/errors\/ErrorBoundarySpec.java#L38-L42\">Error Boundaries<\/a>. \u042d\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u043a\u0430, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430 \u0445\u043e\u0434\u0443 \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u0440\u044d\u0448\u0430\u0442\u0441\u044f \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u0440\u044d\u0448\u0438\u0442\u044c \u0432\u0441\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0431\u044b\u0447\u043d\u043e, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443 \u043f\u0440\u044f\u043c\u043e \u0432 UI \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 \u043d\u0435\u0438\u0441\u043f\u0440\u0430\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 <a href=\"https:\/\/fblitho.com\/docs\/error-boundaries\">\u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n<p>  <a name=\"concl\"><\/a>  <\/p>\n<h2>\u0420\u0435\u0437\u044e\u043c\u0435<\/h2>\n<p>  \u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u0430 Litho \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 UI \u043c\u043e\u0436\u043d\u043e \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u0444\u043e\u043d\u043e\u0432\u043e\u043c-\u043f\u043e\u0442\u043e\u043a\u0435, \u0435\u0433\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 API \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0449\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f UI, \u0430 \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u043b\u043e\u0441\u043a\u0438\u0435 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 View. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0432\u0441\u0435 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0432 Row, Column \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0443\u0434\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0438\u0441\u0442\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u0435\u0440\u0435\u0432\u0430 \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u0440\u0430\u0437\u0443. Incremental Mount \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0433\u0440\u0430\u043d\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0445 MountSpec, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0446\u0435\u043b\u044b\u0445 LayoutSpec \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043f\u0438\u0441\u043a\u0430. <\/p>\n<p>  <a name=\"bonus\"><\/a>  <\/p>\n<h2>\u0411\u043e\u043d\u0443\u0441: Litho \u0438 Kotlin<\/h2>\n<p>  \u0421 \u0443\u0447\u0451\u0442\u043e\u043c \u0437\u0430\u0432\u044f\u0437\u043a\u0438 Litho \u043d\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u043d\u0433 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0439 \u0438 \u043a\u043e\u0434\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0435\u0433\u043e \u0441 Kotlin \u043c\u043e\u0436\u0435\u0442 \u0434\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u0435 \u0441\u0431\u043e\u0440\u043a\u0438, \u0442\u0430\u043a \u043a\u0430\u043a KAPT \u043f\u0435\u0447\u0430\u043b\u044c\u043d\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d \u0441\u0432\u043e\u0435\u0439 \u043d\u0435\u0442\u043e\u0440\u043e\u043f\u043b\u0438\u0432\u043e\u0441\u0442\u044c\u044e. \u041d\u0443 \u0438 \u0447\u0435\u0433\u043e \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c, \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043c\u043e\u0434\u043d\u043e\u0433\u043e \u043c\u043e\u043b\u043e\u0434\u0435\u0436\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430, \u043a\u0430\u043a Kotlin, \u043e\u0431\u0438\u043b\u0438\u0435 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0439 \u0432 API \u043d\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0432\u0435\u0437\u0434\u0435 \u043f\u0440\u0430\u0432\u044f\u0442 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0435 DSL-\u0438. \u0410 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0432\u043e\u0442 \u043a\u0430\u043a-\u0442\u043e \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c UI \u0432 \u043e\u0434\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u0434\u0430\u0436\u0435 \u043f\u0440\u044f\u043c\u043e \u0432 Activity, \u0438 \u0442\u0430\u043c \u0436\u0435 \u0435\u0433\u043e \u0432 Activity \u0438 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c, \u0431\u0435\u0437 \u043f\u043b\u044f\u0441\u043e\u043a \u0441 LithoView:<\/p>\n<pre><code class=\"kotlin\">class PlaygroundActivity : Activity() {   override fun onCreate(savedInstanceState: Bundle?) {     super.onCreate(savedInstanceState)      setContent {       val counter by useState { 1 }        Clickable(onClick = { updateState { counter.value = counter.value + 1 } }) {         Padding(all = 16.dp) {           Column {             +Text(text = &quot;Hello, Kotlin World!&quot;, textSize = 20.sp)             +Text(                 text = &quot;with ${&quot;&quot;.repeat(counter.value)} from London&quot;,                 textStyle = Typeface.ITALIC)           }            }       }     }   } }<\/code><\/pre>\n<p>  \u0422\u0430\u043a \u0432\u043e\u0442 \u0432\u0441\u0451 \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434! \u041f\u043e\u043a\u0430 \u0447\u0442\u043e Kotlin API \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u043d\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u2014 Kotlin-\u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b \u0432\u044b\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u0440\u0435\u043b\u0438\u0437\u043e\u043c Litho, \u0430 \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0438\u0445 <a href=\"https:\/\/oss.sonatype.org\/content\/repositories\/snapshots\/com\/facebook\/litho\/litho-core-kotlin\/\">Snapshot-\u0432\u0435\u0440\u0441\u0438\u0438<\/a>. \u0422\u0430\u043a\u0436\u0435, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 Github-\u0435.<\/p>\n<p>  \u041d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430\u043c\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c:<\/p>\n<ul>\n<li><a href=\"http:\/\/fblitho.com\">Official Docs<\/a>; <\/li>\n<li><a href=\"http:\/\/github.com\/facebook\/litho\/tree\/master\/sample\">Lithography Sample app<\/a>;<\/li>\n<li><a href=\"http:\/\/github.com\/facebook\/litho\/tree\/master\/codelabs\">Litho Codelabs (preview)<\/a>;<\/li>\n<li><a href=\"http:\/\/youtu.be\/78BUH1LZaZ4\">Dive into Litho Threading Model<\/a>.<\/li>\n<\/ul>\n<p>  <\/p>\n<blockquote><p>\u0423\u0436\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043d\u0435\u0434\u0435\u043b\u0435 \u0441\u043e\u0441\u0442\u043e\u0438\u0442\u0441\u044f <a href=\"http:\/\/mobius-piter.ru\/?utm_source=habr&amp;utm_medium=507130\">Mobius 2020 Piter<\/a>. \u0422\u0430\u043c \u0434\u043b\u044f Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b\u0441\u0442\u0443\u043f\u0438\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0439 \u0438\u043c <a href=\"http:\/\/mobius-piter.ru\/2020\/spb\/talks\/76oonrsshgg3ncqnyns73a\/?utm_source=habr&amp;utm_medium=507130\">Chet Haase \u0438\u0437 Google<\/a>. \u041c\u043d\u043e\u0433\u0438\u0435 \u043f\u043e\u043c\u043d\u044f\u0442 \u0435\u0433\u043e \u043f\u043e \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f\u043c \u043d\u0430 Google I\/O, \u0430 \u0432 \u044d\u0442\u043e\u043c \u0433\u043e\u0434\u0443 I\/O \u043e\u0442\u043c\u0435\u043d\u0438\u043b\u0438, \u043d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f Mobius \u0435\u0441\u0442\u044c \u0448\u0430\u043d\u0441 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0427\u0435\u0442\u0430 \u2014 \u0438 \u0434\u0430\u0436\u0435 \u043b\u0438\u0447\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u0432\u043e\u043f\u0440\u043e\u0441. <\/p><\/blockquote>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/jugru\/blog\/507130\/\"> https:\/\/habr.com\/ru\/company\/jugru\/blog\/507130\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/jugru\/blog\/507130\/\">Litho \u2014 UI-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043e\u0442 Facebook, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0442\u044f\u0436\u0435\u043b\u043e\u0433\u043e UI \u0432 \u0442\u043e\u043f\u043e\u0432\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043c\u0438\u043b\u043b\u0438\u0430\u0440\u0434\u0430\u043c\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043e\u043a.<\/p>\n<p>  \u041a\u0430\u043a \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c, \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0438 \u0441 UI \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430?<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/jw\/-e\/nw\/jw-enw14grrsrqiet9z6fsfusgu.png\"><\/div>\n<p>  Cookbook \u043f\u043e Litho \u0432 \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u043a\u0435 \u043c\u043e\u0435\u0433\u043e \u0434\u043e\u043a\u043b\u0430\u0434\u0430 \u0441 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 Mobius 2019 Moscow \u043f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-305584","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/305584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=305584"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/305584\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=305584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=305584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=305584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}