Container and scrollable area

Targets iOS
1

I have a container with an imagewell and a Textarea. When I add it to the scrollable area the imagewell and textarea stretch beyond the device width.
How do you restrict the container to the device bounds?

2

You need to manually add a width layout constraint by code.

1 Like
3

Can’t seem to get this correct.
So if I want to set the constraint of the imagewell in the container to the scrollable area width and if I use the following to define the right of the imagewell. What would the syntax be? I’ve looked but can’t see an example I can adapt

Dim right As New iOSLayoutConstraint(me, _
iOSLayoutConstraint.AttributeTypes.Right, _
iOSLayoutConstraint.RelationTypes.Equal, _
Self, iOSLayoutConstraint.AttributeTypes.Right, _
1.0, iOSLayoutConstraint.StandardGap)

4

On the container layout editor make sure the imagewell is constrained to the container’s width.

When adding the container to the scrollable area, define a width layout constraint for the container, relative to the scrollable area.

Constraints must be defined from child to direct parent element. Never to n-th parent element.

5

Still not getting it, I tried the following in the open event of the scrollablearea but still the same

Dim c As iOSLayoutConstraint = Self.Constraint(“Scrollwidth”)
c.Offset = self.ScrollableArea1.Width

6

I think you don’t fully understand how layout constraints work.

This might help:
http://documentation.xojo.com/topics/user_interface/ios/creating_screens_that_auto-resize_using_auto_layout.html

1 Like
7

I’ve done this successfully with an iOSCustomTableCell to adjust the height of the cell, using the technique in the example project included with Xojo (can’t remember the name of the example project).

The label I add the height constraint to doesn’t have the height defined as a constraint in the IDE. Otherwise you’d have 2 conflicting constraints. Maybe that’s the problem.

1 Like
8

Am I suppose to set the Scrollablearea content to my container?

I still can’t reference the controls from the scrollablearea open event to set a constraint

https://rushsoftware.com.au/Files/Scrollabletest.zip

9

I had success doing that also making some customtablecells variations for iPhone vs iPad which worked well but I’m just not getting it. I’ll just keep trying to adapt the examples

10

Hi Martin, is this the same problem?

11

Tried cleaning that up but what is the ‘content’

Dim cons as iOSLayoutConstraint
cons = new iOSLayoutConstraint(content, _
iOSLayoutConstraint.AttributeTypes.Width, _
iOSLayoutConstraint.RelationTypes.Equal, _
ScrollableArea1, _
iOSLayoutConstraint.AttributeTypes.Width, _
1.0, 0)
cons.Active = True
ScrollableArea1.AddConstraint(cons)

12

Probably scollablearea.content it’s a property

13

Genius :slight_smile:

1 Like
14

Thanks Christoph, it makes sense now I see it but I wouldn’t have got the connection without :beers:

15

Not quite there. The textfield and text area are now bound to the width of the scrollarea but I am still having trouble with the Imagewell, most likely because I have defined its height as 35% of the parent screen height which worked fine b4 I made it scrollable. How can I define the height of the imagewell that is in the container to be 35% of the device height?

16

Can you define it as 35% of the scrollable area? Might be a solid workaround if the scrollable area has the same height as the device.

17

I tried the following but the second constraint didn’t work. How would I address just the Imagewell which is control(1)?

Dim c2 As new LargeContainer
c2.Setdata
me.AddControl(c2)

Dim cons as iOSLayoutConstraint
cons = new iOSLayoutConstraint(ScrollableArea1.content, _
iOSLayoutConstraint.AttributeTypes.Width, _
iOSLayoutConstraint.RelationTypes.Equal, _
ScrollableArea1, _
iOSLayoutConstraint.AttributeTypes.Width, _
1.0, 0)
cons.Active = True
ScrollableArea1.AddConstraint(cons)

Dim cons2 as iOSLayoutConstraint
cons2 = new iOSLayoutConstraint(c2.Control(1), _
iOSLayoutConstraint.AttributeTypes.height, _
iOSLayoutConstraint.RelationTypes.Equal, _
ScrollableArea1, _
iOSLayoutConstraint.AttributeTypes.height, _
0.4, 0)
cons2.Active = True
ScrollableArea1.AddConstraint(cons2)

18

I am not sure but I believe the last command is wrong. You should add the constraint cons2 to c2 instead of ScrollableArea1.

1 Like
19

No that can’t work as c2 is a container not a constraint

20

Actually that’s correct @Christoph_Emrich Ahh I left some test data in the container controls so I wasn’t seeing the instance created :blush: which was masking to some extent the constraint effect

Dim c2 As new LargeContainer
//set the data for the container
c2.ImageView1.Image = Unknown
c2.TextArea1.text = InfoText
//add the container
me.AddControl(c2)

//Set the constraint to tie the container to the scrollablearea width
Dim cons as iOSLayoutConstraint
cons = new iOSLayoutConstraint(c2.Control(1), _
iOSLayoutConstraint.AttributeTypes.Width, _
iOSLayoutConstraint.RelationTypes.Equal, _
ScrollableArea1, _
iOSLayoutConstraint.AttributeTypes.Width, _
1.0, 0)

ScrollableArea1.AddConstraint(cons)
cons.Active = True