ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

鸿蒙应用开发培训笔记04:04 UI页面设计与开发

2022-01-18 09:59:54  阅读:160  来源: 互联网

标签:Java 04 鸿蒙 布局 Component UI 组件 directionalLayout


文章目录

零、本讲学习目标

  1. 掌握Java UI的总体架构及常用布局组件的使用
  2. 了解JS UI的总体架构及基本使用方法;
  3. 了解进行用户界面设计的注意事项。

一、Java UI开发

(一)Java UI概述

1、用户界面是如何构建的?

  • 应用的Ability在屏幕上将显示一个用户界面,该界面用来显示所有可被用户查看和交互的内容。应用中所有的用户界面元素都是由组件和布局构成。组件是绘制在屏幕上的一个对象,用户能与之交互。布局是一个用于容纳其他组件和布局对象的容器。
    在这里插入图片描述

2、组件树

(1)Component:组件

提供内容显示,是界面中所有组件的基类,开发者可以给Component设置事件处理回调来创建一个可交互的组件。组件一般直接继承Component或它的子类,如Text、Image等。

(2)ComponentContainer:布局容器

作为容器容纳Component或ComponentContainer对象,并对它们进行布局。

(3)LayoutConfig - 布局配置

每种布局都根据自身特点提供LayoutConfig供子Component设定布局属性和参数,通过指定布局属性可以对子Component在布局中的显示效果进行约束。布局把Component和ComponentContainer以树状的层级结构进行组织,这样的一个布局就称为组件树。

在这里插入图片描述

3、使用 XML 创建布局

在这里插入图片描述

4、使用 Java 创建布局

  • 利用Java代码创建布局
public class ExampleAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        …
        // 声明布局
        DirectionalLayout directionalLayout = new DirectionalLayout(getContext());
        // 设置布局大小
        directionalLayout.setWidth(…);
        // 设置布局属性
        directionalLayout.setOrientation(…);
        // 添加一个Button
        Button button = new Button(getContext());
        // 为组件添加对应布局的布局属性
        DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(…);
        button.setLayoutConfig(layoutConfig);
        …
        // 在组件中增加对点击事件的检测
        button.setClickedListener(…);
        directionalLayout.addComponent(button);
        // 将布局作为根布局添加到视图树中
        super.setUIContent(directionalLayout);
    }
}
  • 预览界面效果
    在这里插入图片描述

(二)常用布局

(三)常用组件

二、JS UI开发

三、UI设计

标签:Java,04,鸿蒙,布局,Component,UI,组件,directionalLayout
来源: https://blog.csdn.net/howard2005/article/details/122553453

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有