{"id":469613,"date":"2025-08-05T09:03:29","date_gmt":"2025-08-05T09:03:29","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=469613"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=469613","title":{"rendered":"<span>Swipe to Pay, \u0438\u043b\u0438 \u041a\u0430\u043a \u043c\u044b \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043b\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043e\u043f\u043b\u0430\u0442\u044b \u043d\u0430 Compose<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/464\/e18\/b32\/464e18b329da56516e9d759aebe66ab4.jpg\" width=\"3120\" height=\"1760\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/464\/e18\/b32\/464e18b329da56516e9d759aebe66ab4.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/464\/e18\/b32\/464e18b329da56516e9d759aebe66ab4.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u043e\u043c\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>MotionLayout<\/code>? \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0436\u0435\u0441\u0442\u0430\u0445.<\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0432 \u0414\u0440\u0438\u043d\u043a\u0438\u0442\u0435 \u0431\u044b\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 MotionLayout \u2014\u00a0<strong>\u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u043e\u043f\u043b\u0430\u0442\u044b \u0432 \u043c\u0435\u043d\u044e<\/strong>. \u041e\u043d \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443.<\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u043f\u043b\u0430\u0442\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0437\u0430\u043a\u0430\u0437 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443, \u0442\u0430\u043f\u043d\u0443\u0432 \u043f\u043e \u043d\u0435\u043c\u0443. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e, MotionLayout \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043b \u043e\u0442\u043b\u0438\u0447\u043d\u043e.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e63\/09e\/dc2\/e6309edc2136f7c8e917c6a26d32d09e.gif\" width=\"1080\" height=\"402\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e63\/09e\/dc2\/e6309edc2136f7c8e917c6a26d32d09e.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e63\/09e\/dc2\/e6309edc2136f7c8e917c6a26d32d09e.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0428\u043b\u043e \u0432\u0440\u0435\u043c\u044f, \u0431\u0430\u0433\u0438 \u043a\u043e\u043f\u0438\u043b\u0438\u0441\u044c, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u043e\u0441\u044c \u0432\u0441\u0451 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0434\u0430 \u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043d\u0443\u0436\u0434\u0430\u043b\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0435:<\/p>\n<ol>\n<li>\n<p>\u0412 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0431\u044b\u043b \u0441\u043f\u0440\u044f\u0442\u0430\u043d, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d \u0438\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u043a\u043e\u0444\u0435\u0439\u043d\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0430.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7ca\/050\/76a\/7ca05076ab397eee51ae2ab6f2c8e4c8.webp\" width=\"854\" height=\"238\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/7ca\/050\/76a\/7ca05076ab397eee51ae2ab6f2c8e4c8.webp 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7ca\/050\/76a\/7ca05076ab397eee51ae2ab6f2c8e4c8.webp 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043d\u043e\u0432\u043e\u0439 \u0444\u0438\u0447\u0438 \u00ab\u041f\u043e\u0434\u0430\u0440\u043e\u043a \u0434\u0440\u0443\u0433\u0443\u00bb \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u043e\u043d \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u043b \u043f\u0435\u0440\u0435\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1c3\/5a4\/752\/1c35a4752550a1cede39cb79f441e461.gif\" width=\"880\" height=\"240\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1c3\/5a4\/752\/1c35a4752550a1cede39cb79f441e461.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1c3\/5a4\/752\/1c35a4752550a1cede39cb79f441e461.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<\/li>\n<\/ol>\n<p>\u042d\u0442\u0438 \u0434\u0432\u0435 \u0444\u0438\u0447\u0438 \u0431\u044b\u043b\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f MotionLayout. \u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0441\u0446\u0435\u043d\u0430\u0445, \u0433\u0434\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 View \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0435\u0451 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0418 \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u043e, \u043a\u0430\u043a \u0432\u0435\u0434\u0451\u0442 \u0441\u0435\u0431\u044f View, \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0446\u0435\u043d\u044b. \u0410 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0441\u0442\u043e. \u0422\u043e\u0433\u0434\u0430-\u0442\u043e \u043c\u044b \u0438 \u0440\u0435\u0448\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 Compose.<\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0414\u0438\u043c\u0430 \u041c\u0430\u043a\u0441\u0438\u043c\u043e\u0432, \u044f Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 Dodo Engineering. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432\u0430\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0430 Compose \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u043f\u0438\u043b\u0438\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 Compose. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043a\u043e\u0434 \u0438 \u0443\u0432\u0438\u0434\u0438\u043c, \u043a\u0430\u043a \u043e\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435.<\/p>\n<h2>\u041f\u0440\u0435\u0434\u043f\u043e\u0441\u044b\u043b\u043a\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u043d\u043e\u0432\u043e<\/h2>\n<p>\u041d\u0430\u043f\u043e\u043c\u043d\u044e \u0432\u0432\u043e\u0434\u043d\u044b\u0435, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0437\u0430\u0445\u043e\u0434\u0438\u043c \u0432 \u0440\u0430\u0431\u043e\u0442\u0443:<\/p>\n<ul>\n<li>\n<p>\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0435\u0441\u0442\u044c \u0444\u0438\u0447\u0430 \u00ab\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u043e\u043f\u043b\u0430\u0442\u044b\u00bb;<\/p>\n<\/li>\n<li>\n<p>\u0435\u0451 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 MotionLayout;<\/p>\n<\/li>\n<li>\n<p>\u044d\u0442\u043e \u043a\u0440\u0443\u0442\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043d\u043e \u043e\u043d \u0443\u0436\u0435 \u043d\u0435 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u0430 \u043c\u044b \u2014 \u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e, \u0431\u0430\u0433\u043e\u0432, \u0447\u0442\u043e \u0438\u0437-\u0437\u0430 \u043d\u0435\u0433\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u043c \u0441\u0442\u0430\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u043d\u043e\u0432\u043e, \u0447\u0435\u043c \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u044b\u043d\u0435\u0448\u043d\u044e\u044e \u0432\u0435\u0440\u0441\u0438\u044e.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5e5\/0a5\/509\/5e50a55093aad0d4f4885efd81a9a63b.webp\" width=\"1244\" height=\"1756\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/5e5\/0a5\/509\/5e50a55093aad0d4f4885efd81a9a63b.webp 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5e5\/0a5\/509\/5e50a55093aad0d4f4885efd81a9a63b.webp 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f \u0441 \u0431\u0430\u0433\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c. \u0421\u043f\u043e\u0439\u043b\u0435\u0440: \u0432\u0441\u0435 \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0438\u043b\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438 MotionLayout. \u041a\u0430\u043a\u0438\u0435 \u0431\u044b\u043b\u0438 \u0441\u0430\u043c\u044b\u043c\u0438 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u044b\u043c\u0438?<\/p>\n<ul>\n<li>\n<p>\u0412 MotionLayout \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c visibility \u0432\u044c\u044e\u0448\u0435\u043a. \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 View \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u0446\u0435\u043d\u0430\u043c\u0438, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u044b\u0442\u044c \u0435\u0433\u043e, <a href=\"https:\/\/stackoverflow.com\/a\/68251059\" rel=\"noopener noreferrer nofollow\">\u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0439\u0442\u0438\u0441\u044c \u043f\u043e \u0432\u0441\u0435\u043c \u0441\u0446\u0435\u043d\u0430\u043c MotionScene<\/a> \u0438 \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u044d\u0442\u043e, \u043a\u0441\u0442\u0430\u0442\u0438, \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \ud83d\ude21<\/p>\n<\/li>\n<li>\n<p>\u0421\u0430\u043c\u0438 \u0441\u0446\u0435\u043d\u044b \u0432 \u0432\u0438\u0434\u0435 XML \u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0442\u0435\u0433\u043e\u0432 \u043f\u0443\u0442\u0430\u044e\u0442. Transitions, ConstraintSets, Constraint, Layout \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e, \u0430 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043d\u0438\u0445 \u0441 \u043d\u0430\u0441\u043a\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6e5\/4f9\/c0e\/6e54f9c0e001b5aacf6a1614ff7a5d00.png\" width=\"1604\" height=\"2030\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/6e5\/4f9\/c0e\/6e54f9c0e001b5aacf6a1614ff7a5d00.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6e5\/4f9\/c0e\/6e54f9c0e001b5aacf6a1614ff7a5d00.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<ul>\n<li>\n<p>\u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u0438\u0437 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 Android Studio \u0443\u0434\u0430\u043b\u0438\u043b\u0438 MotionLayout Editor, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0441\u0435 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043b\u043e \u043a \u0431\u0430\u0433\u0430\u043c UI, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u0438 \u043f\u0440\u0430\u0432\u0438\u0442\u044c. \u041f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u0438 \u0432\u043e\u0442 \u0442\u0430\u043a\u0438\u0435 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3bb\/f8d\/b7e\/3bbf8db7ea7bad8ba4fe2e7bf11c49a6.png\" alt=\"\u0411\u044b\u0432\u0430\u043b\u043e \u0447\u0442\u043e-\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u0445\u043e\u0442\u044f \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e\" title=\"\u0411\u044b\u0432\u0430\u043b\u043e \u0447\u0442\u043e-\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u0445\u043e\u0442\u044f \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e\" width=\"1960\" height=\"560\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/3bb\/f8d\/b7e\/3bbf8db7ea7bad8ba4fe2e7bf11c49a6.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3bb\/f8d\/b7e\/3bbf8db7ea7bad8ba4fe2e7bf11c49a6.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0411\u044b\u0432\u0430\u043b\u043e \u0447\u0442\u043e-\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u0445\u043e\u0442\u044f \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e<\/figcaption><\/div>\n<\/figure>\n<p>\u0411\u044b\u0432\u0430\u043b\u043e \u0438 \u0442\u0430\u043a\u043e\u0435: \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0441\u043f\u0440\u0430\u0432\u0430 \u0438 \u0441\u043b\u0435\u0432\u0430. \u0412\u0438\u0434\u0438\u043c \u0446\u0435\u043d\u0443, \u0430 \u0437\u0430 \u043d\u0435\u0439 \u043f\u0440\u043e\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u00abPayment&#8230;\u00bb. \u0418 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0432 \u043a\u0430\u043a\u043e\u043c \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u0442\u0430\u0442\u0443\u0441\u0435:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f8e\/a15\/cf0\/f8ea15cf0423fab472471f8506b42ead.png\" alt=\"\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0428\u0440\u0451\u0434\u0438\u043d\u0433\u0435\u0440\u0430\" title=\"\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0428\u0440\u0451\u0434\u0438\u043d\u0433\u0435\u0440\u0430\" width=\"1824\" height=\"474\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/f8e\/a15\/cf0\/f8ea15cf0423fab472471f8506b42ead.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f8e\/a15\/cf0\/f8ea15cf0423fab472471f8506b42ead.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0428\u0440\u0451\u0434\u0438\u043d\u0433\u0435\u0440\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u2014 \u0431\u0435\u0437\u043d\u0430\u0434\u0451\u0436\u043d\u0430\u044f. \u0414\u043e\u043b\u0433\u043e \u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 Compose, \u043d\u043e \u0442\u0443\u0442 \u0442\u0435\u0440\u043f\u0435\u043d\u0438\u0435 \u043b\u043e\u043f\u043d\u0443\u043b\u043e \u2014 \u0438\u043c\u0435\u044e\u0449\u0438\u0435\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u0442\u0430\u043b\u0438 \u0445\u0443\u0436\u0435 \u0432\u0441\u0435\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0440\u0438\u0441\u043a\u043e\u0432. \u0414\u0435\u043b\u0430\u0435\u043c!<\/p>\n<h2>\u041a\u0430\u043a \u0431\u044b\u043b\u043e \u0438 \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u043c<\/h2>\n<p>\u041d\u0430\u0448 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043e\u043f\u043b\u0430\u0442\u044b \u043f\u043e\u0434\u0435\u043b\u0451\u043d \u043d\u0430 \u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430: \u0442\u044f\u043d\u0443\u0449\u0438\u0439\u0441\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0441\u043b\u0435\u0432\u0430, \u0446\u0435\u043d\u0430 \u0438 \u0432\u0440\u0435\u043c\u044f \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u0432 \u0446\u0435\u043d\u0442\u0440\u0435, \u0430 \u0441\u043f\u0440\u0430\u0432\u0430 \u2014 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043e\u0440\u0437\u0438\u043d\u044b.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8d6\/36d\/fd9\/8d636dfd92f5435833799a7c5247b215.webp\" alt=\"\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438\" title=\"\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438\" width=\"1080\" height=\"410\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/8d6\/36d\/fd9\/8d636dfd92f5435833799a7c5247b215.webp 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8d6\/36d\/fd9\/8d636dfd92f5435833799a7c5247b215.webp 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0410 \u0435\u0449\u0451 \u0435\u0441\u0442\u044c \u0441\u0442\u0435\u0439\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u043e\u043f\u043b\u0430\u0442\u0430 \u043d\u0435 \u043f\u0440\u043e\u0439\u0434\u0451\u0442. \u041e\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8d9\/0a3\/5f9\/8d90a35f9305d8620587535a545b84a4.png\" alt=\"\u0421\u0442\u0435\u0439\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438\u0437 Figma\" title=\"\u0421\u0442\u0435\u0439\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438\u0437 Figma\" width=\"872\" height=\"288\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/8d9\/0a3\/5f9\/8d90a35f9305d8620587535a545b84a4.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8d9\/0a3\/5f9\/8d90a35f9305d8620587535a545b84a4.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0435\u0439\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438\u0437 Figma<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a:<\/p>\n<ol>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440, \u0430 \u043c\u044b \u043f\u0440\u044f\u0447\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441 \u0446\u0435\u043d\u043e\u0439 \u0438 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c: pull to pay.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0442\u044f\u043d\u0435\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440, \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u044f \u0435\u0433\u043e. \u041c\u044b \u043f\u0440\u044f\u0447\u0435\u043c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u0432\u043e\u0434\u0438\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0434\u043e \u043a\u043e\u043d\u0446\u0430 \u0438 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0435\u0433\u043e, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044f \u0435\u043c\u0443 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440. \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u043b\u0430\u0442\u0430: \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0434\u043f\u0438\u0441\u044c payment, \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0448\u0438\u043c\u043c\u0435\u0440 \u2014 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043e\u043f\u043b\u0430\u0442\u044b.<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9a0\/e09\/f0d\/9a0e09f0dd62f84180487dd4801651df.gif\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u043c. \u041e\u043f\u043b\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u0440\u0437\u0438\u043d\u0443\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u043c. \u041e\u043f\u043b\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u0440\u0437\u0438\u043d\u0443\" width=\"1080\" height=\"402\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9a0\/e09\/f0d\/9a0e09f0dd62f84180487dd4801651df.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9a0\/e09\/f0d\/9a0e09f0dd62f84180487dd4801651df.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u043c. \u041e\u043f\u043b\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u0440\u0437\u0438\u043d\u0443<\/figcaption><\/div>\n<\/figure>\n<h3>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0434\u043e \u043d\u0430\u0441<\/h3>\n<p>\u0413\u043e\u0434 \u043d\u0430\u0437\u0430\u0434 \u0443 \u00ab\u041a\u043e\u043d\u0442\u0443\u0440\u0430\u00bb \u0432\u044b\u0448\u043b\u0430 \u0441\u0442\u0430\u0442\u044c\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 <a href=\"https:\/\/habr.com\/ru\/companies\/skbkontur\/articles\/811877\/\" rel=\"noopener noreferrer nofollow\">\u043e\u043d\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440, \u043d\u043e \u0447\u0443\u0442\u044c \u043f\u043e\u043f\u0440\u043e\u0449\u0435<\/a>. \u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043e\u043d\u0438 \u0435\u0433\u043e \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438: \u0447\u0435\u0440\u0435\u0437 Compound (\u043a\u0430\u043a \u044f \u0435\u0433\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u044e \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 XML) \u0438 \u0447\u0435\u0440\u0435\u0437 Layout Composable.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2b6\/dd0\/de2\/2b6dd0de288e55b6b406796b5d40d8d3.gif\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 \u00ab\u041a\u043e\u043d\u0442\u0443\u0440\u0430\u00bb. \u041f\u0435\u0440\u0432\u043e\u0435 - Compound, \u0430 \u0432\u0442\u043e\u0440\u043e\u0435 - Custom Layout\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 \u00ab\u041a\u043e\u043d\u0442\u0443\u0440\u0430\u00bb. \u041f\u0435\u0440\u0432\u043e\u0435 - Compound, \u0430 \u0432\u0442\u043e\u0440\u043e\u0435 - Custom Layout\" width=\"1075\" height=\"424\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2b6\/dd0\/de2\/2b6dd0de288e55b6b406796b5d40d8d3.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2b6\/dd0\/de2\/2b6dd0de288e55b6b406796b5d40d8d3.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 \u00ab\u041a\u043e\u043d\u0442\u0443\u0440\u0430\u00bb. \u041f\u0435\u0440\u0432\u043e\u0435 &#8212; Compound, \u0430 \u0432\u0442\u043e\u0440\u043e\u0435 &#8212; Custom Layout<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441: \u0437\u0430\u0447\u0435\u043c? \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0447\u0435\u0440\u0435\u0437 Compound \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0449\u0435, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a. \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 Layout Composable \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0433\u0447\u0435, \u043d\u043e \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0439. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f, \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442.<\/p>\n<blockquote>\n<p>\u0421\u043f\u043e\u0439\u043b\u0435\u0440: \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0432\u0438\u0434\u0436\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 Sample App \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0441\u0435\u0445 \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u0432.<\/p>\n<\/blockquote>\n<div class=\"floating-image\">\n<figure class=\"float full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9a1\/9a6\/87f\/9a19a687f74928ed245ab78aaa2ab1e8.png\" width=\"1080\" height=\"2340\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/9a1\/9a6\/87f\/9a19a687f74928ed245ab78aaa2ab1e8.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9a1\/9a6\/87f\/9a19a687f74928ed245ab78aaa2ab1e8.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<\/div>\n<h2>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\n<h3>\u041f\u043e\u0434\u0445\u043e\u0434 \u0441 Compound Composable<\/h3>\n<p>\u0412 \u0443\u0447\u0435\u0431\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445 \u043c\u044b \u0442\u043e\u0436\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 Compound Composable. \u042f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0435\u0433\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u043d\u043e \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u0432\u044f\u0437\u0435\u0439 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u0440\u043e\u0441\u043b\u0430\u0441\u044c, \u0447\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u0435\u0451 \u0431\u0435\u0437\u0431\u043e\u043b\u0435\u0437\u043d\u0435\u043d\u043d\u043e \u0443\u0436\u0435 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u043e\u0441\u044c.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/940\/e25\/605\/940e25605c61acc3ec5ee64388585789.png\" alt=\"\u0418\u0435\u0440\u0430\u0440\u0445\u0438\u044f \u0432 LayoutInspector \u0434\u043b\u044f Compound Composable\" title=\"\u0418\u0435\u0440\u0430\u0440\u0445\u0438\u044f \u0432 LayoutInspector \u0434\u043b\u044f Compound Composable\" width=\"836\" height=\"1124\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/940\/e25\/605\/940e25605c61acc3ec5ee64388585789.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/940\/e25\/605\/940e25605c61acc3ec5ee64388585789.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0418\u0435\u0440\u0430\u0440\u0445\u0438\u044f \u0432 LayoutInspector \u0434\u043b\u044f Compound Composable<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/45f\/e56\/941\/45fe5694168750f8751f94af4e083863.png\" alt=\"\u0418 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0430\u043a\u043e\u0433\u043e Content \u0435\u0441\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043d\u0433\" title=\"\u0418 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0430\u043a\u043e\u0433\u043e Content \u0435\u0441\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043d\u0433\" width=\"1394\" height=\"734\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/45f\/e56\/941\/45fe5694168750f8751f94af4e083863.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/45f\/e56\/941\/45fe5694168750f8751f94af4e083863.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0418 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0430\u043a\u043e\u0433\u043e Content \u0435\u0441\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043d\u0433<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 <code>Modifier.layout {}<\/code>, \u0440\u0430\u0437\u0431\u0440\u043e\u0441\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u043c\u0435\u0441\u0442\u0430\u043c. \u0422\u0430\u043a \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0441\u0440\u0430\u0437\u0443 \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439 <code>Layout<\/code>?<\/p>\n<blockquote>\n<p>\u0427\u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c?<\/p>\n<ol>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0438\u0448\u0438\u0442\u0435 Composable \u0441\u043e <strong>\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0441\u0432\u044f\u0437\u0435\u0439<\/strong> \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0441\u0440\u0430\u0437\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 Layout.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u043b\u043e\u0441\u043a\u0438\u0439 Layout, \u0435\u0441\u043b\u0438 \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u2014 \u0442\u043e\u0433\u0434\u0430 \u043b\u0438\u0448\u043d\u0438\u0445 \u0433\u0440\u0443\u043f\u043f \u0432 Slot Table \u043d\u0435 \u0431\u0443\u0434\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p>\u0411\u043e\u043b\u044c\u0448\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0434\u0435\u0431\u0430\u0436\u0438\u0442\u044c \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<\/li>\n<\/ol>\n<\/blockquote>\n<h2>\u0414\u0435\u043b\u0430\u0435\u043c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 Layout<\/h2>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a\u043e \u0432\u043a\u0443\u0441\u043d\u043e\u043c\u0443. \u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u043d \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043d\u0430\u00a0<code>Layout<\/code>.<\/p>\n<h3>\u0422\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0434\u0438\u0437\u0430\u0439\u043d\u0443 \u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e<\/h3>\n<p>\u0423 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439, \u043a\u0430\u043a \u0438 \u0443 \u043b\u044e\u0431\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u043b\u0443\u0447\u0448\u0435 \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u044b. \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u0435:<\/p>\n<ol>\n<li>\n<p>\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435. \u041e\u043d\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u0442\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430\u043c\u0438 \u0438 \u0438\u0445 \u0446\u0435\u043d\u043e\u0439, \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u00ab\u0448\u0438\u0440\u0438\u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 &#8212; \u043f\u0430\u0434\u0434\u0438\u043d\u0433\u00bb.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0442\u044f\u043d\u0435\u0442\u0441\u044f \u0436\u0435\u0441\u0442\u043e\u043c, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u0440\u043e\u0433 \u00ab\u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0441\u0442\u0438\u00bb: \u0435\u0441\u043b\u0438 \u043e\u043d \u043f\u0440\u043e\u0448\u0451\u043b 80% \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u043e \u0434\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u0430 \u00ab\u0434\u043e\u0435\u0437\u0436\u0430\u0435\u0442\u00bb \u0441\u0430\u043c, \u0430 \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u2014 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 idle \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0441\u0442\u0435\u0439\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u2014 idle, paying, syncing \u2014 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0439\u0442\u0438 \u0438\u0437\u0432\u043d\u0435 \u0432 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0436\u0435\u0441\u0442\u0430. \u0422\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0435\u0439\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u0439.<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f: <\/p>\n<ul>\n<li>\n<p>thumb \u2014\u00a0\u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u043f\u043b\u0430\u0442\u044b. \u041e\u043d \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u043a\u043e\u0444\u0435\u0439\u043d\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0430 \u0438\u043b\u0438 \u0433\u043e\u0441\u0442\u044c \u043d\u0435 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d;<\/p>\n<\/li>\n<li>\n<p>\u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442: \u0446\u0435\u043d\u0430, \u0431\u0435\u0439\u0434\u0436 \u043b\u043e\u044f\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f. \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043f\u043e <em>\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/em> \u0446\u0435\u043b\u0438\u043a\u043e\u043c;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0435 \u2014 \u043e\u0442 1 \u0434\u043e 3 \u0448\u0442\u0443\u043a \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443. \u0412\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043e\u043d\u0438 \u043a\u0430\u043a \u0441\u0442\u0435\u043a \u0441 \u043d\u0430\u0441\u043b\u043e\u0435\u043d\u0438\u0435\u043c;<\/p>\n<\/li>\n<li>\n<p>c\u0442\u0435\u0439\u0442\u044b <code>Error<\/code>, <code>Paying<\/code>, <code>Syncing<\/code>.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>\u041d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0448\u0430\u0433\u0443 \u044f \u0431\u0443\u0434\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u043f\u0443\u043d\u043a\u0442\u044b \u0438 \u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u044f. \u0410 \u0442\u0430\u043a\u0436\u0435 \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a, \u0435\u0441\u043b\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f. \u0418\u043d\u0430\u0447\u0435 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437\u0434\u0435\u043b \u043c\u043e\u0436\u0435\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0440\u0430\u0441\u0442\u0438.<\/p>\n<h3>\u041d\u0430\u0440\u0438\u0441\u0443\u0435\u043c \u043a\u0430\u0440\u043a\u0430\u0441<\/h3>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u2014 Thumb \u0438 \u0444\u043e\u043d \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u0418\u0445 \u0438 \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u043c. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0447\u0435\u0440\u0435\u0437 Layout, \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u043b\u043e\u0436\u0438\u043c \u0435\u0433\u043e \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c Composable \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<blockquote>\n<p>\u041a \u0442\u0430\u043a\u043e\u043c\u0443 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0443 \u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043d\u0446\u0438\u043f Slot API, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 Compose. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435:<\/p>\n<\/blockquote>\n<pre><code class=\"kotlin\">@Composable   fun FastPaymentButton(     fastPaymentState: FastPaymentState,     modifier: Modifier = Modifier,     thumbContent: @Composable BoxScope.() -&gt; Unit = {},    background: @Composable () -&gt; Unit = DefaultFastPaymentButtonBackground,   \/\/ \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043f\u043e \u043c\u0435\u0440\u0435 \u043e\u0431\u043e\u0433\u0430\u0449\u0435\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0444\u0438\u0447\u0430\u043c\u0438   onClick: () -&gt; Unit = {},     onSwiped: () -&gt; Unit = {},   ) {   \/\/ Content }<\/code><\/pre>\n<p>\u0417\u0430\u0432\u043e\u0434\u0438\u043c \u0432\u043d\u0443\u0442\u0440\u0438 <code>FastPaymentButton<\/code> \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <code>Layout<\/code>. \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 <code>content<\/code> \u0440\u0438\u0441\u0443\u0435\u043c \u0434\u0432\u0430 Composable: \u0444\u043e\u043d \u0438 Thumb.<\/p>\n<pre><code class=\"kotlin\">Layout(     modifier = modifier     \/\/ \u0412\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443     \/\/ \u041e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442     .width(400.dp),     content = {       Background(           modifier = Modifier           \/\/ \u0421\u0442\u0430\u0432\u0438\u043c LayoutId, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u0435\u0433\u043e \u0432 Measurer               .layoutId(Background),           background = background,       )       Thumb(           modifier = Modifier           \/\/ \u0421\u0442\u0430\u0432\u0438\u043c LayoutId, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u0435\u0433\u043e \u0432 Measurer               .layoutId(Thumb)               .width(96.dp)               .height(60.dp),           thumbContent = thumbContent,       )     },     measurePolicy = fastPaymentMeasurer(), )<\/code><\/pre>\n<p>\u0423 \u043d\u0430\u0441 Thumb \u0438 Background \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 Box \u0438 Image. \u0423 \u0432\u0430\u0441 \u0438\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>\u0412\u0441\u0451, \u0447\u0442\u043e \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0432 \u043d\u0430\u0448 Layout, \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0431\u043b\u043e\u043a MeasurePolicy \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 <code>List&lt;Measurable&gt;<\/code>, \u0433\u0434\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430\u0434\u043e \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0438 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c.<\/p>\n<p>\u0421\u0430\u043c\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f measurer \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"kotlin\">@Composable private fun fastPaymentMeasurer( ): MeasurePolicy = MeasurePolicy { measurables, constraints -&gt;   \/\/ Without loosing minWidth and minHeight,   \/\/ widths of measured composables will be max because of the parent   \/\/ https:\/\/stackoverflow.com\/a\/68606264   val looseConstraints = constraints.copy(       minWidth = 0,       minHeight = 0   )  \/\/ firstOrNull {} \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044e \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0435\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0431\u044b\u0442\u044c   val thumbPlaceable = measurables.firstOrNull { it.layoutId == FastPaymentLayoutId.Thumb }       ?.measure(looseConstraints)   val backgroundPlaceable = measurables.first { it.layoutId == FastPaymentLayoutId.Background }       .measure(looseConstraints)    layout(constraints.maxWidth, constraints.maxHeight) {     backgroundPlaceable.placeRelative(0, 0)     thumbPlaceable?.placeRelative(0, 0)   } }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u043d\u0430\u043c <code>Measurables<\/code>, \u043f\u043e\u043b\u0443\u0447\u0430\u044f \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b <code>Placeables<\/code>. \u042d\u0442\u0438 \u0441\u0430\u043c\u044b\u0435 <code>Placeables<\/code> \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 <code>measure<\/code> \u0438 <code>layout<\/code> \u0435\u0441\u0442\u044c \u0431\u043b\u043e\u043a <code>looseConstraints<\/code>. \u0421\u0430\u043c\u0438 <code>constraints<\/code> \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f. \u0415\u0441\u043b\u0438 \u0443 \u043d\u0435\u0433\u043e \u044f\u0432\u043d\u043e \u0437\u0430\u0434\u0430\u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0430, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0438\u0437\u043c\u0435\u0440\u044f\u0442\u044c\u0441\u044f \u0441 \u0442\u043e\u0439 \u0436\u0435 \u0441\u0430\u043c\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u043e\u0439, \u0430 \u043d\u0435 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 Thumb \u0443\u043a\u0430\u0437\u0430\u043d <code>Modifier.*width*(96.*dp*).*height*(60.*dp*)<\/code>, \u0430 \u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u2014<code>Modifier.width(400.dp)<\/code>. \u0415\u0441\u043b\u0438 \u043c\u044b \u0443\u0431\u0435\u0440\u0451\u043c <code>looseConstraints<\/code>, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cfe\/67d\/1d1\/cfe67d1d16165c863382355af4743304.png\" width=\"1080\" height=\"370\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/cfe\/67d\/1d1\/cfe67d1d16165c863382355af4743304.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cfe\/67d\/1d1\/cfe67d1d16165c863382355af4743304.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u044c\u044e\u0445\u0430 \u043c\u043e\u0433\u043b\u0430 \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u043f\u043e \u0441\u0432\u043e\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c, \u043c\u044b \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0435\u0439\u043d\u0442\u044b. \u0414\u0430\u043b\u0435\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>looseConstraints<\/code> \u0432\u0435\u0437\u0434\u0435:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e72\/385\/1fa\/e723851fa78960da616f7339524eef92.png\" width=\"1080\" height=\"432\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/e72\/385\/1fa\/e723851fa78960da616f7339524eef92.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e72\/385\/1fa\/e723851fa78960da616f7339524eef92.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0423\u0436\u0435 \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u043d\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e. \u0427\u0442\u043e\u0431\u044b \u043e\u0436\u0438\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043d\u0430\u0434\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434 \u0436\u0435\u0441\u0442\u043e\u043c.<\/p>\n<h3>\u0423\u0447\u0438\u043c\u0441\u044f \u0442\u0430\u0449\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043f\u0430\u043b\u044c\u0446\u0435\u043c<\/h3>\n<p>\u041d\u0430\u0443\u0447\u0438\u043c Thumb \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0436\u0435\u0441\u0442 \u00ab\u0441\u043b\u0430\u0439\u0434\u0430\u00bb. \u0414\u043b\u044f \u043d\u0435\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0451\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/foundation\/gestures\/package-summary#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.FlingBehavior)\" rel=\"noopener noreferrer nofollow\"><code>Modifier.anchoredDraggable()<\/code><\/a>.<\/p>\n<blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0435\u0440\u0441\u0438\u044f \u0432\u0430\u0448\u0435\u0433\u043e Compose \u043d\u0438\u0436\u0435 1.6.0-alpha01, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 <code>Modifier.swipeable<\/code>. \u0410 \u0435\u0441\u043b\u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f, \u0433\u043b\u044f\u043d\u044c\u0442\u0435 <a href=\"https:\/\/developer.android.com\/develop\/ui\/compose\/touch-input\/pointer-input\/migrate-swipeable\" rel=\"noopener noreferrer nofollow\">\u0433\u0430\u0439\u0434<\/a>.<\/p>\n<\/blockquote>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u043e\u0434\u0438\u0444\u0430\u0435\u0440 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Thumb:<\/p>\n<pre><code class=\"kotlin\">Thumb(     modifier = Modifier         \/\/ Other modifiers         .anchoredDraggable&lt;SwipeButtonAnchor&gt;(             state = anchoredDraggableState,             orientation = Horizontal,             startDragImmediately = true,         ), )<\/code><\/pre>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>startDragImmediately = true<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u044c Draggable \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u043a\u0430\u0441\u0430\u043d\u0438\u044e. \u0411\u0435\u0437 \u044d\u0442\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0436\u0435\u0441\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u0441\u044f \u0431\u044b \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043f\u0430\u043b\u044c\u0446\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>\u0421\u0442\u0435\u0439\u0442 <code>anchoredDraggableState<\/code> \u043c\u044b \u043e\u0431\u044a\u044f\u0432\u0438\u043b\u0438 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u0435\u0440\u0435\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c. \u0412 \u043d\u0451\u043c \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u044f\u043a\u043e\u0440\u044f \u2014 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 threshold\u2019\u044b \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"kotlin\">val anchoredDraggableState by remember {   AnchoredDraggableState(       initialValue = Start,       anchors = DraggableAnchors {         Start at 0f         \/\/ \u0417\u0430\u043c\u0435\u043d\u0438\u0442\u044c Float.MAX_VALUE \u043d\u0430 `\u0448\u0438\u0440\u0438\u043d\u0430 - \u0448\u0438\u0440\u0438\u043d\u0430 thumb`         End at Float.MAX_VALUE       },       positionalThreshold = 0.8f,       velocityThreshold = 10000f,       snapAnimationSpec = tween(),       decayAnimationSpec = rememberSplineBasedDecay()   ) }<\/code><\/pre>\n<pre><code class=\"kotlin\">val anchoredDraggableState by remember {   AnchoredDraggableState(       initialValue = Start,       anchors = DraggableAnchors {         Start at 0f         \/\/ \u0417\u0430\u043c\u0435\u043d\u0438\u0442\u044c Float.MAX_VALUE \u043d\u0430 `\u0448\u0438\u0440\u0438\u043d\u0430 - \u0448\u0438\u0440\u0438\u043d\u0430 thumb`         End at Float.MAX_VALUE       },       velocityThreshold = 10000f,       snapAnimationSpec = tween(),       decayAnimationSpec = rememberSplineBasedDecay()   ) }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u0441\u0432\u0430\u0439\u043f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u2014 \u0443 \u043d\u0435\u0433\u043e \u0432\u0441\u0435\u0433\u043e \u0434\u0432\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u0441\u0442\u0430\u0440\u0442 \u0438 \u043a\u043e\u043d\u0435\u0446. \u0417\u043d\u0430\u0447\u0438\u0442, \u0438 \u044f\u043a\u043e\u0440\u0435\u0439 \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0430:<\/p>\n<pre><code class=\"kotlin\">enum class SwipeButtonAnchor {   Start,   End, }<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u044f\u043a\u043e\u0440\u044c, \u043d\u0443\u0436\u043d\u043e \u044f\u0432\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445. \u0427\u0442\u043e\u0431\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f <code>End at Float.MAX_VALUE<\/code> \u0431\u044b\u043b\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>\u043f\u043e\u043b\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 - \u0448\u0438\u0440\u0438\u043d\u0430 thumb<\/code>.<\/p>\n<pre><code class=\"kotlin\">anchors = DraggableAnchors {   Start at 0f      \/\/ \u0417\u0430\u043c\u0435\u043d\u0438\u043c Float.MAX_VALUE \u043d\u0430 `\u043f\u043e\u043b\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 - \u0448\u0438\u0440\u0438\u043d\u0430 thumb`   End at Float.MAX_VALUE }<\/code><\/pre>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>Modifier.onSizeChanged {}<\/code>. \u041f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u043c\u043e\u0434\u0438\u0444\u0430\u0435\u0440 \u043d\u0430 <code>Layout<\/code> \u0438 <code>Thumb<\/code>, \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u044b.<\/p>\n<pre><code class=\"kotlin\">var allWidth by remember { mutableIntStateOf(0) } var thumbWidth by remember { mutableIntStateOf(0) } val endOfTrackWidth = remember(allWidth, thumbWidth) {   allWidth - thumbWidth }  \/\/ \u0412 \u0441\u0430\u0439\u0434 \u044d\u0444\u0444\u0435\u043a\u0442\u0435 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 endOfTrackWidth \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u044f\u043a\u043e\u0440\u0438 \/\/ \u0422\u0430\u043a \u043a\u0430\u043a \u0448\u0438\u0440\u0438\u043d\u0430 \u043f\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437 LaunchedEffect(endOfTrackWidth) {   fastPaymentDraggableState.updateAnchors(       newAnchors = DraggableAnchors {         Start at 0f         End at endOfTrackWidth.toFloat()       }   ) }  Layout(     modifier = Modifier         .onSizeChanged {           allWidth = it.width         } ) {   Thumb(       modifier = Modifier           .onSizeChanged {             thumbWidth = it.width           }   ) }<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u043f\u0440\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 80% \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0430\u043b\u044c\u0446\u0435\u043c, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 20% \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u00ab\u0434\u043e\u0435\u0437\u0436\u0430\u0435\u0442\u00bb \u0441\u0430\u043c, \u0430 \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2014 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 idle \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<p>\u0423 <code>AnchoredDraggableState<\/code> \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>postionalThreshold<\/code>, \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u0440\u043e \u043d\u0435\u0433\u043e \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<blockquote>\n<p>The positional threshold, in px, to be used when calculating the target state while a drag is in progress and when settling after the drag ends. This is the distance from the start of a transition.<\/p>\n<\/blockquote>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c, \u043f\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u044f \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u043b, \u0447\u0442\u043e \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u043d\u043e \u043d\u0435\u0442. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u044f \u0447\u0442\u043e-\u0442\u043e \u0434\u0435\u043b\u0430\u044e \u043d\u0435 \u0442\u0430\u043a, \u043a\u043e\u0433\u0434\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e <code>postionalThreshold<\/code> \u0441 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c <code>0.8f<\/code>:<\/p>\n<pre><code class=\"kotlin\">AnchoredDraggableState( \/\/ .. positionalThreshold: (totalDistance: Float) -&gt; Float =     { distance -&gt; distance * 0.8f },   ... )<\/code><\/pre>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u0448\u0438\u043c \u044d\u0442\u043e, \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0432 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0441\u0430\u043c\u0438, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c <strong>\u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442<\/strong> \u0436\u0435\u0441\u0442. \u0412 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440, \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u043c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043e\u043d \u043f\u0440\u043e\u0432\u0451\u043b \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0438\u0437 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434 <code>anchoredDraggableState.progress()<\/code>. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0431\u043e\u043b\u044c\u0448\u0435 80%, \u0442\u043e \u0434\u043e\u0442\u044f\u043d\u0435\u043c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e \u043a\u043e\u043d\u0446\u0430 \u0438 \u043d\u0430\u0447\u043d\u0451\u043c \u043e\u043f\u043b\u0430\u0442\u0443:<\/p>\n<pre><code class=\"kotlin\">\/**  * The payment confirmation is called when swiped the slider to the end and pull gesture is over  *\/ @Composable private fun ConfirmPaymentBySwipe(   fastPaymentDraggableState: FastPaymentDraggableState,   onSwiped: () -&gt; Unit, ) {   val draggableIsDragged by fastPaymentDraggableState.interactionSource.collectIsDraggedAsState()    LaunchedEffect(draggableIsDragged) {     if (draggableIsDragged) return@LaunchedEffect     val anchoredDraggableState = fastPaymentDraggableState.anchoredDraggableState     val swipeProgress = anchoredDraggableState.progress(from = Start, to = End)     if (swipeProgress &gt; 0.8f) {       onSwiped()     } else {       anchoredDraggableState.animateTo(Start)     }   } } <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u00ab\u0442\u0430\u0449\u0438\u043c\u00bb \u0441\u043b\u0430\u0439\u0434\u0435\u0440, \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>offset<\/code> \u0443 <code>AnchoredDraggable<\/code>, \u043d\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u0442. \u0427\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c, \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c <code>offset<\/code> \u0432\u043e \u0432\u0440\u0435\u043c\u044f <code>layout<\/code> \u0444\u0430\u0437\u044b. \u041f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0432 <code>measurer<\/code> \u0441\u0442\u0435\u0439\u0442 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c <code>offset<\/code> \u0432 <a href=\"http:\/\/thumbPlaceable.place\" rel=\"noopener noreferrer nofollow\"><code>thumbPlaceable.place<\/code><\/a><code>()<\/code>:<\/p>\n<pre><code class=\"kotlin\">layout(constraints.maxWidth, constraints.maxHeight) {   thumbPlaceable?.placeRelative(draggableState.offset.toInt(), 0) }<\/code><\/pre>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0430\u0439\u0434\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u043f\u0430\u043b\u044c\u0446\u0435\u043c. \u041e\u043d \u00ab\u043f\u0440\u0438\u043b\u0438\u043f\u0430\u0435\u0442\u00bb \u043a \u043d\u0430\u0447\u0430\u043b\u0443 \u0438\u043b\u0438 \u043a \u043a\u043e\u043d\u0446\u0443, \u043c\u0435\u043d\u044f\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0435\u043e\u0434\u043e\u043b\u0435\u0432\u0430\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 80% \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/731\/e95\/176\/731e95176c3952d4333f7d1b0b9e49f7.gif\" width=\"1080\" height=\"300\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/731\/e95\/176\/731e95176c3952d4333f7d1b0b9e49f7.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/731\/e95\/176\/731e95176c3952d4333f7d1b0b9e49f7.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h3>\u0420\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u043c \u043d\u0430 \u043f\u0440\u043e\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440<\/h3>\n<p>\u0416\u0435\u0441\u0442 \u0433\u043e\u0442\u043e\u0432. \u041f\u043e\u0434\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u043a \u043d\u0435\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442. \u0427\u0442\u043e\u0431\u044b \u043e\u043f\u043b\u0430\u0442\u0430 \u043f\u0440\u043e\u0448\u043b\u0430, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c 80% \u0448\u0438\u0440\u0438\u043d\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043e\u0442\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0430\u043b\u0435\u0446.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0431\u0435\u0440\u0451\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u044f\u043a\u043e\u0440\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0447\u0435\u0440\u0435\u0437 <code>draggableState.currentValue<\/code>.<\/p>\n<p>\u0412\u0442\u043e\u0440\u043e\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0447\u0435\u0440\u0435\u0437 <code>InteractionSource<\/code>. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0437\u0430 drag \u0436\u0435\u0441\u0442\u043e\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c <code>InteractionSource<\/code>:<\/p>\n<pre><code class=\"kotlin\">val interactionSource = remember {   MutableInteractionSource() } <\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0435\u0433\u043e \u0432 <code>anchoredDraggable:<\/code><\/p>\n<pre><code class=\"kotlin\">.anchoredDraggable&lt;SwipeButtonAnchor&gt;( \/\/ Other parameters     interactionSource = interactionSource ) <\/code><\/pre>\n<p><code>AnchoredDraggable<\/code> \u0441\u0430\u043c \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c\u044b\u0445 \u0436\u0435\u0441\u0442\u0430\u0445 \u2014 \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0438\u0445. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>LaunchedEffect<\/code> \u0441 \u0434\u0432\u0443\u043c\u044f \u043a\u043b\u044e\u0447\u0430\u043c\u0438. \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u043b\u0430\u0442\u0430.<\/p>\n<pre><code class=\"kotlin\">\/\/ \u041d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0436\u0435\u0441\u0442 isDragged. False - \u043a\u043e\u0433\u0434\u0430 \u0436\u0435\u0441\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d. True \u2013\u00a0drag \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 val draggableIsDragged by interactionSource.collectIsDraggedAsState()  LaunchedEffect(fastPaymentDraggableState.currentValue, draggableIsDragged) {   if (draggableIsDragged) return@LaunchedEffect   if (fastPaymentDraggableState.currentValue == End) {     onSwiped()   } } <\/code><\/pre>\n<p>\u0412\u0443\u0430\u043b\u044f! \u041e\u043f\u043b\u0430\u0442\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u0436\u0435\u0441\u0442\u0430 \u043f\u0440\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 80% \u0448\u0438\u0440\u0438\u043d\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u0432\u0441\u0451 \u043a\u0430\u043a \u043c\u044b \u0438 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u0438:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bff\/fca\/cfe\/bfffcacfe3887a80004dd96b66ecdd5d.gif\" width=\"1080\" height=\"300\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bff\/fca\/cfe\/bfffcacfe3887a80004dd96b66ecdd5d.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bff\/fca\/cfe\/bfffcacfe3887a80004dd96b66ecdd5d.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h3>(\u041d\u0435) \u0434\u0435\u043b\u0430\u0435\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u044c\u044e\u0448\u043a\u0438<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430\u0445 \u0438 \u0446\u0435\u043d\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430\u043c\u0438. \u0412\u0441\u0435\u043c, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u0433\u043e\u0441\u0442\u044e, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u0437\u0430\u043a\u0430\u0437:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a1e\/206\/107\/a1e20610763833f15a8deacc40304368.png\" alt=\"\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438\" title=\"\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438\" width=\"1080\" height=\"276\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/a1e\/206\/107\/a1e20610763833f15a8deacc40304368.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a1e\/206\/107\/a1e20610763833f15a8deacc40304368.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u043a \u044d\u0442\u043e\u0442 UI \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u2014 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e. \u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u0430\u0448\u0438\u0445 \u0437\u0430\u0434\u0430\u0447. \u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0443\u0442 \u043d\u0430\u0434\u043e\u043b\u0433\u043e, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043a\u0430\u0436\u0443, \u0438\u0437 \u043a\u0430\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u043d\u0430\u0448 \u0441\u043b\u0430\u0439\u0434\u0435\u0440:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8f1\/cb4\/837\/8f1cb483791645e970eeb6dee8f0c3f8.png\" alt=\"\u0412\u0441\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\" title=\"\u0412\u0441\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\" width=\"640\" height=\"893\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/8f1\/cb4\/837\/8f1cb483791645e970eeb6dee8f0c3f8.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8f1\/cb4\/837\/8f1cb483791645e970eeb6dee8f0c3f8.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0412\u0441\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0432\u044b:<\/p>\n<ol>\n<li>\n<p><strong>\u0428\u0438\u0440\u0438\u043d\u0430 Thumb<\/strong> \u2014 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u0430. \u0415\u0441\u043b\u0438 \u0435\u0433\u043e \u043d\u0435\u0442, \u0432 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f\u0445 \u0435\u0433\u043e \u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c.<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0430\u0431\u043e\u0440 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432<\/strong>. \u0415\u0441\u0442\u044c \u0432\u0441\u0435\u0433\u0434\u0430. \u0414\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u0435\u0433\u043e \u0448\u0438\u0440\u0438\u043d\u0430 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u0426\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442<\/strong>: \u0446\u0435\u043d\u0430, \u0432\u0440\u0435\u043c\u044f \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u0438 \u0442.\u0434. \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u043e\u0432. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u043e\u0433\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0430 \u0434\u043b\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043e\u043d \u0431\u044b\u0442\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u0442.<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 Layout \u0447\u0435\u0440\u0435\u0437 content:<\/p>\n<pre><code class=\"kotlin\">Layout(     content = {     \/\/ layoutId = FastPaymentLayoutId.Center       CenterContent()              \/\/ layoutId = FastPaymentLayoutId.End       EndContentContainer()        if (draggableSliderVisible) {       \/\/ layoutId = FastPaymentLayoutId.Thumb         Thumb()       }     } )  <\/code><\/pre>\n<p>\u041d\u0430\u0439\u0434\u0451\u043c \u0432 Measure <code>Thumb<\/code>\u0438 \u0438\u0437\u043c\u0435\u0440\u0438\u043c \u0435\u0433\u043e:<\/p>\n<pre><code class=\"kotlin\">val thumbPlaceable = measurables.firstOrNull { it.layoutId == FastPaymentLayoutId.Thumb }     ?.measure(looseConstraints) val endContentPlaceable = measurables.first { it.layoutId == FastPaymentLayoutId.End }     .measure(looseConstraints)  val thumbWidth = thumbPlaceable?.width ?: 0 val endWidth = endContentPlaceable.width <\/code><\/pre>\n<p>\u0418\u0437\u043c\u0435\u0440\u0438\u043c <code>Center<\/code>. \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0443, \u0448\u0438\u0440\u0438\u043d\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0430\u043c \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0438 \u0432\u043b\u0435\u0437\u0430\u0442\u044c \u0432 \u044d\u043a\u0440\u0430\u043d.<\/p>\n<p>\u041d\u0430\u0439\u0434\u0451\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u0434\u043b\u044f \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u041f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0435\u0433\u043e \u043c\u0435\u0436\u0434\u0443 Thumb \u0438 End \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c\u0438 \u043f\u043e \u043e\u0431\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b8d\/5d0\/fa4\/b8d5d0fa42db551c5ad5537f95fa992f.png\" alt=\"\u041a\u0430\u043a \u0438\u0437\u043c\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430\" title=\"\u041a\u0430\u043a \u0438\u0437\u043c\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430\" width=\"2115\" height=\"1890\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/b8d\/5d0\/fa4\/b8d5d0fa42db551c5ad5537f95fa992f.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b8d\/5d0\/fa4\/b8d5d0fa42db551c5ad5537f95fa992f.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041a\u0430\u043a \u0438\u0437\u043c\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0418\u0437\u043c\u0435\u0440\u0438\u043c \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 <code>Measurable<\/code>, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432 \u0435\u0433\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443:<\/p>\n<pre><code class=\"kotlin\">\/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u0438\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0434\u043b\u044f \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 val centerMaxWidth = getCenterMaxWidth()  \/\/ \u0418\u0437\u043c\u0435\u0440\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 val centerPlaceable = measurables     .first { it.layoutId == FastPaymentLayoutId.Center }     .measure(         looseConstraints.copy(             maxWidth = centerMaxWidth,         )     ) <\/code><\/pre>\n<p><code>centerMaxWidth<\/code> \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u0444\u043e\u0440\u043c\u0443\u043b\u0435:<\/p>\n<p><code>centerMaxWidth = maxWidth - thumbWidth - endWidth - paddings \u0441\u043b\u0435\u0432\u0430\/\u0441\u043f\u0440\u0430\u0432\u0430<\/code><\/p>\n<pre><code class=\"kotlin\">private fun MeasureScope.getCenterMaxWidth(   looseConstraints: Constraints,   thumbWidth: Int,   endWidth: Int, ): Int {   val alreadyOccupiedWidth = thumbWidth + endWidth   val centerOffsetFromThumb = getCenterOffsetFromThumb(thumbWidth)   return looseConstraints.maxWidth - alreadyOccupiedWidth - centerOffsetFromThumb } <\/code><\/pre>\n<p>\u0418\u0437\u043c\u0435\u0440\u0438\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u044b <code>Placeable<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0434\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u0431\u043b\u043e\u043a\u0435 <code>layout {}<\/code>. \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043d\u0430\u0434\u043e \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0438\u0445 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<ol>\n<li>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0438\u0441\u0443\u0435\u043c \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441 \u0446\u0435\u043d\u043e\u0439, \u0447\u0442\u043e\u0431\u044b Thumb \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u043b \u0435\u0433\u043e \u043f\u0440\u0438 \u0441\u0434\u0432\u0438\u0433\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043d\u0435\u0433\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432, \u0447\u0442\u043e\u0431\u044b Thumb \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u043b \u043f\u0440\u0438 \u0431\u044b\u0441\u0442\u0440\u043e\u043c \u0441\u0434\u0432\u0438\u0433\u0435, \u0435\u0441\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0431\u044b\u043b\u0430 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u0430\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0432\u0435\u0440\u0445 \u0432\u0441\u0435\u0433\u043e \u0440\u0438\u0441\u0443\u0435\u043c Thumb \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"kotlin\">layout(occupiedWidth, constraints.maxHeight) { \/\/ background, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0443\u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043b\u0438 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u044d\u0442\u0430\u043f\u0435 \/\/ backgroundPlaceable.placeRelative(0, 0)    centerPlaceable.placeRelative(centerStartX, 0)   endContentPlaceable.placeRelative(occupiedWidth - endWidth, 0)   \/\/ Thumb \u0440\u0438\u0441\u0443\u0435\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043c\u043e\u0433 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u043e\u0437\u0430\u0434\u0438   thumbPlaceable?.placeRelative(draggableState.offset.toInt(), 0) } <\/code><\/pre>\n<p>\u0412\u0438\u0434\u0438\u043c \u043f\u0430\u0440\u0443 \u043d\u043e\u0432\u044b\u0445 \u043f\u043e\u043b\u0435\u0439:<\/p>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435 \u2014<code> occupiedWidth<\/code>, \u0448\u0438\u0440\u0438\u043d\u0430 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043c \u0435\u0451 \u0441\u043d\u0438\u0437\u0443 \u0438 \u0441\u0432\u0435\u0440\u0445\u0443 \u043d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439:<\/p>\n<pre><code class=\"kotlin\">val occupiedWidth =   (thumbWidth + endWidth + centerWidth)       .coerceIn(constraints.minWidth, looseConstraints.maxWidth) <\/code><\/pre>\n<p>\u0412\u0442\u043e\u0440\u043e\u0435 \u2014 <code>centerStartX<\/code> . \u0421\u0442\u0430\u0440\u0442 \u043f\u043e X. \u0418\u0437 \u043d\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a:<\/p>\n<p><code>centerStartX = \u0448\u0438\u0440\u0438\u043d\u0430 Thumb + \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 offset<\/code><\/p>\n<p>\u0410 \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0430\u043c \u0442\u0443\u0442 <code>offset<\/code>? \u041e\u043d \u043d\u0443\u0436\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u0431\u043b\u043e\u043a \u0432\u0441\u0442\u0430\u043b \u0447\u0451\u0442\u043a\u043e \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u2014 \u043c\u0435\u0436\u0434\u0443 Thumb \u0438 End.<\/p>\n<blockquote>\n<p>\u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0438 \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435. \u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 Thumb \u0438 End \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c Center. \u0422\u0430\u043a \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0446\u0435\u043d\u0442\u0440 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430.<\/p>\n<\/blockquote>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 offset, \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u043f\u0443\u0441\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443. \u0412\u044b\u0447\u0442\u0435\u043c \u0438\u0437 \u043d\u0435\u0451 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 <code>CenterContent<\/code> \u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430 2:<\/p>\n<pre><code class=\"kotlin\">private fun MeasureScope.getCenterStartX(   thumbWidth: Int,   occupiedCenter: Int,   centerWidth: Int, ): Int {   val offsetInsideCenter = (occupiedCenter - centerWidth) \/ 2   return thumbWidth + offsetInsideCenter } <\/code><\/pre>\n<p>\u0412\u0441\u0435 \u0433\u043e\u0442\u043e\u0432\u043e! \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0438 \u0440\u0430\u0434\u0443\u0435\u043c\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/11a\/958\/5c2\/11a9585c21aee1f38a0232cc3036870e.gif\" alt=\"\u0420\u0435\u0430\u043a\u0446\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\" title=\"\u0420\u0435\u0430\u043a\u0446\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\" width=\"1080\" height=\"300\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/11a\/958\/5c2\/11a9585c21aee1f38a0232cc3036870e.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/11a\/958\/5c2\/11a9585c21aee1f38a0232cc3036870e.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0420\u0435\u0430\u043a\u0446\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ff9\/ee8\/73b\/ff9ee873bc8392dc1ba049b69d1a79ce.gif\" alt=\"\u0420\u0435\u0430\u043a\u0446\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430\" title=\"\u0420\u0435\u0430\u043a\u0446\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430\" width=\"1080\" height=\"300\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ff9\/ee8\/73b\/ff9ee873bc8392dc1ba049b69d1a79ce.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ff9\/ee8\/73b\/ff9ee873bc8392dc1ba049b69d1a79ce.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0420\u0435\u0430\u043a\u0446\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<h2>\u041d\u0430\u0432\u043e\u0434\u0438\u043c \u043a\u0440\u0430\u0441\u043e\u0442\u0443<\/h2>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u0432\u0435\u0441\u0442\u0438 \u043a\u0440\u0430\u0441\u043e\u0442\u0443: \u0434\u043e\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0435\u0439\u0442\u044b, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0449\u0451 \u0431\u043e\u043b\u044c\u0448\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u0445\u0430\u043f\u0442\u0438\u043a \u0438 \u0448\u0438\u043c\u043c\u0435\u0440. \u041f\u043e\u0435\u0445\u0430\u043b\u0438!<\/p>\n<h3>\u0420\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0441\u043b\u0435\u0434 \u0437\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u043c<\/h3>\n<p>\u0425\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u0432\u044b\u0442\u044f\u0433\u0438\u0432\u0430\u043d\u0438\u0438 Thumb \u0437\u0430 \u043d\u0438\u043c \u0448\u043b\u0430 \u0431\u0435\u043b\u0430\u044f \u043f\u043e\u043b\u043e\u0441\u0430. \u041e\u043d\u0430 \u0441\u0445\u043b\u043e\u043f\u043d\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0447\u043d\u0451\u0442\u0441\u044f \u043e\u043f\u043b\u0430\u0442\u0430:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fe8\/281\/305\/fe82813054b79084e74508048f514f2d.gif\" alt=\"\u041f\u0440\u0438\u0442\u044f\u0433\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 \u0432\u0441\u043b\u0435\u0434 \u0437\u0430 Thumb \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u0445 \" title=\"\u041f\u0440\u0438\u0442\u044f\u0433\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 \u0432\u0441\u043b\u0435\u0434 \u0437\u0430 Thumb \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u0445 \" width=\"1080\" height=\"402\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fe8\/281\/305\/fe82813054b79084e74508048f514f2d.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fe8\/281\/305\/fe82813054b79084e74508048f514f2d.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u0442\u044f\u0433\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 \u0432\u0441\u043b\u0435\u0434 \u0437\u0430 Thumb \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u0445 <\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u043d\u0435\u0441\u0443 \u043f\u043e\u043b\u043e\u0441\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u044f\u043d\u0435\u0442\u0441\u044f \u0437\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u043c, \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041a \u0447\u0435\u043c\u0443 \u043c\u044b \u0441\u0442\u0440\u0435\u043c\u0438\u043c\u0441\u044f:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ec8\/e50\/c97\/ec8e50c970c053ca856930bb0f7b79ef.gif\" width=\"1080\" height=\"300\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ec8\/e50\/c97\/ec8e50c970c053ca856930bb0f7b79ef.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ec8\/e50\/c97\/ec8e50c970c053ca856930bb0f7b79ef.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b\u0438 \u043f\u043e\u043b\u043e\u0441\u0443 \u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u043b\u0438 \u0435\u0451 \u0432\u043d\u0443\u0442\u0440\u044c <code>Layout<\/code>:<\/p>\n<pre><code class=\"kotlin\">Layout() { \/\/ Stretching progress   Box(       modifier = Modifier       .layoutId(Progress)           .fillMaxHeight()           .padding(4.dp)           .shadow(elevation = 2.dp, shape = CircleShape)           .background(DrinkitTheme.drinkitColors.backgroundPrimary, CircleShape)           .testTag(PAYMENT_ICON)   ) } <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e, <strong>\u0432\u043e-\u043f\u0435\u0440\u0432\u044b\u0445<\/strong>, \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0442\u044c \u0432\u044c\u044e\u0448\u043a\u0443, \u043f\u043e\u043a\u0430 \u043c\u044b \u0442\u044f\u043d\u0435\u043c Thumb \u043a \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c\u0443 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0438\u0437\u043c\u0435\u0440\u0438\u043c \u0448\u0438\u0440\u0438\u043d\u0443. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0448\u0438\u0440\u0438\u043d\u0430 \u2014 \u044d\u0442\u043e <code>draggable.offset + thumbWidth<\/code>.<\/p>\n<pre><code class=\"kotlin\">\/\/ \u0412\u044b\u0441\u0447\u0438\u0442\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043c \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u0440\u0430\u0448\u0435\u0439 val progressWidth = (offset.roundToInt() + thumbWidth)     .coerceIn(thumbWidth, occupiedWidth)  val progressPlaceable = measurables.first { it.layoutId == FastPaymentLayoutId.Progress }     .measure(         looseConstraints.copy(             minWidth = progressWidth,             maxWidth = progressWidth         )     )  ... layout() { progressPlaceable.placeRelative(dragOffsetProvider(), 0) } <\/code><\/pre>\n<p><strong>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445<\/strong>, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b<strong> <\/strong>\u043b\u0435\u0432\u044b\u0439 \u043a\u0440\u0430\u0439 \u043f\u043e\u043b\u043e\u0441\u043a\u0438 \u043f\u0440\u0438\u0442\u044f\u043d\u0443\u043b\u0441\u044f \u043a \u043b\u0435\u0432\u043e\u043c\u0443 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044e Thumb, \u043a\u043e\u0433\u0434\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043f\u0440\u043e\u0439\u0434\u0451\u0442 80% \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0442 0 \u0434\u043e <code>fullWidth-thumbWidth<\/code>. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0435\u0439\u0442.<\/p>\n<pre><code class=\"kotlin\">val progressStartPosition by animateIntAsState(     when (fastPaymentState.cartState) {       PAYING -&gt; endOfTrackWidth       else -&gt; 0     },     animationSpec = spring(stiffness = 500f) ) <\/code><\/pre>\n<p>\u042d\u0442\u043e\u0442 \u0441\u0434\u0432\u0438\u0433 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0443 \u043b\u0438\u043d\u0438\u0438, \u0442\u044f\u043d\u0443\u0449\u0435\u0439\u0441\u044f \u0437\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u043c. \u041d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0447\u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0435\u0433\u043e \u0432 <code>MeasurePolicy<\/code> \u0438 \u0432\u044b\u0447\u0442\u0435\u043c:<\/p>\n<pre><code class=\"kotlin\">val progressWidth =   (offset.roundToInt() + thumbWidth - progressStartPosition)       .coerceIn(thumbWidth, occupiedWidth) <\/code><\/pre>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u0445\u043e\u0442\u0435\u043b\u0438:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f0b\/25f\/68d\/f0b25f68d3f75766d07ba307acf4c6e7.gif\" alt=\"\u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430 Thumb \u0438 \u043c\u0430\u0433\u043d\u0438\u0442\u0438\u0442\u0441\u044f \u043a \u043d\u0430\u0447\u0430\u043b\u0443, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u043b\u0430\u0442\u0430\" title=\"\u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430 Thumb \u0438 \u043c\u0430\u0433\u043d\u0438\u0442\u0438\u0442\u0441\u044f \u043a \u043d\u0430\u0447\u0430\u043b\u0443, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u043b\u0430\u0442\u0430\" width=\"1080\" height=\"300\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f0b\/25f\/68d\/f0b25f68d3f75766d07ba307acf4c6e7.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f0b\/25f\/68d\/f0b25f68d3f75766d07ba307acf4c6e7.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430 Thumb \u0438 \u043c\u0430\u0433\u043d\u0438\u0442\u0438\u0442\u0441\u044f \u043a \u043d\u0430\u0447\u0430\u043b\u0443, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u043b\u0430\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<h3>\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0434\u043f\u0438\u0441\u0435\u0439 \u043f\u0440\u0438 \u0432\u044b\u0442\u044f\u0433\u0438\u0432\u0430\u043d\u0438\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430<\/h3>\n<p>\u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043d\u0430\u0434\u043f\u0438\u0441\u0438 Pull to pay \u0438 Paying. \u0423 \u043d\u0430\u0434\u043f\u0438\u0441\u0438 Pull To pay \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430, \u0430 \u0442\u0435\u043a\u0441\u0442 Paying \u0432\u044b\u0435\u0437\u0436\u0430\u0435\u0442 \u0441\u043b\u0435\u0432\u0430, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 \u0441\u0442\u0435\u0439\u0442 \u043e\u043f\u043b\u0430\u0442\u044b.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a02\/39f\/bb4\/a0239fbb4e3ee5d532dbf619686559de.gif\" alt=\"\u0427\u0435\u0433\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0441\u0442\u0438\u0447\u044c, \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0432 \u043d\u0430\u0434\u043f\u0438\u0441\u0438\" title=\"\u0427\u0435\u0433\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0441\u0442\u0438\u0447\u044c, \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0432 \u043d\u0430\u0434\u043f\u0438\u0441\u0438\" width=\"1080\" height=\"300\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a02\/39f\/bb4\/a0239fbb4e3ee5d532dbf619686559de.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a02\/39f\/bb4\/a0239fbb4e3ee5d532dbf619686559de.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0427\u0435\u0433\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0441\u0442\u0438\u0447\u044c, \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0432 \u043d\u0430\u0434\u043f\u0438\u0441\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0418\u0437\u043c\u0435\u0440\u0438\u043c \u043e\u0431\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043d\u0430\u0448\u0435\u043c <code>Layout<\/code>:<\/p>\n<pre><code class=\"kotlin\">val captionWidth = occupiedWidth - thumbWidth val pullToPayPlaceable = measurables[FastPaymentLayoutId.PullToPay]!!     .measure(         looseConstraints.copy(             maxWidth = captionsWidth         )     )      val payingPlaceable = measurables[FastPaymentLayoutId.Paying]!!     .measure(         looseConstraints.copy(             maxWidth = captionsWidth         )     )<\/code><\/pre>\n<p>\u041e\u0431\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438\u043c\u0435\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u2013\u00a0\u0448\u0438\u0440\u0438\u043d\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043c\u0438\u043d\u0443\u0441 \u0448\u0438\u0440\u0438\u043d\u0430 Thumb. \u0427\u0442\u043e\u0431\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0438\u0445, \u043d\u0430\u0434\u043f\u0438\u0441\u044c Pull to pay \u043c\u044b \u0441\u0442\u0430\u0432\u0438\u043c \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 Thumb, \u0430 \u043d\u0430\u0434\u043f\u0438\u0441\u044c Paying \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439.<\/p>\n<p>\u0414\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>progressStartPosition<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0432\u0432\u0435\u043b\u0438 \u043d\u0430 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u0448\u0430\u0433\u0435 \u0434\u043b\u044f \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430. \u0411\u0435\u0440\u0451\u043c \u0435\u0433\u043e, \u0438 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u043d\u0430\u0434\u043f\u0438\u0441\u044c Paying \u043d\u0430\u043b\u0435\u0432\u043e \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442 \u0432\u044b\u043f\u0440\u044b\u0433\u0438\u0432\u0430\u043d\u0438\u044f:<\/p>\n<pre><code class=\"kotlin\">layout() {   pullToPayPlaceable.placeRelative(thumbWidth, 0)   payingPlaceable.placeRelative(       x = fastPaymentDraggableState.progressOffset - captionWidth,       y = 0   ) }<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u043d\u0430\u0434\u043f\u0438\u0441\u0435\u0439. \u041a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e? \u0417\u0430\u0432\u0435\u0434\u0451\u043c \u043a\u043b\u0430\u0441\u0441, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0443\u0442 \u043b\u0435\u0436\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0441\u0442\u0435\u0439\u0442\u044b \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439:<\/p>\n<pre><code class=\"kotlin\">class FastPaymentContentAlpha(   val pullToPayAlpha: State&lt;Float&gt;,   val payingAlpha: State&lt;Float&gt;,   val endContentAlpha: State&lt;Float&gt;,   val centerContentAlpha: State&lt;Float&gt;, )<\/code><\/pre>\n<p>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 Composable \u043c\u0435\u0442\u043e\u0434. \u041f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u043d\u0443\u0436\u043d\u044b\u0435 \u0441\u0442\u0435\u0439\u0442\u044b \u0438 \u043f\u0440\u043e\u0441\u043b\u0435\u0434\u0438\u043c \u0437\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u0422\u0430\u043a \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0432\u0435\u0441\u044c \u043a\u043e\u0434, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e. \u0412\u044b\u0434\u0435\u043b\u0438\u043c \u0447\u0430\u0441\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043a\u043e\u0443\u043f:<\/p>\n<pre><code class=\"kotlin\">@Composable internal fun updateContentAlphaTransitions(   fastPaymentState: FastPaymentState,   fastPaymentDraggableState: FastPaymentDraggableState, ): FastPaymentContentAlpha { \/\/ \u041a\u0430\u043a\u0438\u0435-\u0442\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439   val pullToPayAlpha = animateFloatAsState(\/* Some value *\/)   val payingAlpha = animateFloatAsState(\/* Some value *\/)   val endContentAlpha = animateFloatAsState(\/* Some value *\/)   val centerContentAlpha = animateFloatAsState(\/* Some value *\/)    return remember(       fastPaymentState,       fastPaymentDraggableState,   ) {     FastPaymentContentAlpha(         pullToPayAlpha = pullToPayAlpha,         payingAlpha = payingAlpha,         endContentAlpha = endContentAlpha,         centerContentAlpha = centerContentAlpha,     )   } }<\/code><\/pre>\n<blockquote>\n<p>\u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u044f \u0432\u0437\u044f\u043b \u0438\u0437 \u0432\u0435\u043b\u0438\u043a\u043e\u043b\u0435\u043f\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0441\u0442\u0430\u0442\u0435\u0439 <a href=\"https:\/\/habr.com\/ru\/articles\/796437\/#:~:text=%D1%81%D0%B5%D0%B1%D0%B5%20%D0%B2%D0%BE%20%D0%B2%D1%80%D0%B5%D0%B4.-,%D0%9F%D0%B5%D1%80%D0%B5%D1%81%D1%8F%D0%B4%D1%8C%20%D1%81%20%D0%B8%D0%B3%D0%BB%D1%8B%20Compose%20%D0%BD%D0%B0%20%D1%81%D1%82%D0%B0%D1%80%D1%8B%D0%B9%20%D0%B4%D0%BE%D0%B1%D1%80%D1%8B%D0%B9%20Kotlin,-%D0%94%D0%BB%D1%8F%20%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B9%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B\" rel=\"noopener noreferrer nofollow\">Ozon \u043f\u0440\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e Compose<\/a>. \u0415\u0433\u043e \u043f\u043e\u043b\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445.<\/p>\n<\/blockquote>\n<p>\u041f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u043b\u044c\u0444\u044b \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0438\u0436\u0435 \u044f \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f <code>PullToPay<\/code> \u0447\u0435\u0440\u0435\u0437 <code>Modifier.alpha {}<\/code><\/p>\n<pre><code class=\"kotlin\">PullToPayContainer(     modifier = Modifier         .layoutId(FastPaymentLayoutId.PullToPay)         .alpha { containersAlpha.pullToPayAlpha.value },     pullToPayContent = pullToPayContent, )<\/code><\/pre>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u0434\u043f\u0438\u0441\u0438 \u0432 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u044e\u0442 \u043d\u0430 \u0436\u0435\u0441\u0442 \u0438 \u043d\u0430 \u0441\u0442\u0435\u0439\u0442:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/53a\/468\/491\/53a468491872ef0fbf0ed52ab5375ad9.gif\" alt=\"\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043d\u0430\u0434\u043f\u0438\u0441\u0435\u0439 \u0433\u043e\u0442\u043e\u0432\u044b!\" title=\"\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043d\u0430\u0434\u043f\u0438\u0441\u0435\u0439 \u0433\u043e\u0442\u043e\u0432\u044b!\" width=\"1080\" height=\"300\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/53a\/468\/491\/53a468491872ef0fbf0ed52ab5375ad9.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/53a\/468\/491\/53a468491872ef0fbf0ed52ab5375ad9.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043d\u0430\u0434\u043f\u0438\u0441\u0435\u0439 \u0433\u043e\u0442\u043e\u0432\u044b!<\/figcaption><\/div>\n<\/figure>\n<h3>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u043c \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0435\u0439\u0442<\/h3>\n<p>\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043d\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0438\u0437\u0432\u043d\u0435 \u0441\u0442\u0435\u0439\u0442 \u043e\u043f\u043b\u0430\u0442\u044b \u0438 \u043a\u043e\u0440\u0437\u0438\u043d\u044b \u2014 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443, \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043e\u043f\u043b\u0430\u0442\u044b.<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0435\u0439\u0442, \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>DraggableState<\/code> \u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0447\u0435\u0440\u0435\u0437 <code>LaunchedEffect<\/code> \u0441 \u043a\u043b\u044e\u0447\u043e\u043c <code>fastPaymentState.cartState<\/code>.<\/p>\n<pre><code class=\"kotlin\">\/\/ \u042d\u0444\u0444\u0435\u043a\u0442 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f DraggableState \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0442\u0435\u0439\u0442\u0430 \u043e\u043f\u043b\u0430\u0442\u044b LaunchedEffect(fastPaymentState.cartState) {   setPaymentState(fastPaymentState.cartState) }<\/code><\/pre>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 <code>setPaymentState()<\/code> \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e. <code>draggableState<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u0432 \u0441\u0442\u0430\u0442\u0443\u0441\u0435 Paying, \u0430 \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0430\u0442\u0443\u0441\u0430\u0445 \u2014 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u043e.<\/p>\n<pre><code class=\"kotlin\">suspend fun setPaymentState(cartState: CartState) { \/\/ CartState \u0431\u044b\u0432\u0430\u0435\u0442 Idle, Paying, Error, Sync.  \/\/ \u0422\u043e\u043b\u044c\u043a\u043e \u0432 Paying \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u00ab\u0441\u0432\u0430\u0439\u043f\u043d\u0443\u0442\u044b\u043c\u00bb   when (cartState) {     PAYING -&gt; dragAnimatedTo(End)     else -&gt; dragAnimatedTo(Start)   } }  private suspend fun dragAnimatedTo(   anchor: SwipeButtonAnchor, ) = supervisorScope {   draggableState.animateTo(       targetValue = anchor,       animationSpec = spring(stiffness = 500f)   ) }<\/code><\/pre>\n<h3>\u0428\u0438\u043c\u043c\u0435\u0440<\/h3>\n<p>\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u043e\u043f\u043b\u0430\u0442\u044b \u0443\u043a\u0440\u0430\u0448\u0435\u043d \u0448\u0438\u043c\u043c\u0435\u0440\u043e\u043c. \u042d\u0442\u043e \u043f\u0435\u0440\u0435\u043b\u0438\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u2014 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435\u043a\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043e\u043f\u043b\u0430\u0442\u044b.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e65\/37c\/ebf\/e6537cebfabf40a9a5581ba5814ce0e9.gif\" alt=\"\u0428\u0438\u043c\u043c\u0435\u0440 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u043c, \u0447\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0438\u0434\u0451\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043e\u043f\u043b\u0430\u0442\u044b\" title=\"\u0428\u0438\u043c\u043c\u0435\u0440 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u043c, \u0447\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0438\u0434\u0451\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043e\u043f\u043b\u0430\u0442\u044b\" width=\"1080\" height=\"300\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e65\/37c\/ebf\/e6537cebfabf40a9a5581ba5814ce0e9.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e65\/37c\/ebf\/e6537cebfabf40a9a5581ba5814ce0e9.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0428\u0438\u043c\u043c\u0435\u0440 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u043c, \u0447\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0438\u0434\u0451\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043e\u043f\u043b\u0430\u0442\u044b<\/figcaption><\/div>\n<\/figure>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0448\u0438\u043c\u043c\u0435\u0440\u043e\u0432 \u0432 Compose \u043c\u043d\u043e\u0433\u043e. \u041c\u044b \u0432\u0437\u044f\u043b\u0438 \u0448\u0438\u043c\u043c\u0435\u0440 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Accompanist \u2014 \u0441\u0435\u0439\u0447\u0430\u0441 \u0435\u0451 \u0443\u0436\u0435 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442. \u0428\u0438\u043c\u043c\u0435\u0440 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Modifier.placeholder()<\/code>:<\/p>\n<pre><code class=\"kotlin\">import com.google.accompanist.placeholder.placeholder  val shimmerVisible = isShimmerVisible()  Box(     Modifier         .fillMaxSize()         .placeholder(             visible = shimmerVisible,             shape = CircleShape,             color = Color.Transparent,             highlight = PayingHighlight(DrinkitTheme.drinkitColors.textIcon10),         ) )<\/code><\/pre>\n<p>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 <code>PlaceholderHighLight.shimmer()<\/code>. \u0412 \u043d\u0451\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d <code>animationSpec<\/code> \u0434\u043b\u044f \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438:<\/p>\n<pre><code class=\"kotlin\">private val PayingHighlight: (Color) -&gt; PlaceholderHighlight = { highlightColor -&gt;   PlaceholderHighlight.shimmer(       highlightColor = highlightColor,       animationSpec = infiniteRepeatable&lt;Float&gt;(           animation = tween(               durationMillis = SHIMMER_PAYING_DURATION.toInt(MILLISECONDS),               delayMillis = 200           ),           repeatMode = Restart       )   ) }<\/code><\/pre>\n<p>\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043b\u0438 \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u2014 \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u043c \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>isShimmerVisible()<\/code>. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0448\u0438\u043c\u043c\u0435\u0440 \u0432\u043a\u043b\u044e\u0447\u0430\u043b\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u043f\u043b\u0430\u0442\u0430:<\/p>\n<pre><code class=\"kotlin\">private fun isShimmerVisible(   fastPaymentState: FastPaymentState, ): Boolean { return fastPaymentState.cartState == PAYING }<\/code><\/pre>\n<p>\u041e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0448\u0438\u043c\u043c\u0435\u0440 \u0434\u043b\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0432 <code>Layout {}<\/code>, \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ce0\/45e\/f26\/ce045ef26946022f01befa7250dcee5c.gif\" alt=\"\u0411\u044b\u0441\u0442\u0440\u043e \u043f\u0435\u0440\u0435\u043b\u0438\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0448\u0438\u043c\u043c\u0435\u0440 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u043f\u043b\u0430\u0442\u044b. \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\" title=\"\u0411\u044b\u0441\u0442\u0440\u043e \u043f\u0435\u0440\u0435\u043b\u0438\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0448\u0438\u043c\u043c\u0435\u0440 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u043f\u043b\u0430\u0442\u044b. \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\" width=\"1080\" height=\"300\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ce0\/45e\/f26\/ce045ef26946022f01befa7250dcee5c.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ce0\/45e\/f26\/ce045ef26946022f01befa7250dcee5c.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0411\u044b\u0441\u0442\u0440\u043e \u043f\u0435\u0440\u0435\u043b\u0438\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0448\u0438\u043c\u043c\u0435\u0440 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u043f\u043b\u0430\u0442\u044b. \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, \u0448\u0438\u043c\u043c\u0435\u0440 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438 \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u043d\u0431\u043e\u0440\u0434\u0438\u043d\u0433-\u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438. \u0414\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0447\u0443\u0442\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435:<\/p>\n<pre><code class=\"kotlin\">private val IdleHighlight: (Color) -&gt; PlaceholderHighlight = { highlightColor -&gt;   PlaceholderHighlight.shimmer(       highlightColor = highlightColor,       animationSpec = infiniteRepeatable&lt;Float&gt;(           animation = tween(               durationMillis = SHIMMER_IDLE_DURATION.toInt(MILLISECONDS),               delayMillis = 200           ),           repeatMode = Restart       )   ) }<\/code><\/pre>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043c\u0435\u0442\u043e\u0434 <code>isShimmerVisible()<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0448\u0438\u043c\u043c\u0435\u0440 \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u2014 \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0442\u044f\u043d\u0435\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0441\u0442\u0435\u0439\u0442 &#8212; <code>Idle<\/code><\/p>\n<pre><code class=\"kotlin\">private fun isShimmerVisible(   isDragging: Boolean,   fastPaymentState: FastPaymentState, ): Boolean {   val canShowShimmer = fastPaymentState.cartState == PAYING || fastPaymentState.idleHintVisible   return canShowShimmer &amp;&amp; !isDragging } <\/code><\/pre>\n<p>\u0417\u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u0443\u044e \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043f\u043e\u043b\u0435 <code>idleHintVisible<\/code>. \u0415\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u0443:<\/p>\n<pre><code class=\"kotlin\">while (true) {   delay(IDLE_HINT_DELAY)   paymentState = fastPaymentStateUpdated.copy(       idleHintVisible = !fastPaymentStateUpdated.idleHintVisible   ) } <\/code><\/pre>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443 \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043d\u043e\u0433\u0434\u0430 \u00ab\u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u043e \u0441\u0435\u0431\u0435\u00bb \u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/15e\/e33\/541\/15ee33541dabd789d156a1b35f92b1d9.gif\" alt=\"\u0428\u0438\u043c\u043c\u0435\u0440 \u043a\u0430\u043a \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0430\u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430 \u00ab\u041a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u043c\u00bb\" title=\"\u0428\u0438\u043c\u043c\u0435\u0440 \u043a\u0430\u043a \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0430\u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430 \u00ab\u041a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u043c\u00bb\" width=\"1080\" height=\"300\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/15e\/e33\/541\/15ee33541dabd789d156a1b35f92b1d9.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/15e\/e33\/541\/15ee33541dabd789d156a1b35f92b1d9.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0428\u0438\u043c\u043c\u0435\u0440 \u043a\u0430\u043a \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0430\u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430 \u00ab\u041a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u043c\u00bb<\/figcaption><\/div>\n<\/figure>\n<h3>\u0425\u0430\u043f\u0442\u0438\u043a<\/h3>\n<p>\u0418 \u0442\u0443\u0442 \u043c\u044b \u0441\u0440\u0435\u0437\u0430\u043b\u0438 \u0443\u0433\u043b\u044b. \u0414\u0430, \u0445\u0430\u043f\u0442\u0438\u043a \u0432\u0430\u0436\u0435\u043d \u043a\u0430\u043a \u0444\u0438\u0434\u0431\u044d\u043a \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043d\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u0430\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0434 \u043d\u0438\u043c \u043d\u0430 Android \u043c\u044b \u043d\u0435 \u0441\u0442\u0430\u043b\u0438, \u0445\u043e\u0442\u044f \u043d\u0430 iOS \u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u0442\u0430\u043a\u0442\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 \u0445\u0430\u043f\u0442\u0438\u043a, \u0447\u0442\u043e \u0434\u0430\u0436\u0435 <a href=\"https:\/\/habr.com\/ru\/companies\/dododev\/articles\/682846\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u044e \u043f\u0440\u043e \u044d\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438<\/a>. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e!<\/p>\n<p>\u041d\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u0431\u0435\u0437 \u043e\u0442\u0434\u0430\u0447\u0438 \u043c\u044b Android-\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0435 \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438. \u042f \u0440\u0435\u0448\u0438\u043b \u043d\u0435 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0445\u0430\u043f\u0442\u0438\u043a \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0430 \u043f\u043e\u043b\u043e\u0436\u0438\u043b \u0435\u0433\u043e \u0432 \u0432\u0438\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u0430.<\/p>\n<pre><code class=\"kotlin\">@Composable private fun FastPaymentVibrationHandler(   fastPaymentState: FastPaymentState,   fastPaymentDraggableState: FastPaymentDraggableState, ) {   \/\/ Effect to control vibration enabled or disabled   \/\/ Enable it when slider is right at the start   \/\/ Disable it, when the state is either not IDLE or when returning from end to start   LaunchedEffect(fastPaymentState, fastPaymentDraggableState) {     snapshotFlow { fastPaymentDraggableState.progress }         .collect { progress -&gt;           handleVibrationEnabled(               progress = progress,               cartState = fastPaymentState.cartState,               targetValue = fastPaymentDraggableState.targetValue           )         }   }    \/\/ Effect to vibrate on progress change   LaunchedEffect(fastPaymentState, fastPaymentDraggableState) {     if (fastPaymentState.cartState != IDLE) return@LaunchedEffect      snapshotFlow { fastPaymentDraggableState.progress }         .collect(progressVibrator::changeProgress)   } } <\/code><\/pre>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0432\u0438\u0431\u0440\u0430\u0446\u0438\u0438 \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434 <code>handleVibrationEnabled<\/code>. \u0422\u0430\u043a\u0442\u0438\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u043a\u043b\u0438\u043a \u043d\u0443\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u0430\u043c \u0442\u044f\u043d\u0435\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440.<\/p>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 \u0432 \u0441\u0435\u0440\u0432\u0438\u0441 \u0432\u0438\u0431\u0440\u0430\u0446\u0438\u0438. \u0412\u043d\u0443\u0442\u0440\u0438 <code>changeProgress<\/code> \u043c\u0435\u0442\u043e\u0434 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u043b\u0435\u0444\u043e\u043d \u0432\u0438\u0431\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0435 10% drag\u2019\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430.<\/p>\n<h2>\u0420\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438, \u043f\u0435\u0440\u0444\u043e\u0440\u043c\u0430\u043d\u0441<\/h2>\n<p>\u0410 \u0447\u0442\u043e \u0443 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043f\u043e \u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f\u043c? \u042f \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u043a\u043b\u0438\u043a\u0430\u043b \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0442\u0435\u0439\u0442\u044b, \u043f\u043e\u0442\u0430\u0441\u043a\u0430\u043b \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0436\u0435\u0441\u0442\u043e\u043c:<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/862\/bd9\/358\/862bd93583ba28e28b6fbe1c6c7270e9.gif\" alt=\" \u0427\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 LayoutInspector \u0432 Android Studio \u043f\u0440\u0438 \u0442\u0430\u0441\u043a\u0430\u043d\u0438\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430\" title=\" \u0427\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 LayoutInspector \u0432 Android Studio \u043f\u0440\u0438 \u0442\u0430\u0441\u043a\u0430\u043d\u0438\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430\" width=\"500\" height=\"787\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/862\/bd9\/358\/862bd93583ba28e28b6fbe1c6c7270e9.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/862\/bd9\/358\/862bd93583ba28e28b6fbe1c6c7270e9.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption> \u0427\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 LayoutInspector \u0432 Android Studio \u043f\u0440\u0438 \u0442\u0430\u0441\u043a\u0430\u043d\u0438\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0436\u0438\u0434\u0430\u0442\u044c, \u0447\u0442\u043e \u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0439 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u043e\u0431\u0449\u0435. \u041f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0438\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0442\u044c \u0438\u0445 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0442\u043e\u0436\u0435 \u0431\u0435\u0441\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e \u2014 \u0438\u043d\u043e\u0433\u0434\u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043a\u0435\u0439\u0441\u0435 \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u0442\u043e\u043b\u0431\u0446\u0435 \u0432 Layout Inspector (\u043d\u0443 \u0438\u043b\u0438 \u043d\u0430 \u0434\u0435\u0432\u0430\u0439\u0441\u0435) \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u0430\u044f \u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u00ab\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\/\u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c pull to pay \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443\u00bb \u0438 \u00ab\u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c\/\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0435\u00bb.<\/p>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442? \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0435\u0439\u0442 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e.<\/p>\n<p>\u041d\u043e \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441 \u044d\u0442\u0438\u043c \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0441\u0442\u043e\u043b\u0431\u0446\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u0445 \u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0439, \u0441\u0447\u0451\u0442\u0447\u0438\u043a\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u043a\u043e\u0443\u043f\u0430 \u043d\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c. \u0410 \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041d\u043e \u0441 \u0448\u0438\u043c\u043c\u0435\u0440\u043e\u043c \u0432\u0441\u0451 \u043d\u0435 \u0442\u0430\u043a \u0445\u043e\u0440\u043e\u0448\u043e \u2014 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0438\u0446\u0438\u0439. \u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u0435\u0433\u043e \u043c\u043e\u0434\u0438\u0444\u0430\u0435\u0440. \u041f\u043e\u043a\u0430 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0441 \u044d\u0442\u0438\u043c \u0436\u0438\u0442\u044c.<\/p>\n<h2>\u0421\u0441\u044b\u043b\u043a\u0438<\/h2>\n<ol>\n<li>\n<p><a href=\"https:\/\/github.com\/kartollikaa\/ComposeFastPaymentSlider\" rel=\"noopener noreferrer nofollow\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435\u0439 \u0434\u043b\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u0432\u043e\u0451\u043c Telegram-\u043a\u0430\u043d\u0430\u043b\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u043f\u0440\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 <a href=\"https:\/\/t.me\/mobile_cappuccino\/48\" rel=\"noopener noreferrer nofollow\">MotionLayout<\/a>, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b \u0432 \u0441\u0442\u0430\u0442\u044c\u0435.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/t.me\/mobile_cappuccino\/25\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0441\u0442 \u0438\u0437 \u043c\u043e\u0435\u0433\u043e Telegram-\u043a\u0430\u043d\u0430\u043b\u0430 \u043f\u0440\u043e \u043f\u043e\u0434\u0445\u043e\u0434 looseConstraints<\/a> \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0432\u044c\u044e\u0448\u0435\u043a \u0432 Layout.<\/p>\n<\/li>\n<\/ol>\n<h2>\u0412\u044b\u0432\u043e\u0434\u044b<\/h2>\n<p>\u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 Layout \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e. \u0417\u0430\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u0442\u0435 \u0432 \u043d\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u0442\u0435, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u0442\u0430 \u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e, \u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0435 \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435.<\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f Compose \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043c\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c \u0432\u0435\u0441\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u043c\u043e\u0436\u0435\u043c \u0432 \u043b\u044e\u0431\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0433\u043e. \u0410 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c\u0443 UI \u043c\u044b \u0435\u0449\u0451 \u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043d\u0438\u0436\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<p>\u0422\u0443\u0442 \u043d\u0430\u0434\u043e \u043d\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 MotionLayout \u044d\u0442\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u0431\u044b\u043b\u043e \u0431\u043e\u043b\u0435\u0435 15. \u0410 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0438\u0445 \u0431\u044b\u043b\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435\u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0438\u0437-\u0437\u0430 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0432 \u043e\u0442\u043b\u0430\u0434\u043a\u0435 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u0441\u0430\u043c\u043e\u0433\u043e MotionLayout.<\/p>\n<p>\u0410 \u0432\u044b \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 MotionLayout \u043d\u0430 Compose? \u0418\u043b\u0438 \u0441\u0440\u0430\u0437\u0443 \u043f\u0438\u0441\u0430\u043b\u0438 \u043d\u0430 Compose? \u0414\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445!<\/p>\n<hr\/>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044e! \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043f\u0440\u043e \u0440\u0430\u0431\u043e\u0442\u0443 MotionLayout \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0438 Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u043c\u043e\u0439 Telegram-\u043a\u0430\u043d\u0430\u043b \u00ab<a href=\"https:\/\/t.me\/mobile_cappuccino\" rel=\"noopener noreferrer nofollow\">Android \u0432 \u0442\u0435\u0441\u0442\u0435 \u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u043a\u0430\u043f\u0443\u0447\u0438\u043d\u043e<\/a>\u00bb.<\/p>\n<p>\u041e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u044b \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u043c IT \u0432 \u0414\u043e\u0434\u043e \u0432 \u0446\u0435\u043b\u043e\u043c, \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432\u00a0<a href=\"https:\/\/api.vc.ru\/v2.8\/redirect?to=https%3A%2F%2Ft.me%2Fdododev&amp;postId=1728793\" rel=\"noopener noreferrer nofollow\">Telegram-\u043a\u0430\u043d\u0430\u043b\u0435 Dodo Engineering<\/a>. \u0422\u0430\u043c \u043c\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e \u0436\u0438\u0437\u043d\u0438 \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043a\u0443\u043b\u044c\u0442\u0443\u0440\u0435 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430\u0445.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \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\/articles\/933278\/\"> https:\/\/habr.com\/ru\/articles\/933278\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u043e\u043c\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>MotionLayout<\/code>? \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0436\u0435\u0441\u0442\u0430\u0445.<\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0432 \u0414\u0440\u0438\u043d\u043a\u0438\u0442\u0435 \u0431\u044b\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 MotionLayout \u2014\u00a0<strong>\u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u043e\u043f\u043b\u0430\u0442\u044b \u0432 \u043c\u0435\u043d\u044e<\/strong>. \u041e\u043d \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443.<\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u043f\u043b\u0430\u0442\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0437\u0430\u043a\u0430\u0437 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443, \u0442\u0430\u043f\u043d\u0443\u0432 \u043f\u043e \u043d\u0435\u043c\u0443. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e, MotionLayout \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043b \u043e\u0442\u043b\u0438\u0447\u043d\u043e.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0428\u043b\u043e \u0432\u0440\u0435\u043c\u044f, \u0431\u0430\u0433\u0438 \u043a\u043e\u043f\u0438\u043b\u0438\u0441\u044c, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u043e\u0441\u044c \u0432\u0441\u0451 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0434\u0430 \u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043d\u0443\u0436\u0434\u0430\u043b\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0435:<\/p>\n<ol>\n<li>\n<p>\u0412 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0431\u044b\u043b \u0441\u043f\u0440\u044f\u0442\u0430\u043d, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d \u0438\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u043a\u043e\u0444\u0435\u0439\u043d\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0430.<\/p>\n<figure class=\"full-width\"><\/figure>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043d\u043e\u0432\u043e\u0439 \u0444\u0438\u0447\u0438 \u00ab\u041f\u043e\u0434\u0430\u0440\u043e\u043a \u0434\u0440\u0443\u0433\u0443\u00bb \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u043e\u043d \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u043b \u043f\u0435\u0440\u0435\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<figure class=\"full-width\"><\/figure>\n<\/li>\n<\/ol>\n<p>\u042d\u0442\u0438 \u0434\u0432\u0435 \u0444\u0438\u0447\u0438 \u0431\u044b\u043b\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f MotionLayout. \u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0441\u0446\u0435\u043d\u0430\u0445, \u0433\u0434\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 View \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0435\u0451 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0418 \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u043e, \u043a\u0430\u043a \u0432\u0435\u0434\u0451\u0442 \u0441\u0435\u0431\u044f View, \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0446\u0435\u043d\u044b. \u0410 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0441\u0442\u043e. \u0422\u043e\u0433\u0434\u0430-\u0442\u043e \u043c\u044b \u0438 \u0440\u0435\u0448\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 Compose.<\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0414\u0438\u043c\u0430 \u041c\u0430\u043a\u0441\u0438\u043c\u043e\u0432, \u044f Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 Dodo Engineering. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432\u0430\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0430 Compose \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u043f\u0438\u043b\u0438\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 Compose. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043a\u043e\u0434 \u0438 \u0443\u0432\u0438\u0434\u0438\u043c, \u043a\u0430\u043a \u043e\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435.<\/p>\n<h2>\u041f\u0440\u0435\u0434\u043f\u043e\u0441\u044b\u043b\u043a\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u043d\u043e\u0432\u043e<\/h2>\n<p>\u041d\u0430\u043f\u043e\u043c\u043d\u044e \u0432\u0432\u043e\u0434\u043d\u044b\u0435, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0437\u0430\u0445\u043e\u0434\u0438\u043c \u0432 \u0440\u0430\u0431\u043e\u0442\u0443:<\/p>\n<ul>\n<li>\n<p>\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0435\u0441\u0442\u044c \u0444\u0438\u0447\u0430 \u00ab\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u043e\u043f\u043b\u0430\u0442\u044b\u00bb;<\/p>\n<\/li>\n<li>\n<p>\u0435\u0451 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 MotionLayout;<\/p>\n<\/li>\n<li>\n<p>\u044d\u0442\u043e \u043a\u0440\u0443\u0442\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043d\u043e \u043e\u043d \u0443\u0436\u0435 \u043d\u0435 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u0430 \u043c\u044b \u2014 \u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e, \u0431\u0430\u0433\u043e\u0432, \u0447\u0442\u043e \u0438\u0437-\u0437\u0430 \u043d\u0435\u0433\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u043c \u0441\u0442\u0430\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u043d\u043e\u0432\u043e, \u0447\u0435\u043c \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u044b\u043d\u0435\u0448\u043d\u044e\u044e \u0432\u0435\u0440\u0441\u0438\u044e.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><\/figure>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f \u0441 \u0431\u0430\u0433\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c. \u0421\u043f\u043e\u0439\u043b\u0435\u0440: \u0432\u0441\u0435 \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0438\u043b\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438 MotionLayout. \u041a\u0430\u043a\u0438\u0435 \u0431\u044b\u043b\u0438 \u0441\u0430\u043c\u044b\u043c\u0438 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u044b\u043c\u0438?<\/p>\n<ul>\n<li>\n<p>\u0412 MotionLayout \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c visibility \u0432\u044c\u044e\u0448\u0435\u043a. \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 View \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u0446\u0435\u043d\u0430\u043c\u0438, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u044b\u0442\u044c \u0435\u0433\u043e, <a href=\"https:\/\/stackoverflow.com\/a\/68251059\" rel=\"noopener noreferrer nofollow\">\u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0439\u0442\u0438\u0441\u044c \u043f\u043e \u0432\u0441\u0435\u043c \u0441\u0446\u0435\u043d\u0430\u043c MotionScene<\/a> \u0438 \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u044d\u0442\u043e, \u043a\u0441\u0442\u0430\u0442\u0438, \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \ud83d\ude21<\/p>\n<\/li>\n<li>\n<p>\u0421\u0430\u043c\u0438 \u0441\u0446\u0435\u043d\u044b \u0432 \u0432\u0438\u0434\u0435 XML \u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0442\u0435\u0433\u043e\u0432 \u043f\u0443\u0442\u0430\u044e\u0442. Transitions, ConstraintSets, Constraint, Layout \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e, \u0430 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043d\u0438\u0445 \u0441 \u043d\u0430\u0441\u043a\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><\/figure>\n<ul>\n<li>\n<p>\u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u0438\u0437 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 Android Studio \u0443\u0434\u0430\u043b\u0438\u043b\u0438 MotionLayout Editor, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0441\u0435 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043b\u043e \u043a \u0431\u0430\u0433\u0430\u043c UI, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u0438 \u043f\u0440\u0430\u0432\u0438\u0442\u044c. \u041f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u0438 \u0432\u043e\u0442 \u0442\u0430\u043a\u0438\u0435 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0411\u044b\u0432\u0430\u043b\u043e \u0447\u0442\u043e-\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u0445\u043e\u0442\u044f \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e<\/figcaption><\/div>\n<\/figure>\n<p>\u0411\u044b\u0432\u0430\u043b\u043e \u0438 \u0442\u0430\u043a\u043e\u0435: \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0441\u043f\u0440\u0430\u0432\u0430 \u0438 \u0441\u043b\u0435\u0432\u0430. \u0412\u0438\u0434\u0438\u043c \u0446\u0435\u043d\u0443, \u0430 \u0437\u0430 \u043d\u0435\u0439 \u043f\u0440\u043e\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u00abPayment&#8230;\u00bb. \u0418 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0432 \u043a\u0430\u043a\u043e\u043c \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u0442\u0430\u0442\u0443\u0441\u0435:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0428\u0440\u0451\u0434\u0438\u043d\u0433\u0435\u0440\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u2014 \u0431\u0435\u0437\u043d\u0430\u0434\u0451\u0436\u043d\u0430\u044f. \u0414\u043e\u043b\u0433\u043e \u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 Compose, \u043d\u043e \u0442\u0443\u0442 \u0442\u0435\u0440\u043f\u0435\u043d\u0438\u0435 \u043b\u043e\u043f\u043d\u0443\u043b\u043e \u2014 \u0438\u043c\u0435\u044e\u0449\u0438\u0435\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u0442\u0430\u043b\u0438 \u0445\u0443\u0436\u0435 \u0432\u0441\u0435\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0440\u0438\u0441\u043a\u043e\u0432. \u0414\u0435\u043b\u0430\u0435\u043c!<\/p>\n<h2>\u041a\u0430\u043a \u0431\u044b\u043b\u043e \u0438 \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u043c<\/h2>\n<p>\u041d\u0430\u0448 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043e\u043f\u043b\u0430\u0442\u044b \u043f\u043e\u0434\u0435\u043b\u0451\u043d \u043d\u0430 \u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430: \u0442\u044f\u043d\u0443\u0449\u0438\u0439\u0441\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0441\u043b\u0435\u0432\u0430, \u0446\u0435\u043d\u0430 \u0438 \u0432\u0440\u0435\u043c\u044f \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u0432 \u0446\u0435\u043d\u0442\u0440\u0435, \u0430 \u0441\u043f\u0440\u0430\u0432\u0430 \u2014 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043e\u0440\u0437\u0438\u043d\u044b.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0410 \u0435\u0449\u0451 \u0435\u0441\u0442\u044c \u0441\u0442\u0435\u0439\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u043e\u043f\u043b\u0430\u0442\u0430 \u043d\u0435 \u043f\u0440\u043e\u0439\u0434\u0451\u0442. \u041e\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u0442\u0435\u0439\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438\u0437 Figma<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a:<\/p>\n<ol>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440, \u0430 \u043c\u044b \u043f\u0440\u044f\u0447\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441 \u0446\u0435\u043d\u043e\u0439 \u0438 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c: pull to pay.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0442\u044f\u043d\u0435\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440, \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u044f \u0435\u0433\u043e. \u041c\u044b \u043f\u0440\u044f\u0447\u0435\u043c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u0432\u043e\u0434\u0438\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0434\u043e \u043a\u043e\u043d\u0446\u0430 \u0438 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0435\u0433\u043e, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044f \u0435\u043c\u0443 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440. \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u043b\u0430\u0442\u0430: \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0434\u043f\u0438\u0441\u044c payment, \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0448\u0438\u043c\u043c\u0435\u0440 \u2014 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043e\u043f\u043b\u0430\u0442\u044b.<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u043c. \u041e\u043f\u043b\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u0440\u0437\u0438\u043d\u0443<\/figcaption><\/div>\n<\/figure>\n<h3>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0434\u043e \u043d\u0430\u0441<\/h3>\n<p>\u0413\u043e\u0434 \u043d\u0430\u0437\u0430\u0434 \u0443 \u00ab\u041a\u043e\u043d\u0442\u0443\u0440\u0430\u00bb \u0432\u044b\u0448\u043b\u0430 \u0441\u0442\u0430\u0442\u044c\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 <a href=\"https:\/\/habr.com\/ru\/companies\/skbkontur\/articles\/811877\/\" rel=\"noopener noreferrer nofollow\">\u043e\u043d\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440, \u043d\u043e \u0447\u0443\u0442\u044c \u043f\u043e\u043f\u0440\u043e\u0449\u0435<\/a>. \u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043e\u043d\u0438 \u0435\u0433\u043e \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438: \u0447\u0435\u0440\u0435\u0437 Compound (\u043a\u0430\u043a \u044f \u0435\u0433\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u044e \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 XML) \u0438 \u0447\u0435\u0440\u0435\u0437 Layout Composable.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 \u00ab\u041a\u043e\u043d\u0442\u0443\u0440\u0430\u00bb. \u041f\u0435\u0440\u0432\u043e\u0435 &#8212; Compound, \u0430 \u0432\u0442\u043e\u0440\u043e\u0435 &#8212; Custom Layout<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441: \u0437\u0430\u0447\u0435\u043c? \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0447\u0435\u0440\u0435\u0437 Compound \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0449\u0435, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a. \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 Layout Composable \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0433\u0447\u0435, \u043d\u043e \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0439. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f, \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442.<\/p>\n<blockquote>\n<p>\u0421\u043f\u043e\u0439\u043b\u0435\u0440: \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0432\u0438\u0434\u0436\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 Sample App \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0441\u0435\u0445 \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u0432.<\/p>\n<\/blockquote>\n<div class=\"floating-image\">\n<figure class=\"float full-width\"><\/figure>\n<\/div>\n<h2>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\n<h3>\u041f\u043e\u0434\u0445\u043e\u0434 \u0441 Compound Composable<\/h3>\n<p>\u0412 \u0443\u0447\u0435\u0431\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445 \u043c\u044b \u0442\u043e\u0436\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 Compound Composable. \u042f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0435\u0433\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u043d\u043e \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u0432\u044f\u0437\u0435\u0439 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u0440\u043e\u0441\u043b\u0430\u0441\u044c, \u0447\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u0435\u0451 \u0431\u0435\u0437\u0431\u043e\u043b\u0435\u0437\u043d\u0435\u043d\u043d\u043e \u0443\u0436\u0435 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u043e\u0441\u044c.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0418\u0435\u0440\u0430\u0440\u0445\u0438\u044f \u0432 LayoutInspector \u0434\u043b\u044f Compound Composable<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\">\n<div><figcaption>\u0418 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0430\u043a\u043e\u0433\u043e Content \u0435\u0441\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043d\u0433<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 <code>Modifier.layout {}<\/code>, \u0440\u0430\u0437\u0431\u0440\u043e\u0441\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u043c\u0435\u0441\u0442\u0430\u043c. \u0422\u0430\u043a \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0441\u0440\u0430\u0437\u0443 \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439 <code>Layout<\/code>?<\/p>\n<blockquote>\n<p>\u0427\u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c?<\/p>\n<ol>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0438\u0448\u0438\u0442\u0435 Composable \u0441\u043e <strong>\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0441\u0432\u044f\u0437\u0435\u0439<\/strong> \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0441\u0440\u0430\u0437\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 Layout.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u043b\u043e\u0441\u043a\u0438\u0439 Layout, \u0435\u0441\u043b\u0438 \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u2014 \u0442\u043e\u0433\u0434\u0430 \u043b\u0438\u0448\u043d\u0438\u0445 \u0433\u0440\u0443\u043f\u043f \u0432 Slot Table \u043d\u0435 \u0431\u0443\u0434\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p>\u0411\u043e\u043b\u044c\u0448\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0434\u0435\u0431\u0430\u0436\u0438\u0442\u044c \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<\/li>\n<\/ol>\n<\/blockquote>\n<h2>\u0414\u0435\u043b\u0430\u0435\u043c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 Layout<\/h2>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a\u043e \u0432\u043a\u0443\u0441\u043d\u043e\u043c\u0443. \u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u043d \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043d\u0430\u00a0<code>Layout<\/code>.<\/p>\n<h3>\u0422\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0434\u0438\u0437\u0430\u0439\u043d\u0443 \u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e<\/h3>\n<p>\u0423 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439, \u043a\u0430\u043a \u0438 \u0443 \u043b\u044e\u0431\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u043b\u0443\u0447\u0448\u0435 \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u044b. \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u0435:<\/p>\n<ol>\n<li>\n<p>\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435. \u041e\u043d\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u0442\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430\u043c\u0438 \u0438 \u0438\u0445 \u0446\u0435\u043d\u043e\u0439, \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u00ab\u0448\u0438\u0440\u0438\u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 &#8212; \u043f\u0430\u0434\u0434\u0438\u043d\u0433\u00bb.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0442\u044f\u043d\u0435\u0442\u0441\u044f \u0436\u0435\u0441\u0442\u043e\u043c, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u0440\u043e\u0433 \u00ab\u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0441\u0442\u0438\u00bb: \u0435\u0441\u043b\u0438 \u043e\u043d \u043f\u0440\u043e\u0448\u0451\u043b 80% \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u043e \u0434\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u0430 \u00ab\u0434\u043e\u0435\u0437\u0436\u0430\u0435\u0442\u00bb \u0441\u0430\u043c, \u0430 \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u2014 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 idle \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0441\u0442\u0435\u0439\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u2014 idle, paying, syncing \u2014 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0439\u0442\u0438 \u0438\u0437\u0432\u043d\u0435 \u0432 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0436\u0435\u0441\u0442\u0430. \u0422\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0435\u0439\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u0439.<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f: <\/p>\n<ul>\n<li>\n<p>thumb \u2014\u00a0\u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u043f\u043b\u0430\u0442\u044b. \u041e\u043d \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u043a\u043e\u0444\u0435\u0439\u043d\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0430 \u0438\u043b\u0438 \u0433\u043e\u0441\u0442\u044c \u043d\u0435 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d;<\/p>\n<\/li>\n<li>\n<p>\u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442: \u0446\u0435\u043d\u0430, \u0431\u0435\u0439\u0434\u0436 \u043b\u043e\u044f\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f. \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043f\u043e <em>\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/em> \u0446\u0435\u043b\u0438\u043a\u043e\u043c;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0435 \u2014 \u043e\u0442 1 \u0434\u043e 3 \u0448\u0442\u0443\u043a \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443. \u0412\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043e\u043d\u0438 \u043a\u0430\u043a \u0441\u0442\u0435\u043a \u0441 \u043d\u0430\u0441\u043b\u043e\u0435\u043d\u0438\u0435\u043c;<\/p>\n<\/li>\n<li>\n<p>c\u0442\u0435\u0439\u0442\u044b <code>Error<\/code>, <code>Paying<\/code>, <code>Syncing<\/code>.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>\u041d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0448\u0430\u0433\u0443 \u044f \u0431\u0443\u0434\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u043f\u0443\u043d\u043a\u0442\u044b \u0438 \u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u044f. \u0410 \u0442\u0430\u043a\u0436\u0435 \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a, \u0435\u0441\u043b\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f. \u0418\u043d\u0430\u0447\u0435 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437\u0434\u0435\u043b \u043c\u043e\u0436\u0435\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0440\u0430\u0441\u0442\u0438.<\/p>\n<h3>\u041d\u0430\u0440\u0438\u0441\u0443\u0435\u043c \u043a\u0430\u0440\u043a\u0430\u0441<\/h3>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u2014 Thumb \u0438 \u0444\u043e\u043d \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u0418\u0445 \u0438 \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u043c. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0447\u0435\u0440\u0435\u0437 Layout, \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u043b\u043e\u0436\u0438\u043c \u0435\u0433\u043e \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c Composable \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<blockquote>\n<p>\u041a \u0442\u0430\u043a\u043e\u043c\u0443 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0443 \u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043d\u0446\u0438\u043f Slot API, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 Compose. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435:<\/p>\n<\/blockquote>\n<pre><code class=\"kotlin\">@Composable   fun FastPaymentButton(     fastPaymentState: FastPaymentState,     modifier: Modifier = Modifier,     thumbContent: @Composable BoxScope.() -&gt; Unit = {},    background: @Composable () -&gt; Unit = DefaultFastPaymentButtonBackground,   \/\/ \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043f\u043e \u043c\u0435\u0440\u0435 \u043e\u0431\u043e\u0433\u0430\u0449\u0435\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0444\u0438\u0447\u0430\u043c\u0438   onClick: () -&gt; Unit = {},     onSwiped: () -&gt; Unit = {},   ) {   \/\/ Content }<\/code><\/pre>\n<p>\u0417\u0430\u0432\u043e\u0434\u0438\u043c \u0432\u043d\u0443\u0442\u0440\u0438 <code>FastPaymentButton<\/code> \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <code>Layout<\/code>. \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 <code>content<\/code> \u0440\u0438\u0441\u0443\u0435\u043c \u0434\u0432\u0430 Composable: \u0444\u043e\u043d \u0438 Thumb.<\/p>\n<pre><code class=\"kotlin\">Layout(     modifier = modifier     \/\/ \u0412\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443     \/\/ \u041e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442     .width(400.dp),     content = {       Background(           modifier = Modifier           \/\/ \u0421\u0442\u0430\u0432\u0438\u043c LayoutId, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u0435\u0433\u043e \u0432 Measurer               .layoutId(Background),           background = background,       )       Thumb(           modifier = Modifier           \/\/ \u0421\u0442\u0430\u0432\u0438\u043c LayoutId, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u0435\u0433\u043e \u0432 Measurer               .layoutId(Thumb)               .width(96.dp)               .height(60.dp),           thumbContent = thumbContent,       )     },     measurePolicy = fastPaymentMeasurer(), )<\/code><\/pre>\n<p>\u0423 \u043d\u0430\u0441 Thumb \u0438 Background \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 Box \u0438 Image. \u0423 \u0432\u0430\u0441 \u0438\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>\u0412\u0441\u0451, \u0447\u0442\u043e \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0432 \u043d\u0430\u0448 Layout, \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0431\u043b\u043e\u043a MeasurePolicy \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 <code>List&lt;Measurable&gt;<\/code>, \u0433\u0434\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430\u0434\u043e \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0438 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c.<\/p>\n<p>\u0421\u0430\u043c\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f measurer \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"kotlin\">@Composable private fun fastPaymentMeasurer( ): MeasurePolicy = MeasurePolicy { measurables, constraints -&gt;   \/\/ Without loosing minWidth and minHeight,   \/\/ widths of measured composables will be max because of the parent   \/\/ https:\/\/stackoverflow.com\/a\/68606264   val looseConstraints = constraints.copy(       minWidth = 0,       minHeight = 0   )  \/\/ firstOrNull {} \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044e \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0435\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0431\u044b\u0442\u044c   val thumbPlaceable = measurables.firstOrNull { it.layoutId == FastPaymentLayoutId.Thumb }       ?.measure(looseConstraints)   val backgroundPlaceable = measurables.first { it.layoutId == FastPaymentLayoutId.Background }       .measure(looseConstraints)    layout(constraints.maxWidth, constraints.maxHeight) {     backgroundPlaceable.placeRelative(0, 0)     thumbPlaceable?.placeRelative(0, 0)   } }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u043d\u0430\u043c <code>Measurables<\/code>, \u043f\u043e\u043b\u0443\u0447\u0430\u044f \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b <code>Placeables<\/code>. \u042d\u0442\u0438 \u0441\u0430\u043c\u044b\u0435 <code>Placeables<\/code> \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 <code>measure<\/code> \u0438 <code>layout<\/code> \u0435\u0441\u0442\u044c \u0431\u043b\u043e\u043a <code>looseConstraints<\/code>. \u0421\u0430\u043c\u0438 <code>constraints<\/code> \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f. \u0415\u0441\u043b\u0438 \u0443 \u043d\u0435\u0433\u043e \u044f\u0432\u043d\u043e \u0437\u0430\u0434\u0430\u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0430, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0438\u0437\u043c\u0435\u0440\u044f\u0442\u044c\u0441\u044f \u0441 \u0442\u043e\u0439 \u0436\u0435 \u0441\u0430\u043c\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u043e\u0439, \u0430 \u043d\u0435 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 Thumb \u0443\u043a\u0430\u0437\u0430\u043d <code>Modifier.*width*(96.*dp*).*height*(60.*dp*)<\/code>, \u0430 \u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u2014<code>Modifier.width(400.dp)<\/code>. \u0415\u0441\u043b\u0438 \u043c\u044b \u0443\u0431\u0435\u0440\u0451\u043c <code>looseConstraints<\/code>, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u044c\u044e\u0445\u0430 \u043c\u043e\u0433\u043b\u0430 \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u043f\u043e \u0441\u0432\u043e\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c, \u043c\u044b \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0435\u0439\u043d\u0442\u044b. \u0414\u0430\u043b\u0435\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>looseConstraints<\/code> \u0432\u0435\u0437\u0434\u0435:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0423\u0436\u0435 \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u043d\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e. \u0427\u0442\u043e\u0431\u044b \u043e\u0436\u0438\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043d\u0430\u0434\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434 \u0436\u0435\u0441\u0442\u043e\u043c.<\/p>\n<h3>\u0423\u0447\u0438\u043c\u0441\u044f \u0442\u0430\u0449\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043f\u0430\u043b\u044c\u0446\u0435\u043c<\/h3>\n<p>\u041d\u0430\u0443\u0447\u0438\u043c Thumb \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0436\u0435\u0441\u0442 \u00ab\u0441\u043b\u0430\u0439\u0434\u0430\u00bb. \u0414\u043b\u044f \u043d\u0435\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0451\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/foundation\/gestures\/package-summary#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.FlingBehavior)\" rel=\"noopener noreferrer nofollow\"><code>Modifier.anchoredDrag<\/code><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-469613","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/469613","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=469613"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/469613\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=469613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=469613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=469613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}