最终实现效果图:
实现步骤
创建FullScreenPlay.ets全品播放页面
并将其修改为启动页面。
全屏播放,屏幕必然横过来,所以要将窗口横过来。
编辑
src/main/ets/entryability/EntryAbility.ets
若写在/EntryAbility.ets中,则所有窗口都是横屏,因此不应该写在UIAbility中,应该写在全屏播放的页面中。是个跳转。
当页面即将显示时,设置窗口显示方向为“横屏”。
编辑
这两个方法都可以,这两个方法有什么区别?
abouttoappear是所有组件都可以使用的方法,页面组件可以、局部组件也可以。
onPageShow()页面组件才有,其他组件没有。
abouttoappear先一步调用,页面即将显示时调用,不会有渐变的过程,onpageshow页面显示出来时候才调用,会有渐变的过程。
旋转动画应该放在onpageshow中。
编辑
全屏播放页面应用
如果放在onPageShow()中,会看到竖屏转换为横屏的效果。
如果放在aboutToAppear()中,一上来就会显示横屏,用户不会看到竖屏转换为横屏的效果。
我们这里使用aboutToAppear()
设置全屏
async aboutToAppear(): Promise<void> {
// 得到窗口对象, 并设置窗口显示方向为“横屏”。
let w = await window.getLastWindow(getContext()) // 获取最后一个窗口(最近显示的窗口对象)
w.setWindowLayoutFullScreen(true) // 设置窗口全屏
// 设置窗口显示方向为“横屏”。
w.setPreferredOrientation(window.Orientation.PORTRAIT) // 竖屏(肖像画):window.Orientation.PORTRAIT, 横屏(风景画):window.Orientation.LANDSCAPE
}
横屏显示
竖屏(肖像画):window.Orientation.PORTRAIT,
横屏(风景画):window.Orientation.LANDSCAPE
async aboutToAppear(): Promise<void> {
// 得到窗口对象, 并设置窗口显示方向为“横屏”。
let w = await window.getLastWindow(getContext()) // 获取最后一个窗口(最近显示的窗口对象)
w.setWindowLayoutFullScreen(true) // 设置窗口全屏
// 设置窗口显示方向为“横屏”。
w.setPreferredOrientation(window.Orientation.PORTRAIT) // 竖屏(肖像画):window.Orientation.PORTRAIT, 横屏(风景画):window.Orientation.LANDSCAPE
}
考虑到性能,使用相对布局容器
背景色撑满整个屏幕
微调元素边距的三种方式
.margin({left: 50}) // 设置外边距,微调元素位置1 影响周围的兄弟元素
.offset({x:50, y:50}) // 设置偏移量,微调元素位置2 不会影响周围的兄弟元素
.position({x:1000, y:50}) // 设置位置,微调元素位置3 会影响周围的兄弟的元素
静态页面实现
1、顶部条 和 暂停
import { window } from '@kit.ArkUI';
@Entry
@Component
struct FullScreenPlay {
// 当页面即将显示时,设置窗口显示方向为“横屏”。
async aboutToAppear(): Promise<void> {
// 得到窗口对象, 并设置窗口显示方向为“横屏”。
let w = await window.getLastWindow(getContext()) // 获取最后一个窗口(最近显示的窗口对象)
w.setWindowLayoutFullScreen(true) // 设置窗口全屏
// 设置窗口显示方向为“横屏”。
w.setPreferredOrientation(window.Orientation.LANDSCAPE) // 竖屏(肖像画):window.Orientation.PORTRAIT, 横屏(风景画):window.Orientation.LANDSCAPE
}
build() {
RelativeContainer() {
// 1、最底部的视频
Row(){
}
.width('100%')
.height('100%')
.backgroundColor('#AAA')
// 2、顶部的 后退按钮+标题+更多
Row(){
// 后退按钮
Image('/images/back.svg')
.width(9)
.height(15)
.fillColor('#fff')
// 标题
Text('Axure RP9教程:手把手教你制作交互案例')
.fontSize(16)
.fontColor('#FCFCFC')
.layoutWeight(1) // 权重 1 表示占据剩余空间
.margin({left:20})
// 更多
Image('/images/more.svg')
.width(24)
.fillColor('#fff')
}
.width('100%')
// .backgroundColor('#110')
.padding({left:20 , right:20, top:20})
// 3、播放/暂停按钮
Image('/images/play2.svg')
.width(50)
.height(50)
.alignRules({
middle: {anchor:'__container__', align: HorizontalAlign.Center},
center: {anchor:'__container__', align: VerticalAlign.Center}
})
// 4、底部的播放控制条
}
.height('100%')
.width('100%')
.backgroundColor('#fdd')
}
}
2、底部进度条
// 4、底部的播放控制条
Row() {
Text("03:23")
.fontSize(12)
.fontColor("#FFFFFF")
Progress({
value: 3.23 * 60,
total: 5.31 * 60,
type: ProgressType.Linear
})
.layoutWeight(1)
.margin({ left: 8, right: 15 })
.backgroundColor('#fff')
.color('#f59a23')
Text("05:31")
.fontSize(12)
.fontColor("#FFFFFF")
Text("标清")
.fontSize(12)
.fontColor("#FFFFFF")
.margin({ left: 15, right: 15 })
Image('/images/zoomin.svg')
.width(15)
.height(15)
}
.width('100%')
// .backgroundColor(Color.Pink)
.alignRules({
bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
.padding({ bottom: 20, left: 30, right: 30 })
完整代码:
import { window } from '@kit.ArkUI';
@Entry
@Component
struct FullScreenPlay {
// 当页面即将显示时,设置窗口显示方向为“横屏”。
async aboutToAppear(): Promise<void> {
// 得到窗口对象, 并设置窗口显示方向为“横屏”。
let w = await window.getLastWindow(getContext()) // 获取最后一个窗口(最近显示的窗口对象)
w.setWindowLayoutFullScreen(true) // 设置窗口全屏
// 设置窗口显示方向为“横屏”。
w.setPreferredOrientation(window.Orientation.LANDSCAPE) // 竖屏(肖像画):window.Orientation.PORTRAIT, 横屏(风景画):window.Orientation.LANDSCAPE
}
build() {
RelativeContainer() {
// 1、最底部的视频
Row() {
}
.width('100%')
.height('100%')
.backgroundColor('#7f7f7f')
// 2、顶部的 后退按钮+标题+更多
Row() {
// 后退按钮
Image('/images/back.svg')
.width(9)
.height(15)
.fillColor('#fff')
// 标题
Text('Axure RP9教程:手把手教你制作交互案例')
.fontSize(16)
.fontColor('#FCFCFC')
.layoutWeight(1)// 权重 1 表示占据剩余空间
.margin({ left: 20 })
// 更多
Image('/images/more.svg')
.width(24)
.fillColor('#fff')
}
.width('100%')
// .backgroundColor('#110')
.padding({ left: 20, right: 20, top: 20 })
// 3、播放/暂停按钮
Image('/images/play2.svg')
.width(50)
.height(50)
.alignRules({
middle: { anchor: '__container__', align: HorizontalAlign.Center },
center: { anchor: '__container__', align: VerticalAlign.Center }
})
// 4、底部的播放控制条
Row() {
Text("03:23")
.fontSize(12)
.fontColor("#FFFFFF")
Progress({
value: 3.23 * 60,
total: 5.31 * 60,
type: ProgressType.Linear
})
.layoutWeight(1)
.margin({ left: 8, right: 15 })
.backgroundColor('#fff')
.color('#f59a23')
Text("05:31")
.fontSize(12)
.fontColor("#FFFFFF")
Text("标清")
.fontSize(12)
.fontColor("#FFFFFF")
.margin({ left: 15, right: 15 })
Image('/images/zoomin.svg')
.width(15)
.height(15)
}
.width('100%')
// .backgroundColor(Color.Pink)
.alignRules({
bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
.padding({ bottom: 20, left: 30, right: 30 })
}
.height('100%')
.width('100%')
.backgroundColor('#fdd')
}
}
3、添加进度条上的小圆饼
解决方法:
要调整小圆饼的位置:
微调小圆饼的位置-三种方法
- .margin({left: 50}) // 设置外边距,微调元素位置1 影响周围的兄弟元素 (会影响周围元素,不合适)
- .offset({x:50, y:50}) // 设置偏移量,微调元素位置2 不会影响周围的兄弟元素()
- .position({x:1000, y:50}) // 设置位置,微调元素位置3 会影响周围的兄弟的元素()
// 小圆饼
Row(){
}
.width(20)
.height(20)
.borderRadius(10)
.backgroundColor('#fff')
// .offset({x:-60,y:0})
.position({
x: '60%',
y: -8
})
创建项目》创建FullScreenPlay.ets全品播放页面,并将其修改为启动页面。
全屏播放,屏幕必然横过来,所以要将窗口横过来。
编辑
src/main/ets/entryability/EntryAbility.ets
若写在/EntryAbility.ets中,则所有窗口都是横屏,因此不应该写在UIAbility中,应该写在全屏播放的页面中。是个跳转。
当页面即将显示时,设置窗口显示方向为“横屏”。
编辑
这两个方法都可以,这两个方法有什么区别?
abouttoappear是所有组件都可以使用的方法,页面组件可以、局部组件也可以。
onPageShow()页面组件才有,其他组件没有。
abouttoappear先一步调用,页面即将显示时调用,不会有渐变的过程,onpageshow页面显示出来时候才调用,会有渐变的过程。
旋转动画应该放在onpageshow中。
编辑
全屏播放页面应用
如果放在onPageShow()中,会看到竖屏转换为横屏的效果。
如果放在aboutToAppear()中,一上来就会显示横屏,用户不会看到竖屏转换为横屏的效果。
我们这里使用aboutToAppear()
设置全屏
async aboutToAppear(): Promise<void> {
// 得到窗口对象, 并设置窗口显示方向为“横屏”。
let w = await window.getLastWindow(getContext()) // 获取最后一个窗口(最近显示的窗口对象)
w.setWindowLayoutFullScreen(true) // 设置窗口全屏
// 设置窗口显示方向为“横屏”。
w.setPreferredOrientation(window.Orientation.PORTRAIT) // 竖屏(肖像画):window.Orientation.PORTRAIT, 横屏(风景画):window.Orientation.LANDSCAPE
}
横屏显示
竖屏(肖像画):window.Orientation.PORTRAIT,
横屏(风景画):window.Orientation.LANDSCAPE
async aboutToAppear(): Promise<void> {
// 得到窗口对象, 并设置窗口显示方向为“横屏”。
let w = await window.getLastWindow(getContext()) // 获取最后一个窗口(最近显示的窗口对象)
w.setWindowLayoutFullScreen(true) // 设置窗口全屏
// 设置窗口显示方向为“横屏”。
w.setPreferredOrientation(window.Orientation.PORTRAIT) // 竖屏(肖像画):window.Orientation.PORTRAIT, 横屏(风景画):window.Orientation.LANDSCAPE
}
考虑到性能,使用相对布局容器
撑满整个屏幕
微调边距的元素
.margin({left: 50}) // 设置外边距,微调元素位置1 影响周围的兄弟元素
.offset({x:50, y:50}) // 设置偏移量,微调元素位置2 不会影响周围的兄弟元素
.position({x:1000, y:50}) // 设置位置,微调元素位置3 会影响周围的兄弟的元素
静态页面实现
顶部条 和 暂停
import { window } from '@kit.ArkUI';
@Entry
@Component
struct FullScreenPlay {
// 当页面即将显示时,设置窗口显示方向为“横屏”。
async aboutToAppear(): Promise<void> {
// 得到窗口对象, 并设置窗口显示方向为“横屏”。
let w = await window.getLastWindow(getContext()) // 获取最后一个窗口(最近显示的窗口对象)
w.setWindowLayoutFullScreen(true) // 设置窗口全屏
// 设置窗口显示方向为“横屏”。
w.setPreferredOrientation(window.Orientation.LANDSCAPE) // 竖屏(肖像画):window.Orientation.PORTRAIT, 横屏(风景画):window.Orientation.LANDSCAPE
}
build() {
RelativeContainer() {
// 1、最底部的视频
Row(){
}
.width('100%')
.height('100%')
.backgroundColor('#AAA')
// 2、顶部的 后退按钮+标题+更多
Row(){
// 后退按钮
Image('/images/back.svg')
.width(9)
.height(15)
.fillColor('#fff')
// 标题
Text('Axure RP9教程:手把手教你制作交互案例')
.fontSize(16)
.fontColor('#FCFCFC')
.layoutWeight(1) // 权重 1 表示占据剩余空间
.margin({left:20})
// 更多
Image('/images/more.svg')
.width(24)
.fillColor('#fff')
}
.width('100%')
// .backgroundColor('#110')
.padding({left:20 , right:20, top:20})
// 3、播放/暂停按钮
Image('/images/play2.svg')
.width(50)
.height(50)
.alignRules({
middle: {anchor:'__container__', align: HorizontalAlign.Center},
center: {anchor:'__container__', align: VerticalAlign.Center}
})
// 4、底部的播放控制条
}
.height('100%')
.width('100%')
.backgroundColor('#fdd')
}
}
底部进度条
// 4、底部的播放控制条
Row() {
Text("03:23")
.fontSize(12)
.fontColor("#FFFFFF")
Progress({
value: 3.23 * 60,
total: 5.31 * 60,
type: ProgressType.Linear
})
.layoutWeight(1)
.margin({ left: 8, right: 15 })
.backgroundColor('#fff')
.color('#f59a23')
Text("05:31")
.fontSize(12)
.fontColor("#FFFFFF")
Text("标清")
.fontSize(12)
.fontColor("#FFFFFF")
.margin({ left: 15, right: 15 })
Image('/images/zoomin.svg')
.width(15)
.height(15)
}
.width('100%')
// .backgroundColor(Color.Pink)
.alignRules({
bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
.padding({ bottom: 20, left: 30, right: 30 })