组件概述
常见组件
屏幕展现出来的元素，都称为组件。
注意：所有的组件都要添加到布局文件中去，否则无法显示也无法交互，因此一个用户界面至少包含一个布局。
文本组件
组件宽高三种值的写法
长度单位
像素（px）
特点：像素固定，不会自适应文字和设备，不写单位默认为px。不推荐使用。
vp
特点：比较灵活，可以让组件在不同设备上设置不会被破坏。（组件的宽和高都是自适应的）
vp = ( px * 160 ) / PPI
PPI（屏幕像素点密度）：对角线像素点个数 / 屏幕尺寸。
fp
特点：用于字体大小
颜色属性
在计算机中采用光学三原色，分别为红绿蓝，也称RGB（十进制：0 ～ 255，十六进制：0 ～ FF）
在xml中只能使用十六进制（第一步要带#号），从左向右依次为红、绿、蓝色（各占两位，共6位）如：#1188DD
添加透明度：在六位数之前加两位数，如#001188DD（纯透明）
技巧：当红绿蓝颜色扽两位数字一样时（红绿蓝必须都2位一样），可以写只写一位，如#112233可以写为#123
边距
边距分为：外边距和内边距
外边距：
组件边框外侧距离其他组件的距离
如果组件外侧没有其他组件，则是到父布局的距离
代码
xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> ohos:height="200px" ohos:width="200px" ohos:text="12" ohos:text_size="150px" ohos:background_element="#88917643" ohos:left_margin="10vp" ohos:top_margin="10vp" ohos:right_margin="10vp" /> ohos:height="67vp" ohos:width="67vp" ohos:text="12" ohos:text_size="50fp" ohos:background_element="#18D" ohos:top_margin="20vp" /> 内边距： 组件边框内侧距离内部文字的距离 Text文本框案例1 代码 xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:background_element="#F2F2F2" ohos:orientation="vertical"> ohos:height="50vp" ohos:width="319vp" ohos:background_element="#FFFFFF" ohos:layout_alignment="horizontal_center" ohos:text="请输入手机号" ohos:text_alignment="center" ohos:text_color="#999999" ohos:text_size="17fp" ohos:top_margin="100vp" /> ohos:height="50vp" ohos:width="319vp" ohos:background_element="#FFFFFF" ohos:layout_alignment="horizontal_center" ohos:text="请输入密码" ohos:text_alignment="center" ohos:text_color="#999999" ohos:text_size="17fp" ohos:top_margin="10vp" /> ohos:height="match_content" ohos:width="match_content" ohos:layout_alignment="right" ohos:right_margin="20vp" ohos:text="忘记密码了？" ohos:text_color="#979797" ohos:text_size="17fp" ohos:top_margin="13vp" /> ohos:height="47vp" ohos:width="319vp" ohos:background_element="#21a8fd" ohos:layout_alignment="horizontal_center" ohos:text="登录" ohos:text_alignment="center" ohos:text_color="#FEFEFE" ohos:text_size="24vp" ohos:top_margin="77vp" /> ohos:height="47vp" ohos:width="319vp" ohos:background_element="#21a8fd" ohos:layout_alignment="horizontal_center" ohos:text="注册" ohos:text_alignment="center" ohos:text_color="#FEFEFE" ohos:text_size="24vp" ohos:top_margin="13vp" /> Text文本框案例2 代码： xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:background_element="#F2F2F2" ohos:orientation="vertical"> ohos:height="50vp" ohos:width="319vp" ohos:background_element="#FFFFFF" ohos:layout_alignment="horizontal_center" ohos:text="请输入新密码" ohos:text_alignment="center" ohos:text_color="#999999" ohos:text_size="17fp" ohos:top_margin="10vp" /> ohos:height="50vp" ohos:width="319vp" ohos:background_element="#FFFFFF" ohos:layout_alignment="horizontal_center" ohos:text="请确认密码" ohos:text_alignment="center" ohos:text_color="#999999" ohos:text_size="17fp" ohos:top_margin="7vp" /> ohos:height="47vp" ohos:width="319vp" ohos:background_element="#21a8fd" ohos:layout_alignment="horizontal_center" ohos:text="完成" ohos:text_alignment="center" ohos:text_color="#FEFEFE" ohos:text_size="24vp" ohos:top_margin="13vp" /> Text文本框案例3 跑马灯效果 ability_main.xml xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:background_element="#F2F2F2" ohos:orientation="vertical"> ohos:id="$+id:text1" ohos:height="100vp" ohos:width="300vp" ohos:background_element="#55121212" ohos:text="要学会鸿蒙，加油加油加油，努力努力努力" ohos:text_size="40vp" ohos:truncation_mode="auto_scrolling" ohos:auto_scrolling_count="unlimited" ohos:auto_scrolling_duration="2000" /> MainAbilitySlice.java package com.example.myapplication.slice; import com.example.myapplication.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.ability.OnClickListener; import ohos.aafwk.content.Intent; import ohos.aafwk.content.Operation; import ohos.agp.components.*; import ohos.global.resource.NotExistException; import ohos.global.resource.Resource; import ohos.javax.xml.stream.events.EndElement; import ohos.multimodalinput.event.MmiPoint; import ohos.multimodalinput.event.TouchEvent; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.Random; public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { Text text; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //1. 获取Text text = (Text) findComponentById(ResourceTable.Id_text1); //给text文本框添加事件 text.setClickedListener(this); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent);} @Override public void onClick(Component component) { //开启跑马灯效果 //两种方法可以获取文本对象 //1. 方法的参数，参数表示被点击的组件对象 //2. 把onStart方法中的text对象，挪到成员位置 Text t = (Text) component; t.startAutoScrolling(); } } Image图片标签 剪切 xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:background_element="#F2F2F2" ohos:orientation="vertical"> ohos:height="100px" ohos:width="100px" ohos:image_src="$media:girl1" ohos:background_element="#0000FF" ohos:clip_alignment="left" /> 缩放 xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> ohos:height="1000px" ohos:width="1000px" ohos:image_src="$media:plane" ohos:background_element="#0000FF" ohos:scale_mode="zoom_start" /> 弹框组件 基本用法： CommonDialog 代码： ability_main.xml xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> ohos:id="$+id:but1" ohos:height="match_content" ohos:width="match_content" ohos:text="点我" ohos:text_size="40vp" ohos:background_element="red" /> MainAbilitySlice.java package com.example.myapplication.slice; import com.example.myapplication.ResourceTable; import com.example.myapplication.domain.GirlFriend; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.Button; import ohos.agp.components.Component; import ohos.agp.components.Image; import ohos.agp.components.Text; import ohos.agp.window.dialog.CommonDialog; import ohos.agp.window.dialog.IDialog; import java.util.ArrayList; import java.util.Random; public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //1. 找到按钮 Button btu = (Button) findComponentById(ResourceTable.Id_but1); //2. 给按钮添加点击事件 btu.setClickedListener(this); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } @Override public void onClick(Component component) { //把普通弹框弹出来就可以了 //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(); } } CommonDialog 自定义布局 在xml中写弹框 代码： ability_main.xml xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> ohos:id="$+id:but" ohos:height="match_content" ohos:width="match_content" ohos:text="点我" ohos:text_size="40fp" ohos:background_element="red" /> messagedialog.xml xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_content" ohos:width="match_content" ohos:orientation="vertical"> ohos:id="$+id:message" ohos:height="match_content" ohos:width="match_content" ohos:text_size="40fp" /> ohos:id="$+id:submit" ohos:height="match_content" ohos:width="match_content" ohos:text="确定" ohos:text_size="40fp" ohos:background_element="#21A896" /> ohos:id="$+id:cancel" ohos:height="match_content" ohos:width="match_content" ohos:text="取消" ohos:text_size="40fp" ohos:background_element="#0021D9" ohos:top_margin="10vp" /> MainAbilitySlice.java package com.example.myapplication.slice; import com.example.myapplication.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.*; import ohos.agp.window.dialog.CommonDialog; import ohos.agp.window.dialog.IDialog; import java.util.ArrayList; import java.util.Random; public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //1. 找到布局中的按钮 Button but = (Button) findComponentById(ResourceTable.Id_but); //2. 添加点击事件 but.setClickedListener(this); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } @Override public void onClick(Component component) { //展示弹框 //创建弹框对象 CommonDialog cd = new CommonDialog(this); //默认包裹内容,更改用cd.setSize() //弹框默认居中,更改用cd.setAlignment() //弹框默认透明，更改用cd.setTransparent() //创建弹框默认是直角，更改用cd.setCornerRadius() cd.setCornerRadius(15); //把massagedialog.xml加载到内存当中，交给弹框并展示出来 //加载xml文件，并获得一个布局对象 //parse方法：加载一个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.setText("请选择下面的按钮并点击"); //给俩按钮添加单击事件 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(); } } 简化代码抽取工具类 目的：不需要重复写代码，写一遍代码在类里然后直接调用方法即可。 MyDialog.java package com.example.myapplication.slice; import com.example.myapplication.ResourceTable; import com.example.myapplication.slice.dialogutils.MyDialog; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.*; import ohos.agp.window.dialog.CommonDialog; import ohos.agp.window.dialog.IDialog; import java.util.ArrayList; import java.util.Random; public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //1. 找到布局中的按钮 Button but = (Button) findComponentById(ResourceTable.Id_but); //2. 添加点击事件 but.setClickedListener(this); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } @Override public void onClick(Component component) { MyDialog.showDialog(this,"抽取工具类"); } } MainAbilitySlice.java package com.example.myapplication.slice; import com.example.myapplication.ResourceTable; import com.example.myapplication.slice.dialogutils.MyDialog; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.*; import ohos.agp.window.dialog.CommonDialog; import ohos.agp.window.dialog.IDialog; import java.util.ArrayList; import java.util.Random; public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //1. 找到布局中的按钮 Button but = (Button) findComponentById(ResourceTable.Id_but); //2. 添加点击事件 but.setClickedListener(this); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } @Override public void onClick(Component component) { MyDialog.showDialog(this,"抽取工具类"); } } ToastDialog ToastDialog默认展示2秒，时间到了自动消失。 代码： ability_main.xml xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> ohos:id="$+id:btu" ohos:height="match_content" ohos:width="match_content" ohos:text="点我" ohos:text_size="40fp" ohos:background_element="#2136FD" ohos:text_color="#FFF" /> MainAbilitySlice.java package com.example.myapplication.slice; import com.example.myapplication.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.*; import ohos.agp.utils.LayoutAlignment; import ohos.agp.window.dialog.CommonDialog; import ohos.agp.window.dialog.IDialog; import ohos.agp.window.dialog.ToastDialog; import java.util.ArrayList; import java.util.Random; public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //找到按钮 Button btu = (Button) findComponentById(ResourceTable.Id_btu); //添加点击事件 btu.setClickedListener(this); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } @Override public void onClick(Component component) { //出现一个吐司弹框 ToastDialog td = new ToastDialog(this); td.setText("吐司弹框出现了"); td.setAlignment(LayoutAlignment.CENTER); //设置出现的时间 td.setDuration(2000); //让吐司弹框出现 td.show(); } } ToastDialog抽取工具类 ability_main.xml xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> ohos:id="$+id:btu" ohos:height="match_content" ohos:width="match_content" ohos:text="点我" ohos:text_size="40fp" ohos:background_element="#2136FD" ohos:text_color="#FFF" /> mytoast.xml xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_content" ohos:width="match_content" ohos:orientation="vertical"> ohos:id="$+id:msg" ohos:height="match_content" ohos:width="match_content" ohos:text_size="30fp" ohos:text_color="#FFF" ohos:text_alignment="center" ohos:background_element="#464343" /> ToastUtils.java package com.example.myapplication.MyToast; import com.example.myapplication.ResourceTable; import ohos.agp.components.Component; import ohos.agp.components.DirectionalLayout; import ohos.agp.components.LayoutScatter; import ohos.agp.components.Text; import ohos.agp.utils.LayoutAlignment; import ohos.agp.window.dialog.ToastDialog; import ohos.app.Context; public class ToastUtils { public static void showDialog(Context context,String message){ //1. 加载xml文件到内存当中 DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(context).parse(ResourceTable.Layout_mytoast,null,false); //2. 获取到当前布局对象的文本组件 Text msg = (Text) dl.findComponentById(ResourceTable.Id_msg); //3. 把需要提示的信息设置到文本当中 msg.setText(message); //4. 创建一个吐司弹框到对象 ToastDialog td = new ToastDialog(context); //设置吐司的大小（默认包裹内容） td.setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT,DirectionalLayout.LayoutConfig.MATCH_CONTENT); //设置出现的时间 td.setDuration(2000); //设置对齐方式 td.setAlignment(LayoutAlignment.BOTTOM); //把xml布局对象交给吐司 td.setContentCustomComponent(dl); //吐司偏移 td.setOffset(0,200); //吐司出现 td.show(); } } MainAbilitySlice.java package com.example.myapplication.slice; import com.example.myapplication.MyToast.ToastUtils; import com.example.myapplication.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.*; import ohos.agp.utils.LayoutAlignment; import ohos.agp.window.dialog.CommonDialog; import ohos.agp.window.dialog.IDialog; import ohos.agp.window.dialog.ToastDialog; import java.util.ArrayList; import java.util.Random; public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //找到按钮 Button btu = (Button) findComponentById(ResourceTable.Id_btu); //添加点击事件 btu.setClickedListener(this); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } @Override public void onClick(Component component) { ToastUtils.showDialog(this,"吐司已出现"); } } 时钟 ability_main.xml xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> ohos:id="$+id:clock" ohos:height="match_content" ohos:width="match_content" ohos:time_zone="GMT" ohos:text_size="20fp" /> MainAbilitySlice.java package com.example.myapplication.slice; import com.example.myapplication.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.Clock; import ohos.agp.components.Component; public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //1. 找到时钟组件 Clock clock = (Clock) findComponentById(ResourceTable.Id_clock); //2. 修改时钟组件展示的方式 //默认时钟是24小时的 //如果要用12小时进行展示，需要把24小时展示方式关闭 clock.set24HourModeEnabled(false); //3. 指定12小时的展示格式 clock.setFormatIn12HourMode("yyyy年MM月dd日 hh:mm:ss a"); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } } 练习： 通过点击按钮，将时钟组件中的显示方式在 24 小时制和 12 小时制之间切换。 ability_main.xml xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> ohos:id="$+id:clock" ohos:time="" ohos:height="match_content" ohos:width="match_content" ohos:multiple_lines="true" ohos:text_alignment="center" ohos:mode_24_hour="yyyy年MM月dd日 HH:mm:ss" ohos:layout_alignment="center" ohos:text_size="35fp" /> ohos:id="$+id:but" ohos:height="match_content" ohos:width="match_content" ohos:text="改为12小时制" ohos:text_size="20fp" ohos:background_element="#92D050" ohos:top_margin="30vp" ohos:layout_alignment="center" /> MainAbilitySlice.java package com.example.myapplication.slice; import com.example.myapplication.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.Button; import ohos.agp.components.Clock; import ohos.agp.components.Component; public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { Clock clock; Button but; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //1. 找到时钟,按钮组件 clock = (Clock) findComponentById(ResourceTable.Id_clock); but = (Button) findComponentById(ResourceTable.Id_but); //2. 给按钮添加一个单击事件 but.setClickedListener(this); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } //0：24小时，1：12小时 int flag = 0; @Override public void onClick(Component component) { if(flag == 0){ //当前为24小时，需要改为12小时 clock.set24HourModeEnabled(false); clock.setFormatIn12HourMode("yyyy年MM月dd日 hh:mm:ss a"); but.setText("改为24小时"); flag = 1; } else if(flag == 1){ //当前为12小时，需要改为24小时 clock.set24HourModeEnabled(true); clock.setFormatIn12HourMode("yyyy年MM月dd日 HH:mm:ss"); but.setText("改为12小时"); flag = 0; } } } 定时器 ability_main.xml xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> ohos:id="$+id:ticktimer" ohos:height="match_content" ohos:width="match_content" ohos:text_size="30fp" ohos:text_color="#FFF" ohos:background_element="black" ohos:text_alignment="center" ohos:layout_alignment="center" /> ohos:id="$+id:start" ohos:height="match_content" ohos:width="match_content" ohos:text="开始" ohos:text_size="30fp" ohos:text_color="#FFF" ohos:background_element="#666600" ohos:text_alignment="center" ohos:top_margin="30vp" ohos:layout_alignment="center" /> ohos:id="$+id:end" ohos:height="match_content" ohos:width="match_content" ohos:text="结束" ohos:text_size="30fp" ohos:text_color="#FFF" ohos:background_element="#666600" ohos:text_alignment="center" ohos:top_margin="30vp" ohos:layout_alignment="center" /> MainAbilitySlice.java package com.example.myapplication.slice; import com.example.myapplication.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.Button; import ohos.agp.components.Clock; import ohos.agp.components.Component; import ohos.agp.components.TickTimer; public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { TickTimer ticktimer; Button start; Button end; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //1. 找到对应组件 ticktimer = (TickTimer) findComponentById(ResourceTable.Id_ticktimer); start = (Button) findComponentById(ResourceTable.Id_start); end = (Button) findComponentById(ResourceTable.Id_end); //2. 绑定单击事件 start.setClickedListener(this); end.setClickedListener(this); //给定时器做一些基本设置 //false:正向计时，true：反向计数 ticktimer.setCountDown(false); //设置计时的格式 ticktimer.setFormat("mm:ss"); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } @Override //component 被点击的按钮对象 public void onClick(Component component) { //判断 if (component == start){ //开启定时 ticktimer.start(); }else if(component == end){ //结束计时间 ticktimer.stop(); } } } 进度条 ProgressBar ability_main.xml xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> ohos:id="$+id:pb" ohos:height="match_content" ohos:width="300vp" ohos:progress="0" ohos:progress_hint_text="0%" ohos:progress_hint_text_color="#000000" ohos:progress_width="50vp" ohos:progress_color="#FF0000" ohos:max="100" ohos:min="0" /> MainAbilitySlice.java package com.example.myapplication.slice; import com.example.myapplication.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.*; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.logging.SimpleFormatter; public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //1. 找到进度条组件 ProgressBar pb = (ProgressBar) findComponentById(ResourceTable.Id_pb); //2. 给进度条绑定单击事件 pb.setClickedListener(this); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } @Override public void onClick(Component component) { //两种获取进度条的方式都可以 //一种：把onStart方法中的 pb 移动到成员位置 //二种：用onClick方法中的 component //强转 ProgressBar pb = (ProgressBar) component; //获取进度条里原有的值 int progress = pb.getProgress(); if (progress >= 100){ //如果进度超出100，再点击就不会有任何的修改了 return; } //把进度条里的值 + 5 progress += 5; //再给进度条设置进度 pb.setProgressValue(progress); //修改提示文字 pb.setProgressHintText(progress + "%"); } } RoundProgressBar ability_main.xml xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> ohos:id="$+id:rpb" ohos:height="300vp" ohos:width="300vp" ohos:progress_hint_text="80%" ohos:progress_hint_text_size="50vp" ohos:progress_hint_text_color="#000" ohos:progress="80" ohos:progress_width="20vp" ohos:progress_color="#F00" ohos:max="100" ohos:min="0" /> MainAbilitySlice.java package com.example.myapplication.slice; import com.example.myapplication.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.*; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.logging.SimpleFormatter; public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //1. 找到组件 RoundProgressBar rpb = (RoundProgressBar) findComponentById(ResourceTable.Id_rpb); //2. 为组件创建点击事件 rpb.setClickedListener(this); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } @Override public void onClick(Component component) { //强转，用于获取到当前值 RoundProgressBar rpb = (RoundProgressBar) component; //获得进度条里原来到值 int progress = rpb.getProgress(); if (progress >= 100){ return; } progress += 50; //判断点击之后是否超出100，超过直接到100 if (progress >= 100) { //重新设置进度条进度 rpb.setProgressValue(100); //修改进度条文字 rpb.setProgressHintText(100 + "%"); }else { //重新设置进度条进度 rpb.setProgressValue(progress); //修改进度条文字 rpb.setProgressHintText(progress + "%"); } } }
发表评论