自己編寫的音樂播放器偶然用到這個模塊童社,發(fā)現(xiàn)沒有思路,而且上網搜了搜著隆,關于這方面的文章不是很多扰楼,沒找到滿意的結果,然后自己也是想了想美浦,最終實現(xiàn)了這種效果弦赖,想通了發(fā)現(xiàn)其實很簡單。
直接上原理:
第一種:
原理就是創(chuàng)建一個UILabel抵代,設置一下UILabel的lineBreakMode屬性為NSLineBreakByClipping(這樣的話就是的內容過多的話就會不顯示腾节,所以UILabel的寬度設置成0,就會不顯示內容荤牍,然后用定時器不斷更改寬度案腺,內容也就會不斷地顯示出來,覆蓋掉原本的內容康吵,字體顏色要設成顏色不一樣的劈榨,默認都是黑色,所以要改個其他的顏色晦嵌,不然的話效果就看不出來了)同辣,位置大小和內容文本的位置一樣拷姿,高度也一樣,就會給人一種卡拉OK的效果旱函。
在我的這個作品中效果不是很好响巢,因為我用的是UIPickerView來顯示歌詞的,UILabel的字體就要和UIPickerView的文本字體一樣,所以就有點難度棒妨,當然了踪古,如果你要覆蓋的字體可以自定義字體大小的話那就另當別論了,所以我還有一種方法券腔。
第二種:
這種方法和第一種差不多伏穆,因為我采用的是UIPickerView來顯示的歌詞(當前顯示歌詞的高度為60),所以用第一種效果不是很好纷纫,所以我直接定義兩個一模一樣的UILabel枕扫,一個底部的UILabel寬度和屏幕一樣寬,但是內容是居中的辱魁,然后就是頂部的UILabel烟瞧,首先設置字體和底部的字體一樣大,接著設置UILabel的內容和底部的內容一樣商叹,起始位置就是x就是屏幕寬的一半減去根據(jù)字體得到寬度的一半燕刻,y就是屏幕的高的二分之一減去30,高為60剖笙,寬為0卵洗,因為寬是要不斷增加的,這樣才能有卡拉OK的效果弥咪。
總結一下:第一種方法是只有一個UILabel过蹂,直接覆蓋到原文本上,如果原文本字體可以自己設置的話就足夠了聚至,第二種則是比較強大的酷勺,就相當于先定義一個把原來的覆蓋掉,然后在接著覆蓋扳躬。
下面我說一下核心的代碼片段(篇未有源碼下載地址):
因為采用的是UIPickerView脆诉,所以顯示歌詞需要判斷一下,下面的這個方法不只是每顯示一行調用一次贷币,所以要判斷一下
//根據(jù)字體大小來設置高度或寬度
-(CGRect)boundingRectWithInitSize:(CGSize)size
{
self.jianbian.lineBreakMode=NSLineBreakByClipping;
CGRectrect=[self.jianbian.textboundingRectWithSize:sizeoptions:NSStringDrawingUsesLineFragmentOriginattributes:[NSDictionarydictionaryWithObjectsAndKeys:self.jianbian.font,NSFontAttributeName,nil]context:nil];
returnrect;
}
//顯示歌詞
-(NSString*)pickerView:(UIPickerView*)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
_jishu++;
//根據(jù)字體調整frame的大小
CGRectmyRect;
myRect=[selfboundingRectWithInitSize:CGSizeMake(0, 60)];
//設置底部的UILabel的大小和起始位置
self.jianbiant.frame=CGRectMake(Kuan, (Gao-20)/12.0*5-30,Kuan, 60);
//設置頂部的UILabel的大小和起始位置
self.jianbian.frame=CGRectMake(Kuan+Kuan/2-myRect.size.width/2, (Gao-20)/12.0*5-30,0, 60);
//因為UIPickerView比較特殊击胜,所以需要判斷當前正在顯示的內容,把需要顯示的內容設置成底部和頂部UILabel的內容
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;
returnself.geCiShuZu[_diJiGe][row][@"lyric"];
}
下面是運行時的圖片:
源碼有好幾個文件役纹,所以我打包了有興趣的可以下載一下(這個也是可以快進快退的進度條和歌曲還有歌詞全部同步偶摔,左滑顯示歌詞,上下滑動歌詞歌曲會同步促脉,進度條也會同步辰斋,同樣的左右滑動進度條歌的進度和歌詞的進度也會改變):
http://download.csdn.net/detail/yz18337161090/9457997