鸿蒙初体验——鸿蒙系统的点击切换图片demo

鸿蒙初次demo编写

资格申请

前往华为开发者联盟首页点击管理中心（如果没有账号需要注册及实名认证）
选择HarmonyOS开发者授权如图

在其中可下载IDE：DevEcoStudio，然后安装即可
编译器可创建java项目也可创建js项目，我创建的是Java项目

项目

项目文件夹

Java部分基本与安卓相同
resources中需要注意
graphic相当于安卓的drawable
media相当于mipmap

代码部分

Android创建新项目默认创建的是MainActivity
鸿蒙默认创建的是MainAbility

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(MainAbilitySlice.class.getName());
    }
}

1、Ability就相当于安卓的Activity
2、生命周期也是不同的
3、并没有在此Ability中关联布局文件，而是引用了一个名为MainAbilitySlice的类

Slice类

slice类的默认代码

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

可以看出此类和我们的activity很像其中的setUIContent方法关联了xml文件，应用方法为ResourceTable这个方法个人认为相当于安卓中的R
并且生命周期和安卓名称完全不同

xml文件

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    
    <Text
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:text="HelloWord"
        ohos:text_size="50px"
        ohos:layout_alignment="horizontal_center"/>

</DirectionalLayout>

可以看到熟悉的HelloWord，下面说说不同点
1、原本的android:变成了ohos:
2、DirectionalLayout定向性布局相当于安卓的LinearLayout线性布局
3、组件命名更加直接TextView叫做Text

编写简单的点击button切换图片

xml文件

我们需要三个组件text、button、image，text保持不变

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Text
        ohos:height="80px"
        ohos:width="match_content"
        ohos:text="HelloHarmony"
        ohos:text_size="50px"
        ohos:top_margin="100px"
        ohos:layout_alignment="horizontal_center"/>

    <Button
        ohos:id="$+id:test_button"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="ButtonTest"
        ohos:text_size="100px"
        ohos:layout_alignment="horizontal_center"
        ohos:padding="10px"
        ohos:text_color="#FFFFFF"
        ohos:background_element="#6BBEFF"/>

    <Image
        ohos:id="$+id:test_img"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:image_src="$media:img_test"/>

</DirectionalLayout>

依然使用定向性布局
组件命名：$+id:
大小单位有三种px、fp、vp
px：像素
vp：以屏幕相对像素为单位，也就是安卓中的dp
fp：相当于sp
组件的宽高
match_content相当于安卓wrop_parent
match_parent同安卓
图片的引入方法

ohos:image_src="$media:img_test"

media是图片的存放文件夹

java代码

public class MainAbilitySlice extends AbilitySlice {

    private Text text;
    private Button button;
    private Image image;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        initView();
    }

    private void initView(){
        button = (Button) findComponentById(ResourceTable.Id_test_button);
        image = (Image) findComponentById(ResourceTable.Id_test_img);
        button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                button.setText("TestSuccess");
                image.setImageAndDecodeBounds(ResourceTable.Media_img_test2);
            }
        });
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

组件关联与安卓基本一样，不同之处在于
定义组件类型时要选择上面这个

使用findComponentById并且需要强转
然后我们注意到

ResourceTable.Id_test_button

ResourceTable此方法引用layout、组件、图片不用之处在点后面
我们可以注意到我们xml名字为ability_main但是他引用时为：ResourceTable.Layout_ability_main
引用组件时我们的命名是test_button他引用时为：ResourceTable.Id_test_button
图片我们命名为img_test2并且放在media文件夹，他的写法为ResourceTable.Media_img_test2

由此可得鸿蒙会自动在你的文件或组件的命名前面加上相应的属性，然后只需要统一使用ResourceTable

编译

由于我没有鸿蒙系统的手机所以创建了虚拟机
流程为：点击顶部Tools->HVD manager
点击后需要使用你的开发者账号登录，然后创建虚拟机

点击P40后面的三角开始运行虚拟机
虚拟机打开后我们点击编译项目
（我使用的特别喜欢的WLOP大神的图，侵权联系删）

然后我们点击button会发现button文字和图片的改变

总结

以上为我编写第一个鸿蒙demo的过程，只是实现了最简单的功能，个人感觉安卓开发者上手并不难，因为不会JS所以不知道js项目是什么样的
鸿蒙的很多布局方式组件属性等等都还只是简单地看了下官方文档，等有时间了再和大家分享更复杂的内容

写的有点乱，感谢大家观看

代码下载地址