「码动四季·开源同行」HarmonyOS应用开发：常见组件

1.常见布局和常见组件组件屏幕展示出来的元素都称之为组件。比如华为已经提供的文本图片进度条输入框等。顶级父类Component。布局组件的展示方式。比如线性布局相对布局绝对布局格子布局等。顶级父类ComponentContainer。理解为组件容器。布局一般以“Layout”结尾如DirectionalLayout、DependentLayout等。不同的布局中组件的展示方式是不一样的比如线性布局就是从上往下或者从左往右依次摆放内部组件的。比如格子布局就是n行n列的格子。注意点组件在未被添加到布局中时既无法显示也无法交互因此一个用户界面至少包含一个布局。2.常见组件组件分类显示类组件只负责数据展示的无法跟用户交互比如展示文本的组件展示图片的组件。交互类组件可以跟用户交互的比如用户可以点击的按钮组件用户可以输入的文本框组件。布局类组件刚刚讲解的布局其实也是一种比较特殊的组件。3.显示类组件文本Text、图片Image、CommonDialog普通弹框组件、ToastDialog信息提示组件、时钟Clock、定时器TickTimer、进度条ProgressBar3.1Text文本组件概述文本Text是用来显示字符串的组件在界面上显示为一块文本区域。仅仅作为展示数据使用用户不能在App中修改文本组件中的内容。Text组件是最基本的组件后面还会学习他的子类组件比如ButtonTextField都是从这个类衍生而来的。常见的属性这些属性不用去背用着用着就熟了想要对文本进行一个设置如果忘记属性可以直接到笔记中找或者到华为开发者文档中找。地址https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V3/ui-java-component-text-000000105072953-V3单独讲解的基本属性宽高大小match_parentmatch_content具体的长度单位pxvpfp。dp安卓里面的单位跟鸿蒙中的vp是一样的vp虚拟像素长度单位。fp字体大小单位。不缩放的情况下fpvp扩展点如果有缩放。1fp 1vp *缩放比例。如果不写单位默认单位是px颜色属性RGB光学三原色书写形式可以直接写单词。red可以写十六进制的三原色。#112233可以写透明度。#FF112233可以写简写#123简写的时候不能加透明度其他写法不利于阅读#5901前面补0满足6位不利于阅读间距内边距外边距。代码示例常见属性 Text ohos:id$id:text ohos:widthmatch_content ohos:heightmatch_content ohos:textText ohos:background_element$graphic:color_gray_element / 其他属性使用方式 字体大小 ohos:text_size28fp 字体颜色 ohos:text_colorblue Text组件的左外边距 ohos:left_margin15vp Text组件的下外边距 ohos:bottom_margin15vp Text组件和内部文本的右内边距 ohos:right_padding15vp Text组件和内部文本的左内边距 ohos:left_padding15vp 设置字体风格 斜体 ohos:italictrue 字重就是文字的粗细 ohos:text_weight700 字体 ohos:text_fontserif 设置文本对齐方式 ohos:text_alignmenthorizontal_center|bottom 设置文本换行 ohos:multiple_linestrue 最大显示行数 ohos:max_text_lines2练习1编写登录页面最终效果如下代码示例?xml version1.0 encodingutf-8? DirectionalLayout xmlns:ohoshttp://schemas.huawei.com/res/ohos ohos:heightmatch_parent ohos:widthmatch_parent ohos:background_element#F2F2F2 ohos:orientationvertical Text ohos:height50vp ohos:width319vp ohos:background_element#FFFFFF ohos:layout_alignmenthorizontal_center ohos:text请输入手机号 ohos:text_alignmentcenter ohos:text_color#999999 ohos:text_size17fp ohos:top_margin100vp / Text ohos:height50vp ohos:width319vp ohos:background_element#FFFFFF ohos:layout_alignmenthorizontal_center ohos:text请输入密码 ohos:text_alignmentcenter ohos:text_color#999999 ohos:text_size17fp ohos:top_margin10vp/ Text ohos:heightmatch_content ohos:widthmatch_content ohos:layout_alignmentright ohos:right_margin20vp ohos:text忘记密码了? ohos:text_color#979797 ohos:text_size17fp ohos:top_margin13vp/ Button ohos:height47vp ohos:width319vp ohos:background_element#21a8fd ohos:layout_alignmenthorizontal_center ohos:text登录 ohos:text_alignmentcenter ohos:text_color#FEFEFE ohos:text_size24vp ohos:top_margin77vp/ Button ohos:height47vp ohos:width319vp ohos:background_element#21a8fd ohos:layout_alignmenthorizontal_center ohos:text注册 ohos:text_alignmentcenter ohos:text_color#FEFEFE ohos:text_size24vp ohos:top_margin13vp/ /DirectionalLayout练习2修改密码页面最终效果如下练习3文本框展示大段文字省略文字和跑马灯效果DirectionalLayout xmlns:ohoshttp://schemas.huawei.com/res/ohos ohos:heightmatch_parent ohos:widthmatch_parent ohos:alignmentcenter ohos:orientationvertical Text ohos:id$id:text1 ohos:height100vp ohos:width200vp ohos:background_element#55121212 ohos:text小明你说我这穷日子过到啥时侯是个头啊小红那得看你能活多久了。 ohos:text_size40vp //截取模式 //ellipsis_at_start前面内容省略 //ellipsis_at_end后面内容省略 //ellipsis_at_middle中间内容省略但是需要组件足够宽 //none不做任何处理 //auto_scrolling滚动处理需要开启滚动 ohos:truncation_modenone //滚动次数 //整数表示滚动次数 //unlimited没有次数限制 ohos:auto_scrolling_countunlimited //滚动持续时间单位是毫秒 auto_scrolling_duration1000 / /DirectionalLayout Java代码 Text text (Text) findComponentById(ResourceTable.Id_text1); text.setClickedListener(component -{ Text t (Text) component; //开启跑马灯 t.startAutoScrolling(); } )3.2Image图片组件概述图片Image是用来显示图片的组件。常见的属性当然也有id长、宽、高等。具体可以参考华为开发手册组件的通用属性https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-common-xml-0000001138483639比较重要的属性单独讲解的基本属性image_src如何在xml中使用本地资源文件。顺便讲一下如何在代码中使用本地资源文件。基本用法Image ohos:height100vp ohos:width100vp ohos:image_src$media:all ohos:background_element#00ff00/相关方法图片剪切显示代码中可以用setClipGravity方法xml文件中可以用clip_alignment属性上、下、左、右、居中表示分别按照上、下、左、右、中间部位进行剪切。图片缩放显示代码中可以用setScaleMode方法xml文件中可以用scale_mode属性inside表示将原图按比例缩放到与Image相同或更小的尺寸并居中显示。 有可能不会填充组件center表示不缩放按Image大小显示原图中间部分。stretch表示将原图缩放到与Image大小一致。 拉伸。将组件填充。clip_center表示将原图按比例缩放到与Image相同或更大的尺寸并居中显示。超过组件的部分被剪切掉。zoom_center表示原图按照比例缩放到与Image最窄边一致并居中显示。zoom_end表示原图按照比例缩放到与Image最窄边一致并靠结束端显示。zoom_start表示原图按照比例缩放到与Image最窄边一致并靠起始端显示。注意一般来讲在设置的时候会跟图片保持一致否则图片会失真。如果业务需求要调整图片大小那么我们是找美工重新做一张图而不是代码拉伸或者剪切。缩放、剪切用法Image ohos:height100vp ohos:width100vp ohos:image_src$media:all ohos:background_element#00ff00 缩放 ohos:scale_modezoom_center 剪切 ohos:clip_alignmenttop/练习1点击按钮随机出现妹子的信息和介绍代码示例xml文件 ?xml version1.0 encodingutf-8? DirectionalLayout xmlns:ohoshttp://schemas.huawei.com/res/ohos ohos:heightmatch_parent ohos:widthmatch_parent ohos:alignmentcenter ohos:orientationvertical Image ohos:id$id:img ohos:heightmatch_content ohos:widthmatch_content ohos:image_src$media:girl1/ Text ohos:id$id:name ohos:height50vp ohos:width150vp ohos:text姓名王美花 ohos:text_size20fp/ Text ohos:id$id:age ohos:height50vp ohos:width150vp ohos:text年龄29 ohos:text_size20fp/ Text ohos:id$id:address ohos:height50vp ohos:width150vp ohos:text地址:南京 ohos:text_size20fp/ Button ohos:id$id:next ohos:height50vp ohos:width150vp ohos:background_element#92D050 ohos:text下一个 ohos:text_size20fp ohos:text_color#FFFFFF/ Button ohos:id$id:get ohos:height50vp ohos:width150vp ohos:background_element#92D050 ohos:text获取联系方式 ohos:text_size20fp ohos:text_color#FFFFFF ohos:top_margin10vp / /DirectionalLayout java文件 package com.example.imageapplication.domain; public class GirlFriend { //照片 private int photoID; //姓名 private String name; //年龄 private int age; //地址 private String address //空参 全参 //alt insert //alt Fn insert public GirlFriend() { } public GirlFriend(int photoID, String name, int age, String address) { this.photoID photoID; this.name name; this.age age; this.address address; } //get set public int getPhotoID() { return photoID; } public void setPhotoID(int photoID) { this.photoID photoID; } public String getName() { return name; } public void setName(String name) { this.name name; } public int getAge() { return age; } public void setAge(int age) { this.age age; } public String getAddress() { return address; } public void setAddress(String address) { this.address address; } }java文件 public class GirlFriend { //照片 private int photoID; //姓名 private String name; //年龄 private int age; //地址 private String address; //空参 全参 //alt insert //alt Fn insert public GirlFriend() { } public GirlFriend(int photoID, String name, int age, String address) { this.photoID photoID; this.name name; this.age age; this.address address; } //get set public int getPhotoID() { return photoID; } public void setPhotoID(int photoID) { this.photoID photoID; } public String getName() { return name; } public void setName(String name) { this.name name; } public int getAge() { return age; } public void setAge(int age) { this.age age; } public String getAddress() { return address; } public void setAddress(String address) { this.address address; } } public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { Image img; Text name; Text age; Text address; Button next; Button get; ArrayListGirlFriend list new ArrayList(); Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //1.找到组件对象 img (Image) findComponentById(ResourceTable.Id_img); name (Text) findComponentById(ResourceTable.Id_name); age (Text) findComponentById(ResourceTable.Id_age); address (Text) findComponentById(ResourceTable.Id_address); next (Button) findComponentById(ResourceTable.Id_next); get (Button) findComponentById(ResourceTable.Id_get); //2.创建一个集合装9个女朋友对象 //添加9个对象 //在以后当我们学习了跟服务器交互之后这些数据都是从服务器获取的。 list.add(new GirlFriend(ResourceTable.Media_girl1, 王美花1, 29, 南京)); list.add(new GirlFriend(ResourceTable.Media_girl2, 王美花2, 30, 南京)); list.add(new GirlFriend(ResourceTable.Media_girl3, 王美花3, 31, 南京)); list.add(new GirlFriend(ResourceTable.Media_girl4, 王美花4, 35, 南京)); list.add(new GirlFriend(ResourceTable.Media_girl5, 王美花5, 21, 南京)); list.add(new GirlFriend(ResourceTable.Media_girl6, 王美花6, 20, 南京)); list.add(new GirlFriend(ResourceTable.Media_girl7, 王美花7, 35, 南京)); list.add(new GirlFriend(ResourceTable.Media_girl8, 王美花8, 25, 南京)); list.add(new GirlFriend(ResourceTable.Media_girl9, 王美花9, 23, 南京)); //3.给按钮添加点击事件 next.setClickedListener(this); get.setClickedListener(this); } Override public void onActive() { super.onActive(); } Override public void onForeground(Intent intent) { super.onForeground(intent); } Random r new Random(); Override public void onClick(Component component) { if (component next) { //点击的是下一个 --- 换一个妹子的信息 //从集合中获取一个随机的妹子信息 //获取一个随机索引、 int randomIndex r.nextInt(list.size()); //通过随机索引获取随机的小姐姐信息 GirlFriend gf list.get(randomIndex); //把随机出来的信息设置到界面当中 img.setImageAndDecodeBounds(gf.getPhotoID()); name.setText(姓名 gf.getName()); age.setText(年龄 gf.getAge()); address.setText(地址 gf.getAddress()); } else if (component get) { //点击的是获取联系方式 //等以后学习了后面的知识就可以跳转界面让用户充值 //充值成功之后再获取小姐姐的联系方式 } } }3.3CommonDialog普通弹框组件使用默认布局的基本用法//把普通弹框弹出来就可以了 //1.创建弹框的对象 //this:当前弹框是哪展示在当前的界面中的。 CommonDialog cd new CommonDialog(this); //2.因为弹框里面是有默认布局的 //设置标题 cd.setTitleText(系统定位服务已关闭); //设置内容 cd.setContentText(请打开定位服务以便司机师傅能够准确接您上车); //自动关闭 cd.setAutoClosable(true); //设置按钮 //参数一按钮的索引 0 1 2 //参数二按钮上的文字 //参数三点击了按钮之后能做什么 cd.setButton(0, 设置, new IDialog.ClickedListener() { Override public void onClick(IDialog iDialog, int i) { //写上点击了设置之后要做的事情。 //如果点击之后我不需要做任何事情在第三个参数中传递null就可以了。 } }); cd.setButton(1, 取消, new IDialog.ClickedListener() { Override public void onClick(IDialog iDialog, int i) { //销毁弹框 cd.destroy(); } }); //把弹框显示出来 cd.show(); }自定义弹框布局编写思路弹框里面也是可以展示各种内容的所以可以给弹框写一个xml布局文件文件名toast_layout_confirm.xml?xml version1.0 encodingutf-8? DirectionalLayout xmlns:ohoshttp://schemas.huawei.com/res/ohos ohos:heightmatch_content ohos:widthmatch_content ohos:orientationvertical Text ohos:id$id:message ohos:heightmatch_content ohos:widthmatch_content ohos:text_size40fp/ Button ohos:id$id:submit ohos:heightmatch_content ohos:widthmatch_content ohos:text确定 ohos:text_size40fp ohos:background_element#21a896/ Button ohos:id$id:cancel ohos:heightmatch_content ohos:widthmatch_content ohos:text取消 ohos:text_size40fp ohos:background_element#0021D9 ohos:top_margin10vp / /DirectionalLayoutjava类//把弹框展示出来 //创建一个弹框对象 CommonDialog cd new CommonDialog(this); //大小是默认包裹内容的。 //弹框默认是居中放置 //弹框默认是透明的 //弹框默认是直角可以把直角设置为圆角 cd.setCornerRadius(15); //把messagedislog的xml文件加载到内存当中。交给弹框并展示出来。 //加载xml文件并获得一个布局对象 //parse方法加载一个xml文件返回一个布局对象。 //参数一要加载的xml文件 //参数二该xml文件是否跟其他xml文件有关。如果无关是独立的就写null就可以了 //参数三如果文件是独立的那么直接写false DirectionalLayout dl (DirectionalLayout) LayoutScatter.getInstance(this).parse(ResourceTable.Layout_messagedialog, null, false); //要给布局里面的文本和按钮设置事件或者修改内容 //此时需要用dl去调用表示获取的是dl这个布局里面的组件。 Text title (Text) dl.findComponentById(ResourceTable.Id_message); Button submit (Button) dl.findComponentById(ResourceTable.Id_submit); Button cancel (Button) dl.findComponentById(ResourceTable.Id_cancel); //title给标题设置内容 title.setText(msg); //还需要给两个按钮添加单击事件 submit.setClickedListener(new Component.ClickedListener() { Override public void onClick(Component component) { title.setText(点击了确定按钮); } }); //取消按钮也要添加点击事件 cancel.setClickedListener(new Component.ClickedListener() { Override public void onClick(Component component) { //当点击了取消按钮之后把弹框给关闭 cd.destroy(); } }); //此时布局对象跟弹框还没有任何关系 //我还需要把布局对象交给弹框才可以 cd.setContentCustomComponent(dl); //让弹框展示出来 cd.show();注意点如果需要更复杂的弹框只要丰富xml文件中的组件即可。抽取工具类public class MyDialog { public static void showDialog(Context context,String msg){ //把弹框展示出来 //创建一个弹框对象 CommonDialog cd new CommonDialog(context); //大小是默认包裹内容的。 //弹框默认是居中放置 //弹框默认是透明的 //弹框默认是直角可以把直角设置为圆角 cd.setCornerRadius(15); //把messagedislog的xml文件加载到内存当中。交给弹框并展示出来。 //加载xml文件并获得一个布局对象 //parse方法加载一个xml文件返回一个布局对象。 //参数一要加载的xml文件 //参数二该xml文件是否跟其他xml文件有关。如果无关是独立的就写null就可以了 //参数三如果文件是独立的那么直接写false DirectionalLayout dl (DirectionalLayout) LayoutScatter.getInstance(context).parse(ResourceTable.Layout_messagedialog, null, false); //要给布局里面的文本和按钮设置事件或者修改内容 //此时需要用dl去调用表示获取的是dl这个布局里面的组件。 Text title (Text) dl.findComponentById(ResourceTable.Id_message); Button submit (Button) dl.findComponentById(ResourceTable.Id_submit); Button cancel (Button) dl.findComponentById(ResourceTable.Id_cancel); //title给标题设置内容 title.setText(msg); //还需要给两个按钮添加单击事件 submit.setClickedListener(new Component.ClickedListener() { Override public void onClick(Component component) { title.setText(点击了确定按钮); } }); //取消按钮也要添加点击事件 cancel.setClickedListener(new Component.ClickedListener() { Override public void onClick(Component component) { //当点击了取消按钮之后把弹框给关闭 cd.destroy(); } }); //此时布局对象跟弹框还没有任何关系 //我还需要把布局对象交给弹框才可以 cd.setContentCustomComponent(dl); //让弹框展示出来 cd.show(); } }3.4ToastDialog信息提示组件也叫做吐司弹框。其实就是一个小提示而已。ToastDialog是CommonDialog的子类所以具备CommonDialog相关的特性。也包含了标题内容还有选择按钮。但是一般来讲吐司弹框我们只用中间的内容部分因为他出现的意义就是为了提示信息的。基本使用ToastDialog t new ToastDialog(this); t.setText(要显示的内容) t.setAlignment(LayoutAlignment.CENTER); t.show();相关设置ToastDialog toastDialog new ToastDialog(this); //设置的大小 //如果不写默认包裹内容 toastDialog.setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT); //设置持续时间 //如果不写默认2秒 toastDialog.setDuration(2000); //设置自动关闭 //如果不写就是自动关闭 toastDialog.setAutoClosable(true); //设置位置 //如果不写默认居中 toastDialog.setAlignment(LayoutAlignment.CENTER); //设置提示信息内容 toastDialog.setText(要显示的内容); //让吐司展示出来 toastDialog.show();自定义布局和抽取工具类一般会把吐司提示信息封装成一个工具类用到的时候再调用这样可以自定义吐司里面的文本的样式。在后面我们会学习美化组件让吐司跟咱们在玩app的时候看到的弹框保持一致。public class MyToastUtils { public static void showDialog(Context context,String msg){ //1.加载xml布局文件 DirectionalLayout dl (DirectionalLayout) LayoutScatter.getInstance(context).parse(ResourceTable.Layout_mytoast, null, false); //创建吐司弹框的对象 ToastDialog td new ToastDialog(context); //设置吐司的大小 td.setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT,DirectionalLayout.LayoutConfig.MATCH_CONTENT); //设置出现的时间 td.setDuration(2000); //设置自动关闭 td.setAutoClosable(true); //设置对齐方式 td.setAlignment(LayoutAlignment.CENTER); //给吐司弹框设置要展示的文本内容 td.setText(msg); //让吐司弹框出现 td.show(); } }