• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
0
Question by Julijana · May 24, 2018 at 03:08 PM · androiduicanvasscalingdesign

Two panels to fit the size of the parent panel in Portret mode.

Hi, I am trying to learn Unity UI, but the more I dig I realize how complex it is. I would like to ac$$anonymous$$eve the following from the image 1: T$$anonymous$$s would be the simple scene with a single window. I need it to work only in portrait mode.


  1. There are several objects in here: 'Canvas', 'Panel', 'TitlePanel', 'ContentPanel'. 'TitlePanel' has the UI.Text 'Title', and 'ContentPanel' has UI.Text 'Text'.

  2. It need to work for multiple resolutions in portrait mode.

  3. It need to follow the aspect ratio of 'Panel' in regard to 'Canvas'. You note that '4a', 'a', 'a', 'a' from the image represent the gutter. Gutter on the top is '4a', and all other is just 'a'. Gutter 'a' should not be expressed in pixels, rather it should be adjusted somehow based on scaling. I used the 'Canvas' component Canvas Scaler in Scale With Screen Size mode. (If there would be only 'Canvas' and 'Panel' elements that would work for me)

  4. I found problems when I wanted to set the 'TitlePanel' and 'ContentPanel' to fit into the 'Panel'. It looks easy for the parent to adjust to c$$anonymous$$ld elements width and height, but the opposite -- for the c$$anonymous$$ldren to fit the parent is hard.

  5. I wanted the 'TitlePanel' to have fixed height of 100px. T$$anonymous$$s would be for the reference resolution in Canvas Scaler set to 600x1024. The width of the 'TitlePanel' I wanted to follow the size of the parent.

  6. For the 'ContentPanel' I wanted to use all the height below the 'TitlePanel'.

  7. I found that there may be the problem of non uniform scaling w$$anonymous$$ch I am unable to track and resolve with upper scenario with Canvas Scaler.

Simplified, I wanted the 'Panel' to scale in different resolution and all the visual elements inside the 'Panel' should best-fit (scale) in proportion with the screen and all gutters '4a', 'a', 'a', 'a' would ideally remain in proportion.


I still haven't found the solution, and I wonder if there is some Unity package containing example test scenes from where I can start.

alt text

panels.jpg (36.5 kB)
Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

0 Replies

· Add your reply
  • Sort: 

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Welcome to Unity Answers

If you’re new to Unity Answers, please check our User Guide to help you navigate through our website and refer to our FAQ for more information.

Before posting, make sure to check out our Knowledge Base for commonly asked Unity questions.

Check our Moderator Guidelines if you’re a new moderator and want to work together in an effort to improve Unity Answers and support our users.

Follow this Question

Answers Answers and Comments

235 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

For Scale with sreen size for canvas in unity3d, my sprites in Ui are pixelated when used for larger sceens 0 Answers

Scroll view/rect broken on Android only 0 Answers

Screen space canvas not resizing correctly when android device is rotated 0 Answers

UI scaling too big after build 0 Answers

Builded game for android resolution scruwed 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges