devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

DevEco组件（笔记）_deveco studio text组件

作者：知新_RL | 2024-03-12 04:50:43

赞

踩

deveco studio text组件

一、组件

一个用户界面至少包含一个布局。

展示出来的元素，都为组件。

组件在未被添加到布局中时，既无法显示也无法交互。

  • 按钮组件
  • 图片组件
  • 文本框组件
  • 文本输入组件
  • 进度组件
  • 滑块组件
  • 多选框组件
  • 单选框组件
  • ....

在鸿蒙中，分为两大类：显示类与交互类组件。

  • 显示类：只负责显示数据
  • 交互组件：负责进行交互

父类都是Component（布局也是其子类了，是一个负责装载其他组件的组件）。

二、显示类组件

通用属性

宽高

match_content:包裹内容。

match_parent:填充父类。

具体数值：

  • 像素(px)：意味着组件大小写死了。
  • vp=fp=(px*160)/ppi（ppi-Pixels Per Inch:屏幕像素点密度=对角线像素点个数/屏幕尺寸）。
  • vp:长度单位，长、宽等。
  • fp:大小单位，字体大小等。

颜色

同其他大多语言取色一样，用16位的光学三原色RGB表示，

                    红绿蓝

十六进制：#FFFFFF

十进制： (255,255,255)

xml中一般用十六进制，代码中用十进制。

内外边距

与CSS相同，

外边距

自身宽高不变向外进行占位，即组件外侧距离其他组件/父件距离的设置

margin：同时设置上下左右四个方向

top/left/right/bottom_margin

内边距

自身向内部进行占位，一般用于设置文本位置

padding：同时设置上下左右四个方向

top/left/right/bottom_padding

Text：文本组件

ohos:multiple_lines：是否允许多行

ohos:max_text_lines：最大行数，默认一行

ohos:truncation_mode：省略文字（前、后、中间）

跑马灯效果

ohos:truncation_mode="auto_scrolling"：允许自动滚动

ohos:auto_scrolling_count：文本自动滚动次数

ohos:auto_scrolling_duration：文本多长时间跑完一次（毫秒）

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.  
  9.     <Text
  10.         ohos:id="$+id:text1"
  11.         ohos:height="100vp"
  12.         ohos:width="300vp"
  13.         ohos:text="你好,开发者!!!!!!!!!!!!!!!!!!!!!!!!!！！！！!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
  14.         ohos:text_size="150"
  15.         ohos:text_color="white"
  16.         ohos:truncation_mode="auto_scrolling"
  17.         ohos:auto_scrolling_count="unlimited"
  18.         ohos:auto_scrolling_duration="20000"
  19.         ohos:background_element="black"
  20.         />
  21.  
  22. </DirectionalLayout>

然后需要在布局中用代码激活

现在在页面中激活

  1. package com.example.myapplication.slice;
  2.  
  3. import com.example.myapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.Component;
  7. import ohos.agp.components.Text;
  8.  
  9.  
  10. public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
  11.     @Override
  12.     public void onStart(Intent intent) {
  13.         super.onStart(intent);
  14.         super.setUIContent(ResourceTable.Layout_ability_main);
  15.         //1.获取Text
  16.         Text text = (Text) findComponentById(ResourceTable.Id_text1);
  17.  
  18.         //2.给Text文本标志添加事件
  19.         //表示当我们单击一下的时候，开启跑马灯效果
  20.         text.setClickedListener(this);
  21.     }
  22.  
  23.     @Override
  24.     public void onActive() {
  25.         super.onActive();
  26.     }
  27.  
  28.     @Override
  29.     public void onForeground(Intent intent) {
  30.         super.onForeground(intent);
  31.     }
  32.  
  33.     @Override
  34.     public void onClick(Component component) {
  35.         //开启跑马灯效果
  36.         Text t = (Text)component;
  37.         t.startAutoScrolling();
  38.     }
  39. }

Image：图片组件

background_element:背景图片（在图片之下）

Image_src：前景图片（展示的图片）

clip_alignment:裁剪方式

scale_mode:缩放类型

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.     <Image
  9.         ohos:height="1000px"
  10.         ohos:width="1000px"
  11.         ohos:image_src="$media:danganronpa"
  12.         ohos:background_element="#000000"
  13.         />
  14.  
  15. </DirectionalLayout>

剪切与缩放

ohos:clip_alignment：当长宽比图片小的时候，设置剪切的位置。

  1.     <Image
  2.         ohos:height="200px"
  3.         ohos:width="200px"
  4.         ohos:image_src="$media:danganronpa"
  5.         ohos:background_element="#000000"
  6.         ohos:clip_alignment="center"
  7.         />

 同时，可以用"left|top"代表左上

ohos:scale_mode="inside"：等比缩小居中，直至与Image相同或更小时。默认为center，不缩放。

  1. <Image
  2.         ohos:height="300px"
  3.         ohos:width="300px"
  4.         ohos:image_src="$media:danganronpa"
  5.         ohos:background_element="#000000"
  6.         ohos:scale_mode="inside"
  7.         />

 ohos:scale_mode="stretch"：拉伸铺满

  1. <Image
  2.         ohos:height="700px"
  3.         ohos:width="1000px"
  4.         ohos:image_src="$media:danganronpa"
  5.         ohos:background_element="#000000"
  6.         ohos:scale_mode="stretch"
  7.         />

ohos:scale_mode="zoom_center"：等比放大，直至与窄边一致，居中。

弹框组件

  • 普通弹框（CommonDialog）：提示+用户操作
  • 消息提示弹框（ToastDialog）：告知用户消息

Context:上下文，界面对象，即要展示在其上。

普通弹框：

默认布局：

  • 标题
  • 提示内容
  • 选择按钮（最多3个）
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.     <Button
  9.         ohos:id="$+id:but1"
  10.         ohos:height="match_content"
  11.         ohos:width="match_content"
  12.         ohos:text="点击"
  13.         ohos:text_size="40vp"
  14.         ohos:background_element="red"
  15.         />
  16.     
  17. </DirectionalLayout
  1. package com.example.myapplication.slice;
  2.  
  3. import com.example.myapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.Button;
  7. import ohos.agp.components.Component;
  8. import ohos.agp.window.dialog.CommonDialog;
  9. import ohos.agp.window.dialog.IDialog;
  10.  
  11.  
  12. public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
  13.     @Override
  14.     public void onStart(Intent intent) {
  15.         super.onStart(intent);
  16.         super.setUIContent(ResourceTable.Layout_ability_main);
  17.         Button but = (Button)findComponentById(ResourceTable.Id_but1);
  18.         but.setClickedListener(this);
  19.     }
  20.  
  21.     @Override
  22.     public void onActive() {
  23.         super.onActive();
  24.     }
  25.  
  26.     @Override
  27.     public void onForeground(Intent intent) {
  28.         super.onForeground(intent);
  29.     }
  30.  
  31.     @Override
  32.     public void onClick(Component component) {
  33.         //创建弹框对象
  34.         CommonDialog cd = new CommonDialog(this);
  35.         cd.setTitleText("提示");
  36.         cd.setContentText("已经点击按钮");
  37.         //自动关闭弹窗,点击灰色区域自动关闭
  38.         cd.setAutoClosable(true);
  39.  
  40.         //索引（0、1、2），按钮的文字、点击事件
  41.         cd.setButton(0, "取消", new IDialog.ClickedListener() {
  42.             @Override
  43.             public void onClick(IDialog iDialog, int i) {
  44.                 //事件内容
  45.                 //销毁弹窗
  46.                 cd.destroy();
  47.             }
  48.         });
  49.         cd.setButton(1,"确定",null);
  50.         //显示弹框
  51.         cd.show();
  52.     }
  53. }

