naritoブログ

【お知らせ】
新ブログができました。今後そちらで更新し、このサイトは更新されません(ウェブサイト自体は残しておきます)
このブログの内容に関してコメントしたい場合は、新ブログのフリースペースに書き込んでください

このブログの内容を新ブログに移行中です。このブログで見つからない記事は、新ブログにありま

Kivyで、お洒落なポップアップ

約604日前 2017年2月18日18:41
プログラミング関連
Kivy Python
今回はポップアップを作ります。
kivycatalogからパクったもので、ドキュメントに「show a nice popup」と書かれているとおり、お洒落です。

動作としてはこんな感じです。下からにょきっと、生えてくるタイプのやつですね。




main.py

from kivy.animation import Animation
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout


class Main(BoxLayout):

def show_msg(self):
"""show a nice popup"""

text = 'hello'
self.info_label.text = text
self.anim = Animation(top=190.0, opacity=1, d=2, t='in_back') +\
Animation(top=190.0, d=3) +\
Animation(top=0, opacity=0, d=2)
self.anim.start(self.info_label)


class MainApp(App):

def build(self):
return Main()

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


main.kv

<Main>:
info_label: info_lbl
orientation: 'vertical'

Button:
size_hint: 1, 1
text: 'push'
on_press: root.show_msg()

FloatLayout:
size_hint: 1, None
height: 0
TextInput:
id:info_lbl
readonly: True
font_size: '14sp'
background_color: (0, 0, 0, 1)
foreground_color: (1, 1, 1, 1)
opacity:0
size_hint: 1, None
text_size: self.size
height: '150pt'
top: 0



ここがアニメーション部分です。self.info_labelに表示する内容を移し、アニメーションスタートです。

def show_msg(self):
"""show a nice popup"""

text = 'hello'
self.info_label.text = text
self.anim = Animation(top=190.0, opacity=1, d=2, t='in_back') +\
Animation(top=190.0, d=3) +\
Animation(top=0, opacity=0, d=2)
self.anim.start(self.info_label)


以下の3つのアニメーションが順番に行われます。内容もパッと見で何となくわかると思います。

# 上ににょきっと生えるアニメ
Animation(top=190.0, opacity=1, d=2, t='in_back')

# 一時停止するアニメ
Animation(top=190.0, d=3)

# 下に戻るアニメ
Animation(top=0, opacity=0, d=2)


kvファイルです。FloatLayouを size_hint: 1, None、height: 0等の設定にし非表示にしておきます。
中のTextinputは、アニメーションして表示されるテキスト部分です。
こちらもsize_hint: 1, None、 top: 0等で、最初は見えない状態にしておきます。

FloatLayout:
size_hint: 1, None
height: 0
TextInput:
id:info_lbl
readonly: True
font_size: '14sp'
background_color: (0, 0, 0, 1)
foreground_color: (1, 1, 1, 1)
opacity:0
size_hint: 1, None
text_size: self.size
height: '150pt'
top: 0


右の方に寄せるなら、例えば以下のように。

TextInputにpos_hint: {'x': .5}を足しただけです。

FloatLayout:
size_hint: 1, None
height: 0
TextInput:
id:info_lbl
readonly: True
font_size: '14sp'
background_color: (0, 0, 0, 1)
foreground_color: (1, 1, 1, 1)
opacity:0
size_hint: 1, None
pos_hint: {'x': .5} # ここ
text_size: self.size
height: '150pt'
top: 0


左側半分を使うなら...

TextInput:のsize_hintを、.5, None にしてみました。

FloatLayout:
size_hint: 1, None
height: 0
TextInput:
id:info_lbl
readonly: True
font_size: '14sp'
background_color: (0, 0, 0, 1)
foreground_color: (1, 1, 1, 1)
opacity:0
size_hint: .5, None # ここ
text_size: self.size
height: '150pt'
top: 0