Other Designer Anchors - new feature preview

[Erel]

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:

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

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.

 

[YIM bunchhat]

So cool

 

[aaronk]

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.

 

[Erel]

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.

 

[Peter Simpson]

Nice work Erel, cheers

Also thanks again for the G+ post, as that's where I've been getting your new feature updates for B4A and B4J.

 

[LucaMs]

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, )

 

[alwaysbusy]

Nice new feature!

 

[tuhatinhvn]

you can add feature to enable copy and paste control from each other bal files

 

[Erel]

you can add feature to enable copy and paste control from each other bal files

Yes. Copy / Paste between layouts is also planned.

Undo / Redo feature is already implemented.

 

[JakeBullet70]

Erel, you never cease to amaze...

 

[LucaMs]

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, )

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).

 

[thedesolatesoul]

Can we anchor to CENTRE?
That way I can place an image in the dead centre?

 

[Erel]

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:

ImageView.HorizontalCenter = 50%x
ImageView.VerticalCenter = 50%y

 

[Erel]

Additional new features:

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

- 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...

 

[thedesolatesoul]

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:

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?

 

[NJDude]

100%x refer to Activity.Width or to Parent.Width?

Activity width.

 

[LucaMs]

Very useful, specially the copy&paste, i think.

 

[thedesolatesoul]

Activity width.

I see. Is it somehow possible to refer to the parent width in case the layout is loaded in a scrollview or something?

 

[Erel]

%x / %y in the designer script refer to the main parent. Usually it is the activity. However if you load the layout with Panel1.LoadLayout then it will be relative to Panel1.

 

[AscySoft]

Three view will be amazing!