Other Designer Anchors - new feature preview

Erel

B4X founder
Staff member
Licensed User
Longtime User
The next version will include a new designer feature that will make it easier to build flexible interfaces that adapt to the endless range of screen sizes.

Anchors allow you to define a constant distance between the view and one or more of the parent bounds.

For example:

SS-2014-01-14_12.53.44.png


The small arrows in the abstract designer show the set anchors.


SS-2013-12-30_11.10.10.png



SS-2013-12-30_11.09.44.png


As you can see in the above screenshots the set distances are kept.

You can of course create the same layout with the help of a designer script. However anchors make it simpler, especially when there are nested views.

Notes

- Setting the anchors to BOTH will cause the view to change its size, similar to the script SetLeftAndRight / SetTopAndBottom methods.
- Anchors is a designer only feature. This means that changes at runtime (or in the script) will not respect the original anchors. The only exception is AutoScaleAll that does scale the views based on their anchors.
 
Last edited:

aaronk

Well-Known Member
Licensed User
Longtime User
Does this mean if I set the designer to be exactly my screen size of my phone (Layout > Match Connected device) and create the UI in the designer and then compile the app then run it on another phone (smaller screen size) that it should look exactly the same as if it was on my original phone as it was anchored to that location?

Also, is there a ETA on when this new version will be out as I think this feature will help me out heaps in designing the layout of my apps.
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
Not exactly. The distances between the views and their parents are kept.

For example if you set the horizontal anchor to RIGHT then the distance between the view's right edge and its parent right edge will be the same on all devices. Button3 in the above example is anchored to the RIGHT and BOTTOM. So it will be in the bottom-right corner on all devices.

I believe that the next version will be released in a few weeks.
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
I like it very much.

The Designer is a very important part of B4A and "you" could be add many new features, to it.

Too bad that there are not already in my version (selfish, :rolleyes:)


I want to correct myself.

The designer is very helpful and will always be more, but the power of B4A is ...
the fact that I do not have to write a single line in Java!
(and development is much faster than with other tools).
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
Currently the available anchors are: LEFT, RIGHT and BOTH. BOTH is a bit similar to what you are describing.

It is possible to add a CENTER anchor. Though it might be a bit confusing.

Note that you can easily put an image in the center with a designer script:
B4X:
ImageView.HorizontalCenter = 50%x
ImageView.VerticalCenter = 50%y
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
Additional new features:

- Copy & Paste views. Both in the same layout and between other layouts. Very useful.
- Undo / Redo
- Views tree:

SS-2013-12-31_17.46.46.png


- AutoScaleAll can now be used with any variant, not just the "standard" variant.
- The grid is saved in the layout file.
- Landscape / Portrait keywords (in designer script)
- Designer script search / replace form
- And other improvements and fixes...
 
Upvote 0

thedesolatesoul

Expert
Licensed User
Longtime User
Excellent features coming up. This will make the designer extremely useful!


Currently the available anchors are: LEFT, RIGHT and BOTH. BOTH is a bit similar to what you are describing.

It is possible to add a CENTER anchor. Though it might be a bit confusing.

Note that you can easily put an image in the center with a designer script:
B4X:
ImageView.HorizontalCenter = 50%x
ImageView.VerticalCenter = 50%y
Just a note here, what I wanted to do was something like:
ImageView.Left = 50%x - ImageView.Width
with anchoring, I could just anchor it to centre, and set left to -ImageView.Width

Anyway, I am happy either way. There are so many ways to acheive something.

Just one question (I keep forgetting this), in designer scripts does 100%x refer to Activity.Width or to Parent.Width?
 
Upvote 0
Top