抽取工具类

通常我们使用时，为了避免写这么多的代码，会将代码写为一个工具类，然后直接调用。

新建一个package包，和class

 当然，可以通过增加传递的参数，使其更加灵活的表示我们需要的弹窗。

  1. package com.example.myapplication.dialogutils;
  2. import ohos.agp.window.dialog.CommonDialog;
  3. import ohos.agp.window.dialog.IDialog;
  4. import ohos.app.Context;
  5.  
  6. public class myDialog {
  7.     public static void showDialog(Context context,String msg){
  8.         //创建弹框对象
  9.         CommonDialog cd = new CommonDialog(context);
  10.         cd.setTitleText("提示");
  11.         cd.setContentText(msg);
  12.         //自动关闭弹窗,点击灰色区域自动关闭
  13.         cd.setAutoClosable(true);
  14.  
  15.         //索引（0、1、2），按钮的文字、点击事件
  16.         cd.setButton(0, "取消", new IDialog.ClickedListener() {
  17.             @Override
  18.             public void onClick(IDialog iDialog, int i) {
  19.                 //事件内容
  20.                 //销毁弹窗
  21.                 cd.destroy();
  22.             }
  23.         });
  24.         cd.setButton(1,"确定",null);
  25.         //显示弹框
  26.         cd.show();
  27.  
  28.     }
  29. }

然后修改我们的前面的Slice的点击事件

  1.     import com.example.myapplication.dialogutils.myDialog;
  2.     @Override
  3.     public void onClick(Component component) {
  4.         myDialog.showDialog(this,"已完成点击");
  5.     }

消息提示弹框/吐司弹框

是普通弹框的子类。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.     <Button
  9.         ohos:id="$+id:but1"
  10.         ohos:height="match_content"
  11.         ohos:width="match_content"
  12.         ohos:text="点击"
  13.         ohos:text_size="40fp"
  14.         ohos:text_color="#FFFFFF"
  15.         ohos:background_element="#2136FD"
  16.         />
  17.  
  18. </DirectionalLayout>
  1. package com.example.myapplication.slice;
  2. import com.example.myapplication.ResourceTable;
  3. import ohos.aafwk.ability.AbilitySlice;
  4. import ohos.aafwk.content.Intent;
  5. import ohos.agp.components.Button;
  6. import ohos.agp.components.Component;
  7. import ohos.agp.utils.LayoutAlignment;
  8. import ohos.agp.window.dialog.ToastDialog;
  9.  
  10.  
  11. public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
  12.     @Override
  13.     public void onStart(Intent intent) {
  14.         super.onStart(intent);
  15.         super.setUIContent(ResourceTable.Layout_ability_main);
  16.         Button but = (Button)findComponentById(ResourceTable.Id_but1);
  17.         but.setClickedListener(this);
  18.     }
  19.  
  20.     @Override
  21.     public void onActive() {
  22.         super.onActive();
  23.     }
  24.  
  25.     @Override
  26.     public void onForeground(Intent intent) {
  27.         super.onForeground(intent);
  28.     }
  29.  
  30.     @Override
  31.     public void onClick(Component component) {
  32.         ToastDialog td = new ToastDialog(this);
  33.         //设置文本内容
  34.         td.setText("已经点击");
  35.         //居中放置
  36.         td.setAlignment(LayoutAlignment.CENTER);
  37.         //设置时长
  38.         td.setDuration(2000);
  39.         td.show();
  40.     }
  41. }

用xml中格式设置吐司弹窗抽取工具类的格式

创建一个新的xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_content"
  5.     ohos:width="match_content"
  6.     ohos:orientation="vertical">
  7.     <Text
  8.         ohos:id="$+id:msg"
  9.         ohos:height="match_content"
  10.         ohos:width="match_content"
  11.         ohos:text_size="30fp"
  12.         ohos:text_color="#FFFFFF"
  13.         ohos:text_alignment="center"
  14.         ohos:background_element="#464343"
  15.         />
  16. </DirectionalLayout>

接着创建一个抽取工具类

  1. package com.example.myapplication.dialogutils;
  2. import com.example.myapplication.ResourceTable;
  3. import ohos.agp.components.DirectionalLayout;
  4. import ohos.agp.components.LayoutScatter;
  5. import ohos.agp.components.Text;
  6. import ohos.agp.utils.LayoutAlignment;
  7. import ohos.agp.window.dialog.ToastDialog;
  8. import ohos.app.Context;
  9.  
  10. public class myDialog {
  11.     public static void showToast(Context context,String message){
  12.         //加载布局对象
  13.         //LayoutScatter：布局工具类
  14.         //getInstance：获取实例。即通过该方法，布局对象获取context对象中所需值。
  15.         //parse：通过该方法，导入布局信息，加载xml的ID，是否依赖其他，是否依赖其他
  16.         DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(context).parse(ResourceTable.Layout_mytoast,null,false);
  17.         //加载文本组件
  18.         Text msg = (Text)dl.findComponentById(ResourceTable.Id_msg);
  19.         //设置到文本组件中
  20.         msg.setText(message);
  21.  
  22.  
  23.         ToastDialog td = new ToastDialog(context);
  24.         //设置吐司大小，通过布局类来设置
  25.         td.setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT,DirectionalLayout.LayoutConfig.MATCH_CONTENT);
  26.         //设置事件
  27.         td.setDuration(2000);
  28.         //对齐方式
  29.         td.setAlignment(LayoutAlignment.TOP);
  30.  
  31.         //将xml布局交给吐司
  32.         td.setContentCustomComponent(dl);
  33.         //让吐司出现
  34.         td.show();
  35.     }
  36.  
  37. }

现在修改点击事件

  1.   import com.example.myapplication.dialogutils.myDialog;
  2.     @Override
  3.     public void onClick(Component component) {
  4.         myDialog.showToast(this,"已经点击");
  5.     }

时钟组件

time_zone="UTC":时区，GMT（格林威治标准时间）、CST、DST、UTC等

mode_24_hour（默认）:24小时制度

mode_12_hour:12小时制度

  • y-年
  • M-月
  • d-月份中的天数
  • H-24时制度（0-23）
  • m-小时中的分钟
  • s-分钟中的秒数
  • S-毫秒数
  • w-年份中的周数
  • W-月份中的周数
  • D-年份中的天数
  • F-月份中的星期
  • E-星期中的天数
  • a-am/pm标记
  • k-24时制度（1-24）
  • K-am/pm中的小时数（0-11）
  • h-am/pm中的小时数（1-12）
  • Z-时区，数字
  • z-时区，详细

24小时

  1. <Clock
  2.         ohos:height="match_content"
  3.         ohos:width="match_content"
  4.         ohos:text_size="30fp"
  5.         ohos:time_zone="UTC"
  6.         ohos:mode_24_hour="y年M月d日 H:m:s"
  7.         />

12小时 

12小时制度有bug，不可以在xml中直接指定，需要在页面中设置。（笔者写的时候还没有修复）

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.     <Clock
  9.         ohos:id="$+id:clock1"
  10.         ohos:height="match_content"
  11.         ohos:width="match_content"
  12.         ohos:text_size="20fp"
  13.         ohos:time_zone="UTC"
  14.         />
  15.  
  16. </DirectionalLayout>
  1. package com.example.myapplication.slice;
  2. import com.example.myapplication.ResourceTable;
  3. import ohos.aafwk.ability.AbilitySlice;
  4. import ohos.aafwk.content.Intent;
  5. import ohos.agp.components.Clock;
  6.  
  7.  
  8. public class MainAbilitySlice extends AbilitySlice{
  9.     @Override
  10.     public void onStart(Intent intent) {
  11.         super.onStart(intent);
  12.         super.setUIContent(ResourceTable.Layout_ability_main);
  13.         Clock clock = (Clock) findComponentById(ResourceTable.Id_clock1);
  14.         clock.set24HourModeEnabled(false);//关闭24小时制
  15.         clock.setFormatIn12HourMode( "y年M月d日 h:m:s a");
  16.     }
  17.  
  18.     @Override
  19.     public void onActive() {
  20.         super.onActive();
  21.     }
  22.  
  23.     @Override
  24.     public void onForeground(Intent intent) {
  25.         super.onForeground(intent);
  26.     }
  27.  
  28. }

 定时器

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.     <TickTimer
  9.         ohos:id="$+id:ticker"
  10.         ohos:height="match_content"
  11.         ohos:width="match_content"
  12.         ohos:text_size="30fp"
  13.         ohos:text_color="#FFFFFF"
  14.         ohos:background_element="#0000FF"
  15.         ohos:text_alignment="center"
  16.         ohos:layout_alignment="center"
  17.         />
  18.     <Button
  19.         ohos:id="$+id:start"
  20.         ohos:width="match_content"
  21.         ohos:height="match_content"
  22.         ohos:text="开始计时"
  23.         ohos:text_size="30fp"
  24.         ohos:text_color="#FFFFFF"
  25.         ohos:background_element="#666600"
  26.         ohos:text_alignment="center"
  27.         ohos:layout_alignment="center"
  28.         ohos:top_margin="30vp"
  29.         />
  30.     <Button
  31.         ohos:id="$+id:end"
  32.         ohos:width="match_content"
  33.         ohos:height="match_content"
  34.         ohos:text="结束计时"
  35.         ohos:text_size="30fp"
  36.         ohos:text_color="#FFFFFF"
  37.         ohos:background_element="#666600"
  38.         ohos:text_alignment="center"
  39.         ohos:layout_alignment="center"
  40.         ohos:top_margin="30vp"
  41.         />
  42. </DirectionalLayout>
  1. package com.example.myapplication.slice;
  2. import com.example.myapplication.ResourceTable;
  3. import ohos.aafwk.ability.AbilitySlice;
  4. import ohos.aafwk.content.Intent;
  5. import ohos.agp.components.Button;
  6. import ohos.agp.components.Component;
  7. import ohos.agp.components.TickTimer;
  8.  
  9.  
  10.  
  11. public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
  12.     TickTimer tickTimer;
  13.     Button start;
  14.     Button end;
  15.     @Override
  16.     public void onStart(Intent intent) {
  17.         super.onStart(intent);
  18.         super.setUIContent(ResourceTable.Layout_ability_main);
  19.         tickTimer = (TickTimer)findComponentById(ResourceTable.Id_ticker);
  20.         start = (Button)findComponentById(ResourceTable.Id_start);
  21.         end = (Button)findComponentById(ResourceTable.Id_end);
  22.         start.setClickedListener(this);
  23.         end.setClickedListener(this);
  24.  
  25.         //设置定时器
  26.         //false:正向计时，0，1，2，3，4...
  27.         //true:反向计时，5，4，3，2，1，0
  28.         tickTimer.setCountDown(false);
  29.         //计时格式
  30.         tickTimer.setFormat("m:s");
  31.     }
  32.  
  33.     @Override
  34.     public void onActive() {
  35.         super.onActive();
  36.     }
  37.  
  38.     @Override
  39.     public void onForeground(Intent intent) {
  40.         super.onForeground(intent);
  41.     }
  42.  
  43.     @Override
  44.     public void onClick(Component component) {
  45.         if(component == start){
  46.             tickTimer.start();
  47.         }
  48.         else if (component == end){
  49.             tickTimer.stop();
  50.         }
  51.  
  52.     }
  53. }

BUG？ 

  • 开始计时时，时间似乎不是0
  • 结束计时时，界面停止（比如9s），但是后台仍旧在执行，重新开始（间隔10s）的时候，本应该从结束处（9s）开始继续计时，结果连间隔时间也算进去了（即，从19s开始）。
  • tickTimer.setBaseTime(0)：设置基准时间，如果没有设置时间，从时间原点计时；为0，则是从当前（实际）时间计时 ；非0，也是从当前时间开始计时，参数为 3600*1000，是从当前时间开始，减少

进度条

Progress进度条组件

ohos:progress=""：进度条实际填充颜色

ohos:progress_hint_text="0%"：进度条显示文字

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.     <ProgressBar
  9.         ohos:id="$+id:pb"
  10.         ohos:height="match_content"
  11.         ohos:width="300vp"
  12.         ohos:progress="0"
  13.         ohos:progress_hint_text="0%"
  14.         ohos:progress_hint_text_color="#000000"
  15.         ohos:progress_width="50vp"
  16.         ohos:progress_color="#FF0000"
  17.         ohos:max="100"
  18.         ohos:min="0"
  19.         />
  20. </DirectionalLayout>

 每点一次，加15%

  1. package com.example.myapplication.slice;
  2. import com.example.myapplication.ResourceTable;
  3. import ohos.aafwk.ability.AbilitySlice;
  4. import ohos.aafwk.content.Intent;
  5. import ohos.agp.components.Button;
  6. import ohos.agp.components.Component;
  7. import ohos.agp.components.ProgressBar;
  8. import ohos.agp.components.TickTimer;
  9.  
  10.  
  11.  
  12. public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
  13.     @Override
  14.     public void onStart(Intent intent) {
  15.         super.onStart(intent);
  16.         super.setUIContent(ResourceTable.Layout_ability_main);
  17.         ProgressBar pb = (ProgressBar) findComponentById(ResourceTable.Id_pb);
  18.         //每点击一次进度条，加5%
  19.         pb.setClickedListener(this);
  20.     }
  21.     @Override
  22.     public void onActive() {
  23.         super.onActive();
  24.     }
  25.  
  26.     @Override
  27.     public void onForeground(Intent intent) {
  28.         super.onForeground(intent);
  29.     }
  30.  
  31.     @Override
  32.     public void onClick(Component component) {
  33.         ProgressBar pb = (ProgressBar) component;
  34.         int value = pb.getProgress();
  35.         value = value+5;
  36.         if(value>100){
  37.             return;
  38.         }
  39.         pb.setProgressValue(value);
  40.         pb.setProgressHintText(value+"%");
  41.     }
  42. }
  43.

RoundProgressBar

是Progress进度条组件的子类

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.     <RoundProgressBar
  9.         ohos:id="$+id:pb"
  10.         ohos:height="300vp"
  11.         ohos:width="300vp"
  12.         ohos:progress="0"
  13.         ohos:progress_hint_text="0%"
  14.         ohos:progress_hint_text_size="50vp"
  15.         ohos:progress_hint_text_color="#000000"
  16.         ohos:progress_width="20vp"
  17.         ohos:progress_color="#FF0000"
  18.         ohos:max="100"
  19.         ohos:min="0"
  20.         />
  21. </DirectionalLayout>

三、交互类组件 

TextField文本输入框组件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:orientation="vertical"
  7.     ohos:background_element="#F2F2F2"
  8.     >
  9.     <TextField
  10.         ohos:id="$+id:text"
  11.         ohos:height="50vp"
  12.         ohos:width="319vp"
  13.         ohos:hint="请输入信息"
  14.         ohos:text_size="17fp"
  15.         ohos:text_color="#999999"
  16.         ohos:text_alignment="center"
  17.         ohos:top_margin="100vp"
  18.         ohos:layout_alignment="horizontal_center"
  19.         ohos:background_element="#FFFFFF"
  20.         />
  21. </DirectionalLayout>

 现在为其添加一个Button

  1.  <Button
  2.         ohos:id="$+id:but"
  3.         ohos:height="47vp"
  4.         ohos:width="319vp"
  5.         ohos:text="获取信息"
  6.         ohos:text_size="24vp"
  7.         ohos:text_color="#FEFEFE"
  8.         ohos:text_alignment="center"
  9.         ohos:background_element="#21a8FD"
  10.         ohos:top_margin="77vp"
  11.         ohos:layout_alignment="center"
  12.         />
  1. package com.example.myapplication.slice;
  2. import com.example.myapplication.ResourceTable;
  3. import ohos.aafwk.ability.AbilitySlice;
  4. import ohos.aafwk.content.Intent;
  5. import ohos.agp.components.Button;
  6. import ohos.agp.components.Component;
  7. import ohos.agp.components.TextField;
  8. import ohos.agp.utils.LayoutAlignment;
  9. import ohos.agp.window.dialog.ToastDialog;
  10.  
  11.  
  12. public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
  13.     TextField tf;
  14.     Button but;
  15.     @Override
  16.     public void onStart(Intent intent) {
  17.         super.onStart(intent);
  18.         super.setUIContent(ResourceTable.Layout_ability_main);
  19.         tf = (TextField) findComponentById(ResourceTable.Id_text);
  20.         but = (Button)findComponentById(ResourceTable.Id_but);
  21.         but.setClickedListener(this);
  22.     }
  23.     @Override
  24.     public void onActive() {
  25.         super.onActive();
  26.     }
  27.  
  28.     @Override
  29.     public void onForeground(Intent intent) {
  30.         super.onForeground(intent);
  31.     }
  32.  
  33.     @Override
  34.     public void onClick(Component component) {
  35.         String message = tf.getText();
  36.         ToastDialog td = new ToastDialog(this);
  37.         td.setTransparent(true);
  38.         td.setAlignment(LayoutAlignment.BOTTOM);
  39.         td.setOffset(0,200);
  40.         td.setText(message);
  41.         td.show();
  42.  
  43.     }
  44. }
  45.

文本高级设置
ohos:text_input_type="":设置文本类型

ohos:basement="":设置下划线颜色

ohos:element_selection_left_bubble=""：选中时，左侧气泡提示，可以是颜色或者图片

ohos:element_selection_right_bubble=""：选中时，右侧气泡提示，可以是颜色或者图片

ohos:element_cursor_bubble=""：气泡提示，可以是颜色或者图片

加密格式

  1. <TextField
  2.         ohos:id="$+id:text"
  3.         ohos:height="50vp"
  4.         ohos:width="319vp"
  5.         ohos:hint="请输入信息"
  6.         ohos:text_size="17fp"
  7.         ohos:text_color="#999999"
  8.         ohos:text_alignment="center"
  9.         ohos:top_margin="100vp"
  10.         ohos:layout_alignment="horizontal_center"
  11.         ohos:text_input_type="pattern_password"
  12.         ohos:background_element="#FFFFFF"
  13.         ohos:basement="#000000"
  14.         ohos:element_selection_left_bubble="$media:danganronpa"
  15.         ohos:element_selection_right_bubble="$media:danganronpa"
  16.         ohos:element_cursor_bubble="#FF0000"
  17.         />

Checkbox多选框组件

选择点+属性

ohos:marked="false":为true时表示默认选中该项

ohos:check_element=""：选择区图片/颜色

  1. <Checkbox
  2.         ohos:id="$+id:cb"
  3.         ohos:height="match_content"
  4.         ohos:width="match_content"
  5.         ohos:text="玩游戏"
  6.         ohos:marked="false"
  7.         ohos:text_size="30fp"
  8.         />
  1. package com.example.myapplication.slice;
  2. import com.example.myapplication.ResourceTable;
  3. import ohos.aafwk.ability.AbilitySlice;
  4. import ohos.aafwk.content.Intent;
  5. import ohos.agp.components.Button;
  6. import ohos.agp.components.Checkbox;
  7. import ohos.agp.components.TextField;
  8. import ohos.agp.utils.LayoutAlignment;
  9. import ohos.agp.window.dialog.ToastDialog;
  10.  
  11.  
  12. public class MainAbilitySlice extends AbilitySlice 
  13.     @Override
  14.     public void onStart(Intent intent) {
  15.         super.onStart(intent);
  16.         super.setUIContent(ResourceTable.Layout_ability_main);
  17.         Checkbox checkbox = (Checkbox) findComponentById(ResourceTable.Id_cb);
  18.         checkbox.setChecked(true);
  19.         boolean checked = checkbox.isChecked();
  20.         if(checked){
  21.             ToastDialog td = new ToastDialog(this);
  22.             td.setAlignment(LayoutAlignment.BOTTOM);
  23.             td.setDuration(2000);
  24.             td.setText(checkbox.getText());
  25.             td.show();
  26.         }
  27.     }
  28.     @Override
  29.     public void onActive() {
  30.         super.onActive();
  31.     }
  32.  
  33.     @Override
  34.     public void onForeground(Intent intent) {
  35.         super.onForeground(intent);
  36.     }
  37.  
  38. }
  39.

多选框状态监听事件

当多选框状态改变就会被调用，当然，用单机事件也可以模拟

  1. package com.example.myapplication.slice;
  2. import com.example.myapplication.ResourceTable;
  3. import ohos.aafwk.ability.AbilitySlice;
  4. import ohos.aafwk.content.Intent;
  5. import ohos.agp.components.AbsButton;
  6. import ohos.agp.components.Button;
  7. import ohos.agp.components.Checkbox;
  8. import ohos.agp.components.TextField;
  9. import ohos.agp.utils.LayoutAlignment;
  10. import ohos.agp.window.dialog.ToastDialog;
  11.  
  12.  
  13. public class MainAbilitySlice extends AbilitySlice implements AbsButton.CheckedStateChangedListener {
  14.     @Override
  15.     public void onStart(Intent intent) {
  16.         super.onStart(intent);
  17.         super.setUIContent(ResourceTable.Layout_ability_main);
  18.         Checkbox checkbox = (Checkbox) findComponentById(ResourceTable.Id_cb);
  19.         checkbox.setChecked(true);
  20.         checkbox.setCheckedStateChangedListener(this);
  21.     }
  22.     @Override
  23.     public void onActive() {
  24.         super.onActive();
  25.     }
  26.  
  27.     @Override
  28.     public void onForeground(Intent intent) {
  29.         super.onForeground(intent);
  30.     }
  31.  
  32.     @Override
  33.     public void onCheckedChanged(AbsButton absButton, boolean b) {
  34.         ToastDialog td = new ToastDialog(this);
  35.         td.setAlignment(LayoutAlignment.BOTTOM);
  36.         td.setDuration(2000);
  37.         if(b){
  38.  
  39.             td.setText(absButton.getText());
  40.  
  41.         }
  42.         else{
  43.             td.setText("已取消");
  44.         }
  45.         td.show();
  46.     }
  47. }
  48.

RadioButton单选框组件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical"
  8.     ohos:background_element="#F2F2F2"
  9.     >
  10.     <RadioContainer
  11.         ohos:id="$+id:rc"
  12.         ohos:height="match_content"
  13.         ohos:width="match_content">
  14.         <RadioButton
  15.             ohos:id="$+id:man"
  16.             ohos:height="match_content"
  17.             ohos:width="match_content"
  18.             ohos:text="男"
  19.             ohos:text_size="30fp"
  20.             ohos:text_alignment="center"
  21.             ohos:marked="true"
  22.             />
  23.         <RadioButton
  24.             ohos:id="$+id:woman"
  25.             ohos:height="match_content"
  26.             ohos:width="match_content"
  27.             ohos:text="女"
  28.             ohos:text_size="30fp"
  29.             ohos:text_alignment="center"
  30.             ohos:marked="false"
  31.             />
  32.     </RadioContainer>
  33. </DirectionalLayout>
  1. package com.example.myapplication.slice;
  2. import com.example.myapplication.ResourceTable;
  3. import ohos.aafwk.ability.AbilitySlice;
  4. import ohos.aafwk.content.Intent;
  5. import ohos.agp.components.Button;
  6. import ohos.agp.components.RadioButton;
  7. import ohos.agp.components.RadioContainer;
  8. import ohos.agp.components.TextField;
  9. import ohos.agp.utils.LayoutAlignment;
  10. import ohos.agp.window.dialog.ToastDialog;
  11.  
  12.  
  13. public class MainAbilitySlice extends AbilitySlice implements RadioContainer.CheckedStateChangedListener {
  14.     @Override
  15.     public void onStart(Intent intent) {
  16.         super.onStart(intent);
  17.         super.setUIContent(ResourceTable.Layout_ability_main);
  18.         RadioButton rb1 = (RadioButton)findComponentById(ResourceTable.Id_man);
  19.         RadioButton rb2 = (RadioButton)findComponentById(ResourceTable.Id_woman);
  20.         RadioContainer rc = (RadioContainer)findComponentById(ResourceTable.Id_rc) ;
  21.         rb1.setChecked(false);
  22.         rb2.setChecked(true);
  23.         rc.setMarkChangedListener(this);
  24.     }
  25.     @Override
  26.     public void onActive() {
  27.         super.onActive();
  28.     }
  29.  
  30.     @Override
  31.     public void onForeground(Intent intent) {
  32.         super.onForeground(intent);
  33.     }
  34.  
  35.  
  36.     @Override
  37.     public void onCheckedChanged(RadioContainer radioContainer, int i) {
  38.         RadioButton rb = (RadioButton) radioContainer.getComponentAt(i);
  39.         ToastDialog td = new ToastDialog(this);
  40.         td.setAlignment(LayoutAlignment.BOTTOM);
  41.         td.setDuration(2000);
  42.         if(rb.isChecked()){
  43.             td.setText(rb.getText());
  44.         }
  45.         td.show();
  46.     }
  47. }
  48.

switch开关组件

由滑块+滑轨组成

        ohos:thumb_element=""：滑块图片/颜色设置
        ohos:track_element=""：滑轨图片/颜色设置

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical"
  8.     >
  9.     <Switch
  10.         ohos:id="$+id:slibar1"
  11.         ohos:width="100vp"
  12.         ohos:height="40vp"
  13.         ohos:text_state_on="开"
  14.         ohos:text_state_off="关"
  15.         ohos:text_size="20vp"
  16.  
  17.         />
  18. </DirectionalLayout>

 默认滑块是圆形，自己设置后将需要自己设置，因此，这里先用默认设置。同时，因为switch是JAVA关键字，因此需要避免相关

  1. package com.example.myapplication.slice;
  2. import com.example.myapplication.ResourceTable;
  3. import ohos.aafwk.ability.AbilitySlice;
  4. import ohos.aafwk.content.Intent;
  5. import ohos.agp.components.*;
  6. import ohos.agp.utils.LayoutAlignment;
  7. import ohos.agp.window.dialog.ToastDialog;
  8.  
  9.  
  10. public class MainAbilitySlice extends AbilitySlice implements AbsButton.CheckedStateChangedListener {
  11.     @Override
  12.     public void onStart(Intent intent) {
  13.         super.onStart(intent);
  14.         super.setUIContent(ResourceTable.Layout_ability_main);
  15.         Switch slibar=(Switch) findComponentById(ResourceTable.Id_slibar1);
  16.  
  17.         slibar.setCheckedStateChangedListener(this);
  18.  
  19.     }
  20.     @Override
  21.     public void onActive() {
  22.         super.onActive();
  23.     }
  24.  
  25.     @Override
  26.     public void onForeground(Intent intent) {
  27.         super.onForeground(intent);
  28.     }
  29.  
  30.     @Override
  31.     public void onCheckedChanged(AbsButton absButton, boolean b) {
  32.         ToastDialog td = new ToastDialog(this);
  33.         td.setAlignment(LayoutAlignment.BOTTOM);
  34.         td.setDuration(2000);
  35.  
  36.         if(b) {
  37.             td.setText("开启");
  38.         }
  39.         else{
  40.             td.setText("关闭");
  41.         }
  42.         td.show();
  43.     }
  44. }
  45.

slider滑块

是进度条组件（ProgressBar）的后代

进度条+滑块

  • 已完成进度颜色/图片（已浏览）：ohos:progress_color=""
  • 已完成进度值（滑块位置）：ohos:progress=""
  • 是否可以拖动设置（拖动进度条）：ohos:enabled=""，默认是true
  • 滑块颜色/图片（当前位置）：ohos:thumb_element=""
  • 总进度颜色/图片（总长度）：ohos:background_instruct_element=""
  • 次一级进度值（缓冲）：ohos:vice_progress=""
  • 次一级进度颜色/图片（缓冲）：ohos:vice_progress_element=""
  1. <Slider
  2.     ohos:height="50vp"
  3.     ohos:width="300vp"
  4.     />

同理，在设置后，默认的美化设置会被清空。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical"
  8.     >
  9.     <Slider
  10.         ohos:id="$+id:slider"
  11.         ohos:height="50vp"
  12.         ohos:width="300vp"
  13.         ohos:enabled="true"
  14.         ohos:background_instruct_element="#0000FF"
  15.         ohos:progress_color="#FF0000"
  16.         ohos:thumb_element="#00FF00"
  17.         ohos:vice_progress="80"
  18.         ohos:vice_progress_element="#923456"
  19.         ohos:max="100"
  20.         ohos:min="0"
  21.         />
  22. </DirectionalLayout>
  1. package com.example.myapplication.slice;
  2. import com.example.myapplication.ResourceTable;
  3. import ohos.aafwk.ability.AbilitySlice;
  4. import ohos.aafwk.content.Intent;
  5. import ohos.agp.components.*;
  6. import ohos.agp.utils.LayoutAlignment;
  7. import ohos.agp.window.dialog.ToastDialog;
  8.  
  9.  
  10. public class MainAbilitySlice extends AbilitySlice implements Slider.ValueChangedListener {
  11.     @Override
  12.     public void onStart(Intent intent) {
  13.         super.onStart(intent);
  14.         super.setUIContent(ResourceTable.Layout_ability_main);
  15.         Slider slider = (Slider)findComponentById(ResourceTable.Id_slider);
  16.         slider.setValueChangedListener(this);
  17.  
  18.     }
  19.     @Override
  20.     public void onActive() {
  21.         super.onActive();
  22.     }
  23.  
  24.     @Override
  25.     public void onForeground(Intent intent) {
  26.         super.onForeground(intent);
  27.     }
  28.  
  29.     //当进度值改变
  30.     //滑块组件的对象
  31.     //当前进度值
  32.     //如果enabled为true，b则为true
  33.     @Override
  34.     public void onProgressUpdated(Slider slider, int i, boolean b) {
  35.         ToastDialog td = new ToastDialog(this);
  36.         td.setAlignment(LayoutAlignment.BOTTOM);
  37.         td.setDuration(500);
  38.         td.setText("当前进度为："+ i);
  39.         td.show();
  40.     }
  41.     //下面两个方法会反复调用onProgressUpdated，它们本身在一次监听中只会调用一次
  42.     //当用户鼠标或手指，按下滑块且不松开时
  43.     @Override
  44.     public void onTouchStart(Slider slider) {
  45.         ToastDialog td = new ToastDialog(this);
  46.         td.setAlignment(LayoutAlignment.BOTTOM);
  47.         td.setDuration(500);
  48.         td.setText("按下");
  49.         td.show();
  50.     }
  51.     //当用户鼠标或手指，松开滑块时
  52.     @Override
  53.     public void onTouchEnd(Slider slider) {
  54.         ToastDialog td = new ToastDialog(this);
  55.         td.setAlignment(LayoutAlignment.BOTTOM);
  56.         td.setDuration(500);
  57.         td.setText("松开");
  58.         td.show();
  59.     }
  60. }
  61.

由于这里用的是吐司，设置持续时间是500毫秒，因此会出现”延迟“的现象，可以通过修改Text的方式来呈现。

案例：图片缩放与拖动

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical"
  8.     >
  9.     <Image
  10.         ohos:id="$+id:danganronpa"
  11.         ohos:height="match_content"
  12.         ohos:width="match_content"
  13.         ohos:image_src="$media:danganronpa"/>
  14.     <Slider
  15.         ohos:id="$+id:slider"
  16.         ohos:height="50vp"
  17.         ohos:width="300vp"
  18.         ohos:background_instruct_element="#667755"
  19.         ohos:max="100"
  20.         ohos:min="1"
  21.         ohos:progress="10"
  22.         />
  23.  
  24. </DirectionalLayout>
  1. package com.example.myapplication.slice;
  2. import com.example.myapplication.ResourceTable;
  3. import ohos.aafwk.ability.AbilitySlice;
  4. import ohos.aafwk.content.Intent;
  5. import ohos.agp.components.*;
  6. import ohos.multimodalinput.event.MmiPoint;
  7. import ohos.multimodalinput.event.TouchEvent;
  8.  
  9.  
  10. public class MainAbilitySlice extends AbilitySlice implements Slider.ValueChangedListener ,Component.TouchEventListener{
  11.     Image img;
  12.     float x1;//手指按下位置x轴
  13.     float y1;//手指按下位置y轴
  14.     float imgX;//图片左上角坐标X
  15.     float imgY;//图片左上角坐标Y
  16.     @Override
  17.     public void onStart(Intent intent) {
  18.         super.onStart(intent);
  19.         super.setUIContent(ResourceTable.Layout_ability_main);
  20.         img = (Image)findComponentById(ResourceTable.Id_danganronpa);
  21.         Slider slider = (Slider)findComponentById(ResourceTable.Id_slider);
  22.         slider.setValueChangedListener(this);
  23.         img.setTouchEventListener(this);
  24.     }
  25.     @Override
  26.     public void onActive() {
  27.         super.onActive();
  28.     }
  29.  
  30.     @Override
  31.     public void onForeground(Intent intent) {
  32.         super.onForeground(intent);
  33.     }
  34.  
  35.     @Override
  36.     public void onProgressUpdated(Slider slider, int i, boolean b) {
  37.         //放大或许缩小多少,(min:1~max:100)*0.1
  38.         float rate = (float)(i *0.1);
  39.         img.setScale(rate,rate);
  40.     }
  41.     @Override
  42.     public void onTouchStart(Slider slider) {
  43.  
  44.     }
  45.     @Override
  46.     public void onTouchEnd(Slider slider) {
  47.  
  48.     }
  49.  
  50.     @Override
  51.     public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
  52.         int action = touchEvent.getAction();
  53.         MmiPoint postion = touchEvent.getPointerPosition(0);
  54.         switch(action) {
  55.             case TouchEvent.PRIMARY_POINT_DOWN: {//手指按下位置
  56.                 x1 = postion.getX();
  57.                 y1 = postion.getY();
  58.                 imgX = img.getTranslationX();
  59.                 imgY = img.getTranslationY();
  60.                 break;
  61.             }
  62.             case TouchEvent.POINT_MOVE: {//手指按下移动
  63.                 float x2 = postion.getX();
  64.                 float y2 = postion.getY();
  65.                 float x = x2 - x1;
  66.                 float y = y2 - y1;
  67.                 img.setTranslation(imgX + x, imgY + y);
  68.                 break;
  69.             }
  70.             default: {
  71.                 throw new IllegalStateException("Unexpected value: " + action);
  72.             }
  73.         }
  74.         return true;
  75.     }
  76. }
  77.

ListContainer列表容器组件

  • 其容器里面是由许多item填充
  • 需要准备一个统一的item布局格式
  • 需要用javabean类去表示item
  • 需要一个适配器去管理每一个item
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical"
  8.     >
  9.     <ListContainer
  10.         ohos:id="$+id:listContainer"
  11.         ohos:height="match_content"
  12.         ohos:width="match_content"
  13.         ohos:layout_alignment="horizontal_center"/>
  14.  
  15. </DirectionalLayout>

另创建一个布局xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_content"
  5.     ohos:width="match_content"
  6.     ohos:orientation="vertical">
  7.  
  8.     <Text
  9.         ohos:id="$+id:itemtext"
  10.         ohos:height="50vp"
  11.         ohos:width="match_parent"
  12.         ohos:text_size="35fp"/>
  13. </DirectionalLayout>

 新建一个package（domain），再创建一个class作为javebeen包（Item）。

 

  1. package com.example.myapplication.domain;
  2.  
  3. public class Item {
  4.     private String text;//用于给item中text赋值
  5.  
  6.     public Item() {
  7.     }
  8.  
  9.     public Item(String text) {
  10.         this.text = text;
  11.     }
  12.  
  13.     public String getText(){
  14.         return text;
  15.     }
  16.     public void setText(String text){
  17.         this.text = text;
  18.     }
  19. }

