案例演示

• 對于實時顯示語音音量大小的需求，發(fā)現(xiàn)很多人的實現(xiàn)方式通過預(yù)放置多張圖進行切換進行完成的。這樣的處理，不但會浪費App的資源存儲空間，而且效率也不高。對于符合某一定規(guī)律動態(tài)改變的圖形，我們也可以考慮通過代碼的方式來實現(xiàn)

圖一.gif

實現(xiàn)機制

圖二.png

• 外部輪廓View主要控制顯示大小和顯示的圓角效果。內(nèi)部的Layer主要控制動態(tài)顯示的高度，雖然他是矩形的。但是當(dāng)把該Layer加入到View中，而該View設(shè)置了_dynamicView.clipsToBounds = YES;。內(nèi)部的Layer超過外部輪廓的部分，則會被切除掉。
  如此說來，我們只需要動態(tài)改變內(nèi)部Layer顯示的高度，即可完成該效果顯示。是不是很簡單啊。

實現(xiàn)代碼

-(void)refreshUIWithVoicePower : (NSInteger)voicePower{
 CGFloat height = (voicePower)*(CGRectGetHeight(self.frame)/10);
    //每次進來清掉上一次的layer
    [_indicateLayer removeFromSuperlayer];
    _indicateLayer = nil;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, CGRectGetHeight(self.frame)-height, CGRectGetWidth(self.frame), height) cornerRadius:0];
    
    CAShapeLayer *indicateLayer = [CAShapeLayer layer];
    indicateLayer.path = path.CGPath;
    indicateLayer.fillColor = [UIColor grayColor].CGColor;
    [self.layer addSublayer:indicateLayer];
    _indicateLayer = indicateLayer;
}

實現(xiàn)的簡單效果

圖三.gif

請看demo