ResponsiveLayout#
New in version 1.0.0. Responsive design is a graphic user interface (GUI) design
approach used to create content that adjusts smoothly to various screen
sizes. The You need to set three parameters for the Note Use common components for platform layouts (mobile, tablet, desktop views).
As shown in the example above, such a common component is the
CommonComponentLabel widget. Perhaps you expected more from the You can also use the commands
provided to you by the developer tools to create a project with an responsive
design.MDResponsiveLayout
class does not reorganize your UI. Its task
is to track the size of the application screen and, depending on this size,
the MDResponsiveLayout
class selects which UI layout should be
displayed at the moment: mobile, tablet or desktop. Therefore, if you want to
have a responsive view some kind of layout in your application, you should
have three KV files with UI markup for three platforms.MDResponsiveLayout
class
mobile_view
,
tablet_view
and
desktop_view
. These should be Kivy or KivyMD
widgets.Usage responsive#
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.label import MDLabel
from kivymd.uix.responsivelayout import MDResponsiveLayout
from kivymd.uix.screen import MDScreen
KV = '''
<CommonComponentLabel>
halign: "center"
<MobileView>
CommonComponentLabel:
text: "Mobile"
<TabletView>
CommonComponentLabel:
text: "Table"
<DesktopView>
CommonComponentLabel:
text: "Desktop"
ResponsiveView:
'''
class CommonComponentLabel(MDLabel):
pass
class MobileView(MDScreen):
pass
class TabletView(MDScreen):
pass
class DesktopView(MDScreen):
pass
class ResponsiveView(MDResponsiveLayout, MDScreen):
def __init__(self, **kw):
super().__init__(**kw)
self.mobile_view = MobileView()
self.tablet_view = TabletView()
self.desktop_view = DesktopView()
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
MDResponsiveLayout
widget, but
even Flutter uses a similar approach to creating a responsive UI.
API - kivymd.uix.responsivelayout
#
- class kivymd.uix.responsivelayout.MDResponsiveLayout(*args, **kwargs)#
- Events:
on_change_screen_type
Called when the screen type changes.
- mobile_view#
Mobile view. Must be a Kivy or KivyMD widget.
mobile_view
is anObjectProperty
and defaults to None.
- tablet_view#
Tablet view. Must be a Kivy or KivyMD widget.
tablet_view
is anObjectProperty
and defaults to None.
- desktop_view#
Desktop view. Must be a Kivy or KivyMD widget.
desktop_view
is anObjectProperty
and defaults to None.
- on_change_screen_type(self, *args)#
Called when the screen type changes.
- on_size(self, *args)#
Called when the application screen size changes.
- set_screen(self)#
Sets the screen according to the type of application screen size: mobile/tablet or desktop view.