今天我们介绍几种鸿蒙Java开发中用到的一些简单常用的组件的使用方法,使用到的模拟器时鸿蒙系统的TV
目录
新建项目
弹出窗口中选择TV-Empty Feature Ability(Java),点击next
输入项目名称-finish
Text组件的使用
新建布局xml文件
首先我们在resources-base-layout下新建一个text_layout.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:orientation="vertical"
ohos:padding="102">
<Text
ohos:id="$+id:text2"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_alignment="horizontal_center"
ohos:text="hello world"
ohos:background_element="blue"
ohos:text_size="100"
/>
</DirectionalLayout>
该文件中Text为显示的text组件进行各种布局配置,其中id为text2、height宽度和width高度都匹配字体、layout_alignment排列为水平居中、text文字为hello、background_element背景色为#0000FF、字体大小为100
新建关于text组件的AbilitySlice
package com.example.secondjavatv.slice;
import com.example.secondjavatv.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Text;
import ohos.agp.utils.Color;
public class TextDemo extends AbilitySlice {
private Text txtLog;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_text_layout);
Text txt = (Text) findComponentById(ResourceTable.Id_text2);
if(txt!=null) {
txt.setTextColor(Color.RED);
txt.setText("你好");
}
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
1.这里通过"super.setUIContent(ResourceTable.Layout_text_layout)";拿到相关布局,其中"Layout_text_layout"为相关布局文件名前"Layout_";
2.Text txt = (Text) findComponentById(ResourceTable.Id_text2)“拿到text组件的配置,txt可以利用方法setTextColor设置字体颜色;可以通过setText设置字体内容
更改MainAbility中主页路径
package com.example.secondjavatv;
import com.example.secondjavatv.slice.*;
import com.example.secondjavatv.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setMainRoute(TextDemo.class.getName());
}
}
执行结果
Button组件的使用
新建布局的xml文件
首先我们在resources-base-layout下新建一个button_layout.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:orientation="vertical"
ohos:padding="32">
<Button ohos:id="$+id:btn"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_alignment="horizontal_center"
ohos:text="click"
ohos:text_color="#FF0000"
ohos:background_element="#0000FF"
ohos:text_size="150"></Button>
</DirectionalLayout>
该文件中Button为显示的Button组件进行各种布局配置,其中id为btn、height宽度和width高度都匹配字体、layout_alignment排列为水平居中、text文字为click、background_element背景色为#0000FF、字体大小为150
新建关于Button组件的AbilitySlice
package com.example.secondjavatv.slice;
import com.example.secondjavatv.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Text;
import ohos.agp.components.element.ShapeElement;
public class ButtonSlice extends AbilitySlice {
private Text txtLog;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_button_layout);
Button button = (Button) findComponentById(ResourceTable.Id_btn);
if(button!=null) {
button.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
//设置Button的背景色
ShapeElement element = new ShapeElement();
element.setRgbColor(new RgbColor(100,100,100));
button.setBackground(element);
//设置Button的文本
button.setText("already click");
}
});
}
}
...
}
1.button的基本配置同前面的text,首先获得布局,然后根据button的ID获取button组件,再根据组件的各种set来设置其相应的样式等;
2. 通过
button.setClickedListener(new Component.ClickedListener() {@Override
public void onClick(Component component) {…}
}
来给button配置一个点击的监听事件,本案例中是监听点击后,重新设置按钮背景色和文本
更改MainAbility中主页路径
package com.example.secondjavatv;
import com.example.secondjavatv.slice.*;
import com.example.secondjavatv.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setMainRoute(ButtonSlice.class.getName());
}
}
执行结果
开始页面:
点击后:
RadioButton组件的使用
新建布局的xml文件
首先我们在resources-base-layout下新建一个radiobutton_layout.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:orientation="vertical"
ohos:padding="80">
<RadioContainer ohos:id="$+id:rc"
ohos:height="match_content"
ohos:width="match_content"
ohos:orientation="vertical"
ohos:background_element="red"
>
<RadioButton ohos:id="$+id:rb1"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_alignment="horizontal_center"
ohos:text="选项1"
ohos:text_size="50"></RadioButton>
<RadioButton ohos:id="$+id:rb2"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_alignment="horizontal_center"
ohos:text="选项2"
ohos:text_size="50"></RadioButton>
<RadioButton ohos:id="$+id:rb3"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_alignment="horizontal_center"
ohos:text="选项3"
ohos:text_size="50"></RadioButton>
</RadioContainer>
</DirectionalLayout>
该文件中RadioContainer 为RadioButton的父组件,里面包含三个RadioButton ,分别为rb1、rb2、rb13
新建关于RadioButton组件的AbilitySlice
package com.example.secondjavatv.slice;
import com.example.secondjavatv.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.RadioButton;
import ohos.agp.components.RadioContainer;
import ohos.agp.components.Text;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
public class RadioButtonDemo extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_radiobutton_layout);
RadioButton radioButton1 = (RadioButton)findComponentById(ResourceTable.Id_rb1);
RadioButton radioButton2 = (RadioButton)findComponentById(ResourceTable.Id_rb2);
radioButton1.setChecked(true);
RadioContainer radioContainer = (RadioContainer)findComponentById(ResourceTable.Id_rc);
radioContainer.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
@Override
public void onCheckedChanged(RadioContainer radioContainer, int i) {
if(radioButton2.isChecked()) {
radioButton2.setText("radiobutton2被选中");
} else {
radioButton2.setText("选项2");
}
}
});
}
...
}
1.代码中首先将RadioButton和RadioContainer组件拿出来,然后radioButton1设置为已选中;
2. 通过
radioContainer.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
@Override
public void onCheckedChanged(RadioContainer radioContainer, int i) {…}
}
来给radioContainer设置一个选择更改的监听,当选择更改后,判断radioButton2是否选中,从而更改radioButton2的文字
更改MainAbility中主页路径
package com.example.secondjavatv;
import com.example.secondjavatv.slice.RadioButtonDemo;
import com.example.secondjavatv.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setMainRoute(RadioButtonDemo.class.getName());
}
}
执行结果
开始页面默认选项1被选中:
当选择为选项2时文字改变:
当选择选项3时,选项2文字又还原了:
Checkbox组件的使用
新建布局的xml文件
首先我们在resources-base-layout下新建一个checkbox_layout.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:orientation="vertical"
ohos:padding="32">
<Checkbox
ohos:id="$+id:checkbox1"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_alignment="horizontal_center"
ohos:text="选项1"
ohos:background_element="#FF0000"
ohos:text_color="#FFFF00"
ohos:text_size="80"
/>
<Checkbox
ohos:id="$+id:checkbox2"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_alignment="horizontal_center"
ohos:text="选项2"
ohos:background_element="#FFFF00"
ohos:text_color="#FF00FF"
ohos:text_size="80"
/>
<Checkbox
ohos:id="$+id:checkbox3"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_alignment="horizontal_center"
ohos:text="选项3"
ohos:background_element="#00FF00"
ohos:text_color="#0000FF"
ohos:text_size="80"
/>
</DirectionalLayout>
该文件中包含三个Checkbox,分别为checkbox1、checkbox2、checkbox3
新建关于Checkbox组件的AbilitySlice
package com.example.secondjavatv.slice;
import com.example.secondjavatv.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.Checkbox;
import ohos.agp.components.Component;
import ohos.agp.components.Text;
import ohos.agp.components.element.ShapeElement;
public class CheckboxDemo extends AbilitySlice {
private Text txtLog;
//复选框
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_checkbox_layout);
Checkbox checkbox = (Checkbox)findComponentById(ResourceTable.Id_checkbox3);
checkbox.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
if(checkbox.isChecked()) {
//设置背景色
ShapeElement element = new ShapeElement();
element.setRgbColor(new RgbColor(0,255,0));
checkbox.setBackground(element);
//设置文本
checkbox.setText("选项3");
} else {
//设置背景色
ShapeElement element = new ShapeElement();
element.setRgbColor(new RgbColor(200,200,200));
checkbox.setBackground(element);
//设置文本
checkbox.setText("选项3被选中");
}
}
});
}
...
}
1.代码中首先将checkbox组件拿出来
2. 通过来给checkbox设置一个点击事件的监听,当点击checkbox,判断checkbox是否选中,从而更改checkbox的文字
注意:这里checkbox的状态是点击事件之前的选中状态,checkbox的状态更改是在点击事件之后发生的
更改MainAbility中主页路径
package com.example.secondjavatv;
import com.example.secondjavatv.slice.*;
import com.example.secondjavatv.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setMainRoute(CheckboxDemo.class.getName());
}
}
执行结果
开始页面:
当点击选项3时其颜色和文字发生了改变:
当再次点击选项3时,选项3文字又还原了:
Progress组件的使用
ProgressBar 进度条组件分为两种 :
1.圆形进度条 RoundProgressBar
2. 直线型进度条 ProgressBar ;
新建布局的xml文件
首先我们在resources-base-layout下新建一个progress_layout.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:orientation="vertical"
ohos:padding="32">
<ProgressBar
ohos:id="$+id:progress1"
ohos:width="400"
ohos:height="400"
/>
<RoundProgressBar
ohos:id="$+id:progress2"
ohos:width="400"
ohos:height="400"
ohos:min="0"
ohos:max="100"
ohos:progress="30"
ohos:vice_progress="50"
></RoundProgressBar>
</DirectionalLayout>
该xml中设置了一个直线型进度条和一个圆形进度条的布局
其中,布局元素有:
最小值 : ohos:min
最大值 : ohos:max
当前进度 : ohos:progress
第二进度:ohos:vice_progress
宽度 : ohos:width
高度 : ohos:height
新建关于Progress组件的AbilitySlice
package com.example.secondjavatv.slice;
import com.example.secondjavatv.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.ProgressBar;
import ohos.agp.components.Text;
public class ProgressDemo extends AbilitySlice {
private Text txtLog;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_progress_layout);
ProgressBar progressBar = (ProgressBar)findComponentById(ResourceTable.Id_progress1);
if(progressBar!=null) {
progressBar.setMaxValue(100);
progressBar.setMinValue(0);
progressBar.setProgressValue(20);
progressBar.setViceProgress(40);
}
}
...
}
1.代码中首先将直线型进度条progress1拿出来,然后判断是否为空,不为空则设置最大值为100,最小值为0,第一进度条为20,第二进度条为40
更改MainAbility中主页路径
package com.example.secondjavatv;
import com.example.secondjavatv.slice.*;
import com.example.secondjavatv.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setMainRoute(ProgressDemo.class.getName());
}
}
执行结果
Slider组件的使用
新建布局的xml文件
首先我们在resources-base-layout下新建一个progress_layout.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:orientation="vertical"
ohos:padding="32">
<Slider
ohos:id="$+id:slider1"
ohos:width="match_parent"
ohos:height="match_content"
ohos:layout_alignment="horizontal_center"
ohos:orientation="horizontal"
ohos:min="0"
ohos:max="100"
ohos:progress="40"
ohos:background_element="#FF0000"
ohos:progress_color="#0000FF"/>
<Text
ohos:id="$+id:txtSlider"
ohos:width="match_parent"
ohos:height="match_content"
ohos:layout_alignment="horizontal_center"
ohos:text="0"
ohos:text_color="#0000FF"
ohos:text_size="60"/>
<Button
ohos:id="$+id:btnSlider"
ohos:width="match_parent"
ohos:height="match_content"
ohos:layout_alignment="horizontal_center"
ohos:text="progress"
ohos:text_color="#FF0000"
ohos:background_element="#00FFFF"
ohos:text_size="150"/>
</DirectionalLayout>
该xml中设置了一个滑块组件,一个文字组件和一个按钮组件的布局
其中滑块组件的布局元素有:
宽度 : ohos:width
高度 : ohos:height
滑块布局方向:ohos:orientation
最小值 : ohos:min
最大值 : ohos:max
滑块进度值:ohos:progress
滑块背景色:ohos:background_element
滑块进度颜色: ohos:progress_color
新建关于Slider组件的AbilitySlice
package com.example.secondjavatv.slice;
import com.example.secondjavatv.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Slider;
import ohos.agp.components.Text;
public class SlideDemo extends AbilitySlice {
private Text txtLog;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_slider_layout);
Slider slider = (Slider) findComponentById(ResourceTable.Id_slider1);
Text txt = (Text)findComponentById(ResourceTable.Id_txtSlider);
Button button = (Button)findComponentById(ResourceTable.Id_btnSlider);
if(slider!=null&&txt!=null&&button!=null) {
button.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) { txt.setText(String.valueOf(slider.getProgress()));
}
});
}
}
...
}
1.代码中首先将Slider、Text、Button等组件拿出来,然后在Button上设置一个点击监听事件,当按钮按下以后,将text的值设置为Slider的progress
更改MainAbility中主页路径
package com.example.secondjavatv;
import com.example.secondjavatv.slice.*;
import com.example.secondjavatv.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setMainRoute(SlideDemo.class.getName());
}
}
执行结果
1.初始画面中text的值为0
2.当点击按钮后,text显示为滑块的progress的初值
3.当滑动滑块后,点击按钮,text显示该情况下滑块的progress值
TextField组件的使用
新建布局的xml文件
首先我们在resources-base-layout下新建一个progress_layout.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:orientation="vertical"
ohos:padding="102">
<Text
ohos:id="$+id:text2"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_alignment="horizontal_center"
ohos:text="hello world"
ohos:background_element="blue"
ohos:text_size="100"
/>
</DirectionalLayout>
该xml中设置了一个文本编辑组件的布局
其中文本域布局元素有:
宽度 : ohos:width
高度 : ohos:height
对其方式:ohos:layout_alignment
文字:ohos:text
背景色:ohos:background_element
文字大小:ohos:text_size
新建关于TextField组件的AbilitySlice
package com.example.secondjavatv.slice;
import com.example.secondjavatv.slice.*;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Text;
import ohos.agp.components.TextField;
public class TextFieldDemo extends AbilitySlice {
private Text txtLog;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_textfield_layout);
}
...
}
更改MainAbility中主页路径
package com.example.secondjavatv;
import com.example.secondjavatv.slice.*;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
public class MainAbility extends Ability {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setMainRoute(TextFieldDemoclass.getName());
}
}
执行结果
1.初始画面和普通text每什么分别
2.但是当点击文字后可以看到有光标出现,并且软键盘也出现了,此时可以对text进行编辑