本文记录HarmonyOS使用xml绘制视频播放控制栏

效果图如下

代码如下

点击查看代码 
<?xml version="1.0" encoding="utf-8"?>

<!--依赖布局-->

<DependentLayout

    xmlns:ohos="http://schemas.huawei.com/res/ohos"

    ohos:height="match_parent"

    ohos:width="match_parent"

    ohos:background_element="#00000000">

<!--子布局：控制区域-->

    <DirectionalLayout

        ohos:id="$+id:controller_bottom_layout"

        ohos:height="80vp"

        ohos:width="match_parent"

        ohos:align_parent_bottom="true"

        ohos:background_element="#88000000"

        ohos:left_padding="10vp"

        ohos:orientation="vertical"

        ohos:right_padding="10vp">

        <!--子布局：组件-->

        <DependentLayout

            ohos:height="0vp"

            ohos:width="match_parent"

            ohos:weight="2">

<!--上一集-->

            <Image

                ohos:id="$+id:play_backward"

                ohos:height="40vp"

                ohos:width="40vp"

                ohos:right_margin="20vp"

                ohos:left_of="$+id:play_controller"

                ohos:padding="10vp"

                ohos:image_src="$media:ic_backward"

                ohos:scale_mode="stretch"

                />

<!--播放/暂停 按钮-->

            <Image

                ohos:id="$+id:play_controller"

                ohos:height="40vp"

                ohos:width="40vp"

                ohos:horizontal_center="true"

                ohos:image_src="$media:ic_music_stop"

                ohos:scale_mode="stretch"

                />

<!--下一集-->

            <Image

                ohos:id="$+id:play_forward"

                ohos:height="40vp"

                ohos:width="40vp"

                ohos:left_margin="20vp"

                ohos:padding="10vp"

                ohos:right_of="$id:play_controller"

                ohos:image_src="$media:ic_forward"

                ohos:scale_mode="stretch"

                />

<!--投屏图片按钮-->

            <Image

                ohos:id="$+id:tv"

                ohos:height="23vp"

                ohos:width="23vp"

                ohos:align_parent_right="true"

                ohos:image_src="$media:ic_tv"

                ohos:right_margin="20vp"

                ohos:scale_mode="stretch"

                ohos:vertical_center="true"

                />

        </DependentLayout>

        <!--子布局:进度-->

        <DirectionalLayout

            ohos:height="0vp"

            ohos:width="match_parent"

            ohos:orientation="horizontal"

            ohos:alignment="vertical_center"

            ohos:weight="2">

<!--播放时长-->

            <Text

                ohos:id="$+id:current_time"

                ohos:height="match_content"

                ohos:width="match_content"

                ohos:right_margin="5vp"

                ohos:text="00:00:00"

                ohos:text_color="#ffffff"

                ohos:text_size="12vp"/>

<!--进度条-->

            <Slider

                ohos:id="$+id:progress"

                ohos:height="35vp"

                ohos:width="0vp"

                ohos:orientation="horizontal"

                ohos:progress_color="#FF6103"

                ohos:progress_width="5vp"

                ohos:weight="1"/>

<!--视频总时长-->

            <Text

                ohos:id="$+id:end_time"

                ohos:height="match_content"

                ohos:width="match_content"

                ohos:right_margin="5vp"

                ohos:text="00:00:00"

                ohos:text_color="#ffffff"

                ohos:text_size="12vp"/>

        </DirectionalLayout>

    </DirectionalLayout>

</DependentLayout>

【HarmonyOS】【xml】使用xml绘制视频播放控制栏的更多相关文章

  1. spring基于XML的声明式事务控制

    <?xml version="1.0" encoding="utf-8" ?><beans xmlns="http://www.sp ...

  2. 在web.xml中配置监听器来控制ioc容器生命周期

    5.整合关键-在web.xml中配置监听器来控制ioc容器生命周期 原因: 1.配置的组件太多,需保障单实例 2.项目停止后,ioc容器也需要关掉,降低对内存资源的占用. 项目启动创建容器,项目停止销 ...

  3. spring基于xml的声明式事务控制配置步骤

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  4. video视频标签一些设置，包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件

    video视频标签一些设置,包括封面.播放结束后的封面.视频占满屏幕的方式.视频链接.视频播放暂停.展示控制栏.触发全屏播放事件 <video id="video" auto ...

  5. AndroidStudio中使用XML和Java代码混合控制UI界面实现QQ相册照片列表页面

    场景 效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建Androi ...

  6. 腾讯X5内核使用详解（X5内核播放器使用如何去除控制栏全屏播放）以及一些注意事项

    例子下载地址 https://www.lanzous.com/i2zsv5g      GIT就不用了麻烦的不行 本人安卓刚学 就上X5内核弄了老长时间由于对maven 和idea不熟悉刚开始导包都是 ...

  7. 利用XtraDiagram.DiagramControl进行流程图形的绘制和控制

    DevExpress提供了一个比较强大的图形绘制工具,可以用于绘制各种图形,如流程图.组织机构图等等,本篇随笔介绍XtraDiagram.DiagramControl的使用,以及利用代码对其属性进行控 ...

  8. Querying Microsoft SQL Server 2012 读书笔记:查询和管理XML数据 1 -使用FOR XML返回XML结果集

    XML 介绍 <CustomersOrders> <Customer custid="1" companyname="Customer NRZBB&qu ...

  9. hadoop三个配置文件的参数含义说明core-site.xml,hdfs-site.xml,mapred-site.xml

    配置hadoop,主要是配置core-site.xml,hdfs-site.xml,mapred-site.xml三个配置文件,默认下来,这些配置文件都是空的,所以很难知道这些配置文件有哪些配置可以生 ...

随机推荐

  1. mybatis插入数据时处理为null的属性

    在做项目的时候,数据库中的所有字段被设置为全都不能为null,但是在我们开发过程中,插入一些记录的时候,实体类中的一些字段如果页面没有传入,则默认就会被设置为null,这样的话,在执行插入语句的时候, ...

  2. 常见的yaml写法-CronJob

    CronJob其实就是在Job的基础上加上了时间调度,我们可以:在给定的时间点运行一个任务,也可以周期性地在给定时间点运行.这个实际上和我们Linux中的crontab就非常类似了.一个CronJob ...

  3. c++学习笔记(九)

    引用(reference) 概念 引用变量是一个别名,也就是说,它是某个已存在变量的另一个名字. 一旦把引用初始化为某个变量,就可以使用该引用名称或变量名称来指向变量. 用法 变量名称是变量附属在内存 ...

  4. [hdu7065]Yinyang

    将一个格子看作一个节点,相邻(有公共边)的同色格子之间连边,那么由前两个条件即要求图恰被分为两个非空连通块(由于$n,m\ge 3$,显然不能不使用某种颜色) 下面,来分析图中的简单环,其对应于网格图 ...

  5. springboot和mybatis集成

    springboot和mybatis集成 pom  <?xml version="1.0" encoding="UTF-8"?> <proje ...

  6. 用Python画一个八角形代码示例

    import turtle turtle.color("purple","yellow")   turtle.speed(1) turtle.fd(100) t ...

  7. SpringCloud升级之路2020.0.x版-45. 实现公共日志记录

    本系列代码地址:https://github.com/JoJoTec/spring-cloud-parent 我们这一节在前面实现的带有链路信息的 Publisher 的工厂的基础上,实现公共日志记录 ...

  8. Codeforces 605D - Board Game（树状数组套 set）

    Codeforces 题目传送门 & 洛谷题目传送门 事实上是一道非常容易的题 很容易想到如果 \(c_i\geq a_j\) 且 \(d_i\geq b_j\) 就连一条 \(i\to j\ ...

  9. Python使用print打印时，展示内容不换行

    原理 Python的print()函数中参数end='' 默认为\n,所以会自动换行; 默认的print()函数: print(end='\n') 方案 Python 2: 在print语句的末尾加上 ...

  10. plyr包使用

    #-------------------------------- # plyr包使用# 建议直接保存为R文件到Rstudio中运行 #-------------------------------- ...