鸿蒙开发的入门第二章

鸿蒙开发的入门第二章

1.常见布局和常见组件

组件

屏幕展示出来的元素，都称之为组件。比如华为已经提供的：文本，图片，进度条，输入框等。

顶级父类：Component。

布局：

组件的展示方式。比如：线性布局，相对布局，绝对布局，格子布局等。

顶级父类：ComponentContainer。理解为组件容器。

布局一般以“Layout”结尾，如DirectionalLayout、DependentLayout等。不同的布局中，组件的展示方式是不一

样的，比如线性布局，就是从上往下，或者从左往右依次摆放内部组件的。比如格子布局，就是n行n列的格子。

注意点：

组件在未被添加到布局中时，既无法显示也无法交互，因此一个用户界面至少包含一个布局。

2.常见组件

组件分类：

显示类组件

只负责数据展示的，无法跟用户交互，比如展示文本的组件，展示图片的组件。

交互类组件

可以跟用户交互的，比如用户可以点击的按钮组件，用户可以输入的文本框组件。

布局类组件

刚刚讲解的布局其实也是一种比较特殊的组件。

3.显示类组件

文本Text、图片Image、CommonDialog普通弹框组件、ToastDialog信息提示组件、时钟Clock、定时器

TickTimer、进度条ProgressBar

3.1Text文本组件

概述：

文本（Text）是用来显示字符串的组件，在界面上显示为一块文本区域。仅仅作为展示数据使用，用户不能在App

中修改文本组件中的内容。

Text组件是最基本的组件，后面还会学习他的子类组件，比如Button，TextField都是从这个类衍生而来的。

常见的属性：

这些属性不用去背，用着用着就熟了，想要对文本进行一个设置，如果忘记属性，可以直接到笔记中找，或者到华

为开发者文档中找。

地址：

功能说明 属性名称
id属性,唯一 id
组件宽 width
组件高 height
文本内容 text
背景，可以设颜色值或xml背景 background_element
文字颜色 text_color
文字粗细 text_weight
斜体 italic
文字尺寸单位: fp text_size
字体。如: Microsoft YaHei黑体、SimSun宋体、 KaiTi楷体 text_font
文字内容对齐方式 text_alignment
左/右外间距 left_margin / right_margin
上下外间距 top_magin / bottom_margin
左/右内间距 left_padding / right_padding
上下内间距 top_padding/ bottom_padding
文本内容换行 multiple_lines
最大文本显示行数 max_text_lines
自动调节文字大小 auto_font_size

单独讲解的基本属性：

宽高大小 match_parent

match_content

具体的长度单位：px，vp，fp。

dp（安卓里面的单位，跟鸿蒙中的vp是一样的）

vp（虚拟像素）长度单位。

fp字体大小单位。不缩放的情况下fp=vp

（扩展点）如果有缩放。 1fp = 1vp * 缩放比例。

如果不写单位，默认单位是px

颜色属性：RGB光学三原色

书写形式：可以直接写单词。red

可以写十六进制的三原色。 #112233

可以写透明度。 #FF112233

可以写简写 #123（简写的时候不能加透明度）

其他写法（不利于阅读）： #5901（前面补0，满足6位，不利于阅读）

间距：内边距，外边距。

代码示例：

常见属性

其他属性使用方式：
字体大小
ohos:text_size="28fp"
字体颜色
ohos:text_color="blue"
Text组件的左外边距
ohos:left_margin="15vp"
Text组件的下外边距
ohos:bottom_margin="15vp"
Text组件和内部文本的右内边距
ohos:right_padding="15vp"
Text组件和内部文本的左内边距
ohos:left_padding="15vp"
设置字体风格
斜体
ohos:italic="true"
字重（就是文字的粗细）
ohos:text_weight="700"
字体
ohos:text_font="serif"
设置文本对齐方式

ohos:text_alignment="horizontal_center|bottom"
设置文本换行
ohos:multiple_lines="true"
最大显示行数
ohos:max_text_lines="2

练习1：编写登录页面

代码示例：

练习2：修改密码页面

最终效果如下：

练习3：文本框展示大段文字

省略文字和跑马灯效果

