- Home /
uGUI How do you mix Relative + Precision-pixel layouts?
I've been trying to use uGUI to put together this odd layout, but the button alignment just doesn't work on different screen sizes. What's the right combination of uGUI elements to do this layout -
Basically the "touch" button is contained inside an image element panel that's 80% of the screen left aligned. (Yes, there's also arbitrary text in that panel.)
So, this also makes the button width/height relative as well - how do you get the margins to align so it's centered in the bottom part of the L?
See attached mockup
Answer by troien · Oct 31, 2014 at 12:36 PM
What is it you try to achieve exactly?
Since I'm not sure, I'll give you this answer making a lot of assumptions, in the hope they are correct :p
The way I understand it is that you want is:
a Panel that has a width of 80% of the screen. (Unknown height)
A button which is position below the panel on the right side (I suppose this is in pixels?)
If this is correct then this should do it...
Panel:
AnchorMin: X=0.0 | y=?
AnchorMax: x=0.8 | y=?
Pivot: x=? | y=?
Left: 0
Right: 0
Posy: ?
Posz: ?
Height:?
button (Make it a child of the panel)
AnchorMin: X=1.0 | y=0.0
AnchorMax: x=1.0 | y=0.0
Pivot: x=1.0 | y=1.0
PosX: 0
PosY: 0
Posz: 0
Width: ?
Height: ?
If the button is not in pixels, but should instead scale with the panel in the width. Then you should add a AspectRatioFitter and set it to WidthControlsHeight, and change the anchorminX of the button to whatever value you want...
If this does not answer your question then please make the question more clear :p
Difficulty is that the button must fit exactly centered in the bottom part of the L..
i've tried your method but it's still distorted... i'm currently using a panel + button (image) - not clickable + button (clickable) - each being parent of the other
I'm still confused by what you have got.
The way I understand it now is that you have:
Panel (80% of width)
BackGround (Child of panel) (Image with L shape) (Has the same size as Panel?)
Button (The Text 'Toutch' with the white border) (Child of Background)
Text (The 'Lorem ipsum') (Child of Background)
Is this correct?
Thing that would really be handy for me to know if I want to answer your question:
What is the height of your Panel/L shaped background (percentage of screen or pixel?)
Does the bottom part of the L stretch in the width and/or height if the screen size stretches?
Is the button allowed to stretch in width and/or height (if not, is it allowed to resize while remaining it's aspect ratio?)
Assu$$anonymous$$g that you have the above setup, and that the answer to my second question is yes, the answer to my third question is no, followed by yes, I should try the following setup:
Background (80% of width and some height, with L shape image)
Container (Child of background) (Place the Anchor$$anonymous$$ and Anchor$$anonymous$$ax in a position so that they cover your right bottom part of your L shape, and set left-right-top-bottom margins to whatever you think is right, this is the margin you want the button to be from the sides)
Button (Child of Container) (Add AspectRatioFitter script and set it to FitInParent, with a aspect ratio of 1)
Say the width is 750. The panel width is 665. The height should keep the same aspect ratio as the panel graphic. The button can stretch but should remain square in aspect ratio.
Setting the button to fit in parent seems to just blow it out of proportions..
Well, I'm sure that what you want is possible, I'm just not sure about what you want exactly.
Therefore, this image is basically my last try :p I made my own empty project and filled it with the following. (I'm using a black squared image as substitude for your button) For me the scaling looks good if I use this setup, but then again, I don't know your setup :p
Answer by Scribe · Nov 02, 2014 at 07:31 PM
Maybe this script would work for you:
using UnityEngine;
using UnityEngine.UI;
using System.Collections;
public class alignUI : MonoBehaviour {
public Sprite backgroundSprite;
public Sprite buttonSprite;
public Font f;
public Vector2 rightAlign = new Vector2(0.8f, 0.5f);
GameObject banner;
GameObject buttonBackground;
GameObject button;
GameObject text;
RectTransform bannerRect;
RectTransform buttonBGRect;
RectTransform buttonRect;
RectTransform textRect;
public int pixelSize = 80;
public int inset = 5;
void Start(){
Init();
}
void Update(){
CalcPosition();
}
void CalcPosition(){
//BANNER
bannerRect.anchorMin = new Vector2(0, rightAlign.y);
bannerRect.anchorMax = rightAlign;
bannerRect.offsetMin = Vector2.zero;
bannerRect.offsetMax = new Vector2(0, pixelSize);
//BUTTON BACKGROUND
buttonBGRect.anchorMin = buttonBGRect.anchorMax = rightAlign;
buttonBGRect.offsetMin = new Vector2(-pixelSize, -pixelSize);
buttonBGRect.offsetMax = Vector2.zero;
//BUTTON
buttonRect.anchorMin = buttonRect.anchorMax = rightAlign;
buttonRect.offsetMin = new Vector2(inset-pixelSize, inset-pixelSize);
buttonRect.offsetMax = new Vector2(-inset, -inset);
//TEXTBOX
textRect.anchorMin = new Vector2(0, rightAlign.y);
textRect.anchorMax = rightAlign;
textRect.offsetMin = new Vector2(inset, inset);
textRect.offsetMax = new Vector2(-inset, pixelSize-inset);
}
void Init(){
banner = new GameObject();
banner.name = "banner";
bannerRect = banner.AddComponent<RectTransform>();
Image iRef = banner.AddComponent<Image>();
iRef.sprite = backgroundSprite;
banner.transform.parent = transform;
buttonBackground = new GameObject();
buttonBackground.name = "buttonBackground";
buttonBGRect = buttonBackground.AddComponent<RectTransform>();
iRef = buttonBackground.AddComponent<Image>();
iRef.sprite = backgroundSprite;
buttonBackground.transform.parent = transform;
button = new GameObject();
button.name = "button";
buttonRect = button.AddComponent<RectTransform>();
button.AddComponent<CanvasRenderer>();
iRef = button.AddComponent<Image>();
iRef.sprite = buttonSprite;
iRef.type = Image.Type.Sliced;
Button bRef = button.AddComponent<Button>();
bRef.targetGraphic = button.GetComponent<Graphic>();
button.transform.parent = transform;
text = new GameObject();
text.name = "text";
textRect = text.AddComponent<RectTransform>();
Text tRef = text.AddComponent<Text>();
tRef.text = "Hello World, Hello World, Hello World, Hello World, Hello World, Hello World, Hello World!";
tRef.font = f;
tRef.color = Color.black;
text.transform.parent = transform;
CalcPosition();
}
}
You don't need to do much except choose a font, and a sprite for the background and the button, the rest should align itself how I think I understand you want it!
Feel free to ask any questions :)
Scribe