AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

HarmonyOS学习路之开发篇—Java UI框架(自定义组件与布局 一)

2023-08-05 197
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： HarmonyOS提供了一套复杂且强大的Java UI框架，其中Component提供内容显示，是界面中所有组件的基类。ComponentContainer作为容器容纳Component或ComponentContainer对象，并对它们进行布局。

HarmonyOS提供了一套复杂且强大的Java UI框架，其中Component提供内容显示，是界面中所有组件的基类。ComponentContainer作为容器容纳Component或ComponentContainer对象，并对它们进行布局。


Java UI框架也提供了一部分Component和ComponentContainer的具体子类，即常用的组件（比如：Text、Button、Image等）和常用的布局（比如：DirectionalLayout、DependentLayout等）。如果现有的组件和布局无法满足设计需求，例如仿遥控器的圆盘按钮、可滑动的环形控制器等，可以通过自定义组件和自定义布局来实现。


自定义组件是由开发者定义的具有一定特性的组件，通过扩展Component或其子类实现，可以精确控制屏幕元素的外观，也可响应用户的点击、触摸、长按等操作。


自定义布局是由开发者定义的具有特定布局规则的容器类组件，通过扩展ComponentContainer或其子类实现，可以将各子组件摆放到指定的位置，也可响应用户的滑动、拖拽等事件。


自定义组件

当Java UI框架提供的组件无法满足设计需求时，可以创建自定义组件，根据设计需求添加绘制任务，并定义组件的属性及事件响应，完成组件的自定义。


常用接口


image.png


如何实现自定义组件

下面以自定义圆环组件为例，介绍自定义组件的通用配置方法：在屏幕中绘制圆环，并实现点击改变圆环颜色的功能。


在界面中显示的自定义圆环组件



f74a90968dd0614a59695807ad658925.gif

1. 创建自定义组件的类，并继承Component或其子类，添加构造方法。


示例代码如下

public class CustomComponent extends Component{
    public CustomComponent(Context context) {
        this(context, null);
    }
    //如需支持xml创建自定义组件，必须添加该构造方法
    public CustomComponent(Context context, AttrSet attrSet) {
        super(context, attrSet);
    }
}

2. 实现Component.EstimateSizeListener接口，在onEstimateSize方法中进行组件测量，并通过setEstimatedSize方法通知组件。

示例代码如下：

public class CustomComponent extends Component implements Component.EstimateSizeListener {
    //240为组件默认大小
    public int width = 240;
    public int height = 240;
    public CustomComponent(Context context, AttrSet attrSet) {
        ...
        // 设置测量组件的侦听器
        setEstimateSizeListener(this);
    }
    ...
    @Override
    public boolean onEstimateSize(int widthEstimateConfig, int heightEstimateConfig) {
        int widthSpce = EstimateSpec.getMode(widthEstimateConfig);
        int heightSpce = EstimateSpec.getMode(heightEstimateConfig);
        int widthConfig = 0;
        switch (widthSpce) {
            case EstimateSpec.UNCONSTRAINT:
            case EstimateSpec.PRECISE:
                width = EstimateSpec.getSize(widthEstimateConfig);
                widthConfig = EstimateSpec.getSizeWithMode(width, EstimateSpec.PRECISE);
                break;
            case EstimateSpec.NOT_EXCEED:
                widthConfig = EstimateSpec.getSizeWithMode(width, EstimateSpec.PRECISE);
                break;
            default:
                break;
        }
        int heightConfig = 0;
        switch (heightSpce) {
            case EstimateSpec.UNCONSTRAINT:
            case EstimateSpec.PRECISE:
                height = EstimateSpec.getSize(heightEstimateConfig);
                heightConfig = EstimateSpec.getSizeWithMode(height, EstimateSpec.PRECISE);
                break;
            case EstimateSpec.NOT_EXCEED:
                heightConfig = EstimateSpec.getSizeWithMode(height, EstimateSpec.PRECISE);
                break;
            default:
                break;
        }
        setEstimatedSize(widthConfig, heightConfig);
        return true;
    }
}

