当前位置： 移动技术网 > 移动技术>移动开发>IOS > iOS抽屉效果开发案例分享

iOS抽屉效果开发案例分享

2019年07月24日  | 移动技术网移动技术  | 我要评论

本文实例为大家分享了ios抽屉效果开发实例，供大家参考，具体内容如下

在显示在窗口的控制器上添加三个view（如果只需要往一边滑动就只加2个view）

先声明三个view

#import "viewcontroller.h"
 
@interface viewcontroller ()
@property(nonatomic, weak) uiview *mainv;
@property(nonatomic, weak) uiview *leftv;
@property(nonatomic, weak) uiview *rightv;
@end

添加view到控制器view上

#pragma mark - 添加子控件
- (void)setupchildviews {
   
  uiview *leftv = [[uiview alloc]initwithframe:self.view.bounds];
   
  leftv.backgroundcolor = [uicolor orangecolor];
   
  [self.view addsubview:leftv];
   
  _leftv = leftv;
   
  uiview *rightv = [[uiview alloc]initwithframe:self.view.bounds];
   
  rightv.backgroundcolor = [uicolor grouptableviewbackgroundcolor];
   
  [self.view addsubview:rightv];
   
  _rightv = rightv;
   
  uiview *mainv = [[uiview alloc]initwithframe:self.view.bounds];
   
  mainv.backgroundcolor = [uicolor yellowcolor];
   
  [self.view addsubview:mainv];
   
  _mainv = mainv;
}
 
- (void)viewdidload {
  [super viewdidload];
   
  //添加子控件
  [self setupchildviews];
   
  //添加pan手势
  uipangesturerecognizer *pan = [[uipangesturerecognizer alloc]initwithtarget:self action:@selector(pan:)];
   
  [self.view addgesturerecognizer:pan];
   
  //添加点按手势，在主视图上任意位置点击回到屏幕开始位置
  uitapgesturerecognizer *tap = [[uitapgesturerecognizer alloc]initwithtarget:self action:@selector(tap)];
   
  [self.view addgesturerecognizer:tap];
   
}



#pragma mark - 手势识别方法
#define targetl -230
#define targetr 200
#define screenw [uiscreen mainscreen].bounds.size.width
- (void)pan:(uipangesturerecognizer *)pan {
   
  //获取手势移动的位置
  cgpoint tranp = [pan translationinview:self.view];
   
  //获取x的偏移量
  cgfloat offsetx = tranp.x;
   
  //修改mainv的frame
  _mainv.frame = [self framewithoffsetx:offsetx];
   
  //判断mainv的x是否大于0
  [self observevalueforkeypath:nil ofobject:nil change:nil context:nil];
   
  //复位
  [pan settranslation:cgpointzero inview:self.view];
   
  //判断当手势结束的时候，定位
  if (pan.state == uigesturerecognizerstateended) {
     
    cgfloat target = 0;
     
    if (_mainv.frame.origin.x > screenw * 0.5) {
      //定位到右边
      target = targetr;
    }else if(cgrectgetmaxx(_mainv.frame) < screenw * 0.5) {
      //定位到左边
      target = targetl;
    }
     
    //获取x轴需要移动的偏移量
    cgfloat offsetx = target - _mainv.frame.origin.x;
     
    [uiview animatewithduration:0.25 animations:^{
       
      _mainv.frame = target == 0 ? self.view.bounds : [self framewithoffsetx:offsetx];
 
    }];
     
  }
   
}



- (void)tap {
   
  [uiview animatewithduration:0.25 animations:^{
    _mainv.frame = self.view.bounds;
  }];
   
}

#define kmaxy 80
#pragma mark - 根据offsetx计算mainv的frame
- (cgrect)framewithoffsetx:(cgfloat)offsetx {
   
  //获取上一次的frame
  cgrect frame = _mainv.frame;
   
  //获取屏幕的高度
  cgfloat screenh = [uiscreen mainscreen].bounds.size.height;
   
  //获取屏幕的宽度
  //cgfloat screenw = [uiscreen mainscreen].bounds.size.width;
   
  //x轴平移一点对应y轴需要平移的距离
  cgfloat offsety = offsetx * kmaxy / screenw;
   
  //获取上一次的高度
  cgfloat preh = frame.size.height;
   
  //获取上一次的宽度
  cgfloat prew = frame.size.width;
   
  //获取当前高度
  cgfloat curh = preh - 2 * offsety;
  //如果是向左滑动
  if(frame.origin.x < 0) {
    curh = preh + 2 * offsety;
  }
   
  //获取尺寸的缩放比例
  cgfloat scale = curh / preh;
   
  //获取当前宽度
  cgfloat curw = prew * scale;
   
  //获取当前x
  frame.origin.x += offsetx;
   
  //获取当前y
  cgfloat y = (screenh - curh) / 2;
  frame.origin.y = y;
   
  frame.size.width = curw;
  frame.size.height = curh;
   
  return frame;
   
}


- (void)observevalueforkeypath:(nsstring *)keypath ofobject:(id)object change:(nsdictionary<nsstring *,id> *)change context:(void *)context {
   
  if(_mainv.frame.origin.x > 0) {//往右边滑动
    _rightv.hidden = yes;
  }else if(_mainv.frame.origin.x < 0) {//往左边滑动
    _rightv.hidden = no;
  }
   
}

如果想要在mainv主视图中显示tableview，就新创建一个tableviewcontroller，在这里面显示tableview的数据，

- (nsinteger)tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section {
 
  return 30;
}
 
- (uitableviewcell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath {
   
   
  static nsstring *id = @"cell";
   
  uitableviewcell *cell = [tableview dequeuereusablecellwithidentifier:id];
   
  if(cell == nil) {
    cell = [[uitableviewcell alloc]initwithstyle:uitableviewcellstyledefault reuseidentifier:id];
  }
   
  cell.textlabel.text = [nsstring stringwithformat:@"第%ld行", indexpath.row];
   
  return cell;
}

再创建一个在storyboard中显示的控制器xxmainviewcontroller，继承自实现了抽屉效果的viewcontroller，并且在storyboard中将class改为这个控制的类名，还要将显示tableview的控制成为他的子控制器

- (void)viewdidload {
  [super viewdidload];
   
  xxviewcontroller *vc = [[xxviewcontroller alloc]init];
  vc.view.frame = self.view.bounds;
   
  //让vc成为主视图控制器的子控制器
  [self addchildviewcontroller:vc];
   
  //主视图展示tableview
  [self.mainv addsubview:vc.view];
   
}

为了在xxmainviewcontroller中只能访问mainv而不能修改他的值，所以将子控件的view暴露在viewcontroller.h中，并添加read-only

#import <uikit/uikit.h>
 
@interface viewcontroller : uiviewcontroller
@property(nonatomic, weak, readonly) uiview *mainv;
@property(nonatomic, weak, readonly) uiview *leftv;
@property(nonatomic, weak, readonly) uiview *rightv;
@end

运行效果图：

以上就是本文的全部内容，希望对大家学习ios程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网