Messages

1

Support / UILayout system make difficult to distribute flexible space

« on: February 09, 2014, 08:28:02 pm »

Hi,

I have some problems with current layout system, especially when I want to center a button without resize it. As I observe, the layout system of 2DTookit has difference behaviour from the IOS UIKit autoresizing system (https://developer.apple.com/library/ios/documentation/windowsviews/conceptual/viewpg_iphoneos/CreatingViews/CreatingViews.html). 2DTookit has no such term "flexible size", which distributes space equally when container size changed. To have the same effect as UIKit in very simple scenario (just one center-align button in a container), I end up using UILayoutContainerSizer with 2 dummy spacers (UILayout object), it's make alignment very difficult even in very common scenarios.

I have just modified the sourcecode to sastify my need, hoping this can help others as well:

+ tk2dUILayoutEditor (in ItemInspector function)

Code: [Select]

bool hasSnap = item.snapLeft || item.snapRight || item.snapBottom || item.snapTop;
bool itemIncluded = My.layoutItems.Contains(item);

if ( ev.type == EventType.MouseUp && middleRect.Contains(ev.mousePosition) ) {
itemIncluded = !itemIncluded;
if( itemIncluded == false ) {
item.snapLeft = item.snapRight = item.snapTop = item.snapBottom = false;
hasSnap = false;
}
ev.Use();
}

if( hasSnap )
itemIncluded = true;

int strectRectSize = 20;
int strectRectBorder = 4;
Rect fullStrectRect = new Rect( middleRect.x + strectRectBorder, middleRect.y + strectRectBorder, middleRect.width - strectRectBorder * 2, middleRect.height - strectRectBorder * 2);
Rect strechRect = new Rect( fullStrectRect.x + fullStrectRect.width / 2 - strectRectSize / 2, fullStrectRect.y + fullStrectRect.height / 2 - strectRectSize / 2, strectRectSize, strectRectSize );
if (item.snapLeft) strechRect.xMin = fullStrectRect.xMin;
if (item.snapRight) strechRect.xMax = fullStrectRect.xMax;
if (item.snapTop) strechRect.yMin = fullStrectRect.yMin;
if (item.snapBottom) strechRect.yMax = fullStrectRect.yMax;
GUI.color = itemIncluded ? fillColor : grayColor;
GUI.Box( strechRect, "", tk2dEditorSkin.WhiteBox );
GUI.color = Color.white;

if (itemIncluded && !My.layoutItems.Contains(item)) {
My.layoutItems.Add(item);
item.inLayoutList = true;
OrderItems();
} else if (!itemIncluded && My.layoutItems.Contains(item)) {
My.layoutItems.Remove(item);
item.inLayoutList = false;
}
+ tk2dUILayout (in Reshape function)

Code: [Select]

foreach (var item in layoutItems) {
var offset = transform.worldToLocalMatrix.MultiplyVector(item.gameObj.transform.position - item.oldPos);
Vector3 qMin = -offset;
Vector3 qMax = -offset;
if (updateChildren) {
qMin.x += item.snapLeft ? dMin.x : (item.snapRight ? dMax.x : dMin.x);
qMin.y += item.snapBottom ? dMin.y : (item.snapTop ? dMax.y : dMin.y);
qMax.x += item.snapRight ? dMax.x : (item.snapLeft ? dMin.x : dMax.x);
qMax.y += item.snapTop ? dMax.y : (item.snapBottom ? dMin.y : dMax.y);
}


if (item.sprite != null || item.UIMask != null || item.layout != null) {
// Transform from my space into item's space
Matrix4x4 m = transform.localToWorldMatrix * item.gameObj.transform.worldToLocalMatrix;
if( item.snapLeft || item.snapRight )
qMin = m.MultiplyVector(qMin);
if( item.snapTop || item.snapBottom )
qMax = m.MultiplyVector(qMax);
}

Vector3 s = Vector3.zero;
if (!item.snapLeft && !item.snapRight) {
s.x = 0.5f * (qMin.x + qMax.x);
qMin.x = qMax.x = 0;
}
if (!item.snapTop && !item.snapBottom) {
s.y = 0.5f * (qMin.y + qMax.y);
qMin.y = qMax.y = 0;
}
item.gameObj.transform.position += s;

if (item.sprite != null)
item.sprite.ReshapeBounds(qMin, qMax);
else if (item.UIMask != null)
item.UIMask.ReshapeBounds(qMin, qMax);
else if (item.layout != null)
item.layout.Reshape(qMin, qMax, true);
else {
s = qMin;
if (item.snapLeft && item.snapRight)
s.x = 0.5f * (qMin.x + qMax.x);
if (item.snapTop && item.snapBottom)
s.y = 0.5f * (qMin.y + qMax.y);
item.gameObj.transform.position += s;
}
}