注意事项

1.自定义组件测量出的大小需通过setEstimatedSize通知组件，并且必须返回true使测量值生效。

2.setEstimatedSize方法的入参携带模式信息，可使用Component.EstimateSpec.getSizeWithMode方法进行拼接。

测量模式

测量组件的宽高需要携带模式信息，不同测量模式下的测量结果也不相同，需要根据实际需求选择适合的测量模式。


       测量模式信息



image.png


3. 自定义xml属性，通过构造方法中携带的参数attrSet，可以获取到在xml中配置的属性值，并应用在该自定义组件中。


示例代码如下：


public class CustomComponent extends Component implements Component.EstimateSizeListener {
    private static final String ATTR_RING_WIDTH = "ring_width";
    private static final String ATTR_RING_RADIUS = "ring_radius";
    private static final String ATTR_DEFAULT_COLOR = "default_color";
    private static final String ATTR_PRESSED_COLOR = "pressed_color";
    public float ringWidth = 20f; //圆环宽度
    public float ringRadius = 100f; //圆环半径
    public Color defaultColor = Color.YELLOW; //默认颜色
    public Color pressedColor = Color.CYAN; //按压态颜色   
    public CustomComponent(Context context, AttrSet attrSet) {
     ...
    //初始化xml属性
        initAttrSet(attrSet);
    }
    private void initAttrSet(AttrSet attrSet) {
        if (attrSet == null) return;
        if (attrSet.getAttr(ATTR_DEFAULT_COLOR).isPresent()) {
            defaultColor = attrSet.getAttr(ATTR_DEFAULT_COLOR).get().getColorValue();
        }
        if (attrSet.getAttr(ATTR_RING_WIDTH).isPresent()) {
            ringWidth = attrSet.getAttr(ATTR_RING_WIDTH).get().getDimensionValue();
        }
        if (attrSet.getAttr(ATTR_RING_RADIUS).isPresent()) {
            ringRadius = attrSet.getAttr(ATTR_RING_RADIUS).get().getDimensionValue();
        }
        if (attrSet.getAttr(ATTR_PRESSED_COLOR).isPresent()) {
            pressedColor = attrSet.getAttr(ATTR_PRESSED_COLOR).get().getColorValue();
        }
    }   
}


4. 实现Component.DrawTask接口，在onDraw方法中执行绘制任务，该方法提供的画布Canvas，可以精确控制屏幕元素的外观。在执行绘制任务之前，需要定义画笔Paint。


示例代码如下：


public class CustomComponent extends Component implements Component.DrawTask,Component.EstimateSizeListener {
    // 绘制圆环的画笔
    private Paint circlePaint;    
    public CustomComponen(Context context, AttrSet attrSet) {
        ...
        // 初始化画笔
        initPaint();
        // 添加绘制任务
        addDrawTask(this);
    }
    private void initPaint(){
        circlePaint = new Paint();
        circlePaint.setColor(defaultColor);
        circlePaint.setStrokeWidth(ringWidth);
        circlePaint.setStyle(Paint.Style.STROKE_STYLE);
    }
    @Override
    public void onDraw(Component component, Canvas canvas) {
        int x = width / 2;
        int y = height / 2;
        canvas.drawCircle(x, y, ringRadius, circlePaint);
    }
    ...
}


5. 实现Component.TouchEventListener或其他事件的接口，使组件可响应用户输入。


示例代码如下


