iOS音量控制界面的显示与隐藏

目录

• 需求
• 总结
• 实现
• Demo

<h4 id="1">需求</h4>
最近在优化项目中的播放器界面，设计师新出了一套UI，其中有一个音量的控制的 UISlider。要求是，在使用手机上的音量调节按钮以及的时候，显示音量调节的界面(系统自带),在使用音量调节的slider的时候，则不显示音量调节的界面，因为本身已经有了一个滑动条了，再加一个系统的略显重复。

<h4 id="2">总结</h4>

如果不想看下面啰哩啰嗦的代码和对原理的猜测，直接看结论在这里。😭

• 将MPVolumeView添加到项目中的一个View上并显示在屏幕外后，改变音量就看不到了.

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

• 使用下述2句代码均可实现让MPVolumeView重新可以显示出来，区别是上面一句会在调用后显示音量界面一次，请结合需求使用。

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

<h4 id="3">实现</h4>

实现上下滑动调节音量

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. 在做完上述步骤后，已经可以拖动调节音量了，并且可以看到系统音量调节界面。

实现拖动slider调节音量

1. 在界面上放一个UISlider。

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

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

   • 系统的MPVolumeView的Hidden设置为YES会导致MPVolumeView出现在你的屏幕中央。
   • 想要隐藏音量设置界面，将MPVolumeView的hidden设置为NO，并添加到自己的view上，这样会导致系统判断你已经将这个view添加到你的项目中的view上，就不会在系统层面的window上显示MPVolumeView了。做出这样的假设是因为我在显示出MPVolumeView的时候看项目层级的时候是看不到MPVolumeView的。

3. 但是现在有个问题,那就是使用音量调节按钮和滑动调节的时候，也不显示音量界面了。

   • 给slider添加UIControlEventTouchUpInside的target。在相应事件中添加

   [_mpVolumeView removeFromSuperview];
   //将`_mpVolumeView`移除后，使用按钮和滑动的时候，系统判断你没有添加，然后就在系统`window`的层面上显示了。
   

   • 在panGesture中设置

   [_mpVolumeView setHidden:YES];
   //上述代码同样可以达到显示音量调节界面的效果，在`target`中不用的原因是调用这句代码的时候会显示音量界面一次，与我们的需求不太符合。
   

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