目錄

• 需求
• 總結
• 實現(xiàn)
• Demo

<h4 id="1">需求</h4>
最近在優(yōu)化項目中的播放器界面，設計師新出了一套UI，其中有一個音量的控制的 UISlider。要求是，在使用手機上的音量調節(jié)按鈕以及的時候，顯示音量調節(jié)的界面(系統(tǒng)自帶),在使用音量調節(jié)的slider的時候，則不顯示音量調節(jié)的界面，因為本身已經有了一個滑動條了，再加一個系統(tǒng)的略顯重復。

<h4 id="2">總結</h4>

如果不想看下面啰哩啰嗦的代碼和對原理的猜測，直接看結論在這里。??

• 將MPVolumeView添加到項目中的一個View上并顯示在屏幕外后，改變音量就看不到了.

   [_mpVolumeView setFrame:CGRectMake(-100, -100, 40, 40)];
   [_mpVolumeView setHidden:NO];
   [self.view addSubview:_mpVolumeView];
  

• 使用下述2句代碼均可實現(xiàn)讓MPVolumeView重新可以顯示出來，區(qū)別是上面一句會在調用后顯示音量界面一次，請結合需求使用。

  [_mpVolumeView setHidden:YES];
  [_mpVolumeView removeFromSuperview];
  
  

<h4 id="3">實現(xiàn)</h4>

實現(xiàn)上下滑動調節(jié)音量

1. 使用UIPanGestrueRecognizer進行滑動手勢的識別。

   -(void)panGesture:(UIPanGestureRecognizer *)pan {
       CGPoint velocity = [pan velocityInView:pan.view];
       CGFloat ratio = 13000.f;    
       CGFloat nowVolumeValue = _mpVolumeSlider.value;
       float changeValue = (nowVolumeValue - velocity.y /  ratio);
   }
   

2. 拿到MPVolumeView和MPVolumeSlider。

   _mpVolumeView = [[MPVolumeView alloc] init];
   for (UIView *view in [_mpVolumeView subviews]) {
       if ([view.class.description isEqualToString:@"MPVolumeSlider"]) {
           _mpVolumeSlider = (UISlider *)view;
                   break;
          }
     }
           [_mpVolumeView setFrame:CGRectMake(-100, -100, 40, 40)];
           [_mpVolumeView setShowsVolumeSlider:YES];
       }
   

   • MPVolumeView如果不想看到，將frame設置屏幕顯示范圍之外。
   • setShowsVolumeSlider方法要設置為YES，否則之后的設置會無效化。

3. 在panGesture方法中將changeValue賦值給_mpVolumeSilder。

   [_mpVolumeSlider setValue:changeValue animated:YES];
   [_mpVolumeSlider sendActionsForControlEvents:UIControlEventAllEvents];
   

4. 在做完上述步驟后，已經可以拖動調節(jié)音量了，并且可以看到系統(tǒng)音量調節(jié)界面。

實現(xiàn)拖動slider調節(jié)音量

1. 在界面上放一個UISlider。

2. 添加一個valueChanged的'target'。

   [_mpVolumeView setHidden:NO];
   [self.view addSubview:_mpVolumeView];
   [_mpVolumeSlider setValue:sender.value animated:NO];
   
   

   • 系統(tǒng)的MPVolumeView的Hidden設置為YES會導致MPVolumeView出現(xiàn)在你的屏幕中央。
   • 想要隱藏音量設置界面，將MPVolumeView的hidden設置為NO，并添加到自己的view上，這樣會導致系統(tǒng)判斷你已經將這個view添加到你的項目中的view上，就不會在系統(tǒng)層面的window上顯示MPVolumeView了。做出這樣的假設是因為我在顯示出MPVolumeView的時候看項目層級的時候是看不到MPVolumeView的。

3. 但是現(xiàn)在有個問題,那就是使用音量調節(jié)按鈕和滑動調節(jié)的時候，也不顯示音量界面了。

   • 給slider添加UIControlEventTouchUpInside的target。在相應事件中添加

   [_mpVolumeView removeFromSuperview];
   //將`_mpVolumeView`移除后，使用按鈕和滑動的時候，系統(tǒng)判斷你沒有添加，然后就在系統(tǒng)`window`的層面上顯示了。
   

   • 在panGesture中設置

   [_mpVolumeView setHidden:YES];
   //上述代碼同樣可以達到顯示音量調節(jié)界面的效果，在`target`中不用的原因是調用這句代碼的時候會顯示音量界面一次，與我們的需求不太符合。
   

<h4 id="4">Demo</h4>
Demo地址