public class CustomComponent extends Component implements Component.DrawTask, Component.EstimateSizeListener, Component.TouchEventListener {
    ...
    public CustomComponent(Context context, AttrSet attrSet) {
        ...
        // 设置TouchEvent响应事件
        setTouchEventListener(this);
    }
    ...
    @Override
    public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
        switch (touchEvent.getAction()) {
            case TouchEvent.PRIMARY_POINT_DOWN:
                circlePaint.setColor(pressedColor);
                invalidate();
                break;
            case TouchEvent.PRIMARY_POINT_UP:
                circlePaint.setColor(defaultColor);
                invalidate();
                break;
        }
        return true;
    }
}


注意：


1.需要更新UI显示时，可调用invalidate()方法。

2.示例中展示TouchEventListener为响应触摸事件，除此之外还可实现ClickedListener响应点击事件、LongClickedListener响应长按事件等。

6. 在xml文件中创建并配置自定义组件


<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    xmlns:custom="http://schemas.huawei.com/res/custom"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <!-- 请根据实际包名和文件路径引入-->
    <com.huawei.harmonyosdemo.custom.CustomComponent
        ohos:height="300vp"
        ohos:width="match_parent"
        ohos:background_element="black"
        ohos:clickable="true"
        custom:default_color="gray"
        custom:pressed_color="red"
        custom:ring_width="20vp"
        custom:ring_radius="120vp"/>
</DirectionalLayout>


场景示例

利用自定义组件，绘制环形进度控制器，可通过滑动改变当前进度，也可响应进度的改变，UI显示的样式也可通过设置属性进行调整。


自定义环形进度控制器


89e7bdf170227af4a4567fb0a314cee1.gif


示例代码如下：

