Search Unity

  1. Improved Prefab workflow (includes Nested Prefabs!), 2D isometric Tilemap and more! Get the 2018.3 Beta now.
    Dismiss Notice
  2. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  3. Let us know a bit about your interests, and if you'd like to become more directly involved. Take our survey!
    Dismiss Notice
  4. Improve your Unity skills with a certified instructor in a private, interactive classroom. Watch the overview now.
    Dismiss Notice
  5. 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:
    548
    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:
    397
    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>();
    3. fitter.aspectRatio = aspectRatio;
     
    siddharth3322 likes this.
  3. siddharth3322

    siddharth3322

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