The final “variable” implementation of our TableView helps to finish tying everything together. It breaks the four possible flows down into two categories: “Horizontal” or “Vertical”. You can think of this as a “Container”, because it causes the “Content” of the “ScrollRect” to adjust its size as necessary to fit all of the cells we have loaded. In addition, this script is responsible for deciding what kind of Flow to use based on the settings of the “Content” itself.

IContainer

The code below is taken from the “IContainer.cs” script (located in “Scripts/Common/UI/TableView/IContainer/”):

using UnityEngine;
using System.Collections;

namespace TableViewHelpers
{
	public interface IContainer
	{
		IFlow Flow { get; }
		void AutoSize ();
	}
}

It doesn’t get much easier than this. The whole interface consists of a single property and a single method. The method is also simple and requires no parameters.

Implementations

The implementations for each of the two different flows have nearly identical code. There are only subtle differences like using values in the ‘X’ vs ‘Y’ axis. Because they are so similar, I will only show and discuss the first. Feel free to review the other implementation which is included in the proejct on your own. The following code samples are taken from the “VerticalContainer.cs” script. We will begin with the properties and fields:

public IFlow Flow { get; private set; }
ScrollRect ScrollRect;
ISpacer Spacer;

The “Flow” reference is an auto-implemented property which will be created in the constructor of the class. In addition I must maintain a reference to the ScrollRect and Spacer for later use.

public VerticalContainer (ScrollRect scrollRect, ISpacer spacer)
{
	ScrollRect = scrollRect;
	Spacer = spacer;

	if (ScrollRect.content.anchorMax.y > 0.5f)
		Flow = new TopToBottom(scrollRect, spacer);
	else
		Flow = new BottomToTop(scrollRect, spacer);
}

I get references to the “ScrollRect” and “ISpacer” in the constructor and store them for later. I will need both to size the “Content” of the “ScrollRect”. Next, I use the settings of the ScrollRect’s Content’s anchor in order to determine which kind of flow is needed. In this example, a content which is anchored toward the top of its parent indicates that we want to begin by looking at the top and scroll down – a “TopToBottom” flow. If the content is anchored toward the bottom of its parent, then we want the opposite – a “BottomToTop” flow.

public void AutoSize ()
{
	Vector2 contentSize = ScrollRect.content.sizeDelta;
	contentSize.y = Spacer.TotalSize;
	ScrollRect.content.sizeDelta = contentSize;
}

The final and main purpose of this object is to modify the size of the ScrollRect’s content. It gets the “TotalSize” property from the Spacer and then applies it to either the “width” or “height” of the content. For example, a vertically scrolling container modifies the “height” so that cells can stack vertically.

Summary

In Part 5 (of 6) we finished up the last of our interfaces. This last and very simple interface was responsible for tying everything together – it creates a Flow and works with the Spacer to configure elements necessary on setup of the ScrollRect. There are two Container implementation classes, but we only reviewed the first since they are very similar. I will leave it up to you to review the other version on your own.