public class CustomControlBar extends Component implements Component.DrawTask,
    Component.EstimateSizeListener, Component.TouchEventListener {
    private final static String ATTR_UN_FILL_COLOR = "unfill_color";
    private final static String ATTR_FILL_COLOR = "fill_color";
    private final static String ATTR_CIRCLE_WIDTH = "circle_width";
    private final static String ATTR_COUNT = "count";
    private final static String ATTR_CURRENT_PROGRESS = "current_progress";
    private final static String ATTR_SPLIT_SIZE = "split_size";
    private final static String ATTR_CIRCLE_RADIUS = "circle_radius";
    private final static String ATTR_CENTER_PIXELMAP = "center_pixelmap";
    private final static float CIRCLE_ANGLE = 360.0f;
    private final static int DEF_UNFILL_COLOR = 0xFF808080;
    private final static int DEF_FILL_COLOR = 0xFF1E90FF;
    public int width = 240;
    public int height = 240;
    // 圆环轨道颜色
    private Color unFillColor = new Color(DEF_UNFILL_COLOR);
    // 圆环覆盖颜色
    private Color fillColor = new Color(DEF_FILL_COLOR);
    // 圆环宽度
    private int circleWidth = 30;
    // 画笔
    private final Paint paint;
    // 个数
    private int count = 10;
    // 当前进度
    private int currentCount = 0;
    // 间隙值
    private int splitSize = 10;
    // 内圆的正切方形
    private final RectFloat centerRectFloat = new RectFloat();
    // 中心绘制的图片
    private PixelMap image = null;
    private int radius = 100;
    // 原点坐标
    private Point centerPoint;
    // 进度改变的事件响应
    private ProgressChangeListener listener;
    public CustomControlBar(Context context) {
        this(context, null);
    }
    public CustomControlBar(Context context, AttrSet attrSet) {
        super(context, attrSet);
        paint = new Paint();
        initAttrSet(attrSet);
        setEstimateSizeListener(this);
        if (!isClickable()) setClickable(true);
        setTouchEventListener(this);
        addDrawTask(this);
        listener = null;
    }
    // 初始化属性值
    private void initAttrSet(AttrSet attrSet) {
        if (attrSet == null) return;
        if (attrSet.getAttr(ATTR_UN_FILL_COLOR).isPresent()) {
            unFillColor = attrSet.getAttr(ATTR_UN_FILL_COLOR).get().getColorValue();
        }
        if (attrSet.getAttr(ATTR_FILL_COLOR).isPresent()) {
            fillColor = attrSet.getAttr(ATTR_FILL_COLOR).get().getColorValue();
        }
        if (attrSet.getAttr(ATTR_CIRCLE_WIDTH).isPresent()) {
            circleWidth = attrSet.getAttr(ATTR_CIRCLE_WIDTH).get().getDimensionValue();
        }
        if (attrSet.getAttr(ATTR_COUNT).isPresent()) {
            count = attrSet.getAttr(ATTR_COUNT).get().getIntegerValue();
        }
        if (attrSet.getAttr(ATTR_CURRENT_PROGRESS).isPresent()) {
            currentCount = attrSet.getAttr(ATTR_CURRENT_PROGRESS).get().getIntegerValue();
        }
        if (attrSet.getAttr(ATTR_SPLIT_SIZE).isPresent()) {
            splitSize = attrSet.getAttr(ATTR_SPLIT_SIZE).get().getIntegerValue();
        }
        if (attrSet.getAttr(ATTR_CIRCLE_RADIUS).isPresent()) {
            radius = attrSet.getAttr(ATTR_CIRCLE_RADIUS).get().getDimensionValue();
        }
        if (attrSet.getAttr(ATTR_CENTER_PIXELMAP).isPresent()) {
            Element element = attrSet.getAttr(ATTR_CENTER_PIXELMAP).get().getElement();
            if (element instanceof PixelMapElement) {
                image = ((PixelMapElement) element).getPixelMap();
            }
        }
    }
    @Override
    public boolean onEstimateSize(int widthEstimateConfig, int heightEstimateConfig) {
        int widthSpce = EstimateSpec.getMode(widthEstimateConfig);
        int heightSpce = EstimateSpec.getMode(heightEstimateConfig);
        int widthConfig = 0;
        switch (widthSpce) {
            case EstimateSpec.UNCONSTRAINT:
            case EstimateSpec.PRECISE:
                width = EstimateSpec.getSize(widthEstimateConfig);
                widthConfig = EstimateSpec.getSizeWithMode(width, EstimateSpec.PRECISE);
                break;
            case EstimateSpec.NOT_EXCEED:
                widthConfig = EstimateSpec.getSizeWithMode(width, EstimateSpec.PRECISE);
                break;
            default:
                break;
        }
        int heightConfig = 0;
        switch (heightSpce) {
            case EstimateSpec.UNCONSTRAINT:
            case EstimateSpec.PRECISE:
                height = EstimateSpec.getSize(heightEstimateConfig);
                heightConfig = EstimateSpec.getSizeWithMode(height, EstimateSpec.PRECISE);
                break;
            case EstimateSpec.NOT_EXCEED:
                heightConfig = EstimateSpec.getSizeWithMode(height, EstimateSpec.PRECISE);
                break;
            default:
                break;
        }
        System.out.println("WYT_width:" + width + "   height:" + height + "     width_spec:" + widthSpce + "     height_spec:" + heightSpce);
        setEstimatedSize(widthConfig, heightConfig);
        return true;
    }
    @Override
    public void onDraw(Component component, Canvas canvas) {
        paint.setAntiAlias(true);
        paint.setStrokeWidth(circleWidth);
        paint.setStrokeCap(Paint.StrokeCap.ROUND_CAP);
        paint.setStyle(Paint.Style.STROKE_STYLE);
        int min = Math.min(width, height);
        radius = (min >> 1) - circleWidth;
        centerPoint = new Point(width >> 1, height >> 1);
        drawCount(canvas);
        if (image != null) {
            int inRadius = radius - (circleWidth >> 1);
            centerRectFloat.left = (float) (width / 2 - Math.sqrt(2) * inRadius);
            centerRectFloat.top = (float) (height / 2 - Math.sqrt(2) * inRadius);
            centerRectFloat.right = (float) (width / 2 + Math.sqrt(2) * inRadius);
            centerRectFloat.bottom = (float) (height / 2 + Math.sqrt(2) * inRadius);
            // 如果图片比较小，那么根据图片的尺寸放置到正中心
            Size imageSize = image.getImageInfo().size;
            if (imageSize.width < Math.sqrt(2) * inRadius) {
                centerRectFloat.left = (width - imageSize.width * 1.0f) / 2;
                centerRectFloat.top = (height - imageSize.height * 1.0f) / 2;
                centerRectFloat.right = (width + imageSize.width * 1.0f) / 2;
                centerRectFloat.bottom = (height + imageSize.height * 1.0f) / 2;
            }
            canvas.drawPixelMapHolderRect(new PixelMapHolder(image), centerRectFloat, paint);
        }
    }
    private void drawCount(Canvas canvas) {
        float itemSize = (CIRCLE_ANGLE - count * splitSize) / count;
        RectFloat oval = new RectFloat(centerPoint.getPointX() - radius, centerPoint.getPointY() - radius,
            centerPoint.getPointX() + radius, centerPoint.getPointY() + radius);
        paint.setColor(unFillColor);
        for (int i = 0; i < count; i++) {
            Arc arc = new Arc((i * (itemSize + splitSize)) - 90, itemSize, false);
            canvas.drawArc(oval, arc, paint);
        }
        paint.setColor(fillColor);
        for (int i = 0; i < currentCount; i++) {
            Arc arc = new Arc((i * (itemSize + splitSize)) - 90, itemSize, false);
            canvas.drawArc(oval, arc, paint);
        }
    }
    @Override
    public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
        switch (touchEvent.getAction()) {
            case TouchEvent.PRIMARY_POINT_DOWN:
            case TouchEvent.POINT_MOVE:
                MmiPoint absPoint = touchEvent.getPointerPosition(touchEvent.getIndex());
                Point point = new Point(absPoint.getX(), absPoint.getY());
                System.out.println("wyt_centerPoint:" + centerPoint + "   point:" + point);
                double angle = calcRotationAngleInDegrees(centerPoint, point);
                double multiple = angle / (CIRCLE_ANGLE / count);
                if ((multiple - (int) multiple) > 0.4) {
                    currentCount = (int) multiple + 1;
                } else {
                    currentCount = (int) multiple;
                }
                if (listener != null) {
                    listener.onProgressChangeListener(currentCount);
                }
                invalidate();
                break;
        }
        return true;
    }
    public interface ProgressChangeListener {
        void onProgressChangeListener(int Progress);
    }
    // 计算centerPt到targetPt的夹角，单位为度。返回范围为[0, 360)，顺时针旋转。
    private double calcRotationAngleInDegrees(Point centerPt, Point targetPt) {
        double theta = Math.atan2(targetPt.getPointY()
            - centerPt.getPointY(), targetPt.getPointX()
            - centerPt.getPointX());
        theta += Math.PI / 2.0;
        double angle = Math.toDegrees(theta);
        if (angle < 0) {
            angle += CIRCLE_ANGLE;
        }
        return angle;
    }
    public Color getUnFillColor() {
        return unFillColor;
    }
    public CustomControlBar setUnFillColor(Color unFillColor) {
        this.unFillColor = unFillColor;
        return this;
    }
    public Color getFillColor() {
        return fillColor;
    }
    public CustomControlBar setFillColor(Color fillColor) {
        this.fillColor = fillColor;
        return this;
    }
    public int getCircleWidth() {
        return circleWidth;
    }
    public CustomControlBar setCircleWidth(int circleWidth) {
        this.circleWidth = circleWidth;
        return this;
    }
    public int getCount() {
        return count;
    }
    public CustomControlBar setCount(int count) {
        this.count = count;
        return this;
    }
    public int getCurrentCount() {
        return currentCount;
    }
    public CustomControlBar setCurrentCount(int currentCount) {
        this.currentCount = currentCount;
        return this;
    }
    public int getSplitSize() {
        return splitSize;
    }
    public CustomControlBar setSplitSize(int splitSize) {
        this.splitSize = splitSize;
        return this;
    }
    public PixelMap getImage() {
        return image;
    }
    public CustomControlBar setImage(PixelMap image) {
        this.image = image;
        return this;
    }
    public void build() {
        invalidate();
    }
    public void setProgressChangerListener(ProgressChangeListener listener) {
        this.listener = listener;
    }
}