package com.zz.listenerapplication.slice;
import com.zz.listenerapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.Text;
public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        //  1获取text
        Text text = (Text) findComponentById(ResourceTable.Id_text1);
        //  2 给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();
    }
}

配置文件

3.2Image图片组件

概述：

图片（Image）是用来显示图片的组件。

常见的属性：

当然也有id，长、宽、高等。

具体可以参考华为开发手册（组件的通用属性）：

比较重要的属性：

属性名称 功能说明
background_element （通用属性） 图片背景
image_src 图像
clip_alignment 图像裁剪对齐方式
scale_mode 图像缩放类型

单独讲解的基本属性：

image_sr

c：如何在xml中使用本地资源文件。

顺便讲一下如何在代码中使用本地资源文件。

基本用法：

相关方法： �,

方法名 功能说明
setClipGravity 设置剪切对齐模式
setScaleMode 当图像和组件的大小不同时，此方法可以缩放或者剪切图像

图片剪切显示：

代码中：可以用setClipGravity方法

xml文件中：可以用clip_alignment属性

上、下、左、右、居中

表示分别按照上、下、左、右、中间部位进行剪切。

图片缩放显示：

代码中：可以用setScaleMode方法

xml文件中：可以用scale_mode属性

inside：表示将原图按比例缩放到与Image相同或更小的尺寸，并居中显示。 有可能不会填充组件

center：表示不缩放，按Image大小显示原图中间部分。

stretch：表示将原图缩放到与Image大小一致。 拉伸。将组件填充。

clip_center：表示将原图按比例缩放到与Image相同或更大的尺寸，并居中显示。超过组件的部分被剪

切掉。

zoom_center：表示原图按照比例缩放到与Image最窄边一致，并居中显示。

zoom_end：表示原图按照比例缩放到与Image最窄边一致，并靠结束端显示。

zoom_start：表示原图按照比例缩放到与Image最窄边一致，并靠起始端显示。

注意：

一般来讲在设置的时候会跟图片保持一致，否则图片会失真。如果业务需求要调整图片大小，那么我们是找美工重

新做一张图，而不是代码拉伸或者剪切。

缩放、剪切用法：

练习：

1，点击按钮随机出现妹子的信息和介绍

代码示例：

实体类

package com.zz.listenerapplication.domin;
import ohos.aafwk.ability.AbilityPackage;
public class GirFriend   {
    // 图片的id
    private int photoId;
    //姓名
    private  String name;
    //年龄
    private int age;
    // 地址
    private  String address;
    // 空参 + 全参
    public GirFriend() {
    }
    public GirFriend(int photoId, String name, int age, String address) {
        this.photoId = photoId;
        this.name = name;
        this.age = age;
        this.address = address;
    }
// get  set
    public void setPhotoId(int photoId) {
        this.photoId = photoId;
    }
    public void setName(String name) {
        this.name = name;
    }
    public void setAge(int age) {
        this.age = age;
    }
    public void setAddress(String address) {
        this.address = address;
    }
    public int getPhotoId() {
        return photoId;
    }
    public String getName() {
        return name;
    }
    public int getAge() {
        return age;
    }
    public String getAddress() {
        return address;
    }
}

配置文件

代码

