《Python+Kivy(App开发)从入门到实践》自学笔记：RelativeLayout布局

章节目录与知识点总揽

2.7 RelativeLayout布局

        RelativeLayout布局——相对布局

        它的布局方式跟FloatLayout布局基本一致，但是它的定位属性x、center_x、right、y、center_y、top是相对于父布局的大小，而不是窗口的大小。实际上，无论哪种布局，当布局位置属性更改时，小部件都会移动。

2.7.1使用步骤

        １．新建一个main.py文件。

        ２．导入App类以及相关的包，例如：RelativeLayout、Button

        ３．创建一个类让它继承App类。

        ４．在该类内实现build()方法

        ５．编写具体的布局或布局类，让其继承RelativeLayout类。

        ６．在build()方法结尾返回具体的布局或布局类。

        ７．通过run()方法运行实例。

2.7.2 在py内使用RelativeLayout布局

                新建main.py文件，引入需要的App类、BoxLayout、RelativeLayout布局类和Button按钮类。

                由于按钮有许多的重复属性，可以自定义一个按钮类，并将重复的属性提取出来。

        具体代码如下：

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.relativelayout import RelativeLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.graphics import Rectangle,Color


class MyButton(Button):
    def __init__(self,**kwargs):
        super().__init__(**kwargs)

        self.font_size = 20
        self.size_hint = [0.2,0.2]


class RelativeLayoutWidget(RelativeLayout):
    pass


class BoxLayoutWidget(BoxLayout):
    def __init__(self,**kwargs):
        super().__init__(**kwargs)

        with self.canvas:
            Color(1,1,1,1)
            self.rect = Rectangle(pos=self.pos,size=self.size)
            self.bind(pos=self.update_rect,size=self.update_rect)

        relative_layout = RelativeLayoutWidget()

        bt0 = MyButton(text='Bt0',pos_hint={'right':1,'top':1},background_color=(0.1,0.5,0.6,1))
        bt1 = MyButton(text='Bt1',pos_hint={'x':0,'top':1},background_color=(1,0,0,1))
        bt_relative = MyButton(text='Realative',pos_hint={'center_x':.5,'center_y':.5},background_color=(0.4,0.5,0.6,1))
        bt2 = MyButton(text='Bt2',pos_hint={'x':0,'y':0},background_color=(0,0,1,1))
        bt3 = MyButton(text='Bt3',pos_hint={'right':1,'y':0},background_color=(0.8,0.9,0.2,1))

        for i in[bt0,bt1,bt_relative,bt2,bt3]:
            relative_layout.add_widget(i)
        self.add_widget(BoxLayout())
        self.add_widget(relative_layout)

    def update_rect(self,*args):
        self.rect.pos = self.pos
        self.rect.size = self.size

class RelativeApp(App):
    def build(self):
        return BoxLayoutWidget()

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

        运行main.py可以看到左半部分的布局由于未添加任何控件，所以是空的；在右半部份中，这里设置按钮的位置是按照它的父布局，即RelativeLayout定位的，并非在.py文件内继承的最外层的BoxLayout，结果如下图：

​

 2.7.3 在kv内使用RelativeLayout布局

        更改main.py文件，内容如下：

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

class RelativeLayoutWidget(BoxLayout):
    def __init__(self,**kwargs):
        super().__init__(**kwargs)

class RelativeApp(App):
    def build(self):
        return RelativeLayoutWidget()

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

        根据RelativeApp类名新建一个relative.kv文件，内容如下：

<Button>:
	font_size:20
	size_hint:0.2,0.2
<RelativeLayoutWidget>:
	BoxLayout:
	RelativeLayout:
		Button:
			text:'Btn0'
			background_color:0.1,0.5,0.6,1
			pos_hint:{'right':1,'top':1}
		Button:
			text:'Btn1'
			background_color:1,0,0,1
			pos_hint:{'x':0,'top':1}
		Button:
			text:'Relative'
			background_color:0.4,0.5,0.6,1
			pos_hint:{'center_x':.5,'center_y':.5}
		Button:
			text:'Btn2'
			background_color:0,0,1,1
			pos_hint:{'x':0,'y':0}
		Button:
			text:'Btn3'
			background_color:0.8,0.9,0.2,1
			pos_hint:{'right':1,'y':0}

        运行main.py。因为未在.kv文件中设置背景颜色，默认是黑色。其他均与之前测试效果相同。

​

上一篇：PageLayout布局

下一篇：ScatterLayout布局