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 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.
You need to set three parameters for the 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()
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 MDResponsiveLayout
widget, but
even Flutter uses a similar approach to creating a responsive UI.
You can also use the commands provided to you by the developer tools to create a project with an responsive design.
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(*args)#
Called when the screen type changes.