Code-Modified Views and Scaling

[pixelpop]

Could someone post a good explanation/tutorial on how views created in Designer but manipulated in code can be properly sized (scaled) during execution to account for different screen sizes? For instance, I create a Label in Designer but set it's height in code based on the height of the text assigned to that label. Or I create an ImageView in Designer but change it's dimensions in code based on the size of the bitmap loaded into it.

Informatix, if you're reading this, it might make a good "How do they..." post.

 

[lagore]

If you have the latest version 2.2 of B4a then you should be using the designer scripts in the designer using AutoScaleAll with maybe some position tweaks.

 

[pixelpop]

Thanks for the reply, lagore. But that doesn't exactly address my question. It's my understanding that Designer scripts only affect views that are created in Designer. So if I create a view in Designer, and then modify that view's size or position in code, does the view continue to be correctly scaled?

I have a project in which all my views are created in code, so to use Designer scripts I will need to make a massive modification to that project. If views created in Designer and then modified in code lose their scaling scripts, then I have done all that work for nothing.

 

[Erel]

AutoScale and AutoScaleAll scale the designer views when the script runs (after you call LoadLayout). Any later changes will override their effect.

You can use this method to scale a view by code:

Sub ScaleView(v As View, rate As Double)
   Dim delta, scaleRate As Double
   delta = (100%x + 100%y) / ((320 + 430) * 100dip / 100) - 1
   scaleRate = 1 + rate * delta

   v.SetLayout(v.Left * scaleRate, v.Top * scaleRate, v.Width * scaleRate, v.Height * scaleRate)
   If v Is Label Then 'this will catch ALL views with text (EditText, Button, ...)
      Dim lbl As Label = v
      lbl.TextSize = lbl.TextSize * scaleRate
   End If
End Sub

 

[pixelpop]

Thanks, Erel. I'll try that out in my project after I have tested it on another app. At what point in the execution should the sub ScaleView be called?

The attached zip file is a simple project that Klaus posted a while back for how to scroll large amounts of text. The only mod that I have made is to create the ScrollView in Designer rather than code. Two significant points are illustrated here--adding the Label to the ScrollView in code with "Panel.AddView" and adjusting the height of that label using the StringUtils "MeasureMultilineTextHeight" function.

 

[pixelpop]

Erel, looks like we got something here. I tested the app as submitted in the zip file on a Galaxy S2 and S3. On the S3 the ScrollView was narrow and short, but filled the screen on the S2. I added your ScaleView sub and called it immediately after the DoEvents statement in the SetText sub. I used the scvText view as v and 1 for the rate. The app now correctly fills the screen on both the S2 and S3 and the lblText view is the correct height on both. Thanks!!

Edit: I went back to Kruas' original sample app and tried your ScaleView sub. The overall app was correctly sized but the lblText view height was not not correct (too short to display all of the text) after the StringUtils "MeasureMultilineTextHeight" function is executed. So I'm going to have to play with this some before using it in my real-world app, but it appears that at least one view needs to be created in Designer for the Scaleview sub to work.

So, given a screen that has a ScrollView as its container and is populated with buttons, image views, and labels created in code, would you recommend starting with a panel created in Designer and then using the "Panel.AddView" function to add all of the other views to that label so that the ScaleView sub would work properly?

Edit 2: I tried creating a layout with a single panel, then creating a ScrollView attached to the panel with "Panel.AddView", then placing all my other views on the ScrollView in code as I had previously done. The result is the same as before I added the panel in Designer. So I guess I'll keep trying to figure this out because this will be a deal-breaker if I can't get a handle on sizing my app to different screen sizes.

 

[Erel]

It doesn't matter whether you add the panel with the designer or by code. The ScaleView sub should be called for each view that you want to increase its size based on the device physical size.