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

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

ただいまの
回答率

90.52%

  • MacOS(OSX)

    1902questions

    MacOSとは、Appleの開発していたGUI(グラフィカルユーザーインターフェース)を採用したオペレーションシステム(OS)です。Macintoshと共に、市場に出てGUIの普及に大きく貢献しました。

  • Python 2.7

    1264questions

    Python 2.7は2.xシリーズでは最後のメジャーバージョンです。Python3.1にある機能の多くが含まれています。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 951

night9071

score 7

前提・実現したいこと

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

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

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

from bg import Bird
bird = Image() 
self.add_widget(bird) 

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

mport kivy
kivy.require('1.7.3')

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.widget import Widget
from kivy.core.window import Window
from kivy.properties import StringProperty,ListProperty
from background import Bird
Window.clearcolor=[0.999,0.89,0.999,1]


class TextWidget(BoxLayout):
    text = StringProperty()
    def __init__(self, **kwargs):
        super(TextWidget, self).__init__(**kwargs)
        self.text = 'Good'
    def buttonClicked(self):
        self.text=self.ids["text_box"].text
    def buttonClicked2(self):
        self.text=' '
    def buttonClicked_tops(self):
        pass
    def buttonClicked_bottoms(self):
        bird = Bird()
        self.add_widget(bird)
    def buttonClicked_autor(self):
        pass

class TestApp(App):
    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        self.title = 'Apomol'
    def build(self):
        return TextWidget()


if __name__ == '__main__':
    TestApp().run()

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

TextWidget: # ルートに追加

<TextWidget>:
    orientation: 'vertical'
    ScreenManager:
        size_hint_y: 0.7
        id: scrmgr
        Screen:
            name: 'top'
        Screen:
            name: 'main1'
            BoxLayout:
                orientation:'vertical'
                size:root.size
                Label:
                    id:label2
                    font_size:20
                    text:'Select the type'
                    color:[0.2,0.2,0.2,1]
                Button:
                    id:button_tops
                    text:"tops"
                    size_hint_y:0.3
                    on_press:scrmgr.current = 'tops'
                Button:
                    id:button_bottoms
                    text:"bottoms"
                    size_hint_y:0.3
                    on_press:scrmgr.current = 'bottoms'
                Button:
                    id:button_autor
                    text:"autor"
                    size_hint_y:0.3
                    on_press:scrmgr.current = 'autor'
        Screen:
            name: 'main2'
            BoxLayout:
                orientation:'vertical'
                size:root.size
                Label:
                    id:label1
                    font_size:20
                    text:root.text
                    color:[0.2,0.2,0.2,1]
                TextInput:
                    id:text_box
                    focus:True
                    on_text_validate:root.buttonClicked()
                BoxLayout:
                    Button:
                        id:button1
                        text:"OK"
                        size_hint_x:1
                        size_hint_y:1
                        on_press:root.buttonClicked()
                    Button:
                        id:button2
                        text:"DELEAT"
                        size_hint_x:1
                        size_hint_y:1
                        on_press:root.buttonClicked2()
        Screen:
            name: 'tops'
            BoxLayout:
                orientation:'vertical'
                BoxLayout:
                    Button:
                        id:back_tops
                        Image:
                            source:'bird.png'

                BoxLayout:
                    Button:
                        id:back_tops
                        text:'back'
                        size_hint_x:1
                        on_press:scrmgr.current = 'main1'
        Screen:
            name: 'bottoms'
        Screen:
            name: 'autor'

    BoxLayout:
        size_hint_y: 0.1
        padding: 10,10,20, 10
        Button:
            text: "top"
            font_size: 20
            on_press: scrmgr.current = 'top'
        Button:
            text: "main1"
            font_size: 20
            on_press: scrmgr.current = 'main1'
        Button:
            text: "main2"
            font_size: 20
            on_press: scrmgr.current = 'main2'

補足情報(言語/FW/ツール等のバージョンなど)

Python2.7
kivy
Mac

追記(10月17日 14:30)

<壁2> ボタン系
・「main2」で入力したtextを、[OK]からCSVに追加。
・「main1」の<bottoms>でPythonランチャー上にCSVの中身を表示。
まではできました。
GUI上に表示をしたいです。

〜(略)〜
def buttonClicked(self):
        self.text=self.ids["text_box"].text
        f = open('sample.csv',mode ='a')
        writer = csv.writer(f)
        writer.writerow([self.ids["text_box"].text])
        f.close
〜(略)〜
def buttonClicked_bottoms(self):
        f = open('sample.csv',mode ='r',)
        reader = csv.reader(f)
        for row in reader:
            print(row)
        f.close()
〜(略)〜
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+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/24 13:18

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

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • MacOS(OSX)

    1902questions

    MacOSとは、Appleの開発していたGUI(グラフィカルユーザーインターフェース)を採用したオペレーションシステム(OS)です。Macintoshと共に、市場に出てGUIの普及に大きく貢献しました。

  • Python 2.7

    1264questions

    Python 2.7は2.xシリーズでは最後のメジャーバージョンです。Python3.1にある機能の多くが含まれています。