目錄

• 需求
• 總結(jié)
• 實(shí)現(xiàn)
• Demo

<h4 id="1">需求</h4>
最近在優(yōu)化項(xiàng)目中的播放器界面，設(shè)計(jì)師新出了一套UI，其中有一個(gè)音量的控制的 UISlider。要求是，在使用手機(jī)上的音量調(diào)節(jié)按鈕以及的時(shí)候，顯示音量調(diào)節(jié)的界面(系統(tǒng)自帶),在使用音量調(diào)節(jié)的slider的時(shí)候，則不顯示音量調(diào)節(jié)的界面，因?yàn)楸旧硪呀?jīng)有了一個(gè)滑動(dòng)條了，再加一個(gè)系統(tǒng)的略顯重復(fù)。

<h4 id="2">總結(jié)</h4>

如果不想看下面啰哩啰嗦的代碼和對(duì)原理的猜測(cè)，直接看結(jié)論在這里。??

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

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

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

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

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

實(shí)現(xiàn)上下滑動(dòng)調(diào)節(jié)音量

1. 使用UIPanGestrueRecognizer進(jìn)行滑動(dòng)手勢(shì)的識(shí)別。

   -(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設(shè)置屏幕顯示范圍之外。
   • setShowsVolumeSlider方法要設(shè)置為YES，否則之后的設(shè)置會(huì)無效化。

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

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

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

實(shí)現(xiàn)拖動(dòng)slider調(diào)節(jié)音量

1. 在界面上放一個(gè)UISlider。

2. 添加一個(gè)valueChanged的'target'。

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

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

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

   • 給slider添加UIControlEventTouchUpInside的target。在相應(yīng)事件中添加

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

   • 在panGesture中設(shè)置

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

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