HarmonyOS学习路之开发篇—Java UI框架(基础组件说明【二】)

共 9330字,需浏览 19分钟

 ·

2021-10-28 14:04

点击上方蓝色字体,关注我们

接着上文,回顾:HarmonyOS学习路之开发篇— Java UI框架(基础组件说明【一】)

1


分类说明

Picker


Picker提供了滑动选择器,允许用户从预定义范围中进行选择。

Picker的自有XML属性见下表:

属性名称属性描述使用案例
element_padding文本和Element之间的间距Element必须通过setElementFormatter接口配置ohos:element_padding="10"
max_value最大值ohos:max_value="10"
min_value最小值ohos:min_value="10"
value当前值ohos:value="10"
normal_text_color未选中的文本颜色ohos:normal_text_color="#A8FFFFFF"
normal_text_size未选中的文本大小ohos:normal_text_size="10"
selected_text_color选中的文本颜色ohos:selected_text_color="#A8FFFFFF"
selected_text_size选中的文本大小ohos:selected_text_size="10"
selector_item_num显示的项目数量,条数ohos:selector_item_num="10"
selected_normal_text_margin_ratio已选文本边距与常规文本边距的比例,取值需>0.0f,默认值为1.0fohos:selected_normal_text_margin_ratio="0.5"
shader_color着色器颜色ohos:shader_color="#A8FFFFFF"
top_line_element选中项的顶行ohos:top_line_element="#FFFFFFFF"
bottom_line_element选中项的底线ohos:bottom_line_element="#FFFFFFFF"
wheel_mode_enabled选择轮是否循环显示数据ohos:wheel_mode_enabled="true"

DatePicker


DatePicker主要供用户选择日期。

DatePicker的自有XML属性见下表:

属性名称属性描述使用案例
date_order显示格式,年月日ohos:date_order="day-month-year"  表示日期以日-月-年的格式显示
ohos:date_order="month-day-year"  表示日期以月-日-年的格式显示
ohos:date_order="year-month-day"  表示日期以年-月-日的格式显示
ohos:date_order="year-day-month"  表示日期以年-日-月的格式显示
ohos:date_order="day-month"  表示日期以日-月的格式显示
ohos:date_order="month-day"  表示日期以月-日的格式显示
ohos:date_order="year-month"  表示日期以年-月的格式显示
ohos:date_order="month-year"  表示日期以月-年的格式显示
ohos:date_order="only-year"   表示只显示年份
ohos:date_order="only-month"  表示只显示月份
ohos:date_order="only-day"   表示只显示日期
day_fixed日期是否固定ohos:day_fixed="true"
month_fixed月份是否固定ohos:month_fixed="true"
year_fixed年份是否固定ohos:year_fixed="true"
max_date最大日期(long类型)ohos:max_date="1234567"
min_date最小日期(long类型)ohos:min_date="1234567"
text_size文本大小(float类型)ohos:text_size="30"
normal_text_size未选中文本的大小(float类型)ohos:normal_text_size="30"
selected_text_size选中文本的大小(float类型)ohos:selected_text_size="30"
normal_text_color未选中文本的颜色ohos:normal_text_color="#A8FFFFFF"
selected_text_color选中文本的颜色ohos:selected_text_color="#A8FFFFFF"
operated_text_color操作项的文本颜色ohos:operated_text_color="#A8FFFFFF"
selected_normal_text_margin_ratio已选文本边距与常规文本边距的比例,取值需>0.0f,默认值为1.0fohos:selected_normal_text_margin_ratio="0.5"
selector_item_num显示的项目数量ohos:selector_item_num="10"
shader_color着色器颜色ohos:shader_color="#A8FFFFFF"
top_line_element选中项的顶行ohos:top_line_element="#FFFFFFFF"
bottom_line_element选中项的底线ohos:bottom_line_element="#FFFFFFFF"
wheel_mode_enabled选择轮是否循环显示数据ohos:wheel_mode_enabled="true"

ProgressBar


ProgressBar用于显示内容或操作的进度。

ProgressBar的自有XML属性见下表:

