Author Topic: Resizing scroll view elements and contents  (Read 5544 times)

poolts

  • Newbie
  • *
  • Thank You
  • -Given: 6
  • -Receive: 0
  • Posts: 33
    • View Profile
Resizing scroll view elements and contents
« on: May 22, 2015, 10:37:39 AM »
Hi,

I'm creating rows at run time which are added to a scroll view (each row representing a player in the game).

I want each row to resize to the size of the scrollview (which I've done, but setting it's widget to anchor to the scroll view size).

The scrollview dynamically resizes to a predefined area on the screen.

What I'm trying to work out is how to proportionally space the contents inside the row so they always stay the same distance apart.

I've tried anchoring them all to say the left side of the row, the right side of the row and also each element in the row to the right side of the previous element. However, it either pushes elements to close to each other or outside of the row widget altogether.

Any help would be most appreciated.

I've also included a screenshot of the scroll view (which takes up about 75% of the whole UI). 

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Resizing scroll view elements and contents
« Reply #1 on: May 22, 2015, 05:30:48 PM »
Create a single row, save it as a prefab, instantiate this prefab many times to populate the scroll view. No anchoring necessary.

poolts

  • Newbie
  • *
  • Thank You
  • -Given: 6
  • -Receive: 0
  • Posts: 33
    • View Profile
Re: Resizing scroll view elements and contents
« Reply #2 on: May 27, 2015, 11:26:04 AM »
Hi Aren,

I probably wasn't very concise in what I'm trying to achieve in my OP.

Goal - Make scroll view elements scale to scroll view independent of screen resolution

If you open "No Scaling.png", I'm basically trying to get the rows of the scroll view to scale to the width of the scroll view.

I've tried various UIRoot scaling styles some of which seem to keep the rows correctly scaled, but I'm not entirely sure it's the correct way to do it.

I've also used the following code to manually scale the prefabs widget (m_widget) to match the scroll view edges:

  1. m_widget.leftAnchor.Set(mainMenuAreaTrans, 0f, 0f);
  2. m_widget.rightAnchor.Set(mainMenuAreaTrans, 1f, 0f);
  3.  
  4. m_widget.ResetAndUpdateAnchors();


Problem 2:

After changing the UIRoot scaling to the "Fit" option, the team screen player labels (as shown in "Team Screen - Fit - 1024 x 768.png") are suddenly not in the correct place. However, with only height constrained they appear in the correct place independent of the resolution. Obviously, this isn't the original problem, but they are hugely linked. And it feels like a broader question in terms of what the best UI scaling option would be best for both the scroll view and the player views. The player views themselves (player UILabels) are just labels and sprites (a 2D UI) that are lined up with the 3D models (which always appear in the same places).

If you need any more info / details, I'm happy to share. I know it's a bit of a TL;DR / overflow of info, but I'm just eager to get to the bottom of this :)

Note: I've compressed the hell out of the screenshots to get them under the 1MB limit, so hopefully they're ok.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Resizing scroll view elements and contents
« Reply #3 on: June 01, 2015, 07:50:01 PM »
So why can't you use my suggested approach? Create one row as a child of the scroll view. Anchor it to the scroll view panel exactly as it should be (anchoring left & right only -- don't anchor top and bottom of each row). Save it as a prefab.

At run-time instantiate the rows as many times as needed, each time setting leftAnchor.target and rightAnchor.target references right after. Don't use anchor.Set.