{"id":1320,"date":"2021-05-24T15:38:29","date_gmt":"2021-05-24T15:38:29","guid":{"rendered":"https:\/\/otus.ru\/journal\/?p=1320"},"modified":"2021-05-24T17:39:08","modified_gmt":"2021-05-24T17:39:08","slug":"krestiki-noliki","status":"publish","type":"post","link":"https:\/\/otus.ru\/journal\/krestiki-noliki\/","title":{"rendered":"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_61 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/otus.ru\/journal\/krestiki-noliki\/#%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B0\" title=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/otus.ru\/journal\/krestiki-noliki\/#%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B0_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0\" title=\"\u0412\u0435\u0440\u0441\u0442\u043a\u0430 \u044d\u043a\u0440\u0430\u043d\u0430\">\u0412\u0435\u0440\u0441\u0442\u043a\u0430 \u044d\u043a\u0440\u0430\u043d\u0430<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/otus.ru\/journal\/krestiki-noliki\/#%D0%A1%D0%BE%D0%B5%D0%B4%D0%B8%D0%BD%D1%8F%D0%B5%D0%BC_%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D1%83_%D1%81_%D0%BA%D0%BE%D0%B4%D0%BE%D0%BC_Binding\" title=\"\u0421\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0441 \u043a\u043e\u0434\u043e\u043c (Binding)\">\u0421\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0441 \u043a\u043e\u0434\u043e\u043c (Binding)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/otus.ru\/journal\/krestiki-noliki\/#%D0%9F%D0%B8%D1%88%D0%B5%D0%BC_%D0%BA%D0%BE%D0%B4\" title=\"\u041f\u0438\u0448\u0435\u043c \u043a\u043e\u0434\">\u041f\u0438\u0448\u0435\u043c \u043a\u043e\u0434<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/otus.ru\/journal\/krestiki-noliki\/#%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%B5%D0%BC_%D1%81%D0%B2%D0%BE%D1%8E_%D0%B2%D1%8C%D1%8E%D1%88%D0%BA%D1%83_%D0%B8_%D1%80%D0%B8%D1%81%D1%83%D0%B5%D0%BC_%D0%BD%D0%B0_%D0%BD%D0%B5%D0%B9_%D1%81%D0%B5%D1%82%D0%BA%D1%83\" title=\"\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0432\u043e\u044e \u0432\u044c\u044e\u0448\u043a\u0443 \u0438 \u0440\u0438\u0441\u0443\u0435\u043c \u043d\u0430 \u043d\u0435\u0439 \u0441\u0435\u0442\u043a\u0443\">\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0432\u043e\u044e \u0432\u044c\u044e\u0448\u043a\u0443 \u0438 \u0440\u0438\u0441\u0443\u0435\u043c \u043d\u0430 \u043d\u0435\u0439 \u0441\u0435\u0442\u043a\u0443<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/otus.ru\/journal\/krestiki-noliki\/#%D0%92%D1%8B%D1%87%D0%B8%D1%81%D0%BB%D1%8F%D0%B5%D0%BC_%D0%BA%D1%82%D0%BE_%D0%B2%D1%8B%D0%B8%D0%B3%D1%80%D0%B0%D0%BB\" title=\"\u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c, \u043a\u0442\u043e \u0432\u044b\u0438\u0433\u0440\u0430\u043b\">\u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c, \u043a\u0442\u043e \u0432\u044b\u0438\u0433\u0440\u0430\u043b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/otus.ru\/journal\/krestiki-noliki\/#%D0%A1%D0%B1%D1%80%D0%B0%D1%81%D1%8B%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D1%8F_%D0%B8%D0%B3%D1%80%D1%8B\" title=\"\u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0433\u0440\u044b\">\u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0433\u0440\u044b<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/otus.ru\/journal\/krestiki-noliki\/#%D0%9F%D0%BE%D0%B4%D0%B2%D0%BE%D0%B4%D0%B8%D0%BC_%D0%B8%D1%82%D0%BE%D0%B3%D0%B8\" title=\"\u041f\u043e\u0434\u0432\u043e\u0434\u0438\u043c \u0438\u0442\u043e\u0433\u0438\">\u041f\u043e\u0434\u0432\u043e\u0434\u0438\u043c \u0438\u0442\u043e\u0433\u0438<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u043f\u0440\u0438\u0443\u0440\u043e\u0447\u0435\u043d\u043d\u043e\u0439 \u043a \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0443\u0440\u0441\u0443 <a href=\"https:\/\/otus.ru\/lessons\/android-basic\/?utm_source=oj&amp;utm_medium=affilate&amp;utm_campaign=androidbasic&amp;utm_term=24.05.2021&amp;mxm=[[hash_metrika]]&amp;relogin=True&amp;token=[[token]]\"><strong>Android Developer. Basic<\/strong><\/a>, \u043c\u044b \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u0432\u043e\u044e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0438\u0433\u0440\u0443 \u00ab\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\u00bb. \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c Android Studio. \u041a\u0430\u043a\u0430\u044f \u0443 \u0432\u0430\u0441 \u041e\u0421 \u2014 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0442.\u043a. \u044d\u0442\u0430 IDE \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 Windows, Ubuntu \u0438\u043b\u0438 Mac. \u042f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 Kotlin, \u0442.\u043a. \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u044f\u0437\u044b\u043a\u043e\u043c \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 Android. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0432\u0435\u0440\u0441\u0438\u044f Android Studio 4.1.3<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B0\"><\/span>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c <strong>Fragment + ViewModel<\/strong> \u0438 \u043d\u0430\u0436\u0430\u0442\u044c <strong>Next<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"468\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok1.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1321\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok1.png 624w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok1-300x225.png 300w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok1-150x113.png 150w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432 \u043f\u043e\u043b\u0435 <strong>Name<\/strong> \u0432\u0432\u043e\u0434\u0438\u0442\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432 <strong>Package name<\/strong> \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043d\u0435\u0441\u0442\u0438 \u0441\u0432\u043e\u0435 \u0438\u043c\u044f \u0438\u043b\u0438 \u043d\u0438\u043a \u043a\u0430\u043a \u0434\u043e\u043c\u0435\u043d\u043d\u043e\u0435 \u0438\u043c\u044f, \u043d\u043e \u0441 \u0437\u0430\u0434\u0430 \u043d\u0430 \u043f\u0435\u0440\u0435\u0434. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043c\u0430\u0440\u043a\u0435\u0442\u0435 \u0438 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435. \u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a\u0430\u043a \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435. \u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c Finish \u0438 \u0436\u0434\u0435\u043c, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"468\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok2.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1322\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok2.png 624w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok2-300x225.png 300w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok2-150x113.png 150w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0430\u043c \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0432 <strong>build.gradle<\/strong> \u043c\u043e\u0434\u0443\u043b\u044f \u0432 \u0440\u0430\u0437\u0434\u0435\u043b <strong>dependencies<\/strong>. \u0410 \u0442\u0430\u043a \u0436\u0435 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c <strong>viewBinding<\/strong> \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0443\u0434\u043e\u0431\u043d\u0430 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u044c \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0441 \u043a\u043e\u0434\u043e\u043c (\u0441\u043c\u043e\u0442\u0440\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>android {\n\u2026\n    buildFeatures {\n        viewBinding true\n    }\n\n}\n\ndependencies {\n\u2026\n\n    implementation \"androidx.lifecycle:lifecycle-livedata-ktx:2.2.0\"\n    implementation \"androidx.lifecycle:lifecycle-extensions:2.2.0\"\n    implementation \"androidx.lifecycle:lifecycle-viewmodel-ktx:2.2.0\"\n    implementation \"androidx.gridlayout:gridlayout:1.0.0\"\n\n    implementation \"androidx.fragment:fragment-ktx:1.3.0\"\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"530\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok3.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1323\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok3.png 624w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok3-300x255.png 300w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok3-150x127.png 150w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B0_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0\"><\/span>\u0412\u0435\u0440\u0441\u0442\u043a\u0430 \u044d\u043a\u0440\u0430\u043d\u0430<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0432\u0435\u0440\u0441\u0442\u0430\u043d\u0438\u044e \u044d\u043a\u0440\u0430\u043d\u0430. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u044c\u044e\u0448\u0435\u043a. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0432\u044c\u044e\u0448\u043a\u0435 \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043e\u0442 \u043a\u0440\u0430\u044f \u044d\u043a\u0440\u0430\u043d\u0430, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u043c `<strong>Guideline<\/strong>`. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u00ab\u0446\u0435\u043f\u043b\u044f\u0442\u044c\u0441\u044f\u00bb \u0432\u044c\u044e\u0448\u043a\u0438. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u044d\u043a\u0440\u0430\u043d \u043e\u0442\u043a\u0440\u044b\u043b\u0441\u044f \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 `<strong>Design<\/strong>`, \u0442\u043e \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u0440\u0435\u0436\u0438\u043c `<strong>Split<\/strong>`. \u0422\u0430\u043a \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u043c\u043d\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0442\u044c \u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u043e\u0442\u0438\u043f\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <strong>Guideline<\/strong> \u043c\u043e\u0436\u043d\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 `<strong>ConstraintLayout<\/strong>` \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c `<strong>&lt;guideline<\/strong>` \u0438 \u0441\u0442\u0443\u0434\u0438\u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0439 \u043d\u0430\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u0418\u043b\u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 `<strong>Guidelines<\/strong>` \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043b\u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 guideline. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439. \u0423 \u043d\u0430\u0441 \u043d\u0430 \u043c\u0430\u043a\u0435\u0442\u0435 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u043f\u0440\u0430\u0432\u0430 \u043f\u043e\u043b\u043e\u0441\u0430. \u041f\u0440\u043e\u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <strong>Gidline,<\/strong> \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0432 \u0435\u0433\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u0432 3 \u0440\u0430\u0437\u0430. \u0412 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>android:id<\/code> \u043d\u0430\u043f\u0438\u0448\u0435\u043c <code>@+id\/<\/code> \u043f\u043b\u044e\u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f (start, end, top, bottom). \u0412 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 <code>android:orientation<\/code> \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043c vertical\/horizontal \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0438. \u0418 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>app:layout_constraintGuide_<strong>begin<\/strong><\/code> \u043d\u0430 <code>app:layout_constraintGuide_<strong>end<\/strong><\/code> \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 <code>id=end\/bottom<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"430\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok4.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1324\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok4.png 624w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok4-300x207.png 300w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok4-150x103.png 150w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u0447\u0435\u0439 \u0441\u0435\u0439\u0447\u0430\u0441 \u0445\u043e\u0434 <strong>\u0425<\/strong> \u0438\u043b\u0438 <strong>\u041e<\/strong>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c 3 <strong>ImageView<\/strong>. \u041d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0430\u043c\u0438 \u0438\u043a\u043e\u043d\u043a\u0438 <strong>\u0425<\/strong> \u0438 <strong>\u041e<\/strong>, \u0430 \u0442\u0430\u043a \u0436\u0435 \u00df \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0447\u0435\u0439 \u0445\u043e\u0434.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043f\u0440\u0430\u0432\u0430 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 project \u0449\u0435\u043b\u043a\u043d\u0438\u0442\u0435 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 (\u041f\u041a\u041c) \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 New \u2192 Vector Asset.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"571\" height=\"252\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok5.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1325\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok5.png 571w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok5-300x132.png 300w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok5-150x66.png 150w\" sizes=\"(max-width: 571px) 100vw, 571px\" \/><\/figure>\n\n\n\n<p>\u0412 \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0435\u043c\u0441\u044f \u043e\u043a\u043d\u0435 \u0449\u0435\u043b\u043a\u043d\u0443\u0442\u044c \u043f\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u0432 \u043f\u0443\u043d\u043a\u0442\u0435 <strong>Clip Art,<\/strong> \u043d\u0430\u0439\u0442\u0438 \u043f\u043e \u043f\u043e\u0438\u0441\u043a\u0443 <strong>back<\/strong> \u0441\u0442\u0440\u0435\u043b\u043a\u0443 \u043d\u0430\u0437\u0430\u0434 \u0438 \u043d\u0430\u0436\u0430\u0442\u044c <strong>OK<\/strong>. \u042f \u0432\u044b\u0431\u0440\u0430\u043b, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043d\u0446\u044b \u0431\u044b\u043b\u0438 \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u043d\u044b\u043c\u0438, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u043c \u0441\u043f\u0438\u0441\u043a\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c <strong>Round<\/strong>. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0432\u0448\u0438\u0439\u0441\u044f. \u0420\u0430\u0437\u043c\u0435\u0440 \u044f \u0437\u0430\u0434\u0430\u043b <strong>64<\/strong> \u0432 \u043f\u0443\u043d\u043a\u0442\u0435 <strong>Size<\/strong>, \u0430 \u0446\u0432\u0435\u0442 \u0432 <strong>Color<\/strong>: F44336. \u0412\u044b \u0436\u0435 \u0432 \u043f\u0430\u043b\u0438\u0442\u0440\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0442\u043e\u0442 \u0446\u0432\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0412\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0441\u044f. \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0432 \u043f\u0443\u043d\u043a\u0442\u0435 <strong>Name<\/strong> \u044f \u0443\u043a\u0430\u0437\u0430\u043b <strong>ic_arrow<\/strong>, \u0447\u0442\u043e\u0431 \u043f\u0440\u043e\u0449\u0435 \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u0414\u043b\u044f \u0438\u043a\u043e\u043d\u043e\u043a, \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u0441 <strong><code>ic_<\/code><\/strong> \u0438 \u0432 snake case, \u0442.\u0435. \u0441 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435\u043c. \u0418 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c <strong>Next \u2192 Finish<\/strong>. \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u043a\u0440\u0435\u0441\u0442\u0438\u043a \u0438 \u043d\u043e\u043b\u0438\u043a. \u0414\u043b\u044f \u043d\u0438\u0445 \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u0438\u043a\u043e\u043d\u043a\u0443 <strong>close<\/strong> \u0438 <strong>panorama fish eye<\/strong> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u0432\u044b\u0431\u0440\u0430\u043b \u0446\u0432\u0435\u0442 <strong>454FCE<\/strong>, \u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043b <strong>ic_cross<\/strong> \u0438 <strong>ic_circle<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"353\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok6.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1326\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok6.png 624w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok6-300x170.png 300w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok6-150x85.png 150w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <strong>res \u2192 drawable<\/strong> \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438. \u042f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <strong><code>android:tint<\/code><\/strong> \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong><code>android:fillColor<\/code><\/strong>, \u0430 \u0441\u0430\u043c <strong>tint<\/strong> \u0443\u0434\u0430\u043b\u0438\u0442\u044c. \u041d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u0438\u0442\u0430\u0439\u0441\u043a\u0438\u0445 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u0445, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0435\u0434\u0435\u0442 \u0441\u0435\u0431\u044f&nbsp; \u043d\u0435 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u043a\u043e\u043d\u043a\u0438 \u0443\u0445\u0443\u0434\u0448\u0430\u0435\u0442\u0441\u044f.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"294\" height=\"224\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok7.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1327\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok7.png 294w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok7-150x114.png 150w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok7-87x67.png 87w\" sizes=\"(max-width: 294px) 100vw, 294px\" \/><\/figure>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c 3 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <strong>ImageView<\/strong>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 \u0440\u0435\u0436\u0438\u043c <strong>Design<\/strong> (\u044d\u0442\u043e \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0432\u0435\u0440\u0441\u0442\u0430\u043d\u0438\u044f \u044d\u043a\u0440\u0430\u043d\u0430), \u043d\u0430\u0439\u0434\u0435\u043c <strong>ImageView<\/strong> \u0438 \u043f\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u043c \u0435\u0433\u043e \u043d\u0430 \u043c\u0430\u043a\u0435\u0442. \u0412 \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0435\u043c\u0441\u044f \u044d\u043a\u0440\u0430\u043d\u0435 \u0432\u044b\u0431\u0435\u0440\u0435\u043c \u0438\u043a\u043e\u043d\u043a\u0443 <strong>ic<\/strong><strong>_<\/strong><strong>cross<\/strong>. \u0412 \u043f\u043e\u043b\u0435 <strong>id<\/strong> \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 <strong>cross<\/strong>. \u0422\u0430\u043a\u0438\u043c \u0436\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043f\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u043c \u0435\u0449\u0435 2 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0434\u043b\u044f <strong>ic<\/strong><strong>_<\/strong><strong>arrow<\/strong> \u0438 <strong>ic<\/strong><strong>_<\/strong><strong>circle<\/strong> \u0438 \u0434\u0430\u0434\u0438\u043c \u0438\u043c \u0438\u043c\u044f id <strong>direction<\/strong> \u0438 <strong>circle<\/strong> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b\u0434\u0435\u043b\u0438\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e \u0438 \u043f\u043e\u0442\u044f\u043d\u0443\u0432 \u0437\u0430 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u043a\u0440\u0443\u0433 \u0441\u0432\u044f\u0436\u0435\u043c \u0432\u044c\u044e\u0448\u043a\u0443 \u0441 \u0432\u0435\u0440\u0445\u043d\u0438\u043c <strong>guideline<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"300\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok8.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1328\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok8.png 624w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok8-300x144.png 300w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok8-150x72.png 150w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u0437 \u043d\u0438\u0445 \u0446\u0435\u043f\u043e\u0447\u043a\u0443, \u0447\u0442\u043e\u0431 \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u043f\u043e\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u0438 \u0441\u043a\u043b\u0435\u0435\u043d\u044b \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u043c \u044d\u0442\u0438 3 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u044b\u0448\u043a\u043e\u0439, \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c <strong>\u041f\u041a\u041c \u2192 Chains \u2192 Create Horizontal Chain<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"574\" height=\"241\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok9.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1329\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok9.png 574w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok9-300x126.png 300w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok9-150x63.png 150w\" sizes=\"(max-width: 574px) 100vw, 574px\" \/><\/figure>\n\n\n\n<p>\u0417\u0430\u0442\u0435\u043c \u0441\u043d\u043e\u0432\u0430 <strong>\u041f\u041a\u041c \u2192 Chains \u2192 Horizontal Chain Style \u2192 packed<\/strong>. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0447\u0435\u043c \u043e\u043d\u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"597\" height=\"218\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok10.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1330\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok10.png 597w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok10-300x110.png 300w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok10-150x55.png 150w\" sizes=\"(max-width: 597px) 100vw, 597px\" \/><\/figure>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u0438 \u0441\u043a\u043b\u0435\u0438\u043b\u0438\u0441\u044c \u0432\u043c\u0435\u0441\u0442\u0435 \u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u043e\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435, \u043a\u0430\u043a \u044f \u0438 \u0445\u043e\u0442\u0435\u043b.<\/p>\n\n\n\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <strong>Barrier<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u0443\u0436\u0438\u0442 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0434\u0440\u0443\u0433\u0438\u0445, \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439. \u041d\u0430\u0436\u043c\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 <strong>Guidelines \u2192 Add Horizontal Barrier<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok11.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1331\" width=\"217\" height=\"213\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok11.png 217w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok11-150x147.png 150w\" sizes=\"(max-width: 217px) 100vw, 217px\" \/><\/figure>\n\n\n\n<p>\u0418 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;androidx.constraintlayout.widget.Barrier\n    android:id=\"@+id\/barrier\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    app:barrierDirection=\"bottom\"\n    app:constraint_referenced_ids=\"circle,cross,direction\" \/&gt;\n<\/code><\/pre>\n\n\n\n<p>\u0423 \u0432\u0430\u0441 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u044d\u0442\u043e\u0433\u043e.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"472\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok12.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1332\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok12.png 624w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok12-300x227.png 300w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok12-150x113.png 150w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok12-87x67.png 87w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u044d\u0442\u043e <strong>GridLayout<\/strong>. \u041d\u043e \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u0437 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c <strong>androidx.gridlayout.widget.GridLayout<\/strong>. \u0415\u0433\u043e \u0443\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;androidx.gridlayout.widget.GridLayout\n    android:id=\"@+id\/field\"\n    android:layout_width=\"0dp\"\n    android:layout_height=\"0dp\"\n    app:columnCount=\"3\"\n    app:layout_constraintBottom_toBottomOf=\"@id\/bottom\"\n    app:layout_constraintDimensionRatio=\"1:1\"\n    app:layout_constraintEnd_toEndOf=\"@id\/end\"\n    app:layout_constraintStart_toStartOf=\"@id\/start\"\n    app:layout_constraintTop_toTopOf=\"@id\/barrier\"\n    app:rowCount=\"3\"&gt;\n\n&lt;\/androidx.gridlayout.widget.GridLayout&gt;\n<\/code><\/pre>\n\n\n\n<p>\u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b<strong> &nbsp;<code>app:columnCount<\/code><\/strong> \u0438 <strong><code>app:rowCount<\/code><\/strong> \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0438 \u0441\u0442\u0440\u043e\u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 3, \u0442.\u043a. \u043f\u043e\u043b\u0435 \u0443 \u043d\u0430\u0441 3\u04453. \u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b<strong> &nbsp;<code>app:layout_constraintDimensionRatio<\/code><\/strong> \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0440\u043e\u043d. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u044b \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b \u043a\u0432\u0430\u0434\u0440\u0430\u0442 \u043d\u0443\u0436\u043d\u043e \u0435\u0433\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 <strong>1:1<\/strong>, \u0432\u043e\u0442 \u0438\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u0438 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0442.\u043a. \u043d\u0430 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 <strong>Android 5<\/strong> \u044d\u0442\u043e\u0442 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0418 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c <strong><code>android:layout_width<\/code><\/strong> \u0438 <strong><code>android:layout_height<\/code><\/strong> \u0432 <strong>0dp<\/strong>. \u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b<strong> &nbsp;<code>app:layout_constraintXXX_toXXX<\/code><\/strong> \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u043d\u0430\u0448\u0435\u0439 \u0432\u044c\u044e\u0448\u043a\u0438 \u043a \u0434\u0440\u0443\u0433\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c. \u041d\u0443 \u0438 \u0437\u0430\u043f\u0438\u0448\u0435\u043c <strong><code>id=\"@+id\/field\"<\/code><\/strong>, \u0430 \u0432\u043e \u0432\u043d\u0443\u0442\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c <strong>ImageView<\/strong>. \u041d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u0445 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f 9 \u0448\u0442\u0443\u043a \u0438 \u0447\u0442\u043e\u0431\u044b \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0432\u044c\u044e\u0448\u043a\u0435 \u043d\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0449\u0435\u043b\u043a\u0430\u0435\u043c \u041f\u041a\u041c \u043f\u043e <strong>values \u2192 New \u2192 Values Resource File<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"142\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok13.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1333\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok13.png 624w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok13-300x68.png 300w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok13-150x34.png 150w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>&nbsp;\u0412 \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0435\u043c\u0441\u044f \u043e\u043a\u043d\u0435, \u0432 \u043f\u043e\u043b\u0435 <strong>File name<\/strong> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c <strong>styles <\/strong>\u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c <strong>OK<\/strong>. \u0412 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;resources&gt;\n    &lt;style name=\"CellStyle\"&gt;\n        &lt;item name=\"layout_rowWeight\"&gt;1&lt;\/item&gt;\n        &lt;item name=\"layout_columnWeight\"&gt;1&lt;\/item&gt;\n        &lt;item name=\"android:background\"&gt;?android:attr\/selectableItemBackground&lt;\/item&gt;\n        &lt;item name=\"android:layout_width\"&gt;0dp&lt;\/item&gt;\n        &lt;item name=\"android:layout_height\"&gt;0dp&lt;\/item&gt;\n        &lt;item name=\"android:adjustViewBounds\"&gt;true&lt;\/item&gt;\n    &lt;\/style&gt;\n\n&lt;\/resources&gt;\n<\/code><\/pre>\n\n\n\n<p>\u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b <strong><code>layout_columnWeight<\/code><\/strong> \u0438 <strong><code>layout_rowWeight<\/code><\/strong> \u0441\u043b\u0443\u0436\u0430\u0442 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0432\u0435\u0441\u043e\u0432 \u0432\u044c\u044e\u0448\u0435\u043a \u0438 \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0440\u0430\u0432\u043d\u044b\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u043b\u0438\u0441\u044c \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435 \u0438 \u0432\u044b\u0441\u043e\u0442\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u0438 \u0432\u0435\u0441\u0430 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e <strong><code>android:layout_width<\/code><\/strong> \u0438 <strong><code>android:layout_height<\/code><\/strong> \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432 <strong>0dp<\/strong>. \u0410 \u0432 <strong><code>android:background<\/code><\/strong> \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u0442\u0435\u043c\u044b \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u0432\u044c\u044e\u0448\u043a\u0443. \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0441\u0442\u0438\u043b\u044c \u043a \u043d\u0430\u0448\u0435\u0439 \u0432\u044c\u044e\u0448\u043a\u0435. \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u043d\u0430\u0448\u0435\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u0438 \u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0439 <strong>ImageView<\/strong> \u043c\u0435\u043d\u044f\u0435\u043c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ImageView\n    style=\"@style\/CellStyle\"\n    tools:src=\"@drawable\/ic_cross\" \/&gt;\n<\/code><\/pre>\n\n\n\n<p><strong><code>style=\"@style\/CellStyle\"<\/code><\/strong> \u2013 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430\u0448 \u0441\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u044c\u044e\u0448\u0435\u043a, \u0430 <strong><code>tools:src=\"@drawable\/ic_cross\"<\/code><\/strong> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043d\u0430 \u043c\u0430\u043a\u0435\u0442\u0435, \u043d\u043e \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435, \u0442\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u041f\u0440\u043e\u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0447\u0442\u043e\u0431\u044b \u0432 \u043e\u0431\u0449\u0435\u043c \u0441\u0447\u0435\u0442\u0435 \u0438\u0445 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c 9. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"365\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok14.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1334\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok14.png 624w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok14-300x175.png 300w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok14-150x88.png 150w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%D0%A1%D0%BE%D0%B5%D0%B4%D0%B8%D0%BD%D1%8F%D0%B5%D0%BC_%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D1%83_%D1%81_%D0%BA%D0%BE%D0%B4%D0%BE%D0%BC_Binding\"><\/span>\u0421\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0441 \u043a\u043e\u0434\u043e\u043c (Binding)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 <strong>MainFragment<\/strong> \u0438 \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0441\u0442\u0443\u0434\u0438\u0435\u0439 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <strong>binding<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0441 \u043a\u043e\u0434\u043e\u043c.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>private lateinit var binding: MainFragmentBinding\nprivate val viewModel: MainViewModel by viewModels()\n\noverride fun onCreateView(\n    inflater: LayoutInflater, container: ViewGroup?,\n    savedInstanceState: Bundle?\n): View {\n    binding = MainFragmentBinding.inflate(inflater, container, false)\n    return binding.root\n}\n<\/code><\/pre>\n\n\n\n<p>\u0410 \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0439\u0441\u044f \u043c\u0435\u0442\u043e\u0434 <strong>onActivityCreated<\/strong> \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0443\u0434\u0430\u043b\u0438\u0442\u0435. \u0412\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0443\u0434\u0438\u044f \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0435\u0442, \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043e\u043a.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%D0%9F%D0%B8%D1%88%D0%B5%D0%BC_%D0%BA%D0%BE%D0%B4\"><\/span>\u041f\u0438\u0448\u0435\u043c \u043a\u043e\u0434<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 \u043a\u043b\u0430\u0441\u0441 <strong><code>MainViewModel<\/code><\/strong> \u0438 \u0443\u0431\u0435\u0440\u0435\u043c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 <strong>TODO<\/strong>. \u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u044f\u0447\u0435\u0435\u043a (\u043f\u0443\u0441\u0442\u0430\u044f, \u043a\u0440\u0435\u0441\u0442\u0438\u043a, \u043d\u043e\u043b\u0438\u043a) \u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u044d\u0442\u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0432 Gridlayout \u0432\u0441\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u043c. \u0410 \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0442\u043e\u0433\u043e \u043a\u0442\u043e \u043f\u043e\u0431\u0435\u0434\u0438\u043b, \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u044c \u0438\u043d\u0434\u0435\u043a\u0441 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b <strong>[\u0441\u0442\u0440\u043e\u043a\u0430:\u043a\u043e\u043b\u043e\u043d\u043a\u0430]<\/strong>, \u043d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0436\u0435.<\/p>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c <strong><code>enum class<\/code><\/strong> \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0412 \u043d\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e \u043d\u0435\u0439 \u043a\u043b\u0438\u043a\u0430\u0442\u044c, \u0432\u0435\u0434\u044c \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0443\u0436\u0435 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0441\u0438\u043c\u0432\u043e\u043b \u0438\u043b\u0438 \u0438\u0433\u0440\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0430\u0441\u044c, \u0442\u043e \u0443\u0436\u0435 \u043a\u043b\u0438\u043a\u0430\u0442\u044c \u043f\u043e \u044f\u0447\u0435\u0439\u043a\u0430\u043c \u043d\u0435\u043b\u044c\u0437\u044f. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0432 \u044d\u0442\u043e\u043c \u0436\u0435 \u0444\u0430\u0439\u043b\u0435 \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0438\u0437\u0443 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 `<strong>}`<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>enum class CellState(@DrawableRes val icon: Int, val isClickable: Boolean) {\n    None(0, true),\n    Cross(R.drawable.ic_cross_anim, false),\n    Circle(R.drawable.ic_circle_anim, false)\n}\n<\/code><\/pre>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u043b\u0435 \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u044d\u0442\u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u044f \u043d\u0430\u0437\u043e\u0432\u0443 \u0435\u0435 <strong>matrix<\/strong> \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b. \u0422\u0430\u043a \u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0442.\u0435. \u0447\u0435\u0439 \u0441\u0435\u0439\u0447\u0430\u0441 \u0445\u043e\u0434 \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0435\u0442\u043e\u0434 <strong><code>initGame<\/code><\/strong> \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0433\u0440\u044b \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (<strong>init<\/strong> \u2013 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 <strong><code>MainViewModel<\/code><\/strong>) \u0438 \u043f\u0440\u0438 \u0441\u0431\u0440\u043e\u0441\u0435 \u0438\u0433\u0440\u044b (<strong><code>onReloadClick<\/code><\/strong>).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class MainViewModel : ViewModel() {\n\n    private lateinit var matrix: Array&lt;CellState&gt;\n    private lateinit var currentCellState: CellState\n\ninit {\n    initGame()\n}\n\nprivate fun initGame() {\n    matrix = Array&lt;CellState&gt;(9) { CellState.None }\n    currentCellState = CellState.Cross\n}\n\nfun onReloadClick() {\n    initGame()\n}\n\n}\n<\/code><\/pre>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0435\u0442\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043b\u0438\u043a\u043e\u0432 \u043f\u043e \u044f\u0447\u0435\u0439\u043a\u0430\u043c \u0438 \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u0432 \u043d\u0435\u043c \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043c\u0435\u043d\u0443 \u0445\u043e\u0434\u0430 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044f\u0447\u0435\u0439\u043a\u0438. \u0422\u0430\u043a \u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u043b\u0435 \u0441 <strong>LiveData<\/strong>, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0441\u043c\u043e\u0433\u043b\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043a\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0445\u043e\u0434\u0438\u0442.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u2026\n    private val mCurrentMove = MutableLiveData&lt;CellState&gt;()\n    val currentMove: LiveData&lt;CellState&gt; = mCurrentMove\n \u2026\n\nprivate fun initGame() {\n    \u2026\n    mCurrentMove.value = currentCellState\n}\n\nfun onCellClick(index: Int) {\n    matrix&#91;index] = currentCellState\n\n    currentCellState = if (currentCellState == CellState.Cross) CellState.Circle else CellState.Cross\n    mCurrentMove.value = currentCellState\n}\n<\/code><\/pre>\n\n\n\n<p>\u0417\u0434\u0435\u0441\u044c <strong><code>mCurrentMove<\/code><\/strong> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c \u0438 \u043e\u043d \u0437\u0430\u043a\u0440\u044b\u0442 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0438\u0437 \u0432\u043d\u0435 \u043a\u043b\u0430\u0441\u0441\u0430, \u0430 <strong><code>currentMove<\/code><\/strong> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c \u0438 \u043e\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0441\u043d\u0430\u0440\u0443\u0436\u0438 \u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n\n\n\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u043f\u0438\u0448\u0435\u043c\u0441\u044f \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0445\u043e\u0434\u0430 \u0438 \u0431\u0443\u0434\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0447\u0435\u0439 \u0441\u0435\u0439\u0447\u0430\u0441 \u0445\u043e\u0434. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 <strong><code>MainFragment<\/code><\/strong>, \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043c\u0435\u0442\u043e\u0434 <strong><code>onViewCreated<\/code><\/strong> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n        super.onViewCreated(view, savedInstanceState)\n\n        binding.field.forEachIndexed { index, v -&gt;\n            v.setOnClickListener { viewModel.onCellClick(index) }\n        }\n\n        viewModel.currentMove.observe(viewLifecycleOwner) {\n            binding.direction.animate()\n                .rotation(if (it == CellState.Cross) 0f else 180f)\n\/\/                .scaleY(if (it == Mark.Cross) 1f else -1f)\n        }\n    }\n<\/code><\/pre>\n\n\n\n<p><code>binding.field.<em>forEachIndexed<\/em><\/code> \u2013 \u043a \u043a\u0430\u0436\u0434\u043e\u0439 \u0432\u044c\u044e\u0448\u043a\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0435\u0439\u0441\u044f \u0432 <strong>GridLayout<\/strong> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u043a\u043b\u0438\u043a.<\/p>\n\n\n\n<p><code>binding.direction<\/code> \u2013 \u044d\u0442\u043e \u043d\u0430\u0448\u0430 \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043a\u0430 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0421\u043e\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u0435\u0433\u043e, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043a\u043b\u0438\u043a\u0430\u0435\u043c \u043f\u043e \u044f\u0447\u0435\u0439\u043a\u0430\u043c. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0443\u0431\u0440\u0430\u0442\u044c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u0438 \u0441\u043e <strong>scaleY<\/strong>, \u0430 \u0441\u0442\u0440\u043e\u043a\u0443 \u0441 <strong>rotation<\/strong> \u0437\u0430\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0443\u0431\u0440\u0430\u0442\u044c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c.<\/p>\n\n\n\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0435 \u0432 \u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u043a\u043b\u0438\u043a\u043d\u0443\u043b\u0438. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u044f\u0447\u0435\u0435\u043a, \u0430 \u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0439, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u043a\u043b\u0438\u043a\u043d\u0443\u043b\u0438, \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u043d\u0434\u0435\u043a\u0441 \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u0435\u0435 \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u043e \u043f\u043e\u043b\u0435 <strong>mCellStateByIndex<\/strong>, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043d\u0434\u0435\u043a\u0441 \u0438 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044f\u0447\u0435\u0439\u043a\u0438.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>--- MainViewModel.kt ---\nprivate val mCellStateByIndex: MutableLiveData&lt;Pair&lt;Int, CellState&gt;&gt; = SingleLiveEvent()\nval cellStateByIndex: LiveData&lt;Pair&lt;Int, CellState&gt;&gt; = mCellStateByIndex\n\nfun onCellClick(index: Int) {\n    matrix&#91;index] = currentCellState\n    mCellStateByIndex.value = Pair(index, currentCellState)\n    \u2026\n}\n--- MainFragment.kt ---\noverride fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n    \u2026\n    viewModel.cellStateByIndex.observe(viewLifecycleOwner) {\n        val (index, state) = it\n        with(binding.field.getChildAt(index) as ImageView) {\n            isEnabled = state.isClickable\n            setImageResource(state.icon) \n        }\n    }\n}\n--- SingleLiveEvent.kt ---\nclass SingleLiveEvent&lt;T&gt; : MutableLiveData&lt;T&gt;() {\n\n    private val pending = AtomicBoolean(false)\n\n    override fun observe(owner: LifecycleOwner, observer: Observer&lt;in T&gt;) {\n        super.observe(owner, Observer { t: T -&gt;\n            if (pending.compareAndSet(true, false)) {\n                observer.onChanged(t)\n            }\n        })\n    }\n\n    override fun setValue(value: T) {\n        pending.set(true)\n        super.setValue(value)\n    }\n}\n<\/code><\/pre>\n\n\n\n<p><code>SingleLiveEvent<\/code> \u2013 \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u0441\u043b\u0443\u0436\u0438\u0442 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0435\u0440\u0435\u0432\u043e\u0440\u043e\u0442\u0430 \u044d\u043a\u0440\u0430\u043d\u0430) \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u0441\u043d\u043e\u0432\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u0432\u044c\u044e\u0448\u043a\u0438. \u042d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c.<\/p>\n\n\n\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u044b (\u0437\u0430\u043f\u0443\u0449\u0435\u043d\u0430 \u0438 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430), \u0447\u0442\u043e\u0431\u044b \u043d\u0435\u043b\u044c\u0437\u044f \u0431\u044b\u043b\u043e \u043a\u043b\u0438\u043a\u0430\u0442\u044c \u043f\u043e \u044f\u0447\u0435\u0439\u043a\u0430\u043c, \u043a\u043e\u0433\u0434\u0430 \u0438\u0433\u0440\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043b\u0430\u0441\u044c \u0438 <strong>LiveData<\/strong>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0433\u0440\u044b \u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u044f\u0447\u0435\u0435\u043a<\/p>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c enum <strong>GameStatus <\/strong>\u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0435\u0433\u043e \u043d\u0438\u0436\u0435 <strong>CellState<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>enum class GameStatus {\n    Started,\n    Finished\n}\n<\/code><\/pre>\n\n\n\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u043b\u0435 <strong>mStates<\/strong> \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>--- MainViewModel.kt ---\nprivate val mStates = MutableLiveData&lt;Pair&lt;GameStatus, Array&lt;CellState&gt;&gt;&gt;()\n\nval states: LiveData&lt;Pair&lt;GameStatus, Array&lt;CellState&gt;&gt;&gt; = mStates\n\nprivate fun initGame() {\n    \u2026 \n    mStates.value = Pair(GameStatus.Started, matrix)\n}\n--- MainFragment.kt ---\n    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n        \u2026\n        viewModel.states.observe(viewLifecycleOwner) {\n            val (status, matrix) = it\n            matrix.forEachIndexed { index, state -&gt;\n                with(binding.field.getChildAt(index) as ImageView) {\n                    setImageResource(state.icon)\n                    isEnabled = state.isClickable &amp;&amp; status == GameStatus.Started\n                }\n            }\n        }\n    }\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%B5%D0%BC_%D1%81%D0%B2%D0%BE%D1%8E_%D0%B2%D1%8C%D1%8E%D1%88%D0%BA%D1%83_%D0%B8_%D1%80%D0%B8%D1%81%D1%83%D0%B5%D0%BC_%D0%BD%D0%B0_%D0%BD%D0%B5%D0%B9_%D1%81%D0%B5%D1%82%D0%BA%D1%83\"><\/span>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0432\u043e\u044e \u0432\u044c\u044e\u0448\u043a\u0443 \u0438 \u0440\u0438\u0441\u0443\u0435\u043c \u043d\u0430 \u043d\u0435\u0439 \u0441\u0435\u0442\u043a\u0443<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0449\u0435\u043b\u043a\u043d\u0438\u0442\u0435 <strong>\u041f\u041a\u041c \u043f\u043e ru.otus.tictactoe \u2192 New \u2192 Kotlin Class\/File<\/strong> \u0438 \u0432\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 <strong>FieldView<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"699\" height=\"88\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok15.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1335\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok15.png 699w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok15-300x38.png 300w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok15-150x19.png 150w\" sizes=\"(max-width: 699px) 100vw, 699px\" \/><\/figure>\n\n\n\n<p>\u0418 \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0432 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>--- FieldView.kt ---\nimport androidx.gridlayout.widget.GridLayout\n\nclass FieldView @JvmOverloads constructor(\n    context: Context,\n    attrs: AttributeSet? = null,\n    defStyleAttr: Int = 0\n) : GridLayout(context, attrs, defStyleAttr) {\n\n    private var widthF: Float = 0f\n    private var heightF: Float = 0f\n    private var cellWidth: Float = 0f\n        set(value) {\n            field = value\n            halfCellWidth = value \/ 2\n        }\n\n    private var cellHeight: Float = 0f\n        set(value) {\n            field = value\n            halfCellHeight = value \/ 2\n        }\n    private var halfCellWidth: Float = 0f\n\n    private var halfCellHeight: Float = 0f\n    private val strokeSize = resources.getDimension(R.dimen.stroke_size)\n\n    private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {\n        color = ResourcesCompat.getColor(context.resources, R.color.penColor, null)\n        strokeWidth = strokeSize\n        strokeCap = Paint.Cap.ROUND\n    }\n\n    override fun onMeasure(widthSpec: Int, heightSpec: Int) {\n        super.onMeasure(widthSpec, heightSpec)\n        widthF = MeasureSpec.getSize(widthSpec).toFloat()\n        heightF = MeasureSpec.getSize(heightSpec).toFloat()\n\n        cellWidth = widthF \/ 3f\n        cellHeight = heightF \/ 3f\n    }\n\n    override fun dispatchDraw(canvas: Canvas?) {\n        super.dispatchDraw(canvas)\n        canvas?.run {\n            for (i in 1..2) {\n                drawLine(cellWidth * i, strokeSize, cellWidth * i, heightF - strokeSize, paint)\n                drawLine(strokeSize, cellHeight * i, widthF - strokeSize, cellHeight * i, paint)\n            }\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 <strong><code>androidx.gridlayout.widget.GridLayout<\/code><\/strong>.<\/p>\n\n\n\n<p>\u0415\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u043d \u0446\u0432\u0435\u0442 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u043b\u0438\u043d\u0438\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e <strong>\u041f\u041a\u041c \u043f\u043e res \u2192 New \u2192 Android Resource File<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"699\" height=\"82\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok16.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1336\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok16.png 699w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok16-300x35.png 300w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok16-150x18.png 150w\" sizes=\"(max-width: 699px) 100vw, 699px\" \/><\/figure>\n\n\n\n<p>\u0412 \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0435\u043c\u0441\u044f \u043e\u043a\u043d\u0435, \u0432 \u043f\u043e\u043b\u0435 <strong>File <\/strong><strong>name:<\/strong> \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c <strong>values<\/strong> \u0438 \u043d\u0430\u0436\u0430\u0442\u044c <strong>OK<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"699\" height=\"411\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok17.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1337\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok17.png 699w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok17-300x176.png 300w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok17-150x88.png 150w\" sizes=\"(max-width: 699px) 100vw, 699px\" \/><\/figure>\n\n\n\n<p>\u041f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b <strong>values.xml<\/strong>. \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0435\u0433\u043e \u0438 \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;resources&gt;\n    &lt;color name=\"penColor\"&gt;#454FCE&lt;\/color&gt;\n    &lt;dimen name=\"stroke_size\"&gt;8dp&lt;\/dimen&gt;\n&lt;\/resources&gt;\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u0447\u0435\u0437\u043d\u0443\u0442\u044c.<\/p>\n\n\n\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0430\u0448\u0443 \u0432\u044c\u044e\u0448\u043a\u0443 \u0432 \u0432\u0435\u0440\u0441\u0442\u043a\u0435.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ru.otus.tictactoe.views.FieldView\n    android:id=\"@+id\/field\"\n    android:layout_width=\"0dp\"\n    android:layout_height=\"0dp\"\n    app:columnCount=\"3\"\n    app:layout_constraintBottom_toBottomOf=\"@id\/bottom\"\n    app:layout_constraintDimensionRatio=\"1:1\"\n    app:layout_constraintEnd_toStartOf=\"@+id\/end\"\n    app:layout_constraintStart_toStartOf=\"@+id\/start\"\n    app:layout_constraintTop_toTopOf=\"@id\/barrier\"\n    app:rowCount=\"3\"&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%D0%92%D1%8B%D1%87%D0%B8%D1%81%D0%BB%D1%8F%D0%B5%D0%BC_%D0%BA%D1%82%D0%BE_%D0%B2%D1%8B%D0%B8%D0%B3%D1%80%D0%B0%D0%BB\"><\/span>\u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c, \u043a\u0442\u043e \u0432\u044b\u0438\u0433\u0440\u0430\u043b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c <strong><code>sealed class<\/code><\/strong> \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u043c\u0438 \u0432\u044b\u0438\u0433\u0440\u044b\u0448\u0430 (\u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438, \u043f\u043e \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u0438 \u0438 \u043d\u0435\u0442 \u0432\u044b\u0438\u0433\u0440\u044b\u0448\u0430).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>--- FieldView.kt ---\nprivate var mWinLineState: WinLineState = WinLineState.None\nprivate var winLineRect: RectF? = null\n\noverride fun onMeasure(widthSpec: Int, heightSpec: Int) {\n    \u2026\n    drawWinLine(mWinLineState)\n}\n\noverride fun dispatchDraw(canvas: Canvas?) {\n    super.dispatchDraw(canvas)\n    canvas?.run {\n        \u2026\n        winLineRect?.let {\n            val line: RectF = when (mWinLineState) {\n                is WinLineState.Horizontal -&gt;\n                    RectF(it.left, it.top, it.right, it.bottom)\n                is WinLineState.Vertical -&gt;\n                    RectF(it.left, it.top, it.right, it.bottom)\n                WinLineState.MainDiagonal -&gt;\n                    RectF(it.left, it.top, it.right, it.bottom)\n                WinLineState.ReverseDiagonal -&gt;\n                    RectF(it.left, it.top, it.right, it.bottom)\n                WinLineState.None -&gt; it\n            }\n            drawLine(line.left, line.top, line.right, line.bottom, paint)\n        }\n\n    }\n}\n\nfun drawWinLine(winLineState: WinLineState) {\n    mWinLineState = winLineState\n    winLineRect = when (winLineState) {\n        WinLineState.MainDiagonal -&gt;\n            RectF(strokeSize, strokeSize, widthF - strokeSize, heightF - strokeSize)\n        WinLineState.ReverseDiagonal -&gt;\n            RectF(widthF - strokeSize, strokeSize, strokeSize, heightF - strokeSize)\n        is WinLineState.Horizontal -&gt; {\n            val y = halfCellHeight + cellHeight * winLineState.row\n            RectF(strokeSize, y, widthF - strokeSize, y)\n        }\n        is WinLineState.Vertical -&gt; {\n            val x = halfCellWidth + cellWidth * winLineState.column\n            RectF(x, strokeSize, x, heightF - strokeSize)\n        }\n        WinLineState.None -&gt; null\n    }\n    if (winLineRect == null) return\n    invalidate()\n}\n\nsealed class WinLineState {\n    data class Horizontal(val row: Int) : WinLineState()\n    data class Vertical(val column: Int) : WinLineState()\n    object MainDiagonal : WinLineState()\n    object ReverseDiagonal : WinLineState()\n    object None : WinLineState()\n}\n<\/code><\/pre>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0435\u0442\u043e\u0434\u044b \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0432\u044b\u0438\u0433\u0440\u044b\u0448\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>--- MainViewModel.kt ---\n\nprivate val mWinState : MutableLiveData&lt;WinLineState&gt; = MutableLiveData()\n\nval winState: LiveData&lt;WinLineState&gt; = mWinState\n\nprivate fun initGame() {\n    \u2026\n    mWinState.value = WinLineState.None\n}\n\nfun onCellClick(index: Int) {\n    matrix&#91;index] = currentCellState\n    mCellStateByIndex.value = Pair(index, currentCellState)\n\n    val row = index \/ 3\n    val column = index % 3\n    val state = checkWin(row, column)\n    if (state != WinLineState.None) {\n        mStates.value = Pair(GameStatus.Finished, matrix)\n        mWinState.value = state\n        return\n    }\n\n    currentCellState = if (currentCellState == CellState.Cross) CellState.Circle else CellState.Cross\n    mCurrentMove.value = currentCellState\n}\n\nprivate fun checkWin(row: Int, column: Int): WinLineState {\n    \/\/check row\n    if (checkLine { matrix&#91;getIndex(row, it)] == currentCellState }) return WinLineState.Horizontal(row)\n    \/\/ check column\n    if (checkLine { matrix&#91;getIndex(it, column)] == currentCellState }) return WinLineState.Vertical(column)\n    if (row == column) {\n        \/\/ check main diagonal\n        if (checkLine { matrix&#91;getIndex(it, it)] == currentCellState }) return WinLineState.MainDiagonal\n    }\n    if (row + column == 2) {\n        \/\/ check reverse diagonal\n        if (checkLine { matrix&#91;getIndex(it, 2 - it)] == currentCellState }) return WinLineState.ReverseDiagonal\n    }\n    return WinLineState.None\n}\n\nprivate fun checkLine(function: (Int) -&gt; Boolean): Boolean {\n    for (i in 0..2) {\n        if (!function(i)) return false\n    }\n    return true\n}\n\nprivate fun getIndex(row: Int, column: Int) = row * 3 + column\n\n--- MainFragment.kt ---\n\noverride fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n    \u2026\n    viewModel.winState.observe(viewLifecycleOwner) { binding.field.drawWinLine(it) }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%D0%A1%D0%B1%D1%80%D0%B0%D1%81%D1%8B%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D1%8F_%D0%B8%D0%B3%D1%80%D1%8B\"><\/span>\u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0433\u0440\u044b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0438\u0433\u0440\u0443, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0431\u0440\u043e\u0441 \u043a \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u0438\u0433\u0440\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 \u0442\u0443\u043b\u0431\u0430\u0440\u0435.<\/p>\n\n\n\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0438\u043a\u043e\u043d\u043a\u0443 <strong>cached<\/strong> \u0438 \u043d\u0430\u0437\u043e\u0432\u0438\u0442\u0435 \u0435\u0435 <strong>ic_reload<\/strong>. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0440\u0435\u0441\u0443\u0440\u0441, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u043b\u0438 \u0441 \u0446\u0432\u0435\u0442\u043e\u043c \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c, \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0442\u043a\u0440\u044b\u0432\u0448\u0435\u043c\u0441\u044f \u043e\u043a\u043d\u0435, \u043f\u043e\u043c\u0435\u043d\u044f\u0439\u0442\u0435 <strong>Resource type<\/strong> \u043d\u0430 <strong>Menu<\/strong> \u0438 \u0432 <strong>File name<\/strong> \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 <strong>&nbsp;menu_reload<\/strong>. \u0410 \u0432 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u0445 <strong>strings<\/strong> \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>--- res\\menu\\menu_reload.xml ---\n&lt;menu xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"&gt;\n    &lt;item\n        android:id=\"@+id\/action_reload\"\n        android:icon=\"@drawable\/ic_reload\"\n        android:title=\"@string\/reload\"\n        app:showAsAction=\"always\"\/&gt;\n&lt;\/menu&gt;\n--- res\\values\\strings.xml  ---\n&lt;string name=\"reload\"&gt;reload&lt;\/string&gt;\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0435 \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u044d\u0442\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 <strong>MainFragment<\/strong> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>override fun onCreate(savedInstanceState: Bundle?) {\n    super.onCreate(savedInstanceState)\n    setHasOptionsMenu(true)\n}\n\noverride fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {\n    super.onCreateOptionsMenu(menu, inflater)\n    inflater.inflate(R.menu.menu_reload, menu)\n}\n\noverride fun onOptionsItemSelected(item: MenuItem): Boolean {\n    if (item.itemId == R.id.action_reload) {\n        viewModel.onReloadClick()\n        return true\n    }\n    return super.onOptionsItemSelected(item)\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%D0%9F%D0%BE%D0%B4%D0%B2%D0%BE%D0%B4%D0%B8%D0%BC_%D0%B8%D1%82%D0%BE%D0%B3%D0%B8\"><\/span>\u041f\u043e\u0434\u0432\u043e\u0434\u0438\u043c \u0438\u0442\u043e\u0433\u0438<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"345\" height=\"611\" src=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok18.png\" alt=\"\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\" class=\"wp-image-1338\" srcset=\"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok18.png 345w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok18-169x300.png 169w, https:\/\/otus.ru\/journal\/wp-content\/uploads\/2021\/05\/Risunok18-85x150.png 85w\" sizes=\"(max-width: 345px) 100vw, 345px\" \/><\/figure>\n\n\n\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0435. \u041c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c. \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u0438\u0437 github (<a href=\"https:\/\/github.com\/shustreek\/TicTacToe\">https:\/\/github.com\/shustreek\/TicTacToe<\/a>). \u0422\u0430\u043c \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0440\u0435\u0441\u0442\u0438\u043a\u0430 \u0438 \u043d\u043e\u043b\u0438\u043a\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043b\u0438\u043d\u0438\u0438 \u043f\u0440\u0438 \u0432\u044b\u0438\u0433\u0440\u044b\u0448\u0435.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u043f\u0440\u0438\u0443\u0440\u043e\u0447\u0435\u043d\u043d\u043e\u0439 \u043a \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0443\u0440\u0441\u0443 Android Developer. Basic, \u043c\u044b \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u0432\u043e\u044e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0438\u0433\u0440\u0443 \u00ab\u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438-\u043d\u043e\u043b\u0438\u043a\u0438\u00bb. \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c Android Studio. \u041a\u0430\u043a\u0430\u044f \u0443 \u0432\u0430\u0441 \u041e\u0421 \u2014 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0442.\u043a. \u044d\u0442\u0430 IDE \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 Windows, Ubuntu \u0438\u043b\u0438 Mac. \u042f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 Kotlin, \u0442.\u043a. \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u044f\u0437\u044b\u043a\u043e\u043c \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 Android. \u0412\u043e \u0432\u0440\u0435\u043c\u044f<\/p>\n","protected":false},"author":10,"featured_media":1339,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"footnotes":""},"categories":[1],"tags":[74,65],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/otus.ru\/journal\/wp-json\/wp\/v2\/posts\/1320"}],"collection":[{"href":"https:\/\/otus.ru\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/otus.ru\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/otus.ru\/journal\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/otus.ru\/journal\/wp-json\/wp\/v2\/comments?post=1320"}],"version-history":[{"count":1,"href":"https:\/\/otus.ru\/journal\/wp-json\/wp\/v2\/posts\/1320\/revisions"}],"predecessor-version":[{"id":1347,"href":"https:\/\/otus.ru\/journal\/wp-json\/wp\/v2\/posts\/1320\/revisions\/1347"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/otus.ru\/journal\/wp-json\/wp\/v2\/media\/1339"}],"wp:attachment":[{"href":"https:\/\/otus.ru\/journal\/wp-json\/wp\/v2\/media?parent=1320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/otus.ru\/journal\/wp-json\/wp\/v2\/categories?post=1320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/otus.ru\/journal\/wp-json\/wp\/v2\/tags?post=1320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}