harmonyos 华为 java 鸿蒙开发的入门第二章

鸿蒙开发的入门第二章

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:id="$+id:text"

ohos:width="match_content"

ohos:height="match_content"

ohos:text="Text"

ohos:background_element="$graphic:color_gray_element"

其他属性使用方式：

字体大小

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：编写登录页面

代码示例：

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"

练习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"

练习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();

}

配置文件

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"

3.2Image图片组件

概述：

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

常见的属性：

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

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

比较重要的属性：

属性名称功能说明

background_element （通用属性）图片背景

image_src 图像

clip_alignment 图像裁剪对齐方式

scale_mode 图像缩放类型

单独讲解的基本属性：

image_sr

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

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

基本用法：

ohos:height="100vp"

ohos:width="100vp"

ohos:image_src="$media:all"

ohos:background_element="#00ff00"/>

相关方法： �,

方法名功能说明

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最窄边一致，并靠起始端显示。

注意：

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

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

缩放、剪切用法：

ohos:height="100vp"

ohos:width="100vp"

ohos:image_src="$media:all"

ohos:background_element="#00ff00"

缩放

ohos:scale_mode="zoom_center"

剪切

ohos:clip_alignment="top"/>

练习：

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;

}

配置文件

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:img"

ohos:height="match_content"

ohos:width="match_content"

ohos:image_src="$media:girl1"

ohos:id="$+id:name"

ohos:height="50vp"

ohos:width="100vp"

ohos:text="姓名：王美花"

ohos:text_size="20fp"

ohos:id="$+id:age"

ohos:height="50vp"

ohos:width="100vp"

ohos:text="年龄：29"

ohos:text_size="20fp"

ohos:id="$+id:address"

ohos:height="50vp"

ohos:width="100vp"

ohos:text="地址：南京"

ohos:text_size="20fp"

ohos:id="$+id:next"

ohos:height="50vp"

ohos:width="150vp"

ohos:background_element="#92D050"

ohos:text="下一个"

ohos:text_size="20fp"

ohos:text_color="#FFFFFF"

ohos:id="$+id:get"

ohos:height="50vp"

ohos:width="150vp"

ohos:background_element="#92D050"

ohos:text="获取联系方式"

ohos:text_size="20fp"

ohos:text_color="#FFFFFF"

ohos:top_margin="10vp"

代码

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

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"

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();

夸智网

harmonyos 华为 java 鸿蒙开发的入门第二章

开发语言经验分享笔记学习方法 python基础——对序列的通用操作【+和*、in、切片操作、separator.join(iterable)】

算法排序算法数据结构奇偶排序（Odd-Even Sort）

发表评论取消回复

夸智网

harmonyos 华为 java 鸿蒙开发的入门第二章

开发语言 经验分享 笔记 学习方法 python基础——对序列的通用操作【+和*、in、切片操作、separator.join(iterable)】

算法 排序算法 数据结构 奇偶排序（Odd-Even Sort）

相关文章

发表评论取消回复

开发语言经验分享笔记学习方法 python基础——对序列的通用操作【+和*、in、切片操作、separator.join(iterable)】

算法排序算法数据结构奇偶排序（Odd-Even Sort）