在xml中创建该自定义组件，并设置其属性。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    xmlns:custom="http://schemas.huawei.com/res/custom"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <!-- 请根据实际包名和文件路径引入-->
    <com.huawei.harmonyosdemo.custom.CustomControlBar
        ohos:id="$+id:custom_control_bar"
        ohos:height="200vp"
        ohos:width="match_parent"
        ohos:background_element="black"
        ohos:top_margin="50vp"
        custom:center_pixelmap="$media:icon"
        custom:circle_radius="80vp"
        custom:circle_width="15vp"
        custom:count="10"
        custom:current_progress="5"
        custom:fill_color="#1e90ff"
        custom:split_size="13"
        custom:unfill_color="gray"/>  
</DirectionalLayout>
文章标签：
Java
前端开发
容器
数据格式
开发者
XML
关键词：
HarmonyOS UI
HarmonyOS组件
HarmonyOS自定义
HarmonyOS开发
开发UI
爱吃土豆丝的打工人
目录
相关文章
API小知识
|
8天前
|
Java API Maven
如何使用Java开发抖音API接口？
在数字化时代，社交媒体平台如抖音成为生活的重要部分。本文详细介绍了如何用Java开发抖音API接口，从创建开发者账号、申请API权限、准备开发环境，到编写代码、测试运行及注意事项，全面覆盖了整个开发流程。
API小知识
52 10
二流小码农
|
9天前
|
Android开发
鸿蒙开发：自定义一个简单的标题栏
本身就是一个很简单的标题栏组件，没有什么过多的技术含量，有一点需要注意，当使用沉浸式的时候，注意标题栏的位置，需要避让状态栏。
二流小码农
51 5
鸿蒙开发：自定义一个简单的标题栏
二流小码农
|
9天前
|
API
鸿蒙开发：切换至基于rcp的网络请求
本文的内容主要是把之前基于http封装的库，修改为当前的Remote Communication Kit（远场通信服务），无非就是通信的方式变了，其他都大差不差。
二流小码农
51 4
鸿蒙开发：切换至基于rcp的网络请求
lqj_本人
|
14天前
|
UED
鸿蒙next版开发：相机开发-适配不同折叠状态的摄像头变更(ArkTS)
在HarmonyOS 5.0中，ArkTS提供了强大的相机开发能力，特别是针对折叠屏设备的摄像头适配。本文详细介绍了如何在ArkTS中检测和适配不同折叠状态下的摄像头变更，确保相机应用在不同设备状态下的稳定性和用户体验。通过代码示例展示了具体的实现步骤。
lqj_本人
45 8
lqj_本人
|
14天前
|
前端开发 开发者
鸿蒙next版开发：相机开发-元数据(ArkTS)
在HarmonyOS 5.0中，ArkTS新增了对相机元数据的访问能力，帮助开发者获取图像的详细信息。本文介绍了如何在ArkTS中获取和使用相机元数据，包括导入接口、创建元数据输出流、开启和停止元数据输出、监听元数据对象可用事件等步骤，并提供了详细的代码示例。
lqj_本人
47 5
lqj_本人
|
14天前
|
前端开发 API 开发者
鸿蒙next版开发：相机开发-录像(ArkTS)
在HarmonyOS 5.0中，ArkTS提供了一套完整的API来管理相机录像功能。本文详细介绍了如何在ArkTS中实现录像功能，包括导入接口、创建Surface、获取相机输出能力、创建会话并开始录像以及监听录像输出流状态，并提供了代码示例进行解读。希望本文能帮助开发者更好地利用ArkTS的相机录像功能。
lqj_本人
37 5
游客qf4jmczx4xu2y
|
10天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图：打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中，自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程，以及如何通过它们增强应用的用户体验。我们将从基础出发，逐步深入，最终让你能够自信地设计和实现专属的UI组件。
游客qf4jmczx4xu2y
28 4
小王老师呀
|
1月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事？
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS，提供高效简洁的开发体验。ArkTS扩展了TypeScript，支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化，UI将自动更新，简化了开发流程。此外，其前后端分层设计与编译时优化确保了高性能运行，利于生态发展。通过组件创建、状态管理和渲染控制等方式，开发者能快速构建高质量的鸿蒙应用。
小王老师呀
118 3
土木林森
|
27天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发：掌握ArkUI（包括Java UI和JS UI）进行界面开发
【10月更文挑战第22天】随着科技发展，操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI，探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发，性能较高；JS UI适合快速开发简单界面，跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
土木林森
84 8
土木林森
|
29天前
|
JavaScript API 开发者
掌握ArkTS，打造HarmonyOS应用新视界：从“Hello World”到状态管理，揭秘鸿蒙UI开发的高效秘诀
【10月更文挑战第19天】ArkTS（ArkUI TypeScript）是华为鸿蒙系统中用于开发用户界面的声明式编程语言，结合了TypeScript和HarmonyOS的UI框架。本文介绍ArkTS的基本语法，包括组件结构、模板和脚本部分，并通过“Hello World”和计数器示例展示其使用方法。
土木林森
61 1

