Re: [問題] GridBagLayout 排版無法運行
※ 引述《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
推
07/18 09:38, , 1F
07/18 09:38, 1F
推
07/18 15:04, , 2F
07/18 15:04, 2F
推
07/18 18:52, , 3F
07/18 18:52, 3F
推
01/09 21:58, , 4F
01/09 21:58, 4F
討論串 (同標題文章)
本文引述了以下文章的的內容:
完整討論串 (本文為第 2 之 2 篇):
java 近期熱門文章
PTT數位生活區 即時熱門文章