tutorial.basic.4

Tutorial 4: Advanced sizing and set point

Introduction

Hi, welcome back. How are you? Are you able to understand everything well? Don’t forget we have a manual, everything learned in this tutorial can be found as a reference in there.

Types

So we know that we can set our position to types other than just pixels. But what about sizing. This has about the same basic options as posX/YType. Here is a list:

• px: gives a width or a height in pixels.
• dp: gives a width or a height in inches.
• fc: gives a width or height relative to the parent’s size.

There are a lot more options, but these are the one’s you’ll be using 99% of the time. Here is an example using fc values:

EXAMPLE 14:

//create event of a newly created object.
//initialize uiz
uiz_init()
//create our square object
square=uiz_c(obj_uiZ_square)
uiz_position(square, .3,fc, .6,fc);
uiz_size(square, .3,fc, .1,fc);
//fix our square object.
uiz_fix(square);

IMAGE 15 IMAGE 16

Set point

Now that you also know how to size your object, you are able to put your object in any position with any size.

There is one more thing that defines position though. If you look at image 16, you can see that (0.3,0.6) fc gives the position of the top-left corner of the object. You might not always want this tough. You might want the middle of the object to be around the position (0.3,0.6)fc instead of the top-left corner being there.

Well, this is possible in uiz! Go take a look in the manual. At the positioning page all the way at the bottom, there is a section called "set point".

The set point can be the values:

• uiz_left
• uiz_middle
• uiz_right
• uiz_top
• uiz_bottom
• uiz_auto.

(Some only work for the x component of the set point and some only work for the y component of the set point)

So what can you do with this? You can for example set setPointX to uiz_right and setPointY to uiz_middle like this:

EXAMPLE 15:

//create event of a newly created object.
//initialize uiz
uiz_init()
//create our square object
square=uiz_c(obj_uiZ_square)
uiz_position(square, .3,fc, .6,fc);
uiz_size(square, .3,fc, .1,fc);
uiz_setPoint(square, uiz_right, uiz_middle);
//fix our square object.
uiz_fix(square);

IMAGE 17

In the following image we can see that the position (0.3fc, 0.6fc) now refers to the right-middle part of the object.

IMAGE 18

uiz_auto

Do you need to set the set point manually each time? Well, you don’t. By default setPointX and setPointY are set to uiz_auto. If these values are set to uiz_auto then it will automatically pick a position in the object that fits the posXType or posYType the best. For example, for uiz_snapright, it will automatically pick a value of uiz_right for setPointX. This means that in 95% of cases, you don't need to change your set point.

End of tutorial

In this tutorial you learned:

• How you can also apply px, dp and fc to the size of an object
• What a set point is
• How to change the set point
• What uiz_auto does with the set point