Kivy UIX篇 layout篇 RelativeLayout類 講解

簡述

根據官方解釋:

1.The RelativeLayout class behaves just like the regular FloatLayout except that its child widgets are positioned relative to the layout. 

2.When a widget with position = (0,0) is added to a RelativeLayout, the child widget will also move when the position of the RelativeLayout is changed. The child widgets coordinates remain (0,0) as they are always relative to the parent layout.

意思是:

1.FloatLayout與RelativeLayout除了在對子物件的定位方式不同之外，其餘是一樣的。

2.FloatLayout的子物件以視窗左下角的點作為參考點(也就是原點(0,0))，然而RelativeLayout的子物件是以RelativeLayout物件左下角的點作為參考點

基本範例

首先在main.py中寫上起手式:

from kivy.app import App
from kivy.uix.relativelayout import RelativeLayout


#先讓MyLayout繼承RelativeLayout
class MyLayout(RelativeLayout):
    pass


class Myapp(App):

    def build(self):
        return MyLayout()


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

在以上程式碼中，我讓MyLayout類繼承RelativeLayout類，使得在my.kv中的<MyLayout>:可以繼承RelativeLayout類的特性。

在my.kv中寫上此段程式碼:

<MyLayout>:

    #添加Button物件(此段只是拿來呈現Button的位置，後面會有更詳細的解說)
    Button:
        text: 'A1'
        size_hint: .2,.2
        #讓物件依照layout的視窗大小調整長與寬
        pos_hint: {'x':.0, 'y':.0}

    Button:
        text: 'B2'
        size_hint: .2,.2
        pos_hint: {'x':.2, 'y':.2}

    Button:
        text: 'C3'
        size_hint: .2,.2
        pos_hint: {'x':.4, 'y':.4}

    Button:
        text: 'D4'
        size_hint: .2,.2
        pos_hint: {'x':.6, 'y':.6}

    Button:
        text: 'E5'
        size_hint: .2,.2
        pos_hint: {'x':.8, 'y':.8}

執行結果如下:

RelativeLayout使用技巧:

1.RelativeLayout物件與內部子物件可以指定位置(特別與FloatLayout類比較)

程式碼如下:

<MyLayout>:

    pos: 200,200

    Button:
        text: 'A1'

執行結果如下:

程式碼如下:

<MyLayout>:

    Button:
        text: 'A1'
        pos: 200,200
        

執行結果如下:

在第一個程式碼中，我們指定的是RelativeLayout的位置；在第二個程式碼中，我們指定的是Button的位置。各位可以嘗試看看在RelativeLayout與FloatLayout下相同的my.kv會產生什麼結果。