准备一个适配器（ItemProvider），去管理item

 

  1. package com.example.myapplication.provider;
  2.  
  3. import com.example.myapplication.domain.Item;
  4. import ohos.agp.components.*;
  5. import com.example.myapplication.ResourceTable;
  6. import ohos.aafwk.ability.AbilitySlice;
  7.  
  8. import java.util.ArrayList;
  9.  
  10. public class ItemProvider extends BaseItemProvider {
  11.     private ArrayList<Item> list;//用于存储所有Item对象
  12.     private AbilitySlice as;
  13.     public ItemProvider( ArrayList<Item> list,AbilitySlice as) {
  14.         this.list = list;
  15.         this.as = as;
  16.     }
  17.     public ArrayList<Item> getList(){
  18.         return list;
  19.     }
  20.     public void setList(ArrayList<Item> list){
  21.         this.list = list;
  22.     }
  23.     public AbilitySlice getAs(AbilitySlice as){
  24.         return as;
  25.     }
  26.     public void setAs(AbilitySlice as){
  27.         this.as = as;
  28.     }
  29.     //返回总数
  30.     @Override
  31.     public int getCount() {
  32.         return list.size();
  33.     }
  34.  
  35.     //索引
  36.     @Override
  37.     public Object getItem(int i) {
  38.         if(list!=null&&i>=0&&i<list.size()){
  39.             return list.get(i);
  40.         }
  41.         return null;
  42.     }
  43.  
  44.     //返回某一项的ID
  45.     @Override
  46.     public long getItemId(int i) {
  47.         return i;
  48.     }
  49.  
  50.     @Override
  51.     public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
  52.         //获取布局对象
  53.         DirectionalLayout dl =(DirectionalLayout)LayoutScatter.getInstance(as).parse(ResourceTable.Layout_itemview,null,false);
  54.         //获取数据
  55.         Item item = list.get(i);
  56.         //将布局中的text拿出
  57.         Text text = (Text) dl.findComponentById(ResourceTable.Id_itemtext);
  58.         //设置文本内容
  59.         text.setText(item.getText());
  60.         //返回该布局,布局包裹了text
  61.         return dl;
  62.     }
  63. }

 回到MainAbilitySlice

  1. package com.example.myapplication.slice;
  2. import com.example.myapplication.ResourceTable;
  3. import com.example.myapplication.provider.ItemProvider;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.ListContainer;
  7.  
  8. import com.example.myapplication.domain.Item;
  9. import java.util.ArrayList;
  10.  
  11.  
  12. public class MainAbilitySlice extends AbilitySlice{
  13.     @Override
  14.     public void onStart(Intent intent) {
  15.         super.onStart(intent);
  16.         super.setUIContent(ResourceTable.Layout_ability_main);
  17.         ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_listContainer);
  18.         //创建一个数据集合
  19.         ArrayList<Item> dataList = getData();
  20.         //创建一个管理员对象
  21.         ItemProvider itemProviderp = new ItemProvider(dataList,this);
  22.         //将适配器交给列表容器
  23.         listContainer.setItemProvider(itemProviderp);
  24.     }
  25.     @Override
  26.     public void onActive() {
  27.         super.onActive();
  28.     }
  29.  
  30.     @Override
  31.     public void onForeground(Intent intent) {
  32.         super.onForeground(intent);
  33.     }
  34.     public ArrayList<Item> getData(){
  35.         ArrayList<Item> list = new ArrayList<>();
  36.         for(int i =0;i<100;i++){
  37.             list.add(new Item("item"+i));
  38.         }
  39.         return list;
  40.     }
  41.  
  42. }
  43.

基本优化

  • 在适配器类中有一个getComponet方法，每加载一次item就会调用一次getComponet方法。
  • 同时，适配器类会进行预加载，在显示屏中，会提前在当前进方向外多加载一个item。
  • 当item划出屏幕时，就会被销毁。

由此代码会导致内存之中产生大量的dl垃圾,由此进行最基本优化。

  1. //i指的是加载哪一行item
  2.     //Component表示当前要销毁的Component
  3.     //Component容器，装载已有的Component
  4.     @Override
  5.     public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
  6.         DirectionalLayout dl;
  7.         //获取布局对象
  8.         if(component!=null){
  9.             //将要销毁的component的布局赋值给要生成的component的布局
  10.             dl = (DirectionalLayout) component;
  11.         }
  12.         else{
  13.             dl =(DirectionalLayout)LayoutScatter.getInstance(as).parse(ResourceTable.Layout_itemview,null,false);
  14.         }
  15.         //获取数据
  16.         Item item = list.get(i);
  17.         //将布局中的text拿出
  18.         Text text = (Text) dl.findComponentById(ResourceTable.Id_itemtext);
  19.         //设置文本内容
  20.         text.setText(item.getText());
  21.         //返回该布局,布局包裹了text
  22.         return dl;
  23.     }

Picker滑动选择器组件

文本分为

未被选择的文本

  • ohos:normal_text_size=""
  • ohos:normal_text_color=""

已被选择的文本

  • ohos:selected_text_size=""
  • ohos:selected_text_color=""

选择的值范围（默认0~9）

  • ohos:max_value=""
  • ohos:min_value=""

默认选择的值

  • ohos:value=""

着色器：向中间渐变

  • ohos:shader_color=""
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.  
  9.    <Picker
  10.        ohos:id="$+id:picker"
  11.        ohos:height="match_content"
  12.        ohos:width="100vp"
  13.        ohos:normal_text_size="20fp"
  14.        ohos:selected_text_size="20fp"
  15.        ohos:normal_text_color="#21a8fd"
  16.        ohos:selected_text_color="#FF0000"
  17.        ohos:max_value="6"
  18.        ohos:min_value="0"
  19.        ohos:value="3"
  20.        />
  21.  
  22. </DirectionalLayout>

 

  1. package com.example.myapplication.slice;
  2.  
  3. import com.example.myapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.Picker;
  7.  
  8. import java.util.ArrayList;
  9.  
  10. public class MainAbilitySlice extends AbilitySlice {
  11.     @Override
  12.     public void onStart(Intent intent) {
  13.         super.onStart(intent);
  14.         super.setUIContent(ResourceTable.Layout_ability_main);
  15.         Picker picker = (Picker)findComponentById(ResourceTable.Id_picker);
  16.         ArrayList<String> list = new ArrayList<>();
  17.         list.add("星期一");
  18.         list.add("星期二");
  19.         list.add("星期三");
  20.         list.add("星期四");
  21.         list.add("星期五");
  22.         list.add("星期六");
  23.         list.add("星期日");
  24.         picker.setFormatter(
  25.             (int i) -> {
  26.                 //i表示要展示的数字
  27.                 //返回的就是要展示的内容
  28.                 return list.get(i);
  29.             }
  30.         );
  31.     }
  32.  
  33.     @Override
  34.     public void onActive() {
  35.         super.onActive();
  36.     }
  37.  
  38.     @Override
  39.     public void onForeground(Intent intent) {
  40.         super.onForeground(intent);
  41.     }
  42. }

省-市 联动的滑动选择

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="horizontal">
  8.  
  9.    <Picker
  10.       ohos:id="$+id:province"
  11.       ohos:height="match_content"
  12.       ohos:width="100vp"
  13.       ohos:normal_text_size="20fp"
  14.       ohos:selected_text_size="20fp"
  15.       ohos:value="0"/>
  16.    <Picker
  17.        ohos:id="$+id:city"
  18.        ohos:height="match_content"
  19.        ohos:width="100vp"
  20.        ohos:normal_text_size="20fp"
  21.        ohos:selected_text_size="20fp"
  22.        ohos:left_margin="10vp"
  23.        ohos:value="0"/>
  24. </DirectionalLayout>

