wxPythonを使ってみる (4) 

こんにちは．これからwxPythonを使ってみる(4)について始めたいと思います．
対象や動作環境などのはじめに必要な情報は[wxPythonを使ってみる(1)](https://qiita.com/Kenta-Han/items/5ac4f38d518e3262905f) と同じになります．
また，今回の内容は前の3回のの続きとなります．是非読んで見てください．



## 特徴
前回では，Sizerを使ったレイアウトのitem引数とproportion引数について学びました．今回もSizerを使ったレイアウトの続きを学んで行きたいと思います．
今回はBoxSizerのflag引数について学びましょう．
flagはアイテムの配置設定とボーダー設定を行う引数です．

### 中央寄せ

BoxSizerにおける中央寄せで使用する定数は，以下の3つとなります．
1. wx.ALIGN_CENTER(中央)
2. wx.ALIGN_CENTER_VERTICAL(縦方向おける中央)
3. wx.ALIGN_CENTER_HORIZONTAL(横方向おける中央)

```python3:window_display08.py
import wx
class CustomFrame(wx.Frame):
	def __init__(self,title):
		wx.Frame.__init__(self,None,-1,title,size=(400,400))
		
		panel = wx.Panel(self)
		
		layout = wx.BoxSizer(wx.VERTICAL)
		layout.Add(wx.Button(panel,wx.ID_ANY,"B01"),flag=wx.ALIGN_CENTER)
		layout.Add(wx.Button(panel,wx.ID_ANY,"B02"),flag=wx.ALIGN_CENTER_VERTICAL)
		layout.Add(wx.Button(panel,wx.ID_ANY,"B03"),flag=wx.ALIGN_CENTER_HORIZONTAL)
		
		panel.SetSizer(layout)
		self.Show()

app = wx.App(False)
CustomFrame("BoxSizer")
app.MainLoop()
		
```

ソースコードwindow_display08.pyは，```wx．VERTICAL```を使っているため，縦方向のBoxSizerは次の図の配置となります．
<img width="399" alt="スクリーンショット 2018-05-18 11.46.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/179248/c68eaed5-85f0-ede7-491b-a8d33317c1af.png">

ここでは```wx.ALIGN_CENTER```と```wx.ALIGN_CENTER_HORIZONTAL```が同じ配置となっています．
理由は，```wx.ALIGN_CENTER```の縦スペースがないため，```wx.ALIGN_CENTER_HORIZONTAL```と同じ横方向の中央寄せてなります．

先程のソースコードwindow_display08.pyの```layout = wx.BoxSizer(wx.VERTICAL)```の部分を```layout = wx.BoxSizer(wx.HORIZONTAL)```を変更すると，縦方向から横方向のBoxSizerでは次のような配置となります．

<img width="399" alt="スクリーンショット 2018-05-18 11.58.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/179248/f86817c9-37c2-d69a-1bcb-7d167c11ed89.png">

今回は，```wx.ALIGN_CENTER```の横スペースがないため，```wx.ALIGN_CENTER_VERTICAL```と同じ縦方向の中央寄せてなります．

### 上下左右寄せ

BoxSizerにおける上下左右寄せで使用する定数は，以下の4つとなります．
1. wx.ALIGN_TOP(上寄せ)
2. wx.ALIGN_BOTTOM(下寄せ)
3. wx.ALIGN_LEFT(左寄せ)
4. wx.ALIGN_RIGHT(右寄せ)

```python3:window_display09.py
import wx
class CustomFrame(wx.Frame):
	def __init__(self,title):
		wx.Frame.__init__(self,None,-1,title,size=(400,400))
		
		panel = wx.Panel(self)
		
		layout = wx.BoxSizer(wx.VERTICAL)
		layout.Add(wx.Button(panel,wx.ID_ANY,"B01"),flag=wx.ALIGN_TOP)
		layout.Add(wx.Button(panel,wx.ID_ANY,"B02"),flag=wx.ALIGN_BOTTOM)
		layout.Add(wx.Button(panel,wx.ID_ANY,"B03"),flag=wx.ALIGN_LEFT)
		layout.Add(wx.Button(panel,wx.ID_ANY,"B04"),flag=wx.ALIGN_RIGHT)
		
		panel.SetSizer(layout)
		self.Show()

app = wx.App(False)
CustomFrame("BoxSizer")
app.MainLoop()
		
```

ソースコードwindow_display09.pyは，```wx．VERTICAL```を使っているため，縦方向のBoxSizerは次の図の配置となります．

<img width="397" alt="スクリーンショット 2018-05-18 12.04.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/179248/656d4e01-a465-5f2f-6cb1-3780bd0d5f17.png">

それでは，上下左右寄せの4つ変化を見えてみよう．
1. wx.ALIGN_TOP：縦方向のスペースがないため，変化なし
2. wx.ALIGN_BOTTOM：横方向のスペースがないため，変化なし
3. wx.ALIGN_LEFT：デフォルトが左寄せのため，変化なし
4. wx.ALIGN_RIGHT：自身に割り当てられた領域の右端へアイテムが配置される

これの横方法のBoxSizerを省略します．ぜひ自分でやってみてください．

### そのほか

1. wx.EXPAND(領域をすべて使用する)
2. wx.：SHAPED(アスペクト比を維持しつつ，可能な限り領域を使用)

それでは使い方を見てみよう．

```python3:window_display10.py
import wx
class CustomFrame(wx.Frame):
	def __init__(self,title):
		wx.Frame.__init__(self,None,-1,title,size=(400,400))
		
		panel = wx.Panel(self)
		
		layout = wx.BoxSizer(wx.VERTICAL)
		layout.Add(wx.Button(panel,wx.ID_ANY,"B01"),flag=wx.EXPAND)
		layout.Add(wx.Button(panel,wx.ID_ANY,"B02"),flag=wx.SHAPED)
		
		panel.SetSizer(layout)
		self.Show()

app = wx.App(False)
CustomFrame("BoxSizer")
app.MainLoop()
		
```

<img width="395" alt="スクリーンショット 2018-05-18 12.17.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/179248/b7ae7cf7-f601-ee1f-7060-5945cdf8a5a7.png">

1. wx.EXPAND：横方向のスペースを全て埋めるように領域を使用．
2. wx.：SHAPED：BoxSizerでは縦横どちらかのスペースがないので，変化なし．


今回のwxPythonを使ってみる(4)は以上で終わります．
読んでいただいてありがとうございます．
また今度で会いましょ！

---
### 「wxpythonを使ってみる」目次
* [wxPythonを使ってみる(1)](https://qiita.com/Kenta-Han/items/5ac4f38d518e3262905f)
* [wxPythonを使ってみる(2)](https://qiita.com/Kenta-Han/items/dfd9764aedd64f9f92be)
* [wxPythonを使ってみる(3)](https://qiita.com/Kenta-Han/items/a7a58ad3cf5ae1f67625)