iOS Question B4i ScrollView Questions

[kc1]

I am very new to B4i, and I was having trouble with a feature that worked very well for me in B4A.

I put a ScrollView in Panel1, and then put Panel2 in the ScrollView so that when the device is rotated, the user can use the ScrollView to work on my "form." The form is centered horizontally so it looks consistent on both iPhone and iPad. In the case of an iPhone 4, it would fill the width of the screen, but centered on an iPad.

For some reason, the ScrollView doesn't fill the width of Panel1, and so it clipped the right side of Panel2 which I ported over from my Android project using Bal2Bil.

Also, I couldn't scroll the content vertically of the ScrollView in Panel2 like I could with my Android version. I tried this on my iPad.

In summary, I have 2 issues and 2 questions:

[1] ScrollView would not fill the panel it is in. Panel1 was centered using 50%x.

[2] Content of Panel2 would not scroll up or down in ScrollView.

[3] Is there a way to get the width of the "Activity" or "Page"? I see the "Page1_Resize" event, but not sure how that could help with my ScrollView issue.

[4] How do I change the "Page Title" of a layout in the program loaded with X.RootPanel.LoadLayout("panelLayout")? I can change it in Designer, but I couldn't find a way to change/update it in the program.

Attached is a simple Project1 with the gist of what I'm trying to accomplish with ScrollView. I would appreciate your help.

Thank you!

KC

 

[Erel]

You can change the title with: Page1.Title = "asd"

About the scroll views. The resize events are the key here.

For example start with the resize event of the first panel:

Sub Panel1_Resize (Width As Float, Height As Float)
   ScrollView1.ContentWidth = Width
End Sub

You can also handle the case where the ScrollView inner panel is resized:

Sub ScrollView1_Resize (Width As Float, Height As Float)
   
End Sub

 

[kc1]

Thank you Erel,

I found that Page1.Title = "asd" must be called after loading the layout; otherwise the page title will be overwritten by the title in the layout.

As for scroll view, I did the following and I can now scroll vertically to see the rest of Panel2. HOWEVER, the right side for Panel2 is clipped because of the AutoScaleAll in Panel2's script. I can see that text in the label are scaled up (got bigger)

Sub Panel1_Resize (Width AsFloat, Height AsFloat)
    ScrollView1.ContentWidth = Width
    ScrollView1.ContentHeight = Panel2.Height
End Sub

Sub ScrollView1_Resize (Width AsFloat, Height AsFloat)
    Panel2.Width = Width
End Sub

If I remove AutoScaleAll in Panel2's design script, it will not scroll, but the right side is not clipped because the text size was not scaled up.

So at the moment, I can either have "scrolling with Panel2's right side getting clipped" or "no scrolling with complete width of Panel2 showing).

Your advise please.

Thank you,
KC

 

[kc1]

OK, so I found the reason why it's not scrolling. I had the ScrollView height set larger than Panel1's height.

By setting ScrollView1.Height = Panel1.Height, scrolling worked in both AutoScaleAll and no AutoScale.

Now I need to figure out how to auto scale both Panel1 and Panel2 correctly.

Advise are most welcomed!

Thank you,
KC

 

[Erel]

Can you upload the updated project?

 

[kc1]

Erel,

Attached is the "updated project" that's still not working right.

I did something to my other project and it is scrolling correctly and sizing accordingly, but I can't get this project to do the same. Very strange.

Anyway, per your request, I uploaded my latest project that I messed with and made it worse. See if you can figure out what I did wrong

Also, the "B4I UI Cloud" has been showing me just 2 device types yesterday. I remember it showing me more devices. Yesterday it only showed me iPad and iPhone 6+, and today it is showing iPad and iPhone 5C. Why is that? Is there a setting I changed unintentionally by accident?

Thank you,
KC

 

[Erel]

There are currently 4 devices in the UI Cloud. They do fail from time to time (especially the iPhone 4). Try it again in a few hours and it should usually work better.

What is the purpose of Panel1?

I think that you make things more complicate than they should be.
1. Remove Panel1.
2. Use anchors to attach ScrollView1 to the activity.

All the code you need is:

Private Sub Page1_Resize(Width As Int, Height As Int)
   ScrollView1.ContentWidth = Width
   ScrollView1.ContentHeight = Panel2.Height
   Panel2.Width = Width
End Sub

 

[kc1]

Erel,

I got 4 devices in the UI Cloud this morning. Thank you!

As for Project1, the purpose of Panel1 was to help center ScrollView1 horizontally while preserving the same aspect ratio across different devices. I had to use Panel1 because using "ScrollView1.HorizontalCenter = 50%x" in my designer script did not center my "form" on an iPad.

I modified Project1 per your suggestion and saw different results on an iPhone 4S and an iPad. Text on the iPhone 4S was clipped on the right side in portrait mode. The form (ScrollView1) was not centered in the iPad. Please see attached zip file and screenshot (for the iPhone 4S landscape and portrait modes).

By the way, I found Anchors very helpful!

Thank you,
KC

 

[Erel]

Why is ScrollView1 taller than the page and not anchored to the bottom as well as to the top?

 

[kc1]

Why is ScrollView1 taller than the page and not anchored to the bottom as well as to the top?

Good question The answer is, I didn't know what I was doing as a beginner

Thanks to you, I've learned the importance of anchors.

Attached is my 4th try. It works a lot better now with ScrollView1 anchors set to BOTH.

I also had to turn off Panel2's AutoScaleAll for it to work correctly. AutoScaleAll causes the text to be clipped on the extreme left and extreme right.

I also experienced a strange and interesting effect if I rotate the phone from landscape to portrait continuously, which caused the text to grow in size every time I rotate the phone. I don't remember what combination made it behave this way.

Thank you for your patience with me!

KC