언어 설정

Menu
Sites
Language
Relative layout in xml, orientation change,

Hello. 

I've got a question about creating UI in Native UI Builder and using LAYOUT_RELATIVE.

I've created a Form using ui builder and relative layout. It has only one Label with attributes "center vertical" and "center horizontal" set to true. 

I expected that after orientation change that Label will automatically change it's position and will be at form's center, but it's coordinates didn't change automatically. 

I've read https://developer.tizen.org/documentation/articles/responsive-ui-tizen-native-applications?langredirect=1. Authors of this article propose to re-calculate control's positions manually.

Is there any solution to re-use UI in other orientation without recalculating control's coordinates manually? It's not difficult in case of one control, but in more complicated layouts it won't be so easy. Maybe I should do something in OnOrientationChanged() method to ask relative layout to re-position controls? Or maybe using UI builder and xml layouts isn't a best way for Tizen?

Thanks for any tips. 

 

답변 바로가기
목록

Responses

6 댓글
Mark as answer
Alex Ashirov

Hi,

According to the documentation: “To support different layouts for portrait and landscape display orientations, you can attach up to two layouts to each container. When only one layout is attached, both the portrait and landscape orientations use the same layout.”

So, it seems that you should describe layout for the landscape mode as well. To do this in the UI builder just select “Landscape” instead of “Portrait” from the listbox at the top of the UI builder. Then you will be able to set "center vertical" and "center horizontal" to true for the Landscape layout.

knazev

Thank you for answer, that's exacly what I'm looking for. 

It wasn't obvious for me, that parameter for both portrait and landscape layouts are set in one xml file. 

Alex Ashirov

You are welcome!

I agree that it’s not clear enough. I spent some time to find this feature, but actually it’s documented:

https://developer.tizen.org/dev-guide/2.2.0/org.tizen.native.appprogramming/html/app_dev_process/designing_landscape_forms.htm

Alex Dem

Hi,
I am not sure that it is properly, but maybe you could edit IDL_FORM.xml manually (edit as text). Find 'Label' tag there are and edit x,y coordinates inside 'layout' tag.
Alexey.

Alex Ashirov

Hi Alexey,

It isn't good idea to modify this file manually. Moreover, there is straightforward way to achieve desired behavior. Please see description above and example below for more details. In general, we just need to have 2 layouts for the each Portrait and Landscape modes.

 

    <Form id="IDL_FORM">
        <property backgroundColor="" backgroundColorOpacity="100" notificationTrayOpenEnabled="false" orientation="Automatic" softKey0NormalIcon="" softKey0PressedIcon="" softKey0Text="" softKey1NormalIcon="" softKey1PressedIcon="" softKey1Text="" title="" titleAlign="ALIGN_CENTER" titleIcon="" translucentFooter="false" translucentHeader="false" translucentIndicator="false"/>
        <layout mode="Portrait" style="FORM_STYLE_PORTRAIT_INDICATOR|FORM_STYLE_HEADER|FORM_STYLE_LANDSCAPE_INDICATOR_AUTO_HIDE" type="LAYOUT_RELATIVE"/>
        <layout mode="Landscape" style="FORM_STYLE_PORTRAIT_INDICATOR|FORM_STYLE_HEADER|FORM_STYLE_LANDSCAPE_INDICATOR_AUTO_HIDE" type="LAYOUT_RELATIVE"/>
    </Form>
    <Header>
        <property accessibilityHint="" backgroundBitmapPath="" color="" colorOpacity="0" descriptionText="" descriptionTextColor="" disabledButtonColor="" disabledButtonColorOpacity="0" disabledButtonTextColor="" disabledItemColor="" disabledItemColorOpacity="0" disabledItemTextColor="" headerStyle="HEADER_STYLE_TITLE" highlightedButtonColor="" highlightedButtonColorOpacity="0" highlightedButtonTextColor="" highlightedItemColor="" highlightedItemColorOpacity="0" highlightedItemTextColor="" normalButtonColor="" normalButtonColorOpacity="0" normalButtonTextColor="" normalItemColor="" normalItemColorOpacity="0" normalItemTextColor="" pressedButtonColor="" pressedButtonColorOpacity="0" pressedButtonTextColor="" pressedItemColor="" pressedItemColorOpacity="0" pressedItemTextColor="" selectedItemColor="" selectedItemColorOpacity="0" selectedItemTextColor="" showBackButton="false" titleIconPath="" titleText="Hello Tizen!" titleTextColor=""/>
        <itemSet/>
    </Header>
    <Label id="IDC_LABEL1" parent="IDL_FORM">
        <property accessibilityHint="" backgroundBitmapPath="" backgroundColor="" backgroundColorOpacity="0" horizontalAlign="ALIGN_CENTER" leftMargin="16" text="Label1" textColor="" textSize="32.0" textStyle="LABEL_TEXT_STYLE_NORMAL" topMargin="0" verticalAlign="ALIGN_MIDDLE"/>
        <layout bottomRelation="" bottomRelationType="" centerHorizontal="true" centerVertical="true" height="45.0" horizontalFitPolicy="FIT_POLICY_FIXED" leftRelation="" leftRelationType="" marginBottom="0.0" marginLeft="0.0" marginRight="0.0" marginTop="0.0" mode="Portrait" rightRelation="" rightRelationType="" topRelation="" topRelationType="" verticalFitPolicy="FIT_POLICY_FIXED" width="215.0" x="252.5" y="539.5"/>
        <layout bottomRelation="" bottomRelationType="" centerHorizontal="true" centerVertical="true" height="112.0" horizontalFitPolicy="FIT_POLICY_FIXED" leftRelation="" leftRelationType="" marginBottom="0.0" marginLeft="0.0" marginRight="0.0" marginTop="0.0" mode="Landscape" rightRelation="" rightRelationType="" topRelation="" topRelationType="" verticalFitPolicy="FIT_POLICY_FIXED" width="720.0" x="0.0" y="258.5"/>
    </Label>

 

Alex Dem

Hi Alex,
I just proposed as variant.
Alexey.