Search Unity

  1. Get all the Unite Berlin 2018 news on the blog.
    Dismiss Notice
  2. Unity 2018.2 has arrived! Read about it here.
    Dismiss Notice
  3. We're looking for your feedback on the platforms you use and how you use them. Let us know!
    Dismiss Notice
  4. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  5. Improve your Unity skills with a certified instructor in a private, interactive classroom. Learn more.
    Dismiss Notice
  6. ARCore is out of developer preview! Read about it here.
    Dismiss Notice
  7. Magic Leap’s Lumin SDK Technical Preview for Unity lets you get started creating content for Magic Leap One™. Find more information on our blog!
    Dismiss Notice
  8. Want to see the most recent patch releases? Take a peek at the patch release page.
    Dismiss Notice

Unity UI Display loaded UI Image in Container with native size

Discussion in 'Unity UI & TextMesh Pro' started by siddharth3322, Jun 13, 2018.

  1. siddharth3322

    siddharth3322

    Joined:
    Nov 29, 2013
    Posts:
    526
    I want to display UI logo images in their aspect ratio but in proper size that fit within its container. Already all logo images as per aspect ratio but few are too big or small compare to requirements.

    At present this kind of thing happening:
    dodgels_company_logos_list.png

    Here is the code that I am using:

    Code (CSharp):
    1. private void ShowGamePlayLogoViewed ()
    2. {
    3.     for (int i = 0; i < DataCollection.companyDetailsList.Count; i++) {
    4.         Company company = DataCollection.companyDetailsList [i];
    5.         if (company.ViewedCounter > 0) {
    6.             GameObject companyItemObj = Instantiate (companyItemPref, gridViewContainer) as GameObject;
    7.             CompanyItem companyItem = companyItemObj.GetComponent<CompanyItem> ();
    8.             companyItem.companyId = company.CompanyId;
    9.             companyItem.UpdateCompanyLogo (company.CompanyLogo);
    10.             companyItem.UpdateCompanyName (company.CompanyName);
    11.         }
    12.     }
    13. }
    14. public void UpdateCompanyLogo (Sprite logoSprite)
    15. {
    16.     logoImage.sprite = logoSprite;
    17.     logoImage.SetNativeSize ();
    18. }
    19.  
    As per you are seeing, logos overlapping the container. I want to display properly them in their respective containers also in aspect ratio too.

    Please give me some help so that I can set properties like that way. Let me clear one more thing, all logos loaded from web server and they all are dynamic at a time, based on server data it will appear in mobile screen.
     
    Last edited: Jun 13, 2018
  2. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    352
    adjust the image game object inside unity so that it has the height you are looking for. also adjust the anchors so that it scales with different resolutions properly.
    Add an "AspectRatioFitter" component to the object. Make it "Height controls width".
    Instead of
    logoImage.SetNativeSize ();
    do the following:
    Code (CSharp):
    1. float aspectRatio = logoSprite.rect.width / logoSprite.rect.height;
    2. var fitter = logoImage.GetComponent<UnityEngine.UI.AspectRatioFitter>();
     
    siddharth3322 likes this.
  3. siddharth3322

    siddharth3322

    Joined:
    Nov 29, 2013
    Posts:
    526
    @Hosnkobf thank you so much for your clever help :)
    This work perfectly for my requirements.
     
    Hosnkobf likes this.