上一期介绍了安装鸿蒙的开发环境以及开发工具,这一期主要展示在鸿蒙当中的所有布局
目录
1.下载Codelab起步应用
2.安装模拟器
打开后需要先登录华为账号,授权成功后就可以运行模拟器了
3.体验控件
-
1.TabList和Tab组件
1.先创建一个布局文件
2.这是我预先写好的内容,可以复制进去体验一下
<?xml version="1.0" encoding="utf-8"?>
<!-- 父布局 包裹需要设计的内容 -->
<!-- DirectionalLayout 类似于Android中的LinearLayout,可以水平和垂直摆放控件 -->
<!-- ohos:orientation="vertical" 水平摆放:horizontal 垂直摆放:vertical -->
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_parent"
ohos:top_margin="15vp"
ohos:orientation="vertical">
<TabList
ohos:id="$+id:tab_list"
ohos:top_margin="10vp"
ohos:tab_margin="24vp"
ohos:tab_length="140vp"
ohos:text_size="20fp"
ohos:height="36vp"
ohos:width="match_parent"
ohos:layout_alignment="center"
ohos:orientation="horizontal"
ohos:text_alignment="center"
ohos:normal_text_color="#999999"
ohos:selected_text_color="#afaafa"
ohos:selected_tab_indicator_color="#afaafa"
ohos:selected_tab_indicator_height="2vp"/>
<Text
ohos:id="$+id:tab_content"
ohos:width="match_parent"
ohos:height="match_parent"
ohos:text_alignment="center"
ohos:background_element="#70dbdb"
ohos:text_color="#2e2e2e"
ohos:text_size="16fp"/>
</DirectionalLayout>
3.设计好布局后,我们创建一个类,用来展示这个布局
4.创建完成后,我们要继承一下 AbilitySlice。以下是我写好的代码,可以参考一下
package com.huawei.codelab.slice;
import com.huawei.codelab.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.TabList;
import ohos.agp.components.Text;
public class TabListSlice extends AbilitySlice {
private TabList tabList;
private Text tabContent;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
//设置我们刚刚设计好的布局文件(命名风格就是:Layout_我们的布局文件名)
super.setUIContent(ResourceTable.Layout_tab_list);
initComponent();
addTabSelectedListener();
}
private void initComponent() {
//获取布局文件里边的Text控件
tabContent = (Text) findComponentById(ResourceTable.Id_tab_content);
//获取布局文件里边的TabList控件
tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
initTab();
}
/**
* 初始化一下Tab的内容
* 这里我打算添加三个选项,分别是图片(Image)、视频(Video)、音频(Audio)
*/
private void initTab() {
if( tabList.getTabCount() > 0 ) return;
tabList.addTab(createTab("Image"));
tabList.addTab(createTab("Video"));
tabList.addTab(createTab("Audio"));
//setFixedMode 是否允许tab滑动。false:适合tab过多的情况,可以左右滑动超出屏幕的tab
tabList.setFixedMode(true);
//默认选择第一个tab
tabList.getTabAt(0).select();
//默认Text控件被选中的文本
tabContent.setText("Select the " + tabList.getTabAt(0).getText());
}
/**
* 创建一个tab控件
* @param text tab展示的内容
* @return tab
*/
private TabList.Tab createTab(String text) {
TabList.Tab tab = tabList.new Tab(this);
//展示的内容
tab.setText(text);
//最小宽度
tab.setMinWidth(64);
//设置左右内间距为12
tab.setPadding(12, 0, 12, 0);
return tab;
}
/**
* tab被选择时事件监听器
*/
private void addTabSelectedListener() {
tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
@Override
public void onSelected(TabList.Tab tab) {
//tab被选中的时候改变Text控件中的文本内容
tabContent.setText("Select the " + tab.getText());
}
@Override
public void onUnselected(TabList.Tab tab) {
}
@Override
public void onReselected(TabList.Tab tab) {
}
});
}
}
5.最后我们在同目录下找到 MainAbilitySlice
@Override
public void onClick(Component component) {
String className = "";
switch (component.getId()) {
case ResourceTable.Id_tab_list:
className = "com.huawei.codelab.slice.TabListSlice";
break;
default:
break;
}
abilitySliceJump(className);
}
6.最后我们运行一下,点击TabList and Tab 按钮后就打开了我们写好的控件
还有很多好玩的控件和这个教程大同小异,点击这里可以去到HarmonyOS开发文档学习JAVA通用组件
在这里我就不一一介绍了