dlangui icon indicating copy to clipboard operation
dlangui copied to clipboard

Alignment and scale in DML?

Open vennos5 opened this issue 6 years ago • 6 comments

I read widget properties from here https://github.com/buggins/dlangui/wiki/Using-DML-to-create-layouts. However I get runtime error when trying to use align property, as if it doesn't exist. What is correct way to do it?

window.mainWidget = parseML(q{
    VerticalLayout {
        margins: 10pt
        layoutWidth: fill
        TextWidget { text: "Hello Android!"; textColor: "red"; align: "HCenter" }
        HorizontalLayout {
            Button { id: btnOk; text: "Ok" }
            Button { id: btnCancel; text: "Cancel" }
        }
    }
});

exception while parsing MLdlangui.dml.tokenizer.ParserException@mybuildpath/dlangui/dml/tokenizer.d(93): unknown string property align near `lign: "hcenter"^^^ }` at line 6 column 92

Other problem I'm facing is how to scale VerticalLayout contents so that they can fit the draw area? To illustrate the problem let's say in my phone screen text fits in fontSize: 6pt, but adding any padding or margin makes it not fit and needs down resize or it gets cut halfway. Even if I specify some hardcoded font size, it would break if i tried on different device.. This looks pretty ugly:

vennos5 avatar Nov 11 '17 12:11 vennos5

Other problem I'm facing is how to scale VerticalLayout contents so that they can fit the draw area? To illustrate the problem let's say in my phone screen text fits in fontSize: 6pt, but adding any padding or margin makes it not fit and needs down resize or it gets cut halfway. Even if I specify some hardcoded font size, it would break if i tried on different device.. This looks pretty ugly:

You can set layoutWidth and layout Height. Code example (but in DML should be similar):

vLayout.layoutWidth(FILL_PARENT).layoutHeight(FILL_PARENT);

and3md avatar Nov 11 '17 15:11 and3md

layoutWidth (and height) does some changes on how items are shown but it does nothing to resize font. There is no built in way to scale fonts? Or is this android only problem?

EDIT: This is source of the image https://github.com/vennos5/dlangui/blob/androidfix/examples/android/jni/app.d

vennos5 avatar Nov 11 '17 18:11 vennos5

There are systemScreenDPI, overrideScreenDPI and SCREEN_DPI() in types.d. They are working in SDL platform for example. If you use font size in points and make overrideScreenDPI (and Platform.instance.onThemeChanged(); after this) they will change size.

Maybe on android this is not implemented yet.

and3md avatar Nov 11 '17 18:11 and3md

You can try change windowOrContentResizeMode to shrinkWidgets. Default value scrollWindow adds scroll bars if content is bigger than window. This is the best option for desktop apps.

window.windowOrContentResizeMode = WindowOrContentResizeMode.shrinkWidgets;

Maybe shrinkWidgets algorithm should be expanded to change dpi or new option WindowOrContentResizeMode.changeDPI should be added.

and3md avatar Nov 11 '17 19:11 and3md

try fontSize: 50%

buggins avatar Nov 14 '17 06:11 buggins

I think if font size is not specified, it should shrink to try and fit items in available space. Not perfect but using MultilineTextWidget and PRIVATE_SCREEN_DPI_OVERRIDE = 340 it looks good on my phone screen (except red text, for some reason). Also i have no idea what DPI is correct but it seems to be about right.

vennos5 avatar Nov 14 '17 16:11 vennos5