属性名称属性描述使用案例
divider_lines_enabled是否使用分割线ohos:divider_lines_enabled="true"
divider_lines_number分割线数量ohos:divider_lines_number="1"
infinite是否使用不确定模式ohos:infinite="true"
infinite_element不确定模式图样配置前提:infinite需设置为trueohos:infinite_element="$media:media_src"
max最大值ohos:max="1"
max_height最大高度ohos:max_height="100"
max_width最大宽度ohos:max_width="100"
min最小值ohos:min="1"
orientation排列方向horizontal(水平方向),vertical(垂直方向)ohos:orientation="horizontal"
progress当前进度ohos:progress="10"
background_instruct_element背景ohos:background_instruct_element="#000000"
progress_width进度条宽度ohos:progress_width="100"
progress_color进度条颜色ohos:progress_color="#FF262626"
progress_element进度条背景ohos:progress_element="#000000"
progress_hint_text进度提示文本ohos:progress_hint_text="test"
progress_hint_text_alignment进度提示文本对齐方式left、top、right、bottom、horizontal_center、vertical_center、center可以设置取值项如表中所列,也可以使用“|”进行多项组合。ohos:progress_hint_text_alignment="top"
progress_hint_text_color进度提示文本颜色ohos:progress_hint_text_color="#FFFFFFFF"
vice_progress当前副进度ohos:vice_progress="1"
vice_progress_element副进度条背景ohos:vice_progress_element="#000000"
step进度的步长;若step设置为10,进度值则为10的倍数。ohos:step="1"
progress_hint_text_size进度提示文本大小ohos:progress_hint_text_size="100"

RoundProgressBar


RoundProgressBar继承自ProgressBar,拥有ProgressBar的属性,在设置同样的属性时用法和ProgressBar一致,用于显示环形进度。

RoundProgressBar的自有XML属性见下表:

属性名称属性描述使用案例
start_angle圆形进度条的起始角度ohos:start_angle="10"
max_angle圆形进度条的最大角度ohos:max_angle="360.0"

TabList、Tab


Tablist可以实现多个页签栏的切换,Tab为某个页签。子页签通常放在内容区上方,展示不同的分类。页签名称应该简洁明了,清晰描述分类的内容。

Tablist的自有XML属性见下表:

属性名称属性描述使用案例
fixed_mode固定所有页签并同时显示ohos:fixed_mode="true"
orientation页签排列方向horizontal(水平排列),vertical(垂直排列)ohos:orientation="horizontal"
normal_text_color未选中的文本颜色ohos:normal_text_color="#FFFFFFFF"
selected_text_color选中的文本颜色ohos:selected_text_color="#FFFFFFFF"
selected_tab_indicator_color选中页签的颜色ohos:selected_tab_indicator_color="#FFFFFFFF"
selected_tab_indicator_height选中页签的高度ohos:selected_tab_indicator_height="100"
tab_indicator_type页签指示类型ohos:tab_indicator_type="invisible" 表示选中的页签无指示标记
ohos:tab_indicator_type="bottom_line" 表示选中的页签通过底部下划线标记
ohos:tab_indicator_type="left_line" 表示选中的页签通过左侧分割线标记
ohos:tab_indicator_type="oval" 表示选中的页签通过椭圆背景标记
tab_length页签长度ohos:tab_length="100"
tab_margin页签间距ohos:tab_margin="100"
text_alignment文本对齐方式left、top、right、bottom、horizontal_center、vertical_center、center、start、end可以设置取值项如表中所列,也可以使用“|”进行多项组合 ohos:text_alignment="center"
text_size文本大小ohos:text_size="100"

TabList常用接口,如下表所示:

方法方法说明
getSelectedTab返回选中的Tab
getSelectedTabIndex返回选中的Tab的位置索引
getTabCount获取Tab的个数
getTabAt获取某个Tab
removeTab移除某个位置的tab
setOrientation设置横或竖方向

PageSlider


PageSlider是用于页面之间切换的组件,它通过响应滑动事件完成页面间的切换。

常用方法表如下所示:

方法方法说明
setProvider(PageSliderProvider provider)设置Provider,用于配置PageSlider的数据结构
addPageChangedListener(PageChangedListener listener)响应页面切换事件
removePageChangedListener(PageChangedListener listener)移除页面切换的响应
setOrientation(int orientation)设置布局方向
setPageCacheSize(int count)设置要保留当前页面两侧的页面数
setCurrentPage(int itemPos)设置当前展示页面
setCurrentPage(int itemPos, boolean smoothScroll)设置当前展示界面,并确定是否需要平滑滚动
setSlidingPossible(boolean enable)是否启用页面滑动
setReboundEffect(boolean enabled)是否启用回弹效果
setReboundEffectParams(int overscrollPercent, float overscrollRate,int remainVisiblePercent)配置回弹效果参数
setPageSwitchTime(int durationMs)设置页面切换时间

PageSliderIndicator


PageSliderIndicator,需配合PageSlider使用,指示在PageSlider中展示哪个界面。

ListContainer


ListContainer是用来呈现连续、多行数据的组件,包含一系列相同类型的列表项。

ListContainer和ScrollView在介绍嵌套开发时使用到了其中的一些属性,但是没有具体的介绍说明。