准备一个Javabean

 

  1. package com.example.myapplication.domain;
  2.  
  3. import java.util.ArrayList;
  4.  
  5. public class Province {
  6.     private String name;
  7.     private ArrayList<String> list;
  8.     public Province(){}
  9.     public Province(String name,ArrayList<String> list){
  10.         this.name = name;
  11.         this.list = list;
  12.     }
  13.  
  14.     public String getName(){
  15.         return name;
  16.     }
  17.     public ArrayList<String> getList(){ return list; }
  18.  
  19.     public void setName(String name){
  20.         this.name = name;
  21.     }
  22.     public void setList(ArrayList<String> list){
  23.         this.list = list;
  24.     }
  25.  
  26. }

然后修改mainabilityslice

  1. package com.example.myapplication.slice;
  2.  
  3. import com.example.myapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import com.example.myapplication.domain.Province;
  7. import ohos.agp.components.Picker;
  8.  
  9. import java.util.ArrayList;
  10.  
  11.  
  12. public class MainAbilitySlice extends AbilitySlice implements Picker.ValueChangedListener {
  13.     Picker province;
  14.     Picker city;
  15.     ArrayList<Province> provincesList;
  16.     @Override
  17.     public void onStart(Intent intent) {
  18.         super.onStart(intent);
  19.         super.setUIContent(ResourceTable.Layout_ability_main);
  20.         province = (Picker)findComponentById(ResourceTable.Id_province);
  21.         city = (Picker)findComponentById(ResourceTable.Id_city);
  22.         provincesList = getData();
  23.  
  24.         //最大值最小值要在setFormatter前设置
  25.         province.setMinValue(0);
  26.         province.setMaxValue(provincesList.size()-1);
  27.         province.setFormatter(i->provincesList.get(i).getName());
  28.  
  29.  
  30.         city.setMinValue(0);
  31.         city.setMaxValue(provincesList.get(0).getList().size()-1);
  32.         city.setFormatter(i->provincesList.get(0).getList().get(i));
  33.  
  34.         province.setValueChangedListener(this);
  35.     }
  36.     public ArrayList<Province> getData(){
  37.         ArrayList<Province> provinceList = new ArrayList<>();
  38.         //江苏省的市的集合
  39.         ArrayList<String> jiangSuCities = new ArrayList<>();
  40.         jiangSuCities.add("南京市");
  41.         jiangSuCities.add("苏州市");
  42.         jiangSuCities.add("扬州市");
  43.         jiangSuCities.add("徐州市");
  44.         jiangSuCities.add("无锡市");
  45.  
  46.         //四川省的是的集合
  47.         ArrayList<String> siChuanCities = new ArrayList<>();
  48.         siChuanCities.add("成都市");
  49.         siChuanCities.add("绵阳市");
  50.         siChuanCities.add("绵阳市");
  51.         siChuanCities.add("绵阳市");
  52.  
  53.  
  54.         //添加省
  55.         provinceList.add(new Province("江苏省",jiangSuCities));
  56.         provinceList.add(new Province("四川省",siChuanCities));
  57.         return provinceList;
  58.     }
  59.     @Override
  60.     public void onActive() {
  61.         super.onActive();
  62.     }
  63.  
  64.     @Override
  65.     public void onForeground(Intent intent) {
  66.         super.onForeground(intent);
  67.     }
  68.  
  69.     @Override
  70.     //当前改变的滑动选择七对象
  71.     //旧值,之前的值
  72.     //新值，现在的值
  73.     public void onValueChanged(Picker picker, int i, int i1) {
  74.         if(picker==province){
  75.             Province choosedProvince = provincesList.get(i1);
  76.             city.setMaxValue(choosedProvince.getList().size()-1);
  77.             city.setFormatter(x->choosedProvince.getList().get(x));
  78.             //设置城市默认选中
  79.             city.setValue(0);
  80.         }
  81.     }
  82. }

时间滑动选择器组件

DatePicker

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.    <DatePicker
  9.       ohos:id="$+id:datepicker"
  10.       ohos:height="match_content"
  11.       ohos:width="300vp"
  12.       ohos:normal_text_size="20fp"
  13.       ohos:selected_text_size="20fp"/>
  14.    <Text
  15.       ohos:id="$+id:text"
  16.       ohos:height="40vp"
  17.       ohos:width="300vp"
  18.       ohos:text_size="35fp"/>
  19.  
  20. </DirectionalLayout>
  1. package com.example.myapplication.slice;
  2.  
  3. import com.example.myapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.DatePicker;
  7. import ohos.agp.components.Text;
  8.  
  9.  
  10. public class MainAbilitySlice extends AbilitySlice implements DatePicker.ValueChangedListener {
  11.     Text text;
  12.     @Override
  13.     public void onStart(Intent intent) {
  14.         super.onStart(intent);
  15.         super.setUIContent(ResourceTable.Layout_ability_main);
  16.         text = (Text)findComponentById(ResourceTable.Id_text);
  17.         DatePicker datePicker = (DatePicker)findComponentById(ResourceTable.Id_datepicker);
  18.         datePicker.setValueChangedListener(this);
  19.     }
  20.  
  21.     @Override
  22.     public void onActive() {
  23.         super.onActive();
  24.     }
  25.  
  26.     @Override
  27.     public void onForeground(Intent intent) {
  28.         super.onForeground(intent);
  29.     }
  30.     //值改变的datePicker
  31.     //年，月，日
  32.     @Override
  33.     public void onValueChanged(DatePicker datePicker, int i, int i1, int i2) {
  34.         text.setText(i+"年"+i1+"月"+i2+"日");
  35.     }
  36. }

TimePicker

用法一模一样

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.    <TimePicker
  9.       ohos:id="$+id:timepicker"
  10.       ohos:height="match_content"
  11.       ohos:width="300vp"
  12.       ohos:normal_text_size="20fp"
  13.       ohos:selected_text_size="20fp"/>
  14.    <Text
  15.       ohos:id="$+id:text"
  16.       ohos:height="40vp"
  17.       ohos:width="300vp"
  18.       ohos:text_size="35fp"/>
  19.  
  20. </DirectionalLayout>
  1. package com.example.myapplication.slice;
  2.  
  3. import com.example.myapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6.  
  7. import ohos.agp.components.Text;
  8. import ohos.agp.components.TimePicker;
  9.  
  10.  
  11. public class MainAbilitySlice extends AbilitySlice implements TimePicker.TimeChangedListener {
  12.     Text text;
  13.     @Override
  14.     public void onStart(Intent intent) {
  15.         super.onStart(intent);
  16.         super.setUIContent(ResourceTable.Layout_ability_main);
  17.         text = (Text)findComponentById(ResourceTable.Id_text);
  18.         TimePicker timePicker = (TimePicker)findComponentById(ResourceTable.Id_timepicker);
  19.         timePicker.setTimeChangedListener(this);
  20.     }
  21.  
  22.     @Override
  23.     public void onActive() {
  24.         super.onActive();
  25.     }
  26.  
  27.     @Override
  28.     public void onForeground(Intent intent) {
  29.         super.onForeground(intent);
  30.     }
  31.  
  32.     @Override
  33.     public void onTimeChanged(TimePicker timePicker, int i, int i1, int i2) {
  34.         text.setText(i+"时"+i1+"分"+i2+"秒");
  35.     }
  36. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/222172
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号