自己編寫的音樂播放器偶然用到這個(gè)模塊，發(fā)現(xiàn)沒有思路，而且上網(wǎng)搜了搜，關(guān)于這方面的文章不是很多，沒找到滿意的結(jié)果，然后自己也是想了想，最終實(shí)現(xiàn)了這種效果，想通了發(fā)現(xiàn)其實(shí)很簡(jiǎn)單。

直接上原理：

第一種：

原理就是創(chuàng)建一個(gè)UILabel，設(shè)置一下UILabel的lineBreakMode屬性為NSLineBreakByClipping（這樣的話就是的內(nèi)容過多的話就會(huì)不顯示，所以UILabel的寬度設(shè)置成0，就會(huì)不顯示內(nèi)容，然后用定時(shí)器不斷更改寬度，內(nèi)容也就會(huì)不斷地顯示出來，覆蓋掉原本的內(nèi)容，字體顏色要設(shè)成顏色不一樣的，默認(rèn)都是黑色，所以要改個(gè)其他的顏色，不然的話效果就看不出來了），位置大小和內(nèi)容文本的位置一樣，高度也一樣，就會(huì)給人一種卡拉OK的效果。

在我的這個(gè)作品中效果不是很好，因?yàn)槲矣玫氖?span id="ozvdkddzhkzd" class="s1">UIPickerView來顯示歌詞的，UILabel的字體就要和UIPickerView的文本字體一樣,所以就有點(diǎn)難度，當(dāng)然了，如果你要覆蓋的字體可以自定義字體大小的話那就另當(dāng)別論了，所以我還有一種方法。

第二種：

這種方法和第一種差不多，因?yàn)槲也捎玫氖荱IPickerView來顯示的歌詞（當(dāng)前顯示歌詞的高度為60），所以用第一種效果不是很好，所以我直接定義兩個(gè)一模一樣的UILabel，一個(gè)底部的UILabel寬度和屏幕一樣寬，但是內(nèi)容是居中的，然后就是頂部的UILabel，首先設(shè)置字體和底部的字體一樣大，接著設(shè)置UILabel的內(nèi)容和底部的內(nèi)容一樣，起始位置就是x就是屏幕寬的一半減去根據(jù)字體得到寬度的一半，y就是屏幕的高的二分之一減去30，高為60，寬為0，因?yàn)閷捠且粩嘣黾拥?#xff0c;這樣才能有卡拉OK的效果。

總結(jié)一下：第一種方法是只有一個(gè)UILabel，直接覆蓋到原文本上，如果原文本字體可以自己設(shè)置的話就足夠了，第二種則是比較強(qiáng)大的，就相當(dāng)于先定義一個(gè)把原來的覆蓋掉，然后在接著覆蓋。

下面我說一下核心的代碼片段（篇未有源碼下載地址）：

?因?yàn)椴捎玫氖荱IPickerView，所以顯示歌詞需要判斷一下，下面的這個(gè)方法不只是每顯示一行調(diào)用一次，所以要判斷一下

//根據(jù)字體大小來設(shè)置高度或?qū)挾?/span>

-(CGRect)boundingRectWithInitSize:(CGSize)size

{

?? ?

? ? self.jianbian.lineBreakMode=NSLineBreakByClipping;

? ? CGRect rect=[self.jianbian.text boundingRectWithSize:size options:NSStringDrawingUsesLineFragmentOrigin attributes:[NSDictionary dictionaryWithObjectsAndKeys:self.jianbian.font,NSFontAttributeName, nil] context:nil];

? ? return rect;

}

//顯示歌詞

-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component

{

? ? _jishu++;

? ? //根據(jù)字體調(diào)整frame的大小

? ? CGRect myRect;

? ? myRect=[self boundingRectWithInitSize:CGSizeMake(0, 60)];

? ? //設(shè)置底部的UILabel的大小和起始位置

? ? self.jianbiant.frame=CGRectMake(Kuan, (Gao-20)/12.0*5-30,Kuan, 60);

? ? //設(shè)置頂部的UILabel的大小和起始位置

? ? self.jianbian.frame=CGRectMake(Kuan+Kuan/2-myRect.size.width/2, (Gao-20)/12.0*5-30,0, 60);

? ? //因?yàn)?span id="ozvdkddzhkzd" class="s1">UIPickerView比較特殊，所以需要判斷當(dāng)前正在顯示的內(nèi)容，把需要顯示的內(nèi)容設(shè)置成底部和頂部UILabel的內(nèi)容

? ? if (_jishu==2 && row<((NSArray*)self.geCiShuZu[_diJiGe]).count-1) {

?? ? ? ? _jianbiant.text=self.geCiShuZu[_diJiGe][row][@"lyric"];

? ? ? ? _jianbian.text=_jianbiant.text;

? ? ? ? _kuan=myRect.size.width;

? ? ? ? _jishu=0;

? ? }

? ? if (_jishu==1 && row==((NSArray*)self.geCiShuZu[_diJiGe]).count-1)

? ? {

? ? ? ? if (_hehe)

? ? ? ? {

? ? ? ? ? ? _jianbiant.text=self.geCiShuZu[_diJiGe][row][@"lyric"];

? ? ? ? ? ? _jianbian.text=_jianbiant.text;

? ? ? ? ? ? _kuan=myRect.size.width;

? ? ? ? ? ? _jishu=0;

? ? ? ? ? ? _hehe=NO;

? ? ? ? }

? ? ? ? _hehe=YES;

? ? }

? ? _zongkuan=0;

? ? return self.geCiShuZu[_diJiGe][row][@"lyric"];

}

?

?

下面是運(yùn)行時(shí)的圖片：

????

?

?

源碼有好幾個(gè)文件，所以我打包了有興趣的可以下載一下（這個(gè)也是可以快進(jìn)快退的進(jìn)度條和歌曲還有歌詞全部同步，左滑顯示歌詞，上下滑動(dòng)歌詞歌曲會(huì)同步，進(jìn)度條也會(huì)同步，同樣的左右滑動(dòng)進(jìn)度條歌的進(jìn)度和歌詞的進(jìn)度也會(huì)改變）：

http://download.csdn.net/detail/yz18337161090/9457997

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/BK-12345/p/5260907.html

總結(jié)

以上是生活随笔為你收集整理的卡拉OK效果的实现-iOS音乐播放器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。