package com.zz.listenerapplication.slice;
import com.zz.listenerapplication.ResourceTable;
import com.zz.listenerapplication.domin.GirFriend;
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 java.util.ArrayList;
import java.util.Random;
public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    Image img;
    Text name;
    Text age;
    Text address;
    Button next;
    Button get;
    ArrayList list = new ArrayList();
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        //  1 找到组件对象
        img = (Image) findComponentById(ResourceTable.Id_img);
        name = (Text) findComponentById(ResourceTable.Id_name);
        age = (Text) findComponentById(ResourceTable.Id_age);
        address = (Text) findComponentById(ResourceTable.Id_address);
        next = (Button) findComponentById(ResourceTable.Id_next);
        get = (Button) findComponentById(ResourceTable.Id_get);
        //  2 创建一个集合装9个女朋友对象
        list.add(new GirFriend(ResourceTable.Media_girl1, "王美花1", 29, "南京"));
        // 以后的这些数据 都是和服务器获取的
        list.add(new GirFriend(ResourceTable.Media_girl2, "王美花2", 30, "南京"));
        list.add(new GirFriend(ResourceTable.Media_girl3, "王美花3", 35, "南京"));
        list.add(new GirFriend(ResourceTable.Media_girl4, "王美花4", 18, "南京"));
        list.add(new GirFriend(ResourceTable.Media_girl5, "王美花5", 22, "南京"));
        list.add(new GirFriend(ResourceTable.Media_girl6, "王美花6", 31, "南京"));
        list.add(new GirFriend(ResourceTable.Media_girl7, "王美花7", 26, "南京"));
        list.add(new GirFriend(ResourceTable.Media_girl8, "王美花8", 27, "南京"));
        list.add(new GirFriend(ResourceTable.Media_girl9, "王美花9", 28, "南京"));
        // 3 给按钮添加点击事件
        next.setClickedListener(this);
        get.setClickedListener(this);
    }
    @Override
    public void onActive() {
        super.onActive();
    }
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
    Random r = new Random();
    @Override
    public void onClick(Component component) {
        if (component== next){
            // 表示点击的是下一个 就是换下一个信息
            //  从集合中随机获取一个妹子的信息
            // 获取一个随机的索引
            int randomIndex = r.nextInt(list.size());
            // 通过随机索引 获取小姐姐的信息
            GirFriend gf = list.get(randomIndex);
            // 把随机的信息 设置到页面当中就可以了
            img.setImageAndDecodeBounds(gf.getPhotoId());
            name.setText("姓名："+gf.getName());
            age.setText("年龄："+gf.getAge());
            address.setText("地址："+gf.getAddress());
        }else if (component == get){
            // 点击的是获取联系方式
        }
    }
}

3.3CommonDialog普通弹框组件

使用默认布局的基本用法：

//把普通弹框弹出来就可以了
//1.创建弹框的对象
//this:当前弹框是哪展示在当前的界面中的。
CommonDialog cd = new CommonDialog(this);
//2.因为弹框里面是有默认布局的
//设置标题
cd.setTitleText("系统定位服务已关闭");
//设置内容
cd.setContentText("请打开定位服务，以便司机师傅能够准确接您上车");
//自动关闭
cd.setAutoClosable(true);
//设置按钮
//参数一：按钮的索引 0 1 2
//参数二：按钮上的文字
//参数三：点击了按钮之后能做什么
cd.setButton(0, "设置", new IDialog.ClickedListener() {
@Override
public void onClick(IDialog iDialog, int i) {
//写上点击了设置之后，要做的事情。
//如果点击之后我不需要做任何事情，在第三个参数中传递null就可以了。
}
});
cd.setButton(1, "取消", new IDialog.ClickedListener() {
@Override
public void onClick(IDialog iDialog, int i) {
//销毁弹框
cd.destroy();
}
});
//把弹框显示出来
cd.show();
}

自定义弹框布局：

编写思路：

弹框里面也是可以展示各种内容的，所以可以给弹框写一个xml布局文件：

文件名：

toast_layout_confirm.xml

java类：

//把弹框展示出来
//创建一个弹框对象
CommonDialog cd = new CommonDialog(this);
//大小是默认包裹内容的。
//弹框默认是居中放置
//弹框默认是透明的
//弹框默认是直角，可以把直角设置为圆角
cd.setCornerRadius(15);
//把messagedislog的xml文件加载到内存当中。交给弹框并展示出来。
//加载xml文件并获得一个布局对象
//parse方法：加载一个xml文件，返回一个布局对象。
//参数一：要加载的xml文件
//参数二：该xml文件是否跟其他xml文件有关。如果无关是独立的，就写null就可以了
//参数三：如果文件是独立的，那么直接写false
DirectionalLayout dl = (DirectionalLayout)
LayoutScatter.getInstance(this).parse(ResourceTable.Layout_messagedialog, null, false);
//要给布局里面的文本和按钮设置事件或者修改内容
//此时需要用dl去调用，表示获取的是dl这个布局里面的组件。
Text title = (Text) dl.findComponentById(ResourceTable.Id_message);
Button submit = (Button) dl.findComponentById(ResourceTable.Id_submit);
Button cancel = (Button) dl.findComponentById(ResourceTable.Id_cancel);
//title给标题设置内容
title.setText(msg);
//还需要给两个按钮添加单击事件
submit.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
title.setText("点击了确定按钮");
}
});
//取消按钮也要添加点击事件
cancel.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
//当点击了取消按钮之后，把弹框给关闭
cd.destroy();
}
});
//此时布局对象跟弹框还没有任何关

