北向应用:自定义dialog布局实践

鸿蒙时代
发布于 2020-12-7 17:52
浏览
0收藏

研学之自定义dialog布局实践。

显示效果:

  北向应用:自定义dialog布局实践 -鸿蒙开发者社区

点击图中的文字进行下一步

北向应用:自定义dialog布局实践 -鸿蒙开发者社区

 


代码的实现:

第一个布局文件

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <Button
        ohos:id="$+id:text_01"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_size="30fp"
        ohos:text="Dialog显示"
        ohos:top_margin="0vp"
        ohos:text_color="red"/>
</DirectionalLayout>
第二个布局文件
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:padding="10vp"
    ohos:background_element="grey"
    ohos:orientation="vertical">
    <Text
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:text="Dialog标题"
        ohos:text_color="Black"
        ohos:text_style="bold"
        ohos:text_size="40fp"/>
    <Text
        ohos:width="match_parent"
        ohos:height="match_parent"
        ohos:text="自定义Dialog内容"
        ohos:text_color="Black"
        ohos:text_style="bold"
        ohos:weight="1"
        ohos:text_alignment="vertical_center"
        ohos:top_margin="30vp"
        ohos:bottom_margin="30vp"
        ohos:left_margin="10vp"
        ohos:right_margin="10vp"
        ohos:text_size="30fp"/>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal">
        <Button
            ohos:width="match_parent"
            ohos:text="取消"
            ohos:text_size="30fp"
            ohos:padding="10vp"
            ohos:text_color="White"
            ohos:weight="1"
            ohos:margin="10vp"
            ohos:background_element="yellow"
            ohos:height="match_content"/>
        <Button
            ohos:width="match_parent"
            ohos:text="确定"
            ohos:text_size="30fp"
            ohos:weight="1"
            ohos:padding="10vp"
            ohos:text_color="White"
            ohos:margin="10vp"
            ohos:background_element="green"
            ohos:height="match_content"/>
    </DirectionalLayout>
</DirectionalLayout>
然后进行绑定
package com.example.jltfdialog.slice;
import com.example.jltfdialog.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.LayoutScatter;
import ohos.agp.window.dialog.CommonDialog;
public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        CommonDialog commonDialog = new   CommonDialog(this);
       super.setUIContent(ResourceTable.Layout_layout1);
        Button button= (Button) findComponentById(ResourceTable.Id_text_01);
        button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {

                Component component1 =   LayoutScatter.getInstance(getContext())
                        .parse(ResourceTable.Layout_ability_main,   null, true);
                commonDialog.setSize(800, 500);
                commonDialog.setContentCustomComponent(component1);
                commonDialog.show();
            }
        });
    }
    @Override
    public void onActive() {
        super.onActive();
    }
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.

标签
已于2021-4-30 17:18:03修改
2
收藏
回复
举报
2
1
1条回复
按时间正序
/
按时间倒序
云中的雨
云中的雨

感谢,已解决

回复
2021-4-30 16:11:18


回复
    相关推荐
    恭喜您,今日已阅读两篇内容,特奖励+2声望, 快来领取吧。