现在大家使用的结构基本都是NAV+TAB的一个模式，又是也会在里面增加一个抽屉的模式。大家可能都会认为抽屉结构谁不会写的啊，我在网上也看到一些Demo，上面大部分的都是在首页的按钮有个点击侧滑，或者再试在首页上面有侧滑而已，却不能在tabbar上面任何的一个控制器下面进行策划，而QQ的确实可以的，自己也很苦恼想了很久，最后想到我可不可以将策划加到一个tabbar注控制器上面，但是侧滑的时候，侧滑的控制器我该加到什么地方呢？最后想到了一个方法：
先看下我们最终的效果吧
Untitled.gif
1.我可以创建一个主的VC（AVC）里面包含两个控制器，一个是tabbar，一个是侧滑控制器，将手势添加到注控制器上面就可以完美解决了
//在主控制器里面创建个方法，来包含两个控制器
func initCreat(mainVC_:UIViewController?,leftVC_:UIViewController?)->UIViewController
{
mainVC = mainVC_;
leftVC = leftVC_;
leftVC_?.view.frame = CGRectMake(-0.4*kPalyhighWidth, 0, 0.8*kPalyhighWidth, kPalyhighHeight);
view .addSubview((leftVC_?.view)!);
leftVC_?.view.hidden = true;
mainVC_?.view.frame = self.view.bounds;
self.view .addSubview((mainVC_?.view)!);
return self;
}
2.0 将手势添加到注控制器上面
override func viewDidLoad() {
super.viewDidLoad()
//添加滑动手势
pan = UIPanGestureRecognizer(target: self
, action: "pan:")
view.addGestureRecognizer(pan!);
}
3.0这样我们就可以设置window的rootVC为我们的主控制器(AVC)
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
window = UIWindow(frame:UIScreen.mainScreen().bounds)
window?.backgroundColor = UIColor.whiteColor();
let mainVc = MainTabbarVC();
//TODO: 更选你需要的结构 Rotat表示+号结构 Normal表示默认的tabbar结构
mainVc.tabbarStyle = .Rotat;
let leftVC:UIViewController = MyViewController();
window?.rootViewController = MainVC().initCreat(mainVc, leftVC_: leftVC);
window?.makeKeyAndVisible();
return true
}
4.0到此我们就可以实现在tabbarVC里面任何的控制器上面进行侧滑了，想侧滑出现什么的效果，我们就在侧滑调用的“pan：”方法去实现了。我实现的就是QQ的效果
func pan(sender:UIPanGestureRecognizer) {
if sender.state == .Began
{
leftVC?.view.hidden = false;
point = sender.locationInView(self.view)
}else if sender.state == .Changed
{
changePoint = sender.locationInView(view);
var width = changePoint.x - point.x;
if openLeftVC == false
{// 左视图还没显示出来
if width <= 0 {
return ;
}
if width >= 0.8*kPalyhighWidth
{// 判断是否越界
width = 0.8*kPalyhighWidth;
}
mainVC?.view.frame.origin.x = width
leftVC?.view.center.x = width/2;
}else{// 左视图显示出来了
var width_ = point.x - changePoint.x ;
if width_ <= 0
{
return;
}
if width_ >= 0.8*kPalyhighWidth
{// 判断是否越界
width_ = 0.8*kPalyhighWidth;
}
mainVC?.view.frame.origin.x = 0.8*kPalyhighWidth - width_
leftVC?.view.center.x = 0.4*kPalyhighWidth - width_/2;
}
} else if sender.state == .Ended
{
sender.setTranslation(CGPointZero, inView: view)
//没有到达屏幕的一半
if mainVC?.view.frame.origin.x < 0.5*kPalyhighWidth{
openLeftVC = false;
self.hiddenLeftView()
}else {
openLeftVC = true;
self.showLeftView()
}
}
}
其中有两个隐藏和显示的方法
//收起左视图
func hiddenLeftView(){
UIView.animateWithDuration(0.5, animations: { () -> Void in
self.leftVC?.view.frame.size.width = kPalyhighWidth;
self.leftVC?.view.frame.origin.x = -0.4*kPalyhighWidth
self.mainVC?.view.frame.origin.x = 0;
}) { (_) -> Void in
self.leftVC?.view.hidden = true;
self.rightView.removeFromSuperview();
}
}
//显示左视图
func showLeftView() {
UIView.animateWithDuration(0.5, animations: { () -> Void in
self.leftVC?.view.frame.size.width = kPalyhighWidth*0.8;
self.leftVC?.view.frame.origin.x = 0
self.mainVC?.view.frame.origin.x = 0.8*kPalyhighWidth;
}) { (_) -> Void in
self.view.addSubview(self.rightView)
}
}
11.gif
现在我们来说下中间的加号按钮的实现方式
1.0 按钮是可以任意拖动的，并且是根据你移动的位置来移动的，不用多说先上一个移动手势吧，我就自己自定义了一个button类，并在上面添加了移动手势
init(frame: CGRect,addView:UIView) {
super.init(frame: frame)
setImage(UIImage(named: "jiahao"), forState: .Normal);
layer.cornerRadius = width/2;
layer.masksToBounds = true;
let pin = UIPanGestureRecognizer(target: self, action: "pan:");
addGestureRecognizer(pin);
addView.addSubview(self)// 注意这句话我讲button添加到了addView上面，其实addView就是你将要button添加到那个View，因为手势到时候我们获取移动手势相对于的位置是button的父类，也就是addView
AddView = addView;
}
实现滑动手势的方法
func pan(pan:UIGestureRecognizer)
{
switch(pan.state){
case .Began:
self.center = pan.locationInView(AddView);// 获取位置，就是self的父类吧
break;
case .Changed:
if self.selected
{
myBlock!(button: self);
return;
}
let point = pan.locationInView(AddView!);
self.center = point;
break;
case .Ended:
if (self.center.x<0.5*kPalyhighWidth) {
UIView.animateWithDuration(0.5, animations: { () -> Void in
self.x = 10;
})
}else{
UIView.animateWithDuration(0.5, animations: { () -> Void in
self.x = kPalyhighWidth-10-self.width;
})
}
break;
default:
break;
}
}
目前可以达到的效果便是，因为考虑到按钮遮挡住界面的问题，所以手势完成后就将他移动到靠边的位置
11.gif
2.0我们可以看到移动的按钮点击的画会弹出四个晓得按钮分布到移动按钮的周围，那么我们就来试试，先实现按钮的点击创建出来view并出现按钮，这个不用多说先创建出来view，并加上按钮的话，按钮的位置不好加，这里我们用到了高中时学的正弦、余弦函数来计算，这里代码量比较大，我就一次粘贴过来了
var myBlock:(()->())?// 使用与第二次点击消失动画
{
didSet{
setMyBlock();
}
}
var buttons_array:NSArray?// 创建出来几个按钮，以及按钮显示的内容等
{
didSet{
if let buttonsArray = buttons_array
{
angle = M_PI/2/Double(buttonsArray.count - 1);
self.setButtons_array(buttonsArray, angle: angle);
}
}
}
private func setButtons_array(array:NSArray,angle:Double){
if self.subviews.count == 0
{
for var index in 0.. Void in
button.enabled = true;
}
}
private func setMyBlock(){// 按钮的消失动画
if let buttonsArray = buttons_array
{
for var index in 0..(NSArray){// 计算按钮的位置，最烦的地方，也是最考验逻辑的地方
var one = CGPointZero;
var two = CGPointZero;
if buttonY < 0.4*kPalyhighHeight
{
print(cosf(Float(index*angle)),coshf(Float(index*angle)),index,angle)
button.x = CGFloat(cosf(Float(index*angle)))*Radius
button.y = CGFloat(sin(Float(index*angle)))*Radius
one = CGPointMake(20, 20);
two = CGPointMake(CGFloat(cosf(Float(index*angle)))*Radius+22, CGFloat(sin(Float(index*angle)))*Radius+22);
}else{
button.x = CGFloat(cosf(Float(-index*angle)))*Radius
button.y = CGFloat(sin(Float(-index*angle)))*Radius+Padding+44
one = CGPointMake(20, MaxWidth-20);
two = CGPointMake(CGFloat(cosf(Float(-index*angle)))*Radius+22, CGFloat(sin(Float(-index*angle)))*Radius+22+Padding+44);
}
if (self.buttonX != 10) {
button.x = CGFloat(cosf(Float(M_PI_2+index*angle)))*Radius+Padding+44;
button.y = CGFloat(sin(Float(M_PI_2+index*angle)))*Radius;
one = CGPointMake(MaxWidth-20,20);
two = CGPointMake(CGFloat(cosf(Float(M_PI_2+index*angle)))*Radius+Padding+22+44, CGFloat(sin(Float(M_PI_2+index*angle)))*Radius+22);
if (self.buttonY >= 0.4*kPalyhighHeight) {
button.x = CGFloat(cosf(Float(M_PI+index*angle)))*Radius+Padding+44;
button.y = CGFloat(sin(Float(M_PI+index*angle)))*Radius+Padding+44;
one = CGPointMake(MaxWidth-20, MaxWidth-20);
two = CGPointMake(CGFloat(cosf(Float(M_PI+index*angle)))*Radius+Padding+22+44, CGFloat(sin(Float(M_PI+index*angle)))*Radius+22+Padding+44);
}
}
let oneValue = NSValue(CGPoint: one);
let twoValue = NSValue(CGPoint: two);
return [oneValue,twoValue];
}
3.0 也就是这样的四个状态，需要我们去做判断
6A480177-55D2-4C45-9C1F-A287144B7EC3.png
E7B6D06E-0772-4A3A-A3D5-C9DF03CD99F8.png
9CDA25E2-9E99-4FFC-8466-9DFE8F21C245.png
43030027-3A55-4C8A-9489-57C8711D8346.png
![9CDA25E2-9E99-4FFC-8466-9DFE8F21C245.png]