Designer: Lock Aspect Ratio & Lock Views

[Kevin]

Lock Aspect Ratio:

This probably isn't usually as much of a problem when working with normal buttons and stuff, but when working with custom button graphics (as I am in my current project) it is sometimes a pain to resize them by smaller amounts (after changing the grid to a lower number). Once you start messing with it, it becomes difficult to find the correct ratio again to make it appear as it is intended (not squished or expanded vertically or horizontally). If there were an option to lock the ratio, I could then change only the height (or width) and the width (or height) would automatically change with it to keep the same ratio. Hopefully I have explained that well.


Lock Views:

The ability to lock all views in place would be nice. This way you could click on them to check properties and stuff without them accidentally moving. Seems to happen to me quite often for some reason, even if I am only trying to click on it to select it. Yes, I know I can also select it from the drop-down in the Designer, but still....

 

[Kevin]

After playing around with more layout variants last night, I have another suggestion:

How about an 'adjust' command to automatically adjust the top or left property of all views? This could be done in the Designer itself. Or ability to select multiple views and move them? Also an option to not only move them, but also to adjust their height/width in bulk, either with literal changes or maybe an 'adjust to x% of current size'?

The problem I am having is that my app requires very strict placement of views on the screen. Now that I am trying different AVDs and resolutions to test things, I am finding that I will likely need many different layout variants to ensure that everything looks good on multiple devices. While some variants need some pretty major tweaking, others would have probably been okay to just shift everything over to the right and with a slight size increase, which is a painstaking process with over 40 views that all need to keep pretty specific height to width ratios.

 

[touchsquid]

A solution to multiple screen sizes.

We have solved this problem by using just one layout, then calling the following code to adjust it automatically to each screen size. SetThisLayout recursively crawls all the panels and views, and adjusting each view to the correct size and location for the screen resolution. If you support Portrait and landscape you might need two layouts per activity but never more.

Note the you need one Try-Catch block for each type of view in your layout, so you may finds some missing. Note that this also adjusts text sizes as well.

This saves us countless fiddly hours on each app.

Sub Process_Globals
'These global variables will be declared once when the application starts.
Dim DeviceLV As LayoutValues: DeviceLV = GetDeviceLayoutValues
Dim ScreenHeight As Int: ScreenHeight = DeviceLV.Height
Dim ScreenWidth As Int: ScreenWidth = DeviceLV.Width
Dim Scale As Double: Scale=DeviceLV.Scale
End Sub

Sub SetThisLayout
Dim i As Int
Dim Xscale As Double,Yscale As Double
Xscale =(screenwidth/1024)/scale
Yscale = (screenheight/600)/scale
For i = 0 To activity.NumberOfViews-1
Try
Dim PV As Panel
PV = activity.getView(i)
Dim L As Double,T As Double,W As Double,H As Double
L=PV.left*Xscale:T=PV.top*Yscale:W=PV.width*Xscale:H=PV.height*Yscale
PV.SetLayout(L,T,W,H)
SetLayoutPanel(PV,Xscale,Yscale)
Catch
End Try
Next
End Sub

Sub SetLayoutPanel(P As Panel, Xscale As Double,Yscale As Double)
Dim i As Int
Dim NoGood As Boolean: NoGood=False
For i=0 To P.NumberOfViews
Try
Dim PV As Panel
PV = P.getView(i)
Dim L As Double,T As Double,W As Double,H As Double
L=PV.left*Xscale:T=PV.top*Yscale:W=PV.width*Xscale:H=PV.height*Yscale
PV.SetLayout(L,T,W,H)
SetLayoutPanel(PV,Xscale,Yscale)
NoGood=False
Catch
NoGood=True
End Try
Try
If Nogood Then
Dim LV As Label
LV = P.getView(i)
LV.TextSize=LV.TextSize*Yscale
Dim L As Double,T As Double,W As Double,H As Double
L=LV.left*Xscale:T=LV.top*Yscale:W=LV.width*Xscale:H=LV.height*Yscale
LV.SetLayout(L,T,W,H)
NoGood=False
End If
Catch
NoGood=True
End Try
Try
If Nogood Then
Dim BV As Button
BV = P.getView(i)
BV.TextSize=BV.TextSize*Yscale
Dim L As Double,T As Double,W As Double,H As Double
L=BV.left*Xscale:T=BV.top*Yscale:W=BV.width*Xscale:H=BV.height*Yscale
BV.SetLayout(L,T,W,H)
NoGood=False
End If
Catch
NoGood=True
End Try
Try
If Nogood Then
Dim IV As ImageView
IV = P.getView(i)
Dim L As Double,T As Double,W As Double,H As Double
L=IV.left*Xscale:T=IV.top*Yscale:W=IV.width*Xscale:H=IV.height*Yscale
IV.SetLayout(L,T,W,H)
NoGood=False
End If
Catch
NoGood=True
End Try
Try
If Nogood Then
Dim HV As HorizontalScrollView
HV = P.getView(i)
HV.Panel.Width=HV.Panel.Width*Xscale
Dim L As Double,T As Double,W As Double,H As Double
L=HV.left*Xscale:T=HV.top*Yscale:W=HV.width*Xscale:H=HV.height*Yscale
HV.SetLayout(L,T,W,H)
NoGood=False
End If
Catch
NoGood=True
End Try
Try
If Nogood Then
Dim SB As SeekBar
SB = P.getView(i)
Dim L As Double,T As Double,W As Double,H As Double
L=SB.left*Xscale:T=SB.top*Yscale:W=SB.width*Xscale:H=SB.height*Yscale
SB.SetLayout(L,T,W,H)
NoGood=False
End If
Catch
NoGood=True
End Try
Next
End Sub