コントロールの配置とサイズ その1

今まではボタンやラベルを一つだけ使いましたが、今回は複数のコントロールを配置したり、配置したコントロールの大きさを変更したりしてみます。

その1(大きさや位置)

pos_size1.rb

001  require 'phi'
002  
003  form = Phi::Form.new(:form1, 'formです')
004  button1 = Phi::Button.new(form, :button1, 'hoge')
005  button1.width = 200
006  button1.height = 100
007  button1.left = 15
008  button1.top = 15
009  
010  button2 = Phi::Button.new(form, :button2, 'foo')
011  button2.width = 30
012  button2.height = 30
013  button2.left = button1.left + button1.width
014  button2.top = button1.top + button1.height
015  
016  form.show
017  Phi.mainloop

このスクリプトを実行すると、このような ウィンドウがあらわれます。

解説

4行目で一つ目のボタンが生成され、5〜8行目でその大きさや位置を設定しています。この目的で使用されているのが下の4つの属性です。

• button1.width( Phi::Button#width ) はボタンの横幅
• button1.height( Phi::Button#height )はボタンの縦幅
• button1.left( Phi::Button#left )はボタンの左端の座標
• button1.top( Phi::Button#top )はボタンの上端の座標
  
  

ここで注意することはボタンの横と縦の座標はフォームの一番左上が0になるということです。また、横の座標が大きくなるとボタンは右に、縦の座標が大きくなると、ボタンは下に配置されるようになります。

10行目では二つ目のボタンが生成され、11〜14行目でその大きさや位置を設定しています。11と12行目は一つ目のボタンと同じことをしているので、説明は省きます。13行目では一つ目のボタンの横の座標と横幅の和(言いかえれば一つ目のボタンの右端)を二つ目のボタンの左端の座標に設定しています。同じように14行目では一つ目のボタンの下の端を二つ目のボタンの上端の座標に設定しています。

クラスとメソッド

Phi::Button

Phi::Button#width ( < Phi::Control#width )

Phi::Button#height ( < Phi::Control#height )

Phi::Button#top ( < Phi::Control#top )

Phi::Button#left ( < Phi::Control#left )

その2(alignとanchors)

pos_size2.rb

001  require 'phi'
002  
003  form = Phi::Form.new(:form1, 'formです')
004  button1 = Phi::Button.new(form, :button1, 'hoge')
005  button1.align = Phi::AL_LEFT
006  button1.width = 50
007  
008  button2 = Phi::Button.new(form, :button2, 'foo')
009  button2.width = 30
010  button2.height = 30
011  button2.anchors = [Phi::AK_RIGHT, AK_TOP]
012  button2.left = form.left - 100
013  button2.top = 30
014  
015  form.show
016  Phi.mainloop

このスクリプトを実行すると、このような ウィンドウがあらわれます。

解説

4行目で一つ目のボタンが生成され、4〜6行目でその大きさや位置を設定しています。5行目は一つ目のボタンがフォームの左端にぴったりくっつくように配置するための設定です。これには button1.align( Phi::Button#align )が使われていて、 Phi::Button#align には下の5つを代入することができます。

• Phi::AL_CLIENT(親コントロールいっぱいに広がる)
• Phi::AL_TOP(親コントロールの上の端にぴったりとくっつくように広がる)
• Phi::AL_LEFT(親コントロールの左端にぴったりとくっつくように広がる)
• Phi::AL_RIGHT(親コントロールの右端にぴったりとくっつくように広がる)
• Phi::AL_BOTTOM(親コントロールの下の端にぴったりとくっつくように広がる)
  
  

Phi::Control#align を設定した場合、いくつかの属性やメソッドは無視されます。例えば、今回の場合だと button1.height = 30 をスクリプトに加えても、一つ目のボタンの縦幅が30になることはありません。

8行目で二つ目のボタンが生成され、9〜13行目でその大きさや位置を設定しています。11行目以外は分かると思うので、この行だけ説明します。

button2.anchors( Phi::Button#anchors ) は親と子のコントロールの位置関係を保つための属性です。試しにpos_size2.rbを起動して、フォームのサイズを変更してみてください。フォームのサイズが変更されても、fooと書かれたボタンは常にフォームの右上にあることがわかると思います。これはbutton2.anchorsに [Phi::AK_RIGHT, Phi::AK_TOP] が代入されたことで子であるボタンと親であるフォームの右と上の相対位置が常に同じになるように設定されたからです。 Phi::Button#anchors に代入できる値は下の4つを組み合わせたもの( Array のオブジェクト )です。

• Phi::AK_TOP(親コントロールの上の端との位置関係を保持する)
• Phi::AK_LEFT(親コントロールの左端との位置関係を保持する)
• Phi::AK_RIGHT(親コントロールの右端との位置関係を保持する)
• Phi::AK_BOTTOM(親コントロールの下の端との位置関係を保持する)
  

クラスとメソッド

Rubyの組み込みクラス

Array

Phi::Button

Phi::Button#align ( < Phi::Control#align )

Phi::Button#anchors ( Phi::Control#anchors )