Unity3D UGUI - Horizontal Layout學(xué)習(xí)筆記

使用方法

假設(shè)有三張大小不一樣的圖片哲鸳,要橫向排布成下面這個樣子

![15.JPG](http://upload-images.jianshu.io/upload_images/6808438-cd6a27a9d3715eef.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

先創(chuàng)建3個Image控件,然后使用一個GameObject物體做為父物體

然后隨便弄三張大小不相同的圖到Image控件上集灌,點(diǎn)擊 Set Native Size 按鈕設(shè)置控件大小為圖片原始的大小

現(xiàn)在3張圖還是重疊到一起的

給父控件添加一個 Horizontal Layout Group 組件這樣三張圖片就變成了橫向排布的了

基本屬性

為了觀察 Horizontal Layout 組件各個屬性的效果,把 Image1 Image2 Image3 設(shè)置為不同的背景顏色,同時給父物體 Item 也添加上一個 Image 組件蝶涩,然后設(shè)置一下背景顏色


Child Alignment

子物體(三張圖片)相對于父物體的對齊方式

Upper Left
Lower Right

Padding

這個屬性比較好理解驶鹉,就是布局元素相對于父物體的內(nèi)邊距的大小

Left Upper

可以看到雖然設(shè)置了四個方向的內(nèi)邊距都為10绩蜻,但是由于背景太大了,只有左側(cè)和頂部的邊距是正確的室埋,原因是因?yàn)楝F(xiàn)在子物體的對齊方式為 Left Upper办绝。

把對齊方式調(diào)整為 Lower Right 后伊约,右側(cè)和底部的邊距顯示正確了

Lower Right

當(dāng)對齊方式為 Middle Center時,Padding屬性就沒有效果了

Middle Center

另外有一點(diǎn)孕蝉,無論對齊方式是什么屡律,子物體的左內(nèi)邊距的值都會保證大于Padding的Left值

Spacing

子物體(三張圖片)之間的距離

Child Force Expand

自動調(diào)整子物體(三張圖片)之間的距離以適應(yīng)父物體的寬和高

可以看到當(dāng)父物體寬度增加的時候,子物體之間的距離也響應(yīng)的邊大了

Control Child Size

這個屬性在使用的時候需要和 Child Force Expand 屬性配合使用

之前勾選上 Child Force ExpandWidth 選項(xiàng)后圖片本身的大小不會改變降淮,而當(dāng)勾選上 Control Child SizeWidth 選項(xiàng)后超埋,當(dāng)父物體的寬度變化的時候,變化的不再是間距而是物體本身佳鳖,即圖片的大小


Vertical Layout的使用方法也與Horizontal相類似霍殴。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市腋颠,隨后出現(xiàn)的幾起案子繁成,更是在濱河造成了極大的恐慌,老刑警劉巖淑玫,帶你破解...
    沈念sama閱讀 212,332評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件巾腕,死亡現(xiàn)場離奇詭異,居然都是意外死亡絮蒿,警方通過查閱死者的電腦和手機(jī)尊搬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,508評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來土涝,“玉大人佛寿,你說我怎么就攤上這事〉常” “怎么了冀泻?”我有些...
    開封第一講書人閱讀 157,812評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蜡饵。 經(jīng)常有香客問我弹渔,道長,這世上最難降的妖魔是什么溯祸? 我笑而不...
    開封第一講書人閱讀 56,607評論 1 284
  • 正文 為了忘掉前任肢专,我火速辦了婚禮,結(jié)果婚禮上焦辅,老公的妹妹穿的比我還像新娘博杖。我一直安慰自己,他們只是感情好筷登,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,728評論 6 386
  • 文/花漫 我一把揭開白布剃根。 她就那樣靜靜地躺著,像睡著了一般仆抵。 火紅的嫁衣襯著肌膚如雪跟继。 梳的紋絲不亂的頭發(fā)上种冬,一...
    開封第一講書人閱讀 49,919評論 1 290
  • 那天镣丑,我揣著相機(jī)與錄音舔糖,去河邊找鬼。 笑死莺匠,一個胖子當(dāng)著我的面吹牛金吗,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播趣竣,決...
    沈念sama閱讀 39,071評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼摇庙,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了遥缕?” 一聲冷哼從身側(cè)響起卫袒,我...
    開封第一講書人閱讀 37,802評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎单匣,沒想到半個月后夕凝,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,256評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡户秤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,576評論 2 327
  • 正文 我和宋清朗相戀三年码秉,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鸡号。...
    茶點(diǎn)故事閱讀 38,712評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡转砖,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出鲸伴,到底是詐尸還是另有隱情府蔗,我是刑警寧澤,帶...
    沈念sama閱讀 34,389評論 4 332
  • 正文 年R本政府宣布汞窗,位于F島的核電站姓赤,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏杉辙。R本人自食惡果不足惜模捂,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,032評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蜘矢。 院中可真熱鬧狂男,春花似錦、人聲如沸品腹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽舞吭。三九已至泡垃,卻和暖如春析珊,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蔑穴。 一陣腳步聲響...
    開封第一講書人閱讀 32,026評論 1 266
  • 我被黑心中介騙來泰國打工忠寻, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人存和。 一個月前我還...
    沈念sama閱讀 46,473評論 2 360
  • 正文 我出身青樓奕剃,卻偏偏與公主長得像,于是被迫代替她去往敵國和親捐腿。 傳聞我的和親對象是個殘疾皇子纵朋,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,606評論 2 350

推薦閱讀更多精彩內(nèi)容