THIS CONTENT DOWNLOAD SHORTLY

Objective

Main objective of this blog post is to give you an idea about How to work with Independent Vertical Layout and Independent Horizontal Layout in Unity UI.

 

Vertical Layout:

The Vertical Layout Group component places its child layout elements on top of each other. Their heights are determined by their respective minimum, preferred and flexible heights according to the following model:

  • The minimum heights of all the child layout elements are added together and the spacing between them is also added. The result is the minimum height of the Vertical Layout Group.
  • The preferred heights of all the child layout elements are added together as well as the spacing between them is added. As a result you will get the preferred height of the Vertical Layout Group.
  • If the Vertical Layout Group is at its minimum height or smaller, all the child layout elements will also have their minimum height.
  • The closer the Vertical Layout group is to its preferred height, the closer each child layout will get to their preferred heights.
  • If the Vertical Layout Group is taller than its preferred height, it will distribute the extra available space proportionally to the child layout elements according to their respective flexible heights.

Here I have taken a resolution independent example using vertical layout.

vertical-layout

 

Step 1 Create Panel

Create panel from Create  UI  Panel and name it Panel - Vertical Layout.

ui-panel

 

Step 2 Create one more Panel

Under the Vertical Layout Panel and name it to Panel - Item Container

item-container

 

Step 3 Create Panel item under the Panel

Item Container and add some buttons and text in the panel.

add-some-buttons

 

Step 4 Duplicate the Panel Items

dublicate-the-panel-item

 

Step 5 Check the Output

Check the output by changing the screen resolutions. Like Bellow is 600 * 1024 resolution output, you can check it in all the resolutions. It will always give the best fit output in every resolution.

screen-resolution

I hope you find this blog very helpful while working with Independent Vertical Layout or Independent Horizontal Layout in Unity UI 4.6. Let me know in comments if you have any question regarding Unity UI.

Got an Idea of Game Development? What are you still waiting for? Contact us now and see the Idea live soon. Our company has been named as one of the best Game Development Company in India.

I am 3D game developer with an aspiration of learning new technology and creating a bright future in Information Technology.