11. 显示类组件

最新推荐文章于 2022-03-29 13:26:17 发布

蓝胖子（*^_^*）

最新推荐文章于 2022-03-29 13:26:17 发布

阅读量335

点赞数

分类专栏： HarmonyOS(2.0)应用开发实战教程文章标签： harmonyos

本文链接：https://blog.csdn.net/u010171285/article/details/119280702

版权

HarmonyOS(2.0)应用开发实战教程专栏收录该内容

26 篇文章 2 订阅

订阅专栏

组件概述

常见组件

屏幕展现出来的元素，都称为组件。

注意：所有的组件都要添加到布局文件中去，否则无法显示也无法交互，因此一个用户界面至少包含一个布局。

文本组件

组件宽高三种值的写法

长度单位

像素（px）

特点：像素固定，不会自适应文字和设备，不写单位默认为px。不推荐使用。

特点：比较灵活，可以让组件在不同设备上设置不会被破坏。（组件的宽和高都是自适应的）

vp = ( px * 160 ) / PPI

PPI（屏幕像素点密度）：对角线像素点个数 / 屏幕尺寸。

特点：用于字体大小

颜色属性

在计算机中采用光学三原色，分别为红绿蓝，也称RGB（十进制：0 ～ 255，十六进制：0 ～ FF）

在xml中只能使用十六进制（第一步要带#号），从左向右依次为红、绿、蓝色（各占两位，共6位）如：#1188DD

添加透明度：在六位数之前加两位数，如#001188DD（纯透明）

技巧：当红绿蓝颜色扽两位数字一样时（红绿蓝必须都2位一样），可以写只写一位，如#112233可以写为#123

边距

边距分为：外边距和内边距

外边距：

组件边框外侧距离其他组件的距离

如果组件外侧没有其他组件，则是到父布局的距离

代码

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Text
        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"
        />
    <!--边距失效：边距设置是从上到下，从左到右执行的，17行的就已经失效了-->
    <!--ohos:margin="10vp"上下左右边距都移动10vp-->

    <Text
        ohos:height="67vp"
        ohos:width="67vp"
        ohos:text="12"
        ohos:text_size="50fp"
        ohos:background_element="#18D"
        ohos:top_margin="20vp"
        />


</DirectionalLayout>

内边距：

组件边框内侧距离内部文字的距离

Text文本框案例1

代码

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#F2F2F2"
    ohos:orientation="vertical">

    <Text
        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"
        />

    <Text
        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"
        />

    <Text
        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"
        />

    <Button
        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"
        />

    <Button
        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"
        />


</DirectionalLayout>

Text文本框案例2

代码：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#F2F2F2"
    ohos:orientation="vertical">

    <Text
        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"
        />

    <Text
        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"
        />

    <Button
        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"
        />



</DirectionalLayout>

Text文本框案例3 跑马灯效果

ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    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">

    <Text
        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"
        />



</DirectionalLayout>

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图片标签

剪切

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    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">

    <Image
        ohos:height="100px"
        ohos:width="100px"
        ohos:image_src="$media:girl1"
        ohos:background_element="#0000FF"
        ohos:clip_alignment="left"
        />



</DirectionalLayout>

缩放

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Image
        ohos:height="1000px"
        ohos:width="1000px"
        ohos:image_src="$media:plane"
        ohos:background_element="#0000FF"
        ohos:scale_mode="zoom_start"
        />
    <!-- inside:等比例缩小 -->
    <!-- center:不缩放，直接缩小 -->
    <!-- stretch:拉伸，铺满 -->

    <!-- zoom_center:原图等比例放大（横向居中） -->

</DirectionalLayout>

弹框组件

基本用法：

CommonDialog

代码：

ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Button
        ohos:id="$+id:but1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="点我"
        ohos:text_size="40vp"
        ohos:background_element="red"
        />


</DirectionalLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Button
        ohos:id="$+id:but"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="点我"
        ohos:text_size="40fp"
        ohos:background_element="red"
        />

</DirectionalLayout>

messagedialog.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:message"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="40fp"
        />

    <Button
        ohos:id="$+id:submit"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="确定"
        ohos:text_size="40fp"
        ohos:background_element="#21A896"
        />

    <Button
        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"
        />


</DirectionalLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Button
        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"
        />

</DirectionalLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Button
        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"
        />



</DirectionalLayout>

mytoast.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical">

    <Text
        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"
        />

</DirectionalLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Clock
        ohos:id="$+id:clock"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:time_zone="GMT"
        ohos:text_size="20fp"
        />
        <!-- time_zone：时区 ，GMT：标准时间-->
        <!-- ohos:mode_24_hour="yyyy年MM月dd日 HH:mm:ss" -->

        <!-- ohos:mode_24_hour="false"
             ohos:mode_12_hour="yyyy年MM月dd日 hh:mm:ss a"
             12小时在xml文件里显示不对，是系统bug，需要在代码中写
        -->
</DirectionalLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Clock
        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"
        />
<!--time：时间戳，可以自己选择时间，""里填毫秒，不知道可以百度查-->
    <Button
        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"
        />


</DirectionalLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <TickTimer
        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"
        />

    <Button
        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"
        />

    <Button
        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"
        />


</DirectionalLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

        <!-- progress :设置进度比例-->
        <!-- progress_hint_text :进度条提示文字-->
        <!-- focus_border_width :进度条粗细 -->
        <!-- max/min: 进度最大最小值-->
    <ProgressBar
        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"
        />



</DirectionalLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <RoundProgressBar
        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"
        />




</DirectionalLayout>

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 + "%");
        }


    }
}

蓝胖子（*^_^*）

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
11. 显示类组件

组件概述常见组件屏幕展现出来的元素，都称为组件。注意：所有的组件都要添加到布局文件中去，否则无法显示也无法交互，因此一个用户界面至少包含一个布局。文本组件组件宽高三种值的写法长度单位（像素px）显示类组件交互类组件常用组件的高级用法...
复制链接

扫一扫