From 1aa946125d6d22538ac3521f4ba37c88e0f96a5a Mon Sep 17 00:00:00 2001 From: Sung-Taek Hong Date: Mon, 25 Jan 2016 19:44:24 +0900 Subject: [PATCH] [Box] update align and wight size hint descriptions Change-Id: I876a7edc8cc6f163be362c440ca4950ab74e4c96 Signed-off-by: Sung-Taek Hong --- .../html/images/size_hint_align.png | Bin 0 -> 6457 bytes .../html/images/size_hint_weight.png | Bin 0 -> 2843 bytes .../html/native/efl/container_box_n.htm | 20 +++++++++++++++----- 3 files changed, 15 insertions(+), 5 deletions(-) create mode 100644 org.tizen.ui.practices/html/images/size_hint_align.png create mode 100644 org.tizen.ui.practices/html/images/size_hint_weight.png diff --git a/org.tizen.ui.practices/html/images/size_hint_align.png b/org.tizen.ui.practices/html/images/size_hint_align.png new file mode 100644 index 0000000000000000000000000000000000000000..5993264af7ac21e9569017ae63392313985b8192 GIT binary patch literal 6457 zcmc(k2~^VCzQ?srT6r{0Q_GanIyRVO=8&3n$|-Zm24}@Ehnz@ro~UD%roz>7O3}>J zaKN~mGo^W*g8tV{^#wok9~RP*UiLkGeP;lFeQW<~P;YM+AAi1UelGX?UG5(X zdf@MV%<#JDO{*s&Qha>UIoI`mz7ssUFb?%PI*SA>XP;_SjH{?i(zhu-7Z!5WzaqIS zWNQ7LdcynHL2eggg!s?AvFG2dWuNfYXg>`*AJ_0XZX#~i9v|=t_x%cc;~GBf)#Nvk z8AFb?_fnni80Y48hqY5^@9i^A4@tUs&M4>m`b0B@a@FeDKZC< z-L)9IGe-f;I!nq4K`z8YO|uXs#P;4GPSmg;qoO43n7FvOY^AbxAnnr|syRnYOiV*= zMB-&e4M7kAl3lt?A2|hL4K&Ev(1UKH!){yo8|rP*$>Xo3oO)mnl^r8z4SP9lvUU=W zQz#ou=3F{E8%xG`}DsZ!X5rQ`6P)SlKQ zu=F7(zG4gwXhyJ#gQ2ZTn_UbeW5R%#nMPxe#pis-P#CXWd{3qM_NwrSLUvlC{KfmgiI*xY?QQk_GO6s& zXwBdif^QzHuCwQv^V}_Q@HoToXv729tEsC;bvB}mfb6w4=`9c$PD_|c`EX&GDIHP+ z?H&-^gh$u@tV%`$xii&7=dDzjSlL#sGy1fADQ+1s8JrJe5%RYi6(%@R&GbO19^N{f zvPpiia3dmudNVVed6sU`yk^Lj@uhW)0+N3_(@Sg{_Sw;10TgPmi;S*x7%1i4;d}PmFtyS@(Qb{ zi)wlDWzVi+wrq52qhy{QwArgc?L*H4q}H}Xzytt_V<)U%LFOt-9+-G}7<4Gz?SMWS zYX0i&htDFU;2G@+qLkQ6^nBk{w;So2n_ggiSKAzUSZccQvc=);@=$}CHzt|E4`58E zPrZ9q=dX@xD+w0;2fd{G~Dt4B@Ssbn;I!vcSC5+NiLsQT{CZQ?j_bT zeCe~S^Vk+E?Yxh3XYeDn7HM%x`rL6zPQ65A+dOAGW_i`}xTFNF1e=Bw1 zM#P{eDZMX4C@a8nJMuUS4wI(zq2_Qs(;3D+;)8LgHGtLhA#K_E7t=8lWq5P&^6n>8 zd!z#1cBv2HyzHvy6|USGCW$-YhX%?|UZvT)gJ~g`x>xn_UpG8@D6JdA0jlzB7GYSP zoQ|Pe+!joJNAh39;b&oo=@v6&eEn(d=UP^?d(o0boWOeV=|h5V)%UCGX2ArRCH* zjk~u~xw`CZ2ii}}mnta}vSKe)tj{P1vuv@w5oa8|bi%Oyx)*wu;FE7P8bR?ib9l?Z zlWP`ZA3z2ow6X~eO|Vy+y0vApGra|(4tHxjxbzNjdAJKYbO#B5dBgCVP<+mB6qhjp z4xLp*PN=oBpY0jH8*x?Xv`;3&L1WD@WQwa4Mw@m0P>pu36CR zK5NV9s`^(*1BVC?S7l#pJ-K#P)V1Wp*h;SS#|F76FxOx!_tq_+0S(w=uz1p~*`5YD zf@4_3p5KbA101zBnxESO%A0Jsaf%T%QAkZ#j0PB* zrJCu($lMU}B`c3D-cJuIy*d_jYDJI*d(qS#2aSr2twWR%1)fAw7b3J8mx^#OhNUO2K52&>*|uIj1@xnN(3aFJj!y%#(`ssbfMOovZmoUx#fUHzBE7CBVbK+{X^I_r zbG#GYpmEqVVg7pBLbL|t*Dh$l#8cDR#=~V29b$($gBUArAqk8&Jg1)~vUuk(r@sTyB2eBxpPG5HR-v6bX? ziV!Gv_et$|EwKDYV`sWvK1i1uaYp{9(ZcTMk*w)cx;PO0KqjI&bs#y*`rrTo`>h5% zoLy&h6ApDDvEAXb8C}>Br-`5M*}ZhbU2hm$X--#Bqi;|8Zt@0Q^(q1BdJq?^Wpr;w zvcRp@CaspqC-Ii#PV3jGRfxIsAiV!Z7Pk8mqXc^{hu$TS{G`k7+>B$T>E97(l-tD`w60VXOMbv4%g_Ce{EHCDH3W zw+4Vyhf;%&c+MEC$wSrCf?6$c>AJH94>^hK785zURWpHm4T zEMH!7(W$fJpl~zI^V){nR+(W-?A0nl9}qvw)+jb9@ps}N%>dTpS=JP<9JVTj6XpB$ zq53V0Sahy}#VJFHp7@qHir2do-^M^2$s`Aus$wQ{L(3EVrsYDEN^qTMb@y;P(OZxR zj$4XNo`jTar;pfyd+*#|b1f9_xNTuGv@z;pV-&~exsk2z66X#pxD!M$i7ur(?UY-1{d}qwj})R5w2`J?Z4?6Db>S@8dqxd7Fb)QlqY~9UE$KpLU#j zI>xI-P{)S8X*>2tY=LJ-gA;PtFD0h7k8tSqCvTe8(=yw7_3`*XPi+3czQXz7J}&Ci5ogPim@DA1pM z|9%(o9aZ1k@A>;9i+^8&Kb!qC=l*TTe_>XB24gh~vwI=F(R<2lyB;KfI12aj$eXd7 zSyDpAY`Ob3fm}ppAg4;olg?fDF69orZ6EHHKK-iboNn+55sd)RM_V@x%!@Bb8oGH` z#l-kY7_9idt=h%VkHfuu2e_QnKSPC@KC{xz&K4=ZTaqk-!lkU?jopMSO0y#IiOnNM z`X^iAaJ`(P7CNeu!2HTY+tv+Bh>fe6EtS!$9#Q^7bsgKT`8(;lT+^q(kWfh82kSUa z=LEaGK)zn%w)VcX7wr|@wFf({${1SzGHTB$(MQp~e4O@6lsRHOZA-~ydwQD}`<+y_ z(y*hMXw=YB<`6M{_VBaGG5#LuGj_2q>4OYqyiwy#Q1y$bx*Q{txp??F#h-c6y1SJ4 zKjc)`C|ah!*b~-+>Oxmz?m`MH;u$6Q3Z+8n+>Kn7nbk{8f>AquIuCl}RZ`3BqII6G z-u&u!O?Z!rq@m${3%H*|cZ&Qx{XB2Pa-hGHIjzxw#2rrZXbSJ(AW>co7ly%{r4FmH z4)=Q1@tu*H>AEDd*WZ+m&vwufk#xFa_8%a+FrFjm|QILr! z)9lEt%JdDYj80{3ofTT=YsI_ge!k~bYdInY-3r}pwMjcJr5p*^3KN}&RQZ+pUS0h9 zkd!@LoV-RbH8Jt;#L$M(xz61cgW2rcu(OIVr{Lr;$XVi36|UK(8R3cDJi5(W%U(27 zIyBN;_p#7*06>LyEr)%(N&mkrufGJNbvsf!NXsL_XB?Af!SnoDOiA)?9v>+012CaX z4}z>TuhV%tpa*$gMde=6CqDpe%lB1>i_9+O^FM?7|DF=OFcwf@i%$!(LeF3@_wAC# zKlmz?I@C+nLdlD10k*ivh*cJ=H5Z{<_zh`a!XQV^Z-j=1$|oBK3}`V~ECX|M1aE1m z2y-b&)pKDPb^oy^V&4e=`)SF4v`_qgyz(Ef+`r4z8*D&X_jZkh;!3VXCN~K7quiyV zBLl`=wN<|(jjXwYG-mYKN~IH3Tw_Ifkgff)d3scxv~dw=w6cqYMd%X9?9TEyxt$6+0w4{LGHZ57|U)hk_8#n9RjUEeTwMZE7?Vu!FAt&^ESnm(0zPJgIhqWnyfikTNCZWLg5 z>s%V}`uvr!A@CWQvL7vhZ}8J+i(mj_4vM6PQ7RGsCtY`hl`L{%N@M=rXmyJG1M!VXEL*@WyV)XE+%4!G_n@`KeuS^O zDmWs_jipSUHpz7L+6Rnnbg6Dt2 z+;9K?n7aso1Yt1VhxkSn@PVM3$f2igrX=3mgKjxymc&KVN^NI=4!7#uo-31`3-|Lh z0`-X#U6o-FoKc?lY2LSdbg`f6bup~2edsv5AVNz?z4tl3gHx>v8IuJ)Tm3fuEFVXJ z!)A>?VQdouzmda*fYC&NYzrvTX)UDal{ z(8)O|Za~9Dx~0x$Z#~^V@BZ0cpKkF^rVTgf1yd#Dt#KQENiljsHc6BOb9N}M4_cbQ z#>Bw5Zf=uh>X`VwS1J}TDq`EqWx7&g!c+K0hItL)3F=Xe2wyC7WPXXT#wyO>uKAl6 zFRmun)1N!zUI-BvM{W5|T&1ecPnv^jkHd8sAB!oBt4i{dLyBSwOWRs-Fh+bfGDO2z z1BBkg?;i4SCwj+`Az8z$kP|iAt(cJPjqMi8DrD_ZfsMAR;y_Qe7Kz%SQ} z3LuyEHzl|g2ljB@`dURBXshR8WANhV_ur)L@(rpT(4tl+N=uFT~pxwh`Q1vw?F~_W1n5usyj=3X~vS8jKbaQ!J~785>49sif1%GcjaX`h#01K_2czoxFVk5vLV>s zosB^fInt-Bo0<%kG`YA$TqBe7bwpw6TG#uZE|mGP%=JW`p|&DY64c((GCH;(S9vAj zF?Nj!d=O{!uebuYk+D+CeON=H_|QebU63j5jaO z=liiWWsca#ASBy##y21w#SlZ#ZZia)NG!%xtNljY9ed2y9}$R2h;~%IP!#lnzoRPQ zOGR^_W_YA-R8&N0$S&( zPc;VbA?L6x_#Tguv81Sqj8H>tPmiw;Uzk($LHAAgXqEWZg@rK|)fmX9Owr17%S?Lt zJ-v$HJy4I3DsNtEZFnX8J*_*#v|P2_&(_$G@>s zC-5n?1z*!(M?q}P6^XaU|lMb z4PNp2cOQJMQ5$K8oxIt%Ijy(Qo1vi(O75rpTk?NR(0|!6pf?4E`@p>2kIdK^p<(;I zLy*Al3H9!1-f`Qf*)Cjms?nndg*cnDOc5U;f3BK_|cc65d+r2(6{1UpOtHIa3@96rF?8YBoTph++Y-wt zrY7}8mko0|(B^`+rryxjydFU-$XCbM(Ex&8zVFYy-`1V-lB~*?y2p(jM&hasPC6Tg zQ1@TrJslbll5U)9arJh~XbGS0c+bspVZC>H98Y}rI=TE{ZTGwFV$0x#F=X`}Jh>5( zls2Y+$Z&9x)0~#>PPnske(b9yi&~4!h0(#Rw9Cu!TIIK@X$uq2EMtsw?lO_6MRxhm zgK)D$D`o>jIv20hye0Mf4qR9Xva+=Gkp(vrD&6d%I+; zldAMMF6r8RIZ0k(j|u{vD;cp;>wYoTj(bjD>E)UqCDuFKXbpX2B-{H~(_@zINaY^4 zu%Ix~M%;g?JZ7QIJy-3PX#Y9ER97eCMA9_dkUH|J#a$w{N9#ajl=>>(lm$ zilw>v=Sd$E>2}0mi>n6n<1aIZYm+|K$vtaMtLWTH{pz!{{@-s*>FKrfv6wXlu?VoY zmOyPoDqG`;=o9w(2@(nwkVdVqub0FtleS|CDqQEYyOzf@q1_*3{3zkmE{C>evKCW) z4n89ib#&ad^4{gVk?$EY1MAkt$e;xgdvsF3iG!&TB596E4yvlE%aR_bl9n-E>uIsv V;F4Setting the Alignment -

You can set the alignment of UI components inside a box using the elm_box_align_set() function. The function takes 2 doubles values, a horizontal value and a vertical value, representing the percentage between 0 and 1.0 of the alignment in the horizontal and vertical axes. When you add a UI component with the elm_box_pack_end() or elm_box_pack_start() function, Elementary computes the global size of the box. If the global size is bigger than the size of the box's parent, the box takes up all the space occupied by the parent, and the size of the parent can be extended to hold the box. If the global size is smaller than the parent's size, the alignment values set the position of the box inside the parent.

+

You can set the alignment of UI components inside a box using the elm_box_align_set() function. The function takes 2 double values, a horizontal value and a vertical value, representing the percentage between 0 and 1.0 of the alignment in the horizontal and vertical axes. When you add a UI component with the elm_box_pack_end() or elm_box_pack_start() function, Elementary computes the global size of the box. If the global size is bigger than the size of the box's parent, the box takes up all the space occupied by the parent, and the size of the parent can be extended to hold the box. If the global size is smaller than the parent's size, the alignment values set the position of the box inside the parent.

Figure: Alignment

Alignment

@@ -188,20 +188,30 @@ evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 2, 1);
  • -

    To change the alignment of the icon relative to the parent, use the evas_object_size_hint_align() function. By default, the icon is centered, so it is aligned with a value of 0.5. To change the alignment:

    +

    To change the alignment of the icon relative to the parent, use the evas_object_size_hint_align_set() function. The function takes 2 double values, a horizontal and vertical value, representing the percentage between 0.0 and 1.0 of the alignment in the horizontal and vertical axes. By default, the icon is centered with a value of 0.5. To change the alignment:

    +

    Figure: Align size hint

    +

    Align size hint

    +
    +evas_object_size_hint_align_set(ic, 0.0, 1.0);
