[Kivy] Accordionの設定 AccodionItemの追加

Accordionについて

 KivyのAccordionは、タイトル部分とコンテンツ部分からなる項目を複数積み込むことのできるものす。項目のタイトル部分は垂直または水平に積み重ねられ表示され、タイトル部分を(タッチすると) フォーカスされている項目が開いてそのコンテンツ部分が表示されます。

 ※ サンプルプログラムに動作を見れる動画を貼り付けています。

 Accodionは、項目を変更する場合にアニメーション処理がおこなわれるため、デスクトップアプリよりもスマホ向けアプリに使用されるもののように思います。今回は、 Accordionに項目(AccodionItem)を追加する方法を紹介します。

タイトル部分: 画面左側に並んだtitle1からtitle3
コンテンツ部分: title3の右に表示されている部分
         (titl3のコンテンツを表示)

今回紹介する内容
 ・ Accordionに項目(AccodionItem)を追加する。

Accordionへの項目の追加

 Accordionに項目を追加するのには、以下のようにAccordionの中にAccordionItemを記入します。AccordionItemには、項目のタイトル(プロパティtitleにより指定)とコンテンツ部分に載せるWidgetを記入します。
 Kv lanugageでは、AccordionItemは記入した順番でAccordionに追加されます。

<AccordionTestWidget>:
    Accordion:
        id: accordion
        size: root.size

        AccordionItem:
            title: 'titile1'

            BoxLayout:
                padding: 20

サンプルプログラム

 サンプルプログラムを実行すると、動画のようにタイトルがtitle3の項目を選択した画面が表示されます。項目のタイトル部分をクリックするとクリックした項目に表示が切り替わります。各項目のコンテンツにあるButtonを押すと、ターミナルにボタンが押されたというメッセージを表示します。

#:kivy 2.2

<AccordionTestWidget>:
    Accordion:
        id: accordion
        size: root.size

        AccordionItem:
            title: 'titile1'

            BoxLayout:
                padding: 20

                Button:
                    text: 'Button1'
                    on_press: print('Button1 pressed')

        AccordionItem:
            title: 'titile2'

            BoxLayout:
                padding: 20

                Button:
                    text: 'Button2'
                    on_press: print('Button2 pressed')


        AccordionItem:
            title: 'titile3'

            BoxLayout:
                padding: 20

                Button:
                    text: 'Button3'
                    on_press: print('Button3 pressed')
# -*- coding: utf-8 -*-

import os
import re
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 AccordionTestWidget(Widget):

    def __init__(self, **kwargs):
        super(AccordionTestWidget, self).__init__(**kwargs)


class AccordionTestApp(App):
    def __init__(self, **kwargs):
        super(AccordionTestApp, self).__init__(**kwargs)
        self.title = 'Accordion Test'

    def build(self):
        return AccordionTestWidget()


if __name__ == '__main__':
    app = AccordionTestApp()
    app.run()
タイトルとURLをコピーしました