TabbedPanelについて
KivyのTabbedPanelは、タブを選択することでそのタブのコンテンツに表示が切り替わるものであり、同じウィンドウ上にデータをグループ分けして、分けたグループ内のデータをまとめて表示する場合等に使用すると便利です。今回は、TabbedPanelについて紹介します。
今回紹介する内容
・TabbedPanelに、タブを追加する。
（TabbedPanelItem使用）
・タブボタンのフォントを変更する。
・タブボタンの設置位置を指定する
・タブボタンの形状（幅・高さ）を指定する。
・表示しているタブの情報を取得する。
TabbedPanelを使用する
TabbedPanelに、タブを追加する。（TabbedPanelItem使用）
TabbedPanelをKv languageで記入する場合、TabbedPanelの中にTabbedItemします。TabbedItemは、TabbedPanelHeader 型のヘッダーを提供し、それをコンテンツに自動的にリンクするので、そこにタブボタンの内容やコンテンツを記入することができます。このため、Kv languageでは、Tabbedpanelにタブの形状や配置などを記入し、TabbedPanelItemタブ名、コンテンツなどのタブの内容を記入します。
プロパティdo_default_tabは、TabbedPanelがデフォルトで持つタブを使用するかを指定するものであり、今回は使用しないのでFalseにしています。Trueを指定するとdefaultというタイトルのタブが追加されます。
<TabbedPanelTestWidget>:
TabbedPanel:
id: tabbedpanel
size: root.size
do_default_tab: False
tab_pos: 'top_left'
tab_width: 180
tab_height: 40
TabbedPanelItem:
text: 'tab1'
background_color: [0, 1, 1, 1]
タブボタンのフォントを変更する
タブボタン部分のクラス（kivy.uix.tabbedpanel.TabbedPanelHeader）は、kivy.uix.togglebutton.ToggleButtonを継承しており、さらに遡るとkivy.uix.label.Labelを継承しているのでプロパティfont_nameやfont_sizeなどが使用できます。
TabbedPanelItem:
text: 'タブ1'
font_name: 'フォントファイル名'
BoxLayout:
padding: 20タブボタンの設置位置を指定する
TabbedPanelのタブの表示位置は、プロパティtab_posにより変更することが可能です。tab_posの値は、left_top, left_mid, left_bottom, top_left, top_mid, top_right, right_top, right_mid, right_bottom, bottom_left, bottom_mid, bottom_rightから選択できます。
tab_posのデフォルト値は、left_topです。
<TabbedPanelTestWidget>:
TabbedPanel:
id: tabbedpanel
size: root.size
do_default_tab: False
tab_pos: 'top_left'タブボタンの形状(幅・高さ)を指定する
TabbedPanelのタブの形状は、プロパティtab_width（幅）やtab_height（高さ）により変更できます。
<TabbedPanelTestWidget>:
TabbedPanel:
id: tabbedpanel
size: root.size
do_default_tab: False
tab_pos: 'top_left'
tab_width: 180
tab_height: 40表示しているタブの情報を取得する
表示しているタブの情報を取得するのには、プロパティcurrent_tabを使用します。そして、タブの名前を取得する場合には、それにプロパティtextを使用すると得られます。
取得したタブ名は、各タブに配置したWidgetのイベントで、同じような処理をおこなう場合に使用するのに使用すると便利だと思います。
print(f"curent tab text: {root.ids.tabbedpanel.current_tab.text}")サンプルプログラム
サンプルプログラムを実行すると、動画のようにtab1を選択した画面が表示されます。タブ部分をクリックするとクリックしたタブに表示が切り替わり、タブのコンテンツにあるButtonを押すと、ターミナルにボタンが押されたことを表示します。
※ 実行するには、interface.kvの’フォントファイル名’部分には、使用するフォントファイル名やパスに変更してください。
#:kivy 2.2
<TabbedPanelTestWidget>:
TabbedPanel:
id: tabbedpanel
size: root.size
do_default_tab: False
tab_pos: 'top_left'
tab_width: 180
tab_height: 40
TabbedPanelItem:
text: 'タブ1'
font_name: 'フォントファイル名'
BoxLayout:
padding: 20
Label:
text: 'content area of tab1'
Button:
text: 'Button1'
on_press:
print('Button1 pressed')
print(f"curent tab text: {root.ids.tabbedpanel.current_tab.text}")
TabbedPanelItem:
text: 'タブ2'
font_name: 'フォントファイル名'
BoxLayout:
padding: 20
Label:
text: 'content area of tab2'
Button:
text: 'Button2'
on_press:
print('Button2 pressed')
print(f"curent tab text: {root.ids.tabbedpanel.current_tab.text}") # -*- coding: utf-8 -*-
import os
import kivy
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.lang import Builder
from kivy.config import Config
kivy.require('2.2.0')
# 画面サイズの指定
Config.set('graphics', 'width', '500')
Config.set('graphics', 'height', '400')
Builder.load_file(os.path.dirname(__file__) + "/interface.kv")
class TabbedPanelTestWidget(Widget):
def __init__(self, **kwargs):
super(TabbedPanelTestWidget, self).__init__(**kwargs)
class TabbedPanelTestApp(App):
def __init__(self, **kwargs):
super(TabbedPanelTestApp, self).__init__(**kwargs)
self.title = 'TabbedPanel Test'
def build(self):
return TabbedPanelTestWidget()
if __name__ == '__main__':
app = TabbedPanelTestApp()
app.run()
