00:00
好的,我们继续啊,那上一节课呢,我们实现了这个摇杆跟磁盘的动画,对吧,那这节课呢,啊,我们去把下面这一块区域呢。去给他搭建一下。好的,那现在呢,来到我们的结构里面啊,那接下来呢,我们要做的呢,是呃,这个底部控制播放区域。嗯,好的,那在这里呢,我呢先去给他来一个包裹器啊,叫music control。那么在它的下面呢?最终我们要放置的其实就是五个字体图标。哎,那五个自己图标呢,我们分别要用到不同的icon啊,那这里呢,为了节省时间的话呢,我提前准备好了这个icon。啊,使劲儿的,我直接给他拿过来,在这儿呢,我们就不浪费时间啊去。呃,一点一点的去找这个东西了,哎,那这个时候呢,我们要注意一下啊,那现在这呢,应该是少了一个text结束标签,我给大家把这个拿过来。好了,那现在啊,五个字体图标就进来了,哎,我们看一眼在这儿呢。
01:04
嗯,只不过现在呢比较小,需要呢,我们去调整一下它的样式。这里边啊,主要是我提前在我的字体图标库呢,已经啊加入了当前的I phone呢,所以呢,我们可以直接用。来,那现在呢,我们找到我们的底部控制区域啊,在这里我们继续往下写。好,那这个呢是底部啊控制区来,首先它的包裹器啊,它的宽度呢,应该是100%,嗯,没有问题,然后啊,那它里边的五个子元素,它应该是水平排列,那因为现在呢,我们都是什么呀,都是text。待会呢,我们要去设置它的宽度,五个那一人是20%对吧,所以呢,这我们还是选择用这个啊flex布局,嗯,没有问题,然后啊,我们控制一下啊,底部这个区域,我们应该是要让它距离。
02:00
底部有一定的距离啊,也是说摆放到这个位置,距离底部的距离呢,是多少呢?是40RPX啊,那这个时候呢,我们需要用到定位来,哎,Absolute我们让它距离底部啊,也是bottom曼呢来40RPX。啊,Left呢,那就是为零呗,来,我们继续往下啊,嗯,Left为零好。为了好看一点呢,我再给他加一个上面框啊。Erpx solid,我们来一个哎,井号呃E吧,啊,那这个呢,是它上边空的一个颜色。啊一呢,好像跟这个颜色呢有点冲啊,我们最好呢,给他调一个白色的。来个FF。来,那现在呢,我们去看一下我们的效果,这个时候大家看啊,这呢过来了,过来了以后呢,我们去设一下这个里边啊内容的啊,也就这个字体的大小。嗯,OK,那里面的五个呢,都是什么啊,我把这个给大家移到右侧啊,大家看的清楚一点,来,我们去move right一下。
03:05
里边的五个都是text啊,所以呢,我们直接是找到这哥们哎包裹器,我们控制它下边的text标签,那么它们的分别是多少呢?Y啊20%。对吧,那在这里呢,我们去给它设一个高度啊,那它的高度呢,那我来个120,那同时呢,横高,那肯定也是120啊,这样的话就垂直居中了。嗯,里面的文本我让它水平居中,嗯,Text line center,那这样的话,呃,我们还剩什么呀,字体颜色来个白色呗。来看一下效果。哎,这个字体大小呢,也应该调一下,这是我们应该能想到的,要不然它那个默认的太小了,我们来个50吧,看一眼。好哎,那这个时候打卡这个就上来了,上来了以后啊,有一点跟我写好这个不一样,那么它官方的APP上显示中间这个字体图标呢,是叫啊,其他的要大一些啊,所以啊,大家看啊,我这儿呢,提前准备好的一个类叫big啊,表示这个是更大一些。
04:11
那这样的话呢,我们单独的去针对于这个big啊,我们再去给它设置一个啊,那T下边同时要有big这个类啊I呢,我们让它的字体图标呢为80RPX。啊,这样的话呢,会大一些,嗯,没问题。好的,那现在啊,这个字体图标我们都摆放正确了,大家看一下中间这个字体图标,那么现在呢,默认用到的icon是播放。啊,注意啊,在默认也是未播放的情况下,这应该是播放的按钮,那是因为我们告诉用户啊,你一点就可以播放这个音乐。对吧,那当然了,我们再点击播放这个按钮,再一点击,那这个时候呢,音乐在播放,可是这显示的是不是暂停了自己图标啊。
05:03
所以啊,这个icon到底用哪个,它其实有两个,一个是播放的,一个是暂停的,那么到底用哪个,是不是取决于我们这个播放的状态is play。对吧,啊,它为放的时候这是什么呀。哎,它为false,你想想看,为false的话,那这应该是要写是。播放为触,这应该要显示暂停,就是告诉用户你点击它可以干嘛。那么针对于这个情况呢,啊,我们把这呢去给它写成动态的啊动态的那这个icon不能写死,我们也应该根据这个is play。对吧,他的状态来决定。如果为处我们应该要给人家显示的是暂停的,对吧,那我先把这个复制过来啊,然后呢,如果。嗯,我们应该显示播放的,那把前面这个呢,给它改一下啊,这个呢比较简单,我们直接去给它拼一下这个啊暂停就好了,把它对应的就是这个icon。
06:07
嗯,好的,那这个时候啊,我们再来看一下,来来到我们的项目,呃,现在呢,这个播放的啊,我一点击啊,我把这个fo呢改为触,大家看啊,这个图标就变了。没有问题啊,那这样的话呢,底部啊,中间这个播放暂停的这个图标,我们也去给它实现了一个动态的切换。对吧,那最后呢,我们再加一个效果啊,我们现在呢,不能一直手动的去控制这个布尔值。我们应该是由用户去点击。这个播放的按钮来去修改这个状态对了吧,啊,那这样的话呢,首先啊,来到我们的代码这一块。嗯,我们需要给中间这个text呢,去绑定一个点击事件呗,啊BY,嗯,Keep那这儿呢,啊是我们要去控制我们啊音乐的这个播放啊,我们这儿呢,就来一个这个啊music。
07:01
Play吧,啊,控制音乐的播放。对吧,那或者我们就绍它这个吧,叫这个handle啊music play处理音乐的播放,那那这个时候呢,对应的回调啊,我们去定一下。嗯,是它这里呢,我们加一个注释啊,那这个呢,是点击播放或者暂停的回调。对吧。在这个里面呢,我们要做的事情是对之前播放的状态进行取法,去更新这个状态。啊,那这样呢,比较简单啊,我let is play,我们直接去等于原有状态的取反值。嗯,那这样的话呢,我上来就给他是不是拿到了取反的状态,紧接着啊,我们点set data去更新一下,在这里边把a play放进来就好了,那这一步呢,是在修改我们这个是否啊播放的状态。好,来回到我们的模拟器里面啊,我们看一下效果。
08:04
点击播放来,摇杆落下,磁盘开始做底部的图标变化来暂停。是不是也没有问题啊啊,那这样的话呢,我们同时呢,去把这个点击播放和暂停的这个控制功能我们就做完了啊,那这节课呢,我们先讲到这里啊。
我来说两句