Other Designer Anchors - new feature preview

Discussion in 'Android Questions' started by Erel, Dec 30, 2013.

  1. Erel

    Erel Administrator Staff Member Licensed 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:

    [​IMG]

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


    [​IMG]


    [​IMG]

    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: Jan 14, 2014
  2. YIM bunchhat

    YIM bunchhat Active Member Licensed User

  3. aaronk

    aaronk Well-Known Member Licensed 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.
     
  4. Erel

    Erel Administrator Staff Member Licensed 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.
     
  5. Peter Simpson

    Peter Simpson Well-Known Member Licensed User

    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.
     
    thedesolatesoul likes this.
  6. LucaMs

    LucaMs Expert Licensed 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:)
     
  7. alwaysbusy

    alwaysbusy Well-Known Member Licensed User

    Nice new feature!
     
  8. tuhatinhvn

    tuhatinhvn Active Member Licensed User

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

    Erel Administrator Staff Member Licensed User

    Yes. Copy / Paste between layouts is also planned.

    Undo / Redo feature is already implemented.
     
    Theera, DonManfred and WizardOz like this.
  10. JakeBullet70

    JakeBullet70 Well-Known Member Licensed User

    Erel, you never cease to amaze... :)
     
    Kwame Twum likes this.
  11. LucaMs

    LucaMs Expert Licensed User


    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).
     
    javiers likes this.
  12. thedesolatesoul

    thedesolatesoul Expert Licensed User

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

    Erel Administrator Staff Member Licensed 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:
    Code:
    ImageView.HorizontalCenter = 50%x
    ImageView.VerticalCenter = 50%y
     
  14. Erel

    Erel Administrator Staff Member Licensed User

    Additional new features:

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

    [​IMG]

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

    thedesolatesoul Expert Licensed User

    Excellent features coming up. This will make the designer extremely useful!


    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?
     
  16. NJDude

    NJDude Expert Licensed User

    Activity width.
     
    Last edited: Dec 31, 2013
  17. LucaMs

    LucaMs Expert Licensed User

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

    thedesolatesoul Expert Licensed User

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

    Erel Administrator Staff Member Licensed User

    %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.
     
    Theera and thedesolatesoul like this.
  20. AscySoft

    AscySoft Active Member Licensed User

    Three view will be amazing!
     
Loading...