作者darkk6 (Mr. Pan)
看板java
標題Re: [問題] GridBagLayout 排版無法運行
時間Mon Jul 18 02:22:45 2016
※ 引述《laiDark (煎餃加賴)》之銘言:
: 我一直以來很想使用 GridBagLayout 這個方式排版
GridBagLayout 基本上只要會設定,他可以做到任何你要的排版
但缺點就是非常複雜
: code
: http://pastie.org/10909674
: main_code
: http://pastie.org/10909675
: 不管我怎麼修改 load 按鈕仍處於中央
: http://imgur.com/FNk2VpO
PS : 底下一些用語和說明大概都是以我自己的理解來講的,如果有誤麻煩指正XD
你的 Code 有幾個問題,但我這邊先講為何都一直在中間。
最主要的問題就在你的 weightx 和 weighty 設定
以你的圖片來說,這個按鈕的 Bag 範圍如下:
http://i.imgur.com/hCmzsD8.png
因為你指定 wieghtx 是 0 , 代表不需要任何額外的空間比重,
所以這個範圍就會剛好是按鈕的大小,而整個 JFrame 只有一個
元件的情況下,就會在中間了
如果要能呈現按鈕在最左邊(你的 code 寫 WEST 嘛),至少在 weightx
的地方要給數值(至少不能是 0 )
也就是把 c0.weightx = 0 改成如 c0.weightx = 1.0
這樣的話這個 bag 的範圍就會變成這樣
http://i.imgur.com/0J5LEZ9.png
在這個情況下,你使用 fill 或者 anchor 才能達成你要的結果。
接著可以參考一下這個圖來幫助理解:
PS : 這邊將 fill 設定成 BOTH , 也就是 c0.fill=GridBagConstraints.BOTH
http://i.imgur.com/1rATsLJ.png
以上先解決你的問題
===================================================
接著說明一下 GridBagConstraints 一些常用的屬性意義
fill ==> 填滿方式,這個元件要填滿的方式,有不填滿、垂直、水平、都填滿
anchor ==> 所在位置,元件在 bag 中的位置, 8 方位 + 中間共九種
gridx , gridy ==> 這個 bag 要放在哪個 row,column (x,y 座標)
gridwidth , gridheight ==> 這個 bag 在 x 和 y 佔用了幾格
( 有點類似 html 的 colspan 和 rowspan )
weightx , weighty ==> 上面說過了
在使用 GridBagLayout 製作 UI 時,建議先用紙筆把配置畫出來,然後用最少的線條
去做切割,注意,線條只能是橫線和直線,而且要切到底,比如:
http://i.imgur.com/v4DtZ04.png
切開之後從左上角開始編 x , y 的號碼,就如上圖所寫 ( ) 中的數值
而這個 x , y 就是 gridx 和 gridy,也就是例如:按鈕 B 的 gridx=1 , gridy=0
接著看圖說故事:
http://imgur.com/a/6Ry5d
假設現在想設計一個視窗按鈕如上半部的圖呈現
那麼我們就先畫線把元件切開,這邊切成六塊,並給予編號 (參考下半部的圖)
按鈕 C D E 比較好解釋,因此先從 CDE 開始列出
按鈕編號 gridx gridy gridwidth grideheight
-------------------------------------------------------------
C 0 1 1 1
D 1 1 1 1
E 2 1 1 1
注意按鈕 A 和 B,由於這兩個按鈕我沒有要填滿,也只要置中,所以才可以這樣切割
這樣切好之後,我們可以看到 按鈕A 是從 (0,0) 的地方開始,橫跨 1 格
橫的是 width,因此 gridwidth 是 2 ( 橫跨1格 => 占用兩格 , colspan=2 )
而按鈕 B 則是從 (1,0) 開始,也是橫跨一格:
按鈕編號 gridx gridy gridwidth grideheight
-------------------------------------------------------------
A 0 0 2 1
B 1 0 2 1
這樣就可達成這個 layout:
http://i.imgur.com/TXfAllA.png
其實還有很多要注意的地方,不過先了解 gridx , gridy , gridwidth , gridheight
還有 weightx , weighty 各自的意義會比較容易理解。
其他的講解就比較複雜,有興趣可以提供 UI 設計圖,然後我再簡單介紹看看
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 223.139.188.199
※ 文章網址: https://www.ptt.cc/bbs/java/M.1468779767.A.404.html
※ 編輯: darkk6 (223.139.188.199), 07/18/2016 02:29:33
推 crazwade: 很詳細 07/18 09:38
推 gameking: 詳細有耐心 給推 07/18 15:04
推 laiDark: 推QQ 謝謝這麼有耐心的寫文 問題已解決 07/18 18:52
推 psp800320: 超詳細 01/09 21:58