+
    +

    In the above case, the icon is aligned to the bottom left corner of the parent. Exceptionally, EVAS_HINT_FILL or -1.0 can be given as a horizontal and vertical value, which requests Evas to fill the Evas object in the parent area.

     evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
    -

    In the above case, the icon is aligned to the bottom left corner of the parent.

    +

    In the above case, the icon fills the whole parent area.

  • -

    To set a weight size hint, use the evas_object_size_hint_weight_set() function. By default, the weight is not set, so the size of the icon is the minimum size. But if you set this value to 1, the icon expands as much as it can inside the container.

    +

    To set a weight size hint, use the evas_object_size_hint_weight_set() function. Weight size hint represents the Evas object's weight comparing to that of other Evas objects in the container. By default, the weight is not set, and the size of the icon will be in its minimum size. But if you set this value to 1.0, the icon will expand as much as it can inside the container.

    +

    Figure: Weight size hint

    +

    Weight size hint

     evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_weight_set(ic2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    +

    Do not use weight size hint along with elm_box_homogeneous_set() function, because every child will have the same weight.

  • -

    You can also use the alignment and weight hints together. In the following example, the icon takes up all the space in its parent:

    +

    You can also use the alignment and weight size hints together. In the following example, the icon takes up all the space in its parent:

     evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
 evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-- 
2.7.4