ListContainer的共有XML属性继承自:Component,其基础属性就不再过多的赘述。ListContainer的自有XML属性见下表:

属性名称属性描述使用案例
rebound_effect开启/关闭回弹效果ohos:rebound_effect="true"
shader_color着色器颜色ohos:shader_color="#A8FFFFFF"
orientation列表项排列方向ohos:orientation="horizontal"  or ohos:orientation="vertical"

使用ListContainer时,需要编写适配器来构造不同的数据结构,在编写适配器时需要注意:要继承自BaseItemProvider并重写以下方法;

方法描述
int getCount()返回填充的表项个数。
Object getItem(int position)根据position返回对应的数据。
long getItemId(int position)返回某一项的id。
Component getComponent(int position, Component covertComponent,ComponentContainer componentContainer)根据position返回对应的界面组件。

ScrollView


ScrollView是一种带滚动功能的组件,它采用滑动的方式在有限的区域内显示更多的内容。

ScrollView的共有XML属性继承自:StackLayout,ScrollView的自有XML属性见下表:

属性名称属性描述使用案例
match_viewport是否拉伸匹配(boolean类型)ohos:match_viewport="true"
rebound_effect回弹效果(boolean类型)ohos:rebound_effect="true"

ScrollView的速度、滚动、回弹等常用接口如下:

方法描述
doFling(int velocityX, int velocityY)
doFlingX(int velocityX)
doFlingY(int velocityY)设置X轴和Y轴滚动的初始速度,单位(px)
fluentScrollBy(int dx, int dy)
fluentScrollByX(int dx)
fluentScrollByY(int dy)沿坐标轴将内容平滑地移动指定数量的像素,单位(px)
fluentScrollTo(int x, int y)
fluentScrollXTo(int x)
fluentScrollYTo(int y)根据指定坐标平滑滚动到指定位置,单位(px)
setReboundEffect(boolean enabled)设置是否启用回弹效果,默认false
setReboundEffectParams(int overscrollPercent, float overscrollRate, int remainVisiblePercent)配置回弹效果
setReboundEffectParams(ReboundEffectParams reboundEffectParams)overscrollPercent:过度滚动百分比,默认值40
setOverscrollPercent(int overscrollPercent)overscrollRate:过度滚动率,默认值0.6
setOverscrollRate(float overscrollRate)remainVisiblePercent:应保持可见内容的最小百分比,默认值20
setRemainVisiblePercent(int remainVisiblePercent)

WebView


WebView提供在应用中集成Web页面的能力。

在使用WebView时需要配置应用的网络权限。打开“entry > src > main > config.json”,并添加如下配置。

{
  ...
  "module": {
    ...
    "reqPermissions": [
      {
        "name""ohos.permission.INTERNET"
      }
    ],
    ...
  }
}

与Android中的Webview有着一样的功能,显示相应的网页数据,并且可以与JavaScript代码相互调用。

通过WebConfig启用JavaScript

webView.getWebConfig().setJavaScriptPermit(true);

使用回调方法或者应用内部调用JavaScript方法。

  • 注入回调对象到页面内容
final String jsName = "JsCallbackToApp";
webView.addJsCallback(jsName, new JsCallback() {
    @Override
    public String onCallback(String msg) {
        // 增加自定义处理
        return "jsResult";
    }
});
//---------------------------------------------
function callToApp() {
    if (window.JsCallbackToApp && window.JsCallbackToApp.call) {
       var result = JsCallbackToApp.call("message from web");
    }
}
  • 在应用内调用页面内的JavaScript方法
webView.executeJs("javascript:callFuncInWeb()"new AsyncCallback() {
    @Override
    public void onReceive(String msg) {
        // 在此确认返回结果
    }
});

观测Web状态

通过setWebAgent方法设置自定义WebAgent对象,以观测页面状态变更等事件:

webView.setWebAgent(new WebAgent() {
    @Override
    public void onLoadingPage(WebView webview, String url, PixelMap favicon) {
        super.onLoadingPage(webview, url, favicon);
        // 页面开始加载时自定义处理
    }

    @Override
    public void onPageLoaded(WebView webview, String url) {
        super.onPageLoaded(webview, url);
        // 页面加载结束后自定义处理
    }

    @Override
    public void onLoadingContent(WebView webview, String url) {
        super.onLoadingContent(webview, url);
        // 加载资源时自定义处理
    }

    @Override
    public void onError(WebView webview, ResourceRequest request, ResourceError error) {
        super.onError(webview, request, error);
        // 发生错误时自定义处理
    }
});



往期推荐



点击阅读原文,更精彩~
浏览 31
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报