Adding a background to the scroll list

[chemari]

Hi, I am using an enhanced scroller to show a vertical list of items. I would like to put a specific background image within this scroller, so the image moves with the items when the user scrolls.

I have tried to put this image in the container of the items (with a LayoutElement ->Ignore layout so it doesnt become part of the items list), but EnhancedScroller is emptying this container when the game is played. 

Which is the right way of doing this?
Thanks!

[echo17]

One way I would suggest is to place your image in the Canvas above the scroller:



You'll need to set the alpha on your ScrollRect Image to a very low value, like one. You can't set to zero since Unity will make all the elements in the ScrollRect invisible if you do.



You can then have something like this in your code:

   private Data _data;
   public EnhancedScroller scroller;
   public EnhancedScrollerCellView cellViewPrefab;
   public TextAsset json_data;
   public UnityEngine.UI.Image image;

   private float _imageYOffset;

   void Start()
   {
       _imageYOffset = image.transform.localPosition.y - scroller.ScrollPosition;

       Application.targetFrameRate = 60;
       scroller.Delegate = this;
       scroller.scrollerScrolled = ScrollerScrolled;

       LoadData();

       scroller.ReloadData();
   }

   private void ScrollerScrolled(EnhancedScroller theScroller, Vector2 val, float scrollPosition)
   {
       image.transform.localPosition = new Vector3(image.transform.localPosition.x, scrollPosition + _imageYOffset, image.transform.localPosition.z);
   }

In the Start method, it grabs the y offset of the image from the scroll position, then sets the scrollerScrolled delegate.

In the ScrollerScrolled callback, the image's transform is updated based on the scroll position. Note that the y is adjusted by the y offset calculated in the Start method.

This is obviously for a vertical scroller. If you have a horizontal one, you will need to calculate the x offset in Start and set the transform based on the x position instead of the y position. There are probably dozens of other ways to accomplish this, but this was the first one that came to me.