kivy FloatLayout でのImageの配置(Responsive)

FloatLayout内にてImage widgetを以下の要求に答える表示をしたい
ほとんどの資料は、使用する画像が決まっているためか、size、size_hintが固定で以下の要求の設定パターンが見つからなかったため記録に残します。

要求

• 任意の場所に表示
• 使用する画像はサイズ・アスクペクト比を指定しない
• アスペクト比を維持して表示

要はWEBでよくいうレスポンシブ

設定例：左上、横サイズ25%

失敗例

設定内容

#:kivy 1.10
#-*- coding: utf-8 -*-

<Logo@Image>:
    size_hint:0.25,None
    source:'./logo.jpg'
    allow_stretch:True
    keep_ratio: True
    canvas.before:
        Color:
            rgba: 1, 0, 0, 0.5
        Rectangle:
            size: self.size
            pos: self.pos
            
FloatLayout:
    Logo:
        pos_hint:{'x':0,'top':1}

• pos_hint:{'x':0,'top':1}　　左上指定
• size_hint:0.25,None　　Width指定、Heightは未指定
• allow_stretch:True　　サイズいっぱいに表示
• keep_ratio: True アスペクト比を維持

結果
左上にくっつかずに表示されている（赤枠はImage Widgetの範囲）
原因はデフォルト設定の　size:100,100　のheight部分が反映されているため
floatlayout は size_hint > size で反映される
今回、height部分はNoneのため、sizeのheightが反映されているために画像を超えてImage Widgetが設定された。

---

成功例1(height指定)

設定内容
失敗例に追加でheightを指定
指定方法は画像の比率（image_ratio）とImage WidgetのWidthから高さを算出して設定

追記 2018/7/10
Windowサイズからはみ出す場合がある（色々試してたら発生した・・・）
特に気にしなくてもいいかもしれないけど対策した成功例２を掲載

• height: self.width/self.image_ratio

#:kivy 1.10
#-*- coding: utf-8 -*-

<Logo@Image>:
    size_hint:0.25,None
    source:'./logo.jpg'
    allow_stretch:True
    keep_ratio: True
    canvas.before:
        Color:
            rgba: 1, 0, 0, 0.5
        Rectangle:
            size: self.size
            pos: self.pos
            
FloatLayout:
    Logo:
        pos_hint:{'x':0,'top':1}
        height: self.width/self.image_ratio

---

成功例2(size_hint_max指定)

設定内容
成功例１の際、アスペクト比・Windowサイズによってはみ出てしまう
その対策バージョン（画面内に収まる＋適切なWidget範囲）　

2018/7/11
縦横両方の可変に対応した方法はうまくいかない時があったので修正
大きくずらさない限りは大丈夫なはずです

#:kivy 1.10
#-*- coding: utf-8 -*-

<Logo@Image>:
    size_hint:0.25,1
    size_hint_max:self.parent.height*self.image_ratio,self.width/self.image_ratio
    source:'./img/logo.jpg'
    allow_stretch:True
    keep_ratio: True
    canvas.before:
        Color:
            rgba: 1, 0, 0, 0.5
        Rectangle:
            size: self.size
            pos: self.pos
            
FloatLayout:
    Logo:
        pos_hint:{'x':0,'top':1}
    　　　　　　　　　　　　

size_hintにてNoneから１に変更
size_hint_max_yにて高さを調整する。

Widthを可変に調整したい場合（例　高さ２５％）

size_hint:1,0.25
size_hint_max:self.height*self.image_ratio,self.parent.width/self.image_ratio

---

あとがき

height:auto とかそうゆうのがほしかった。
他に方法あるかもしれないけど満足
よほどじゃない限り大丈夫かも・・・