欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

iOS抽屉效果开发案例分享

程序员文章站 2023-11-26 17:25:52
本文实例为大家分享了ios抽屉效果开发实例,供大家参考,具体内容如下 在显示在窗口的控制器上添加三个view(如果只需要往一边滑动就只加2个view) 先声明三个vie...

本文实例为大家分享了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抽屉效果开发案例分享

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