热门文章

最新文章

  • 1
    【Java】留下没有基础眼泪的面试题
  • 2
    Java发送Http请求（HttpClient）
  • 3
    从 Java 开始进入 Kotlin的世界： From Java to Kotlin: JKotlinor
  • 4
    Java -- JDBC 学习--通过 ResultSet 执行查询操作
  • 5
    How to programmatically new a java class which implements sepecified interface in eclipse plugin development
  • 6
    Java判断一个字符串是否包含某个字符
  • 7
    java安全编码规范
  • 8
    一张图搞定java类之间的6种关系，以后再也不怕画UML图了
  • 9
    【转】推荐一款Java反编译器，比较好用
  • 10
    我的Java开发学习之旅------&gt;Java多线程下载文件 实例
  • 1
    如何启动flowable的Flowable UI画工作流程图
    125
  • 2
    Element-ui快速入门
    74
  • 3
    VUE里修改element-ui的显示层次与上下间隔
    123
  • 4
    UI开发第四篇——实现像handcent sms或者chomp sms那样的气泡
    41
  • 5
    Element-ui快速入门
    87
  • 6
    如何使用公网地址远程访问内网Nacos UI界面查看注册服务
    384
  • 7
    Android UI底层绘制原理
    53
  • 8
    【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
    184
  • 9
    【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
    222
  • 10
    【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
    157

    • 相关课程

    更多
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计
  • Java编程入门
  • Java面向对象编程
  • Java高级编程

    • 相关电子书

    更多
  • 使用TensorFlow搭建智能开发系统自劢生成App UI代码
  • Fusion Design - 企业级UI解决方案揭秘
  • 使用TensorFlow搭建智能开发系统自动生成App UI

    • 相关实验场景

    更多
  • 函数计算入门-HelloWorld应用开发
  • 语言入门-1：环境构建
  • 前端开发基础2：VS Code和Edge的联动开发
  • 阿里云平台上进行Java程序的编译与运行
  • 使用Java面向对象编写网络通信程序应用
  • 手动部署Java Web环境（Alibaba Cloud Linux 2）
    • 下一篇
    无影云桌面