IT工程師數位筆記本

自己編寫的音樂播放器偶然用到這個模塊，發現沒有思路，而且上網搜了搜，關于這方面的文章不是很多，沒找到滿意的結果，然后自己也是想了想，最終實現了這種效果，想通了發現其實很簡單。

直接上原理：

第一種：

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

在我的這個作品中效果不是很好，因為我用的是UIPickerView來顯示歌詞的，UILabel的字體就要和UIPickerView的文本字體一樣,所以就有點難度，當然了，如果你要覆蓋的字體可以自定義字體大小的話那就另當別論了，所以我還有一種方法。

第二種：

這種方法和第一種差不多，因為我采用的是UIPickerView來顯示的歌詞（當前顯示歌詞的高度為60），所以用第一種效果不是很好，所以我直接定義兩個一模一樣的UILabel，一個底部的UILabel寬度和屏幕一樣寬，但是內容是居中的，然后就是頂部的UILabel，首先設置字體和底部的字體一樣大，接著設置UILabel的內容和底部的內容一樣，起始位置就是x就是屏幕寬的一半減去根據字體得到寬度的一半，y就是屏幕的高的二分之一減去30，高為60，寬為0，因為寬是要不斷增加的，這樣才能有卡拉OK的效果。

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

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

 因為采用的是UIPickerView，所以顯示歌詞需要判斷一下，下面的這個方法不只是每顯示一行調用一次，所以要判斷一下

//根據字體大小來設置高度或寬度

-(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++;

    //根據字體調整frame的大小

    CGRect myRect;

    myRect=[self boundingRectWithInitSize: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;

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

}

下面是運行時的圖片：

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

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