注意点：

如果需要更复杂的弹框，只要丰富xml文件中的组件即可。

抽取工具类：

public class MyDialog {
public static void showDialog(Context context,String msg){
//把弹框展示出来
//创建一个弹框对象
CommonDialog cd = new CommonDialog(context);
//大小是默认包裹内容的。
//弹框默认是居中放置
//弹框默认是透明的
//弹框默认是直角，可以把直角设置为圆角
cd.setCornerRadius(15);
//把messagedislog的xml文件加载到内存当中。交给弹框并展示出来。
//加载xml文件并获得一个布局对象
//parse方法：加载一个xml文件，返回一个布局对象。
//参数一：要加载的xml文件
//参数二：该xml文件是否跟其他xml文件有关。如果无关是独立的，就写null就可以了
//参数三：如果文件是独立的，那么直接写false
DirectionalLayout dl = (DirectionalLayout)
LayoutScatter.getInstance(context).parse(ResourceTable.Layout_messagedialog, null, false);
//要给布局里面的文本和按钮设置事件或者修改内容
//此时需要用dl去调用，表示获取的是dl这个布局里面的组件。
Text title = (Text) dl.findComponentById(ResourceTable.Id_message);
Button submit = (Button) dl.findComponentById(ResourceTable.Id_submit);
Button cancel = (Button) dl.findComponentById(ResourceTable.Id_cancel);
//title给标题设置内容
title.setText(msg);
//还需要给两个按钮添加单击事件
submit.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
title.setText("点击了确定按钮");
}
});
//取消按钮也要添加点击事件
cancel.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
//当点击了取消按钮之后，把弹框给关闭
cd.destroy();
}
});
//此时布局对象跟弹框还没有任何关系
//我还需要把布局对象交给弹框才可以
cd.setContentCustomComponent(dl);
//让弹框展示出来
cd.show();
}
}

3.4ToastDialog信息提示组件

也叫做吐司弹框。其实就是一个小提示而已。

ToastDialog是CommonDialog的子类，所以具备CommonDialog相关的特性。

也包含了标题，内容还有选择按钮。

但是一般来讲，吐司弹框我们只用中间的内容部分，因为他出现的意义就是为了提示信息的。

基本使用：

ToastDialog t = new ToastDialog(this);
t.setText("要显示的内容")
t.setAlignment(LayoutAlignment.CENTER);
t.show();

相关设置：

ToastDialog toastDialog = new ToastDialog(this);
//设置的大小
//如果不写，默认包裹内容
toastDialog.setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT,
DirectionalLayout.LayoutConfig.MATCH_CONTENT);
//设置持续时间
//如果不写，默认2秒
toastDialog.setDuration(2000);
//设置自动关闭
//如果不写，就是自动关闭
toastDialog.setAutoClosable(true);
//设置位置
//如果不写，默认居中
toastDialog.setAlignment(LayoutAlignment.CENTER);
//设置提示信息内容
toastDialog.setText("要显示的内容");
//让吐司展示出来
toastDialog.show();

自定义布局和抽取工具类：

一般会把吐司提示信息封装成一个工具类，用到的时候再调用，这样可以自定义吐司里面的文本的样式。

在后面我们会学习美化组件，让吐司跟咱们在玩app的时候看到的弹框保持一致。

public class MyToastUtils {
public static void showDialog(Context context,String msg){
//1.加载xml布局文件
DirectionalLayout dl = (DirectionalLayout)
LayoutScatter.getInstance(context).parse(ResourceTable.Layout_mytoast, null, false);
//创建吐司弹框的对象
ToastDialog td = new ToastDialog(context);
//设置吐司的大小
td.setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT,DirectionalLayout.LayoutConfig.MATCH_CONTENT);
//设置出现的时间
td.setDuration(2000);
//设置自动关闭
td.setAutoClosable(true);
//设置对齐方式
td.setAlignment(LayoutAlignment.CENTER);
//给吐司弹框设置要展示的文本内容
td.setText(msg);
//让吐司弹框出现
td.show();
}
}