KivyのレイアウトのAnchorLayoutの使い方について説明します。AnchorLayoutは上下左右、中央の決まった位置にウィジェットを配置するレイアウトウィジェットです。
AnchorLayoutとは
AnchorLayoutは上下左右、中央の決まった位置にウィジェットを配置するレイアウトウィジェットです。AnchorLayoutを単体で使用した場合、1つのウィジェットしか配置できません。複数のウィジェットを配置したい場合は、他のレイアウトと併用する、もしくは他のレイアウトを選択した方が良いかもしれません。
AnchorLayoutでウィジェットの配置をする
ウィジェットの位置を設定するにはanchor_xプロパティとanchor_yプロパティを使用します。xは水平軸ｙは垂直軸になります。
- anchor_x: [ ‘left’, ‘center‘, ‘right‘ ]で水平の位置を設定します。デフォルトはcenterです。
- anchor_y: [ ‘top‘, ‘center‘, ‘bottom‘ ]で垂直の位置を設定します。デフォルトはcenterです。
下図はanchor_xとanchor_yの位置を示します。
AnchorLayoutのサンプルコードをみてみましょう。
anchorlayout1.py
from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayout
class RootWidget(AnchorLayout):
pass
class Anchorlayout1(App):
def build(self):
return RootWidget()
if __name__ == '__main__':
Anchorlayout1().run()
anchorlayout1.kv
<RootWidget>:
anchor_x: 'center'
anchor_y: 'top'
padding: 100 # 内側の余白を設定する。
# 背景色の設定
canvas.before:
Color:
rgba: 229/255, 234/255, 230/255, 1 # RGBA
Rectangle:
size: self.size
pos: self.pos
Button: # Button2と重なって表示される。
text: 'Button 1'
size_hint: 0.3, 0.2
Button:
text: 'Button 2'
size_hint: 0.3, 0.2
上記のコードではButton1は、Button2と重なって表示されるので隠れてしまいます。posやpos_hintのウィジェットの位置を設定するプロパティは使用できないので、複数のウィジェットを使いたい場合は他のレイアウトを入れ子にして使用します。これについてはこの記事の後半で解説します。
AnchorLayoutの設定
AnchorLayoutには内側の余白設定(padding)や、背景色を設定する事ができます。
内側の余白（padding）を設定する
AnchorLayoutの内側の余白を設定するにはpaddingプロパティを使用します。
paddingの詳細についてはBoxLayoutの記事をご覧ください。
背景色を設定する
AnchoLayoutに背景色を設定するプロパティは存在しないので、canvasを使用します。背景色の設定方法についての詳細は下記の記事をご覧ください。
AnchorLayoutで複数のウィジェットを配置するには
AnchorLayoutで複数のウィジェットを配置するには他のレイアウトを入れ子にします。
AnchorLayoutにBoxLayoutを入れ子にして複数のウィジェットを配置するサンプルコードを以下に示します。
anchorlayout2.py
from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayout
class RootWidget(AnchorLayout):
pass
class Anchorlayout2(App):
def build(self):
return RootWidget()
if __name__ == '__main__':
Anchorlayout2().run()
anchorlayout2.kv
<RootWidget>:
anchor_x: 'center'
anchor_y: 'center'
padding: 20
BoxLayout:
spacing: 20
Button:
text: 'Button 1'
size_hint: 0.3, 0.2
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
Button:
text: 'Button 2'
size_hint: 0.3, 0.2
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
この例ではpos_hintを使用して画面の中心にウィジェットを配置しています。
pos_hintの詳細については下記の記事をご覧ください
ウィジェットのサイズを設定する
ウィジェットのサイズを設定するにはsize_hintプロパティを使用します。size_hintの詳細は下記のページをご覧ください。
Comment