【kivy】画像のボタンを表示＆ボタンで情報の受け渡し

###前提・実現したいこと
前回に引き続き、Python2.7とkivyを使ってファッション提案アプリを作ろうと奮闘しています。
ScreenManagerを使って、それらしい見た目になってきましたが、また壁が…。
よろしくお願いします。

＜壁1＞　日本語表示
日本語表示がしたいです。
コード内に日本語でコメントを書くこともできません…。
＜壁2＞　ボタン系
・「main1」から「tops」に進むと、洋服一覧として画像（ボタン？）を表示させたい。
・その画像をタップすると、タップした洋服の詳細画面※にしたい。
・詳細画面に「選択する」「戻る」ボタンを設置し、「選択」した場合一時的ファイルにデータを書き込む。
※洋服の詳細データは別ファイル１に書き込む予定。（csv等）

＜壁3＞　文法系
メニューバーらしくなったが、BoxLayoutで何ができるのか分からない。
今まで別ファイルから呼び出して画像を追加したい時は以下のソースでやってました。
ScreenManagerを使うようになって、このソースだと表示されなくなりました。
エラーは出てないので、
試しに、[main1]の[bottoms]に、<bg.py>の[Bird]から画像を表示させようとしてました…。

python
1from bg import Bird
2bird = Image() 
3self.add_widget(bird)

###該当のソースコード <main.py>

python
1mport kivy
2kivy.require('1.7.3')
3
4from kivy.app import App
5from kivy.uix.boxlayout import BoxLayout
6from kivy.uix.widget import Widget
7from kivy.core.window import Window
8from kivy.properties import StringProperty,ListProperty
9from background import Bird
10Window.clearcolor=[0.999,0.89,0.999,1]
11
12
13class TextWidget(BoxLayout):
14    text = StringProperty()
15    def __init__(self, **kwargs):
16        super(TextWidget, self).__init__(**kwargs)
17        self.text = 'Good'
18    def buttonClicked(self):
19        self.text=self.ids["text_box"].text
20    def buttonClicked2(self):
21        self.text=' '
22    def buttonClicked_tops(self):
23        pass
24    def buttonClicked_bottoms(self):
25        bird = Bird()
26        self.add_widget(bird)
27    def buttonClicked_autor(self):
28        pass
29    
30class TestApp(App):
31    def __init__(self, **kwargs):
32        super(TestApp, self).__init__(**kwargs)
33        self.title = 'Apomol'
34    def build(self):
35        return TextWidget()
36
37
38if __name__ == '__main__':
39    TestApp().run()

###該当のソースコード <test.kv>

python
1TextWidget: # ルートに追加
2
3<TextWidget>:
4    orientation: 'vertical'
5    ScreenManager:
6        size_hint_y: 0.7
7        id: scrmgr
8        Screen:
9            name: 'top'
10        Screen:
11            name: 'main1'
12            BoxLayout:
13                orientation:'vertical'
14                size:root.size
15                Label:
16                    id:label2
17                    font_size:20
18                    text:'Select the type'
19                    color:[0.2,0.2,0.2,1]
20                Button:
21                    id:button_tops
22                    text:"tops"
23                    size_hint_y:0.3
24                    on_press:scrmgr.current = 'tops'
25                Button:
26                    id:button_bottoms
27                    text:"bottoms"
28                    size_hint_y:0.3
29                    on_press:scrmgr.current = 'bottoms'
30                Button:
31                    id:button_autor
32                    text:"autor"
33                    size_hint_y:0.3
34                    on_press:scrmgr.current = 'autor'
35        Screen:
36            name: 'main2'
37            BoxLayout:
38                orientation:'vertical'
39                size:root.size
40                Label:
41                    id:label1
42                    font_size:20
43                    text:root.text
44                    color:[0.2,0.2,0.2,1]
45                TextInput:
46                    id:text_box
47                    focus:True
48                    on_text_validate:root.buttonClicked()
49                BoxLayout:
50                    Button:
51                        id:button1
52                        text:"OK"
53                        size_hint_x:1
54                        size_hint_y:1
55                        on_press:root.buttonClicked()
56                    Button:
57                        id:button2
58                        text:"DELEAT"
59                        size_hint_x:1
60                        size_hint_y:1
61                        on_press:root.buttonClicked2()
62        Screen:
63            name: 'tops'
64            BoxLayout:
65                orientation:'vertical'
66                BoxLayout:
67                    Button:
68                        id:back_tops
69                        Image:
70                            source:'bird.png'
71
72                BoxLayout:
73                    Button:
74                        id:back_tops
75                        text:'back'
76                        size_hint_x:1
77                        on_press:scrmgr.current = 'main1'
78        Screen:
79            name: 'bottoms'
80        Screen:
81            name: 'autor'
82
83    BoxLayout:
84        size_hint_y: 0.1
85        padding: 10,10,20, 10
86        Button:
87            text: "top"
88            font_size: 20
89            on_press: scrmgr.current = 'top'
90        Button:
91            text: "main1"
92            font_size: 20
93            on_press: scrmgr.current = 'main1'
94        Button:
95            text: "main2"
96            font_size: 20
97            on_press: scrmgr.current = 'main2'

