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

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 :stuck_out_tongue:

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 :stuck_out_tongue:

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 :slight_smile:

Scribe