{"id":313181,"date":"2020-11-15T21:01:45","date_gmt":"2020-11-15T21:01:45","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=313181"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=313181","title":{"rendered":"\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432 Kivy"},"content":{"rendered":"\n
\n
<\/div>\n

\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e \u0432\u0441\u0435\u0445 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u0438 \u0437\u043d\u0430\u0442\u043e\u043a\u043e\u0432 \u044f\u0437\u044b\u043a\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f Python!
\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 \u0432 \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 Kivy<\/a> \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Google Material Design<\/i> \u2014 KivyMD<\/a>. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 Kivy \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 material \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043e\u0434\u043d\u0438\u043c \u044d\u043a\u0440\u0430\u043d\u043e\u043c \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u0421\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c GIF \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043b\u0438\u0432\u0430\u0439\u0442\u0435 \u043a\u043e\u0444\u0435 \u0438 \u043f\u043e\u0433\u043d\u0430\u043b\u0438!<\/a><\/p>\n

\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043e\u0433\u0440\u0435\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0435\u0439, \u044f \u0445\u043e\u0447\u0443 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0432 \u0438\u0442\u043e\u0433\u0435:<\/p>\n

<\/div>\n

\u0418\u0442\u0430\u043a, \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Kivy:<\/p>\n

pip install kivy <\/code><\/pre>\n
  \u0418 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 KivyMD, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0432 \u0441\u0442\u0438\u043b\u0435 Material Design \u0434\u043b\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Kivy:<\/p>\n
pip install https:\/\/github.com\/kivymd\/KivyMD\/archive\/master.zip <\/code><\/pre>\n
  \u0412\u0441\u0435 \u0433\u043e\u0442\u043e\u0432\u043e \u043a \u0440\u0430\u0431\u043e\u0442\u0435! \u041e\u0442\u043a\u0440\u043e\u0435\u043c PyCharm<\/i> \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 CallScreen<\/i> \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043a\u0430\u0442\u043e\u043b\u043e\u0433\u043e\u0432:<\/p>\n
<\/div>\n
  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u043b\u044e\u0431\u0430\u044f. \u041d\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Kivy, \u043d\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 KivyMD \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439, \u043a\u0440\u043e\u043c\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u2014 \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c main.py<\/i>. \u042d\u0442\u043e \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n
<\/div>\n
  \u0412 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 data\/images<\/i> \u044f \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043b \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e:  <\/p>\n
\n\n\n\n
\n
<\/div>\n<\/td>\n
\n
<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
  \u0412 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 uix\/screens\/baseclass<\/i> \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u0444\u0430\u0439\u043b callscreen.py<\/i> \u0441 \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u044b\u043c Python \u043a\u043b\u0430\u0441\u0441\u043e\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n
<\/div>\n
  \u0410 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 uix\/screens\/kv<\/i> \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b callscreen.kv<\/i> (\u043f\u043e\u043a\u0430 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0443\u0441\u0442\u044b\u043c) \u2014 \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c UI \u043d\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c DSL \u044f\u0437\u044b\u043a\u0435 Kivy Language<\/a>:<\/p>\n
<\/div>\n
  \u041a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0437\u0434\u0430\u043d, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0444\u0430\u0439\u043b callscreen.py<\/i> \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441 \u044d\u043a\u0440\u0430\u043d\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
  callscreen.py:<\/b><\/p>\n
import os  from kivy.lang import Builder  from kivymd.uix.screen import MDScreen  # \u0427\u0438\u0442\u0430\u0435\u043c \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c KV \u0444\u0430\u0439\u043b with open(os.path.join(os.getcwd(), "uix", "screens", "kv", "callscreen.kv"), encoding="utf-8") as KV:     Builder.load_string(KV.read())   class CallScreen(MDScreen):     pass <\/code><\/pre>\n
  \u041a\u043b\u0430\u0441\u0441 CallScreen<\/i> \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d \u043e\u0442 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 MDScreen<\/i> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 KivyMD (\u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u043c\u0435\u044e\u0442 \u043f\u0440\u0435\u0444\u0438\u043a\u0441 MD<\/i> \u2014 Material Design). MDScreen<\/a> \u2014 \u044d\u0442\u043e \u0430\u043d\u0430\u043b\u043e\u0433 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 Screen<\/i> \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Kivy \u0438\u0437 \u043c\u043e\u0434\u0443\u043b\u044f kivy.uix.screenmanager<\/a>, \u043d\u043e \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438. \u0422\u0430\u043a\u0436\u0435 MDScreen \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u044b \u043e\u0434\u0438\u043d \u043d\u0430\u0434 \u0434\u0440\u0443\u0433\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
<\/div>\n
  \u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044f \u00ab\u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435\u00bb \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n
  \u0412 \u0442\u043e\u0447\u043a\u0435 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u0444\u0430\u0439\u043b main.py<\/i> \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441 TestCallScreen<\/i>, \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043e\u0442 \u043a\u043b\u0430\u0441\u0441\u0430 MDApp<\/i> \u0441 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c build<\/i>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442 \u0438\u043b\u0438 \u043b\u0430\u0439\u043e\u0443\u0442, \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0440\u0430\u043d\u0435\u0435 \u043a\u043b\u0430\u0441\u0441 \u044d\u043a\u0440\u0430\u043d\u0430 CallScreen<\/i>.<\/p>\n
  main.py:<\/b><\/p>\n
from kivymd.app import MDApp  from uix.screens.baseclass.callscreen import CallScreen   class TestCallScreen(MDApp):     def build(self):         return CallScreen()   TestCallScreen().run() <\/code><\/pre>\n
  \u042d\u0442\u043e \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0439 \u044d\u043a\u0440\u0430\u043d. \u0415\u0441\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0444\u0430\u0439\u043b main.py<\/i>, \u0443\u0432\u0438\u0434\u0438\u043c:<\/p>\n
<\/div>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 UI \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 callscreen.kv<\/i>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u043e\u0435 \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0438 \u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c Python \u043a\u043b\u0430\u0441\u0441 c \u0438\u043c\u0435\u043d\u0435\u043c CallScreen<\/i>, \u0442\u043e \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0432 KV \u0444\u0430\u0439\u043b\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u043e\u0435 \u0436\u0435 \u0438\u043c\u044f. \u0425\u043e\u0442\u044f \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u0434\u0435, \u043d\u043e \u044d\u0442\u043e, \u043c\u044f\u0433\u043a\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043d\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e. \u0421\u0440\u0430\u0432\u043d\u0438\u0442\u0435:<\/p>\n
MyRootWidget:      BoxLayout:          Button:          Button: <\/code><\/pre>\n
  \u0418 \u0430\u043d\u0430\u043b\u043e\u0433 \u043d\u0430 Python:<\/p>\n
root = MyRootWidget() box = BoxLayout() box.add_widget(Button()) box.add_widget(Button()) root.add_widget(box) <\/code><\/pre>\n
  \u0421\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0434\u0435\u0440\u0435\u0432\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0435\u0435 \u0432 Kv Language, \u0447\u0435\u043c \u0432 Python \u043a\u043e\u0434\u0435. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0443 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u0432\u0430\u0448 Python \u043a\u043e\u0434 \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043f\u043b\u043e\u0448\u043d\u043e\u0439 \u043a\u0430\u0448\u0435\u0439 \u0438 \u0443\u0436\u0435 \u0447\u0435\u0440\u0435\u0437 \u0434\u0435\u043d\u044c \u0432\u044b \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043d\u0435\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u0442\u043e \u0431\u044b \u0447\u0442\u043e \u043d\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u043d\u043e \u0435\u0441\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b UI \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430, \u044d\u0442\u043e \u043f\u043b\u044e\u0441. \u041d\u0443, \u0430 \u0432 Kivy \u044d\u0442\u043e \u0434\u0432\u043e\u0439\u043d\u043e\u0439 \u043f\u043b\u044e\u0441, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 Kv Language \u0435\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 Python.<\/p>\n
  \u0418\u0442\u0430\u043a, \u043d\u0430\u0447\u043d\u0435\u043c, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u0441 \u0442\u0438\u0442\u0443\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n
  callscreen.kv:<\/b><\/p>\n
<CallScreen>      FitImage:         id: title_image  # id \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0432\u0438\u0434\u0436\u0435\u0442\u0443         size_hint_y: .45  # \u0432\u044b\u0441\u043e\u0442\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (45% \u043e\u0442 \u0432\u044b\u0441\u043e\u0442\u044b \u044d\u043a\u0440\u0430\u043d\u0430)         # \u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 root \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043b\u0430\u0441\u0441.         # \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e <class 'uix.screens.baseclass.callscreen.CallScreen'>,         # \u0430 self - \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u0430\u043c\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 - <kivymd.utils.fitimage.FitImage object>.         y: root.height - self.height  # \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u043e\u0441\u0438 Y         source: "data\/images\/avatar.jpg"  # \u043f\u0443\u0442\u044c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e <\/code><\/pre>\n
  \u0412\u0438\u0434\u0436\u0435\u0442 FitImage<\/a> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u0441\u0435 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u0435\u043c\u0443 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0439 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n
<\/div>\n
  \u041c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0444\u0430\u0439\u043b main.py<\/i> \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n
<\/div>\n
  \u041f\u043e\u043a\u0430 \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 \u044d\u043a\u0440\u0430\u043d \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0437 Python \u043a\u043b\u0430\u0441\u0441\u0430 CallScreen<\/i>:<\/p>\n
  callscreen.kv:<\/b><\/p>\n
#:import get_color_from_hex kivy.utils.get_color_from_hex #:import colors kivymd.color_definitions.colors   <CallScreen>      FitImage:         [...]      MDFloatingActionButton:         icon: "phone"         x: root.width - self.width - dp(20)         y: app.root.height * 45 \/ 100 + self.height \/ 2         md_bg_color: get_color_from_hex(colors["Green"]["A700"])         on_release:             # \u0412\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0442\u0438\u0442\u0443\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.             root.animation_title_image(title_image); \\             root.open_call_box = True if not root.open_call_box else False <\/code><\/pre>\n
  \u0418\u043c\u043f\u043e\u0440\u0442\u044b \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432 Kv Language:<\/p>\n
#:import get_color_from_hex kivy.utils.get_color_from_hex #:import colors kivymd.color_definitions.colors <\/code><\/pre>\n
  \u0411\u0443\u0434\u0443\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u0430\u043c \u0432 Python \u043a\u043e\u0434\u0435:<\/p>\n
# \u041c\u0435\u0442\u043e\u0434 get_color_from_hex \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f\u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 # \u0438\u0437 \u0448\u0435\u0441\u0442\u043d\u0430\u0434\u0446\u0430\u0442\u0435\u0440\u0438\u0447\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442 rgba. from kivy.utils import get_color_from_hex # \u0421\u043b\u043e\u0432\u0430\u0440\u044c \u043e\u0442\u0442\u0435\u043d\u043a\u043e\u0432 \u0446\u0432\u0435\u0442\u043e\u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u0441\u0445\u0435\u043c: # # colors = { #     "Red": { #         "50": "FFEBEE", #         "100": "FFCDD2", #         ..., #     }, #     "Pink": { #         "50": "FCE4EC", #         "100": "F8BBD0", #         ..., #     }, #     ... # } # # https:\/\/kivymd.readthedocs.io\/en\/latest\/themes\/color-definitions\/ from kivymd.color_definitions import colors <\/code><\/pre>\n
  <\/p>\n
<\/div>\n
  \u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u0437\u0435\u043b\u0435\u043d\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u2014 AttributeError: ‘CallScreen’ object has no attribute ‘animation_title_image’<\/i>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u0431\u0430\u0437\u043e\u0432\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u0443 CallScreen<\/i> \u0432 \u0444\u0430\u0439\u043b\u0435 callscreen.py<\/i> \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043d\u0435\u043c \u043c\u0435\u0442\u043e\u0434 animation_title_image<\/i>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0438\u0442\u0443\u043b\u044c\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/p>\n
  callscreen.py:<\/b><\/p>\n
# \u041a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432. from kivy.animation import Animation  [...]  class CallScreen(MDScreen):     # \u0424\u043b\u0430\u0433 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e.     open_call_box = False      def animation_title_image(self, title_image):         """         :type title_image: <kivymd.utils.fitimage.FitImage object>         """          if not self.open_call_box:             # \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0442\u0438\u0442\u0443\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d.             Animation(size_hint_y=1, d=0.6, t="in_out_quad").start(title_image)         else:             # \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u0442\u0438\u0442\u0443\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e.             Animation(size_hint_y=0.45, d=0.6, t="in_out_quad").start(title_image) <\/code><\/pre>\n
  \u041a\u0430\u043a \u0432\u044b \u0443\u0436\u0435 \u043f\u043e\u043d\u044f\u043b\u0438, \u043a\u043b\u0430\u0441\u0441 Animation<\/a>, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u043a\u0430\u043a \u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445, \u043f\u0440\u043e\u0441\u0442\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e size_hint_y<\/i> \u2014 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430 \u0432\u044b\u0441\u043e\u0442\u044b, \u0437\u0430\u0434\u0430\u0432\u0430\u044f \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 d<\/i> \u2014 duration \u0438 \u0442\u0438\u043f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 t<\/i> \u2014 type. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043e\u0434\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 +<\/i>, +=<\/i>\u2026 \u041d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u0414\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u043e\u0439 \u0433\u0438\u0444\u043a\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0442\u0438\u043f\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 in_elastic<\/i> \u0438 out_elastic<\/i>:  <\/p>\n
\n\n\n\n
\n
<\/div>\n<\/td>\n
\n
<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043d\u0430\u0448 \u0448\u0430\u0433 \u2014 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c blur \u044d\u0444\u0444\u0435\u043a\u0442 \u043a \u0442\u0438\u0442\u0443\u043b\u044c\u043d\u043e\u043c\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e. \u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u0432 Kivy \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 EffectWidget<\/a>. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442 \u0442\u0438\u0442\u0443\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 EffectWidget.<\/p>\n
  callscreen.kv:<\/b><\/p>\n
#:import effect kivy.uix.effectwidget.EffectWidget #:import HorizontalBlurEffect kivy.uix.effectwidget.HorizontalBlurEffect #:import VerticalBlurEffect kivy.uix.effectwidget.VerticalBlurEffect #:import get_color_from_hex kivy.utils.get_color_from_hex  #:import colors kivymd.color_definitions.colors   <CallScreen>      EffectWidget:         effects:             # blur_value \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f.             (\\             HorizontalBlurEffect(size=root.blur_value), \\             VerticalBlurEffect(size=root.blur_value), \\             )          FitImage:             [...]      MDFloatingActionButton:         [...]         on_release:             # \u0412\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 blur \u044d\u0444\u0444\u0435\u043a\u0442\u0430.             root.animation_blur_value(); \\             [...] <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 blur_value<\/i> \u0432 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 Python CallScreen<\/i> \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 animation_blur_value<\/i>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f.<\/p>\n
  callscreen.py:<\/b><\/p>\n
from kivy.properties import NumericProperty [...]   class CallScreen(MDScreen):     # \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f \u0434\u043b\u044f EffectWidget.     blur_value = NumericProperty(0)      [...]      def animation_blur_value(self):         if not self.open_call_box:             Animation(blur_value=15, d=0.6, t="in_out_quad").start(self)         else:             Animation(blur_value=0, d=0.6, t="in_out_quad").start(self) <\/code><\/pre>\n
  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:  <\/p>\n
<\/div>\n
  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e! \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c \u0437\u0435\u043b\u0435\u043d\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u044b\u0437\u043e\u0432\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u043d\u0435 \u043c\u043e\u0437\u043e\u043b\u0438\u043b\u0430 \u043d\u0430\u043c \u0433\u043b\u0430\u0437\u0430.<\/p>\n
  callscreen.py:<\/b><\/p>\n
from kivy.utils import get_color_from_hex from kivy.core.window import Window  from kivymd.color_definitions import colors  [...]   class CallScreen(MDScreen):     [...]      def animation_call_button(self, call_button):         if not self.open_call_box:             Animation(                 x=self.center_x - call_button.width \/ 2,                 y=dp(40),                 md_bg_color=get_color_from_hex(colors["Red"]["A700"]),                 d=0.6,                 t="in_out_quad",             ).start(call_button)         else:             Animation(                 y=Window.height * 45 \/ 100 + call_button.height \/ 2,                 x=self.width - call_button.width - dp(20),                 md_bg_color=get_color_from_hex(colors["Green"]["A700"]),                 d=0.6,                 t="in_out_quad",             ).start(call_button) <\/code><\/pre>\n
  callscreen.kv:<\/b><\/p>\n
[...]  <CallScreen>      EffectWidget:         [...]          FitImage:             [...]      MDFloatingActionButton:         [...]         on_release:             # \u0412\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432\u044b\u0437\u043e\u0432\u0430.             root.animation_call_button(self); \\             [...] <\/code><\/pre>\n
  <\/p>\n
<\/div>\n
  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0432\u0430 \u043f\u0443\u043d\u043a\u0438\u0430 \u0442\u0438\u043f\u0430 TwoLineAvatarListItem<\/a> \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d.<\/p>\n
  callscreen.kv:<\/b><\/p>\n
#:import STANDARD_INCREMENT kivymd.material_resources.STANDARD_INCREMENT #:import IconLeftWidget kivymd.uix.list.IconLeftWidget  [...]   <ItemList@TwoLineAvatarListItem>     icon: ""     font_style: "Caption"     secondary_font_style: "Caption"     height: STANDARD_INCREMENT      IconLeftWidget:         icon: root.icon   <CallScreen>      EffectWidget:         [...]          FitImage:             [...]      MDBoxLayout:         id: list_box         orientation: "vertical"         adaptive_height: True         y: root.height * 45 \/ 100 - self.height \/ 2          ItemList:             icon: "phone"             text: "Phone"             secondary_text: "123 456 789"          ItemList:             icon: "mail"             text: "Email"             secondary_text: "kivydevelopment@gmail.com"      MDFloatingActionButton:         [...]         on_release:             root.animation_list_box(list_box); \\             [...] <\/code><\/pre>\n
  <\/p>\n
<\/div>\n
  \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0434\u0432\u0430 \u043f\u0443\u043d\u043a\u0442\u0430 ItemList<\/i> \u0438 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043b\u0438 \u0438\u0445 \u0432 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0431\u043e\u043a\u0441\u0435. \u041c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 animation_list_box<\/i> \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 CallScreen<\/i> \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u0431\u043e\u043a\u0441\u0430.<\/p>\n
  callscreen.py:<\/b><\/p>\n
[...]   class CallScreen(MDScreen):     [...]      def animation_list_box(self, list_box):         if not self.open_call_box:             Animation(                 y=-list_box.y,                 opacity=0,                 d=0.6,                 t="in_out_quad"\u0431             ).start(list_box)         else:             Animation(                 y=self.height * 45 \/ 100 - list_box.height \/ 2,                 opacity=1,                 d=0.6,                 t="in_out_quad",             ).start(list_box) <\/code><\/pre>\n
  <\/p>\n
<\/div>\n
  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0430\u043d\u0435\u043b\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u044d\u043a\u0440\u0430\u043d.<\/p>\n
  callscreen.kv:<\/b><\/p>\n
[...]  <CallScreen>      EffectWidget:         [...]          FitImage:             [...]      MDToolbar:         y: root.height - self.height - dp(20)         md_bg_color: 0, 0, 0, 0         opposite_colors: True         title: "Profile"         left_action_items:  [["menu", lambda x: x]]         right_action_items: [["dots-vertical", lambda x: x]]      MDBoxLayout:         [...]          ItemList:             [...]          ItemList:             [...]      MDFloatingActionButton:         [...] <\/code><\/pre>\n
  <\/p>\n
<\/div>\n
  \u0410\u0432\u0430\u0442\u0430\u0440 \u0438 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n
  callscreen.kv:<\/b><\/p>\n
[...]  <CallScreen>      EffectWidget:         [...]          FitImage:             [...]      MDToolbar:         [...]      MDFloatLayout:         id: round_avatar         size_hint: None, None         size: "105dp", "105dp"         md_bg_color: 1, 1, 1, 1         radius: [self.height \/ 2,]         y: root.height * 45 \/ 100 + self.height         x: root.center_x - (self.width + user_name.width + dp(20)) \/ 2          FitImage:             size_hint: None, None             size: "100dp", "100dp"             mipmap: True             source: "data\/images\/round-avatar.jpg"             radius: [self.height \/ 2,]             pos_hint: {"center_x": .5, "center_y": .5}             mipmap: True      MDLabel:         id: user_name         text: "Irene"         font_style: "H3"         bold: True         size_hint: None, None         -text_size: None, None         size: self.texture_size         theme_text_color: "Custom"         text_color: 1, 1, 1, 1         y: round_avatar.y + self.height \/ 2         x: round_avatar.x + round_avatar.width + dp(20)      MDBoxLayout:         [...]          ItemList:             [...]          ItemList:             [...]      MDFloatingActionButton:         root.animation_round_avatar(round_avatar, user_name); \\         root.animation_user_name(round_avatar, user_name); \\         [...] <\/code><\/pre>\n
  <\/p>\n
<\/div>\n
  \u0422\u0438\u043f\u0438\u0447\u043d\u043e\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0439 X<\/i> \u0438 Y<\/i> \u0430\u0432\u0430\u0442\u0430\u0440\u0430 \u0438 \u0438\u043c\u0435\u043d\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n
  callscreen.py:<\/b><\/p>\n
[...]   class CallScreen(MDScreen):     [...]      def animation_round_avatar(self, round_avatar, user_name):         if not self.open_call_box:             Animation(                 x=self.center_x - round_avatar.width \/ 2,                 y=round_avatar.y + dp(50),                 d=0.6,                 t="in_out_quad",             ).start(round_avatar)         else:             Animation(                 x=self.center_x - (round_avatar.width + user_name.width + dp(20)) \/ 2,                 y=self.height * 45 \/ 100 + round_avatar.height,                 d=0.6,                 t="in_out_quad",             ).start(round_avatar)      def animation_user_name(self, round_avatar, user_name):         if not self.open_call_box:             Animation(                 x=self.center_x - user_name.width \/ 2,                 y=user_name.y - STANDARD_INCREMENT,                 d=0.6,                 t="in_out_quad",             ).start(self.ids.user_name)         else:             Animation(                 x=round_avatar.x + STANDARD_INCREMENT,                 y=round_avatar.center_y - user_name.height - dp(20),                 d=0.6,                 t="in_out_quad",             ).start(user_name) <\/code><\/pre>\n
  <\/p>\n
<\/div>\n
  \u041d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u043e\u043a\u0441 \u0441 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438:<\/p>\n
<\/div>\n
  \u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 KivyMD \u043d\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u043e\u0441\u044c \u043d\u0443\u0436\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438<\/a>. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u043e-\u0431\u044b\u0441\u0442\u0440\u043e\u043c\u0443 \u0441\u043c\u0430\u0441\u0442\u0435\u0440\u0438\u0442\u044c \u0435\u0451 \u0441\u0430\u043c\u043e\u043c\u0443. \u042f \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043b\u0430\u0441\u0441 MDIconButton<\/a> \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 canvas<\/i>, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043d\u043e\u043f\u043a\u0438, \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b \u0435\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043c\u0435\u0442\u043a\u043e\u0439 \u0432 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u043e\u043a\u0441.<\/p>\n
  callscreen.kv:<\/b><\/p>\n
<CallBoxButton@MDBoxLayout>     orientation: "vertical"     adaptive_size: True     spacing: "8dp"     icon: ""     text: ""      MDIconButton:         icon: root.icon         theme_text_color: "Custom"         text_color: 1, 1, 1, 1          canvas:             Color:                 rgba: 1, 1, 1, 1             Line:                 width: 1                 circle:                     (\\                     self.center_x, \\                     self.center_y, \\                     min(self.width, self.height) \/ 2, \\                     0, \\                     360, \\                     )      MDLabel:         text: root.text         size_hint_y: None         height: self.texture_size[1]         font_style: "Caption"         halign: "center"         theme_text_color: "Custom"         text_color: 1, 1, 1, 1  [...] <\/code><\/pre>\n
  <\/p>\n
<\/div>\n
  \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0431\u043e\u043a\u0441 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u043a\u043d\u043e\u043f\u043e\u043a.<\/p>\n
  callscreen.kv:<\/b><\/p>\n
<CallBox@MDGridLayout>     cols: 3     rows: 2     adaptive_size: True     spacing: "24dp"      CallBoxButton:         icon: "microphone-off"         text: "Mute"     CallBoxButton:         icon: "volume-high"         text: "Speaker"     CallBoxButton:         icon: "dialpad"         text: "Keypad"      CallBoxButton:         icon: "plus-circle"         text: "Add call"     CallBoxButton:         icon: "call-missed"         text: "Transfer"     CallBoxButton:         icon: "account"         text: "Contact"  [...] <\/code><\/pre>\n
  <\/p>\n
<\/div>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 CallBox<\/i> \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u0435 CallScreen<\/i> \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u043e\u0441\u0438 Y<\/i> \u0437\u0430 \u043d\u0438\u0436\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n
  callscreen.kv:<\/b><\/p>\n
[...]  <CallScreen>      EffectWidget:         [...]          FitImage:             [...]      MDToolbar:         [...]      MDFloatLayout:         [...]          FitImage:             [...]      MDLabel:         [...]      MDBoxLayout:         [...]          ItemList:             [...]          ItemList:             [...]      MDFloatingActionButton:         root.animation_call_box(call_box, user_name); \\         [...]      CallBox:         id: call_box         pos_hint: {"center_x": .5}         y: -self.height         opacity: 0 <\/code><\/pre>\n
  \u041e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0431\u043e\u043a\u0441\u0430 \u0441 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438.<\/p>\n
  callscreen.py:<\/b><\/p>\n
from kivy.metrics import dp [...]   class CallScreen(MDScreen):     [...]      def animation_call_box(self, call_box, user_name):         if not self.open_call_box:             Animation(                 y=user_name.y - call_box.height - dp(100),                 opacity=1,                 d=0.6,                 t="in_out_quad",             ).start(call_box)         else:             Animation(                 y=-call_box.height,                 opacity=0,                 d=0.6,                 t="in_out_quad",             ).start(call_box) <\/code><\/pre>\n
  <\/p>\n
<\/div>\n
  \u0424\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f GIF-\u043a\u0430 \u0441 \u0442\u0435\u0441\u0442\u043e\u043c \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435:<\/p>\n
<\/div>\n
  \u041d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0435, \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0431\u044b\u043b \u043f\u043e\u043b\u0435\u0437\u0435\u043d!<\/p><\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/post\/528154\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n
\n
<\/div>\n
  \u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e \u0432\u0441\u0435\u0445 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u0438 \u0437\u043d\u0430\u0442\u043e\u043a\u043e\u0432 \u044f\u0437\u044b\u043a\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f Python!
  \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 \u0432 \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 Kivy<\/a> \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Google Material Design<\/i> \u2014 KivyMD<\/a>. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 Kivy \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 material \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043e\u0434\u043d\u0438\u043c \u044d\u043a\u0440\u0430\u043d\u043e\u043c \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u0421\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c GIF \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043b\u0438\u0432\u0430\u0439\u0442\u0435 \u043a\u043e\u0444\u0435 \u0438 \u043f\u043e\u0433\u043d\u0430\u043b\u0438!<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-313181","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/313181","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=313181"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/313181\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=313181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=313181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=313181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}