###補足情報(言語/FW/ツール等のバージョンなど)
Python2.7
kivy
Mac

###追記（10月17日　14:30）
＜壁2＞　ボタン系
・「main2」で入力したtextを、[OK]からCSVに追加。
・「main1」の<bottoms>でPythonランチャー上にCSVの中身を表示。
まではできました。
GUI上に表示をしたいです。

python
1〜（略）〜
2def buttonClicked(self):
3        self.text=self.ids["text_box"].text
4        f = open('sample.csv',mode ='a')
5        writer = csv.writer(f)
6        writer.writerow([self.ids["text_box"].text])
7        f.close
8〜（略）〜
9def buttonClicked_bottoms(self):
10        f = open('sample.csv',mode ='r',)
11        reader = csv.reader(f)
12        for row in reader:
13            print(row)
14        f.close()
15〜（略）〜

行動規範の内容に同意します

回答1件

ベストアンサー

＜壁1＞　日本語表示

Kivyはデフォルトのフォントが日本語に対応していないのでフォントを登録する必要があります。

14．日本語の表示（フォントの追加）

コード内に日本語でコメントを書くこともできません…。

これはエラーがでて起動できなくなるということでしょうか？、Pythonのファイルの先頭に「#-- coding: utf-8 --」をつけて、文字コードをUTF-8に保存してから、
KVファイル側もUTF-8にしてみてください。

＞＜壁2＞　ボタン系
一覧表示はlistViewかRecycleViewをしようすると一覧表示できます。

おそらく、公式の以下のサンプルがbuttonが画像になる以外の要素を全て満たしているので、
一度動かしてコードを眺めることをお勧めします。

https://github.com/kivy/kivy/tree/master/examples/tutorials/notes/final

＞＜壁3＞　文法系

BoxLayoutはAPIリファレンス（ https://kivy.org/docs/api-kivy.uix.boxlayout.html ）をみればわかりますが、
たて、よこにwidget(パーツ)を縦、横に並べて配置の間隔を調整する機能です。
ただし、BoxLayoutはwidgetクラスを継承しているのでWidget(https://kivy.org/docs/api-kivy.uix.widget.html)の機能も使用できます。

＞今まで別ファイルから呼び出して画像を追加したい時は以下のソースでやってました。
＞ScreenManagerを使うようになって、このソースだと表示されなくなりました。

これはidやnameを使用してどうたどるかという話かと思いますので、いかを記述して

   Screen:
        name: 'bottoms'
        id: bottoms
        Image: 'ファイル名'

ids.bottoms とPythonがわで記述すればアクセスできるかと思います。

多分、kivy上での親子関係が理解できていないかと思うので、
「Inspector」などを使用して親子関係をみるといいかと思います。
https://qiita.com/gotta_dive_into_python/items/caa3e0f41ddfaedcdb95

投稿2017/10/18 21:09

dario_okazaki

総合スコア282

night9071

2017/10/24 04:18

回答ありがとうございます日本語になり、１画面に１ボタンしかできないのでまだ課題は多いですが、少しずつアプリらしくなってきました。ありがとうございました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

【kivy】画像のボタンを表示＆ボタンで情報の受け渡し

関連した質問