00:00
好,那我们继续啊,那我们把这个哎,播放歌曲以及切换歌曲的功能做完了以后呢,那么这节课呢,我们来看什么。看这个进度条的区域。首先呢,我们先去搭一下它的结构啊,那么这个结构呢,是水平布局,然后呢,分为三部分,左中右对吧,三部分,然后呢,来到我们的页面里面啊。那我们先把这些GS呢,先给它关掉啊。啊,这些呢,我们都可以关了。首先呢,找到我们的详情页,打开我们的结构。那么那个进度条的区域呢,应该是在这个底部控制区域的上方啊。所以呢,我们可以先把这些呢啊都收起来了。啊,然后在这里我们去写一下这个啊进度条啊,控制区域,嗯,我们这儿呢,来一个啊view啊progress吧。啊,来一个C,嗯表示啊,进度控制区域。那么在这个里面呢,有两部分,一个是左边,那时间呢,是一知六啊零零冒号零零的格式啊,还没有静态啊,没有动态的时间呢,我这先随便写一个,比如说零三。
01:08
来随便写一个静态的,然后中间的话呢,应该是那个按实时的进度条。对吧,有个总进度条,那这个时候呢,在这里呢,我给它起一个包啊,进度条的控制区域。哎,那差不多啊,我们先把这个结构搭好,来到我们的项目,我们看一眼。好了,那这个时候呢,我们随便点一下啊,还是刘德华这个。来我们进来大家看啊,这个内容呢,出来了,出来了以后呢,首先啊,你看啊,现在呢,我们根本看不到中间,中间呢,现在并没有什么宽度啊,宽度也没有内容。对吧,啊,所以没有啊,而且呢,它是纵向布局,那么因为中间这是一个view标签,它呢是一个块计元素,那首先啊,我们去写一下它的样式。来把这个样式呢,我们调到右侧啊右侧啊来往下,嗯,那这呢,哎,我们接下来要写的是我们的这个啊,镜子桥控制区域,就把这个呢给大拿过来。
02:10
好的,那首先啊,外边这个progress container呢,是总的包裹器。那么它的宽度呢?啊,我当时设的是640RPX。啊,高的话呢,我们这儿给他来一个80。哎,80RPS,那这样的话呢,里面的横高呢,我们也给它设一个80啊,也设一个80没问题,然后呢,因为它水平排列,所以this display flex一下。Flas一下,因为这个呢,距离底部的固呃距离是固定的啊,所以呢,我们这儿呢,给它来一个定位,那就是对吧,Absoluteut,然后距离底部的距离是多少呢?200RPX。哎,总的长度写完了,那么它下边啊,那这个半CR啊CTRL啊,就是那个进度条这一块呢,我们也去给他写一下,哎,这哥们Y,那么它的宽度呢,是450。
03:08
啊是四百五啊高的话呢,注意啊,它不能太粗了啊,太高了,太高的话就写的太粗了啊,那这里呢,我显示的是。42PS的高度啊,用的是它。啊,然后呢,为了看清楚一点呢,我们去给它加一个啊背景颜色,比如说background这呢还是用rgba啊啊,那默认呢,就是黑色,我们再来一个透明度啊,比如点四的透明度。好了,那现在呢,我们看一下这个效果呗,来过来。嗯,来,那这个时候呢,我们还是点这个练习啊进来。来进来了以后啊,大家看这个题就出来了。那么出来了以后呢,这个边框呢,其实在上边呢。对吧,在上面呢。啊,我们如何让它调到中间呢。啊,这个所谓的在上面什么意思呢?来让他看的清楚一点呢,我可以给这个总的包裹器呢,我们来一个边框啊,来一个边框,我们再看一下。
04:07
来,点一首歌进来。这不是吗?这是我的总容器的高度,它是不是靠上边对齐呀?嗯,靠上面这些,那这个时候呢,我们想让他啊。上下居中,左右也居中,其实是啊,那其实比较简单啊,比较简单,我们可以给这个啊进度条,这呢,我们去设一个。哎,我们来一个market就行了啊,来一个market o two,来我们再看一眼market凹two呢,意思说让它上下的外边距呢去平分一下啊,包括左右的也是一样的,好的,我们再看一次。过来。扎开它就下来了,嗯,没有问题,好的,那么这个下来了以后呢,我们再看啊,那除了这个总的进度条呢,其实我们还有实时的进度条。来大家要看到的实时进度条呢,啊,我这去播放一下这个音乐。
05:02
哎,你看啊,随着音乐的播放呢,这个进度条呢,在一直的涨。没问题,是这样的来,那这呢,我们放大一点应该是能看清楚。啊是这个,那么在这个实时进度条的右侧呢,还有个小白圆球啊,这个呢,在很多啊音乐播放的软件呢,我们都能看到。啊都能看到,那么看到这个需求啊,首先你要知道啊,这个实时的进度条呢,是正好压在这个总进度条的上边。而小圆球呢,是在实时进度条的右边啊,是这样的。啊,所以啊,我们可以怎么去做呢,大家看着我呢,在这个总的进度条里面。嗯,在总的进度条里面啊,我给它加个注释吧,这好看一点,那呢这个呢是总的进度条,嗯,然后在这个里面呢,我们再来一个啊,那这个呢是实时技能条。
06:00
来我们整一个啊,实时的进度强呢,那我这呢,就叫它一个这个呃什么呀,Audio音频的。呃,音频吧,音频的current time。他太棒。是这个吧,我们写的长一点啊,来表示实时的进度条。那么这个实时的进度条呢?我们为了先要看到它的效果来。我们可以先给他写死一个宽度啊,比如说120X。嗯,好的啊,高的话呢,跟哎总镜度桥一样高,所以是四对应的背景颜色呢,我们来一个红色。啊,来一个红色。对吧。没有问题。而且呢,它默认的是不是要压在这个总进度条的上面呀,所以呢,它应该是去定位上去啊,那就。对吧,现在我们这来一个absolute。啊,那就是top为零,然后呢,Left为零,那这样的话是不是压到了走进条上面呀。
07:03
同时呢,它要压上去啊,为了保证没有问题呢,我们把它的层级呢,往高提一点。好的,那这个时候呢,我们再来看一下。来现在呢,我们点击一下这个练习啊过来。啊,那现在呢,诶怎么跑到这儿了,跑到这儿呢,是因为什么,相当于。嗯,我们说了啊,我们现在用的是salute。对吧,绝对定位它呢,是要相对于离它最近的开启定位定位的负极元素,或者叫组件元素定位吧。啊,我们本意是不是相当于半control定位啊,但是我们这没有看啊,但是它呢,上一级元素呢,是不是开了定位了,所以是相当于它定位的,那这肯定不行啊,我们在这里呢,我们再来一个position relative,那这样的话呢,我们再看一下效果过来。好的,走。
08:03
来进来了以后啊,大家看啊,现在呢,我们已经成功的把这个实时的进度条是不是压在了这个总进度条上面了呀。那接下来呢,我们再设置一下右侧的那个小白色的圆球,我呢再在这个实实时的进度条里面呢,哎,去整一下这个小圆球啊。带小月球。OK,那这呢,再来一个啊,那这呢,我就教他一个the audio cycle吧。三。音频的小圆球。嗯,来,我们去写一下啊。过来。那这里呢啊,我们也给它表示一下啊,小圆球对不对,首先啊是它,那么因为是个圆球啊,所以呢,我们去设一个小圆球啊,那么它大小不需要太大,你就宽高,我们来一个12R PX,然后呢,我们来一个包的videos啊,它们是50%。
09:01
啊,能想到的都写上啊呃,那这呢是啊background背景颜色呢是白色。对吧,嗯。同时啊,它始始终呢,要相对于实时这个进度条呢,摆放在哪,摆放在它的右侧啊这个位置。对吧,注意啊,这是挨着的。嗯,那这样的话呢,肯定是要相对于它的负极元素,就是实时的进度条,是不是要去定位到它的右侧呀。好的,那这个时候呢,我们这里呢,再看一个啊,嗯,然后呢,A salute呗。好,那这个开启了以后啊,那我们这个top和left值啊,或者是就是它的,哎,这个定位的这个偏移量我们到底是多少呢。这个时候来,大家想一下。这个呢,是它的负极元素啊,实时的进度条。那我们平时习惯是不是用top和left呀?相当于上边的这个平移量相对于左侧的偏移量,对吧。
10:00
好,那这个时候呢,注意啊,小圆球呢是在右侧。在右侧啊,所以呢,我们应该用的是right。啊,这是其一其二啊,假设我们平时写的为零,意味着什么?是不是意味着我们这个子元素的右侧跟负元素的右侧重合了呀?这个时候的right是零。那现在呢,我是让你把这个小圆球呢,移到移出负元素移到它的。右侧这这一块。那这个时候相当于是从零的位置,是不是再往右移这么长呀。这么长是多长呢?就是小圆球的直径多少呢?是不是二呀?而且呢,是移出了负有数之外了,对吧,所以呢,这个时候啊,那么它的right的偏移量应该是负的12。20X。哎,那这是这个,那么我们再说啊,这个top呢,应该是多少对吧。来实时进度条在这儿,哎,小圆球呢,嗯,大概在这个位置。
11:04
那这个时候看着实时的进度条高是四。对吧,哎,总高啊,这是四。没有问题,那么小圆球的中心点在这,那肯定是跟实时镜头条的哎,一半,这是不是重合了呀?那你要注意啊,Top为零的时候,那小圆球的顶部和负元素的顶部是不是重合?而现在呢,我们是要在重合的基础上的再移,往出再向上的移。是不是移出了负元素的上面了呀,首先我们能确定呢,再往上走的偏移量,它一定是负值。那么往上走多少呢?其实我们就是要求这到。顶部的距离,这是多少?也好算对吧,小圆球的半径是多少呢?看半径是多少啊,它直径是12,半径是不是六呀,六的话,负元素的一半,这到这的距离是多少呢?总高是四,所以这是不是二呀。
12:05
所以上面这一节的距离是不是应该为四?那这个时候呢,我们啊,已经得出了啊,向上的偏移量应该是四负42PX。好,那这个时候呢,我们再来看一下效果。来继续啊,还是来到刘德华这一首练习。嗯,我们把控制台清一下啊,那这个时候呢,来先按我们当前的项目放大啊,大家看啊,其实我们写的没啥问题了,小圆球,嗯。现在呢,是不是已经定位到了这个。右侧这一块。没有问题啊来,那这做完了以后呢,我们就可以把最外边的这个红色的边框呢,就给它撤撤掉了。啊,那这节课呢,我们是对这个进度条控制区域呢,啊,进行了一个静态的搭建,啊,那这节课呢,我们先讲到这。
我来说两句