I have certain news that are filled in first in MD3Card and then lined up in a tabular view in GridLayout with scrolling, but no matter how I tried, it didn't work out to do it all in the center and not on the left edge as in the photo.
Kivymd style:
VK = '''
<Tab>
ScrollView:
md_bg_color: "#f8f8f8"
bar_width: 0
GridLayout:
id: tab_box
padding: "5dp"
cols: 3
spacing: 10
size_hint_y: None
height: self.minimum_height
<MD3Card>
size_hint: None, None
size: "200dp", "230dp"
md_bg_color: "green"
pos_hint: {"center_x": .5, "center_y": .5}
MDBoxLayout:
orientation: "vertical"
FitImage:
source: root.card_image
radius: 6
size_hint_y: 2
MDBoxLayout:
padding: "10dp"
MDLabel:
text: root.card_text
pos_hint: {"center_x": .5, "center_y": .5}
color: "black"
MyBL:
orientation: "vertical"
MDTopAppBar:
title: root.tb_title_text
md_bg_color: "black"
MDBottomNavigation:
panel_color: "black"
text_color_normal: "#999999"
text_color_active: "#ededed"
MDBottomNavigationItem:
name: 'screen 1'
text: 'News'
icon: 'gmail'
badge_icon: "numeric-1"
on_tab_press: root.nb_1()
MDTabs:
id: tabs
background_color: "black"
on_tab_switch: app.on_tab_switch(*args)
MDBottomNavigationItem:
name: 'screen 2'
text: 'TV'
icon: 'twitter'
on_tab_press: root.nb_2()
MDBottomNavigationItem:
name: 'screen 3'
text: 'Radio'
icon: 'linkedin'
on_tab_press: root.nb_3()
'''
Main code:
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.properties import StringProperty, ObjectProperty
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.floatlayout import MDFloatLayout
from kivymd.uix.tab import MDTabsBase
from kivymd.uix.card import MDCard
class Tab(MDFloatLayout, MDTabsBase):
'''Class implementing content for a tab.'''
class MD3Card(MDCard):
'''Implements a material design v3 card.'''
card_image = StringProperty()
card_text = StringProperty()
class MyBL(MDBoxLayout):
nb_label_text_1 = StringProperty("News")
nb_label_text_2 = StringProperty("TV")
nb_label_text_3 = StringProperty("Radio")
tb_title_text = StringProperty("News")
text = StringProperty()
def nb_1(self):
self.nb_label_text_1 = "News"
self.tb_title_text = "News"
def nb_2(self):
self.nb_label_text_2 = "TV"
self.tb_title_text = "TV"
def nb_3(self):
self.nb_label_text_3 = "Radio"
self.tb_title_text = "Radio"
class Test(MDApp):
def build(self):
return Builder.load_string(VK)
def on_start(self):
categories = ["main thing","society","economy","health","sports","housing and communal services","politics","culture","science and education",
"world news","opinions","they need help","results of the week","special report","national projects","incidents"]
print(categories)
for categorie in categories:
self.root.ids.tabs.add_widget(
Tab(
title=categorie
)
)
def on_tab_switch(
self, instance_tabs, instance_tab, instance_tab_label, tab_text
):
'''Called when switching tabs.
:type instance_tabs: <kivymd.uix.tab.MDTabs object>;
:param instance_tab: <__main__.Tab object>;
:param instance_tab_label: <kivymd.uix.tab.MDTabsLabel object>;
:param tab_text: text or name icon of tab;
'''
# if tab_text == "главное":
if tab_text == "main thing":
instance_tab.ids.tab_box.clear_widgets()
print(tab_text)
newss = {"news1":"2.jpg", "news2":"2.jpg", "news3":"5.jpg", "news4":"2.jpg", "news5":"5.jpg", "news6":"5.jpg"}
for news in newss.keys():
instance_tab.ids.tab_box.add_widget(
MD3Card(
card_image=newss[news],
card_text=news,
)
)
Test().run()
Is there any other option as a tip for changing the number of cells in a row, let's say if the screen is already the same, not 3 cells, but two, and the rest already goes below.
Code:
<Tab>
ScrollView:
md_bg_color: "#f8f8f8"
bar_width: 0
GridLayout:
id: tab_box
padding: "5dp"
cols: 3
spacing: 10
size_hint_y: None
height: self.minimum_height
Replace with:
<Tab>
ScrollView:
MDBoxLayout:
orientation: "vertical"
adaptive_height: True
MDBoxLayout:
pos_hint: {'center_x': .5}
orientation: "vertical"
adaptive_height: True
adaptive_width: True
GridLayout:
id: tab_box
padding: "5dp"
cols: 3
spacing: 10
size_hint: None, None
size: self.minimum_size
or:
<Tab>
ScrollView:
MDBoxLayout:
orientation: "vertical"
adaptive_height: True
MDBoxLayout:
pos_hint: {'center_x': .5}
orientation: "vertical"
adaptive_height: True
GridLayout:
id: tab_box
padding: "5dp"
cols: 3
spacing: 10
size_hint: None, None
size: self.minimum_size
pos_hint: {'center_x': 0.5, 'center_y': 0.5}