java垂直排布控件,unity列表控件Horizontal/Vertical/Grid Layout Group用法介绍

1. Grid Layout Group

为Panel控件添加Grid Layout Group,子控件为四个按钮,分别为Grid,Calendar,Gear,User:

e847903445b2faacda95277f7adb8310.png

默认属性为

8cf1eb7c49908693a5aa4024d7919108.png

为方便演示,按钮的底色为控件自带image,按钮上面的图标为其子控件image:

b3d35d3810ff4f51e48ba7a9f501b8fd.png

显示效果为:

37745e5a6d25619ff9bdb3bee1da320e.png

Padding为设置父控件内部与子控件周围的空白间隙,比如这样设置:

b9cf5f25fcbb81f37f095a1f9ef3436a.png

显示效果:

b149e0e29f96a7ae7ced69aec3611f9e.png

cell size为子控件大小,spacing为彼此之间的空白:

d8f2c615d256bfde47008e9d0a00ec1c.png

显示效果为:

a7a4b940c6155df8751ef5a8879d8342.png

Start Corner为子控件排列起始点,(排列方式和数量由Start Axis和Constraint决定,后面再说)默认为先从左到右排满一行再排列下一行:

e7af6232d238336003f6ab1e1e102f3f.png

Start Corner设为Upper Right会发现,按钮控件先从最右上角开始排列,从右往左排满一行再到下一行继续从右往左排列:

8b6eb5e903903e24e927922fdc231d95.png

效果:

3d15553fce93b632083a5ab299480173.png

Start Corner设为Lower Left为控件先从左往右排列,排满一行再到上一行继续从左往右排列:

0b6be83debaf3620c66a7c6295556edb.png

66644e4b65904e3b079ac27623cf30b6.png

Start Corner设为Lower Right以此类推。

Start Axis则决定了是先水平排还是先垂直排,如果设为Vertical(垂直排列),配合Upper Left,效果则为先垂直从上到下排满最左边一列,再去排下一列:

c471d071468617be4e8e8eede3fc6611.png

479f3021034a23500746e57f80b45ff5.png

child Alignment很简单,设定子控件在父控件内部的位置:

298ffda86015b6937c7f7f495556d05c.png

比如设为Middle Left,效果就是这样的,其他以此类推:

3be9601bfa683388c9ecbbff085ef02c.png

37aa9e1eac034d5c5cbaf39cceca1c6a.png

Constraint的第一个Flexible即响应式,根据宽度自动决定每行数量

1219cc7cc7c72523df7a0ae4f122c906.png

6adf96d93d80bfb6d29fb39345f450f4.gif

Fixed Colomn Count则强制规定列的数量,搭配Start Corner和Start Axis使用。

比如将Constraint Count设为1,Start Corner为Upper Right,Start Axis为Verical,就是只有一列,从右上角开始排列,垂直排满一列:

7abae865ba0cfe97abd9a29c3a0d48ce.png

dc8ae695d2d414ec5fa46a1ca297ab24.png

将Constraint Count设为2,Start Corner和Start Axis不变,就是垂直排为两列,从右上角开始排列,先垂直排列,再水平排列,第一个按钮在右上角,第二个按钮在右下角:

a3b8b966d950aedd6fc5bd9d2e3b5cc8.png

06dfbe8c1c50d806e76b0b1d67a89348.png

将Constraint Count设为3,Start Corner和Start Axis不变,此时效果不变,原因是控件将垂直排为三列,每列一个控件,会排为四列,所以每一列只能设为两个控件,但根据排列顺序,要先排满一列,才会去排下一列,所以右侧的两列每列一个控件之后,最左侧的第三列就空着了:

59bcca31f2f83e4a5d1a3d7825097e59.png

2d3b21cd80df75af88fd58970e4f1111.png

其余配置保持不变,将Start Axis改为Horizontal(水平),效果为这样,这就比较好理解了,是从右上角先水平排列,排满一行(三列)之后排第二行:

db982d0a822f864d9fe34cacfc8a0665.png

9b4c8f8a0557e158ce9c32aaebaa5c5e.png

Fixed Row Count与此类似,只不过限定的是行数:

dbaf75a33d9c7e4938894d88a3a7c016.png

9abe26b39cee16fe5c12107fed2e0320.png

2. Horizontal Layout Group

水平分割布局控件

Padding和Spacing与Grid Layout Group的功能类似,不再赘述。

7cc2808f17845ce09623b38990150395.png

Child Alignment设定子控件在父控件内部的位置,将Child Control Size和Child Force Expand所有选项都勾掉,此时子控件的长宽可以自由设定,切换Child Alignment,可以看到子控件的位置在变化:

c2979b3b7a6f7409b95fe3a7cc46ed72.png

02aacb0ee07491841d617a400aedbf33.png

14bae191bf8632a7f08b61774217bcc1.png

7abc9079ebda5c5d2afa6d7971712430.png

Child Force Expand设置子控件是否均匀分布于父控件内部,比如勾选Child Force Expand-Width之后的效果:

321d1bff852b7625c46ba0e297ca6119.png

62332f1a107256744be08b6e41e67ca4.gif

取消勾选Child Force Expand-Width之后的效果:

e6ad457d7eafc9b9a6f167b3940c505f.png

73a2ce0e68bb02dfb867e89d2798e72d.gif

可以看到,勾选之后虽然子控件可以根据父控件的宽度均匀分布在其内部,但却没有填满。如果需要填满父控件,则可以同时勾选Child Force Expand-Width和Child Controls Size-Width:

2757ffeb411511cb9e42f3948508461e.png

91b6a99a52c4b97dcbcc400a9d0e1235.gif

同时勾选Child Force Expand-Height和Child Controls Size-Height则可以在高度上填满父控件:

68318ee1475bf3e92f17d364374eb41e.png

d2877de26bbe1135bbd3b74f5795cb36.gif

如果只勾选Child Controls Size不勾选Child Force Expand会怎样?子控件的宽度或高度会强制变为0,所以一般Child Controls Size是搭配Child Force Expand使用:

dfcd74fe665fd18fb64050b359eba9e3.png

c84a48bc190ed72a606d5378b8a4a5ad.png

894982c406ca809c1480c3aca313bbb5.png

3. Vertical Layout Group

与Horizontal Layout Group类似。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值