iOS抽屉效果开发案例分享

本文实例为大家分享了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程序设计有所帮助。

(0)

相关推荐

  • IOS实现点击滑动抽屉效果

    最近,看到好多Android上的抽屉效果,也忍不住想要自己写一个.在Android里面可以用SlidingDrawer,很方便的实现.IOS上面就只有自己写了.其实原理很简单就是 UIView 的移动,和一些手势的操作. 效果图: // // DrawerView.h // DrawerDemo // // Created by Zhouhaifeng on 12-3-27. // Copyright (c) 2012年 CJLU. All rights reserved. // #import

  • iOS动画之向右拉的抽屉3D效果

    首先我们忽略掉3D效果,先要做的是一个右拉的抽屉效果. 总体思路: 1.创建一个ContainerViewController容器控制器,然后把左侧选择菜单的SideMenuViewController,和右侧负责显示内容的MainViewController 添加到ContainerViewController中. 2.给容器控制器ContainerViewController添加一个手势监听,通过修改偏移量完成抽屉效果. 3.设置anchorPoint,给左侧SideMenuViewCont

  • iOS如何用100行代码实现简单的抽屉效果

    前言 iOS中抽屉效果的简单实现现在很多应用中都使用到了,网上也有很多了例子,本文主要是通过简单的一些代码来实现的,有需要的可以一起学习学习. 下面是效果图 示例代码如下 #import <UIKit/UIKit.h> @interface MainViewController : UIViewController + (instancetype)mainViewControllerWithLeftViewController:(UIViewController *)leftViewContr

  • iOS实现简单的抽屉效果

    说到抽屉效果在iOS中比较有名的第三方类库就是PPRevealSideViewController.一说到第三方类库就自然而然的想到我们的CocoaPods,本文用CocoaPods引入PPRevealSideViewController,然后在我们的工程中以代码结合storyboard来做出抽屉效果. 一.在工程中用CocoaPods引入第三方插件PPRevealSideViewController. (1).在终端中搜索PPRevealSideViewController的版本 (2).在P

  • iOS实现简易抽屉效果、双边抽屉效果

    本文实例为大家分享了iOS实现抽屉效果的全部代码,供大家参考,具体内容如下 iOS实现简易抽屉效果,代码: @interface ViewController () { UIView* _leftView; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from

  • ios仿侧边抽屉效果实现代码

    效果图如下 代码实现以及思路下面分析: 代码创建导航控制器 Appdelegate.m中 #import "AppDelegate.h" #import "ViewController.h" @interface AppDelegate () @end @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(

  • iOS实现左右拖动抽屉效果

    本文实例介绍了iOS实现左右拖动抽屉效果,具体内容如下 利用了触摸事件滑动 touchesMoved: 来触发左右视图的出现和消失 利用loadView方法中添加view 在self.view载入前就把 左右中View都设置好frame 每一个方法都由单独的功能. #import "DarwViewController.h" @interface DarwViewController () @property (nonatomic, weak) UIView *leftView; @p

  • iOS开发之路--仿网易抽屉效果

    最终效果图: MainStoryBoard示意图: BeyondViewController.h // // BeyondViewController.h // 19_抽屉效果_仿网易 // // Created by beyond on 14-8-1. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import <UIKit/UIKit.h> #import "LeftTableViewControllerD

  • iOS实现侧拉栏抽屉效果

    本文实例介绍了iOS实现侧拉栏抽屉效果的相关代码,分享给大家供大家参考,具体内容如下 需要导入第三方的类库如下: 抽屉效果所需第三方类库下载 效果:既可以两侧都实现抽屉效果也可只实现左侧栏或者右侧栏的抽屉效果 关于抽屉效果主要是AppDelegate的代码 AppDelegate.h文件代码: <span style="font-size:18px;"><span style="font-size:18px;">#import <UIK

  • Android控件之SlidingDrawer(滑动式抽屉)详解与实例分享

    SlidingDrawer效果想必大家也见到过,它就是1.5模拟器上进入应用程序列表的效果.下面是截图 一.简介  SlidingDrawer隐藏屏外的内容,并允许用户通过handle以显示隐藏内容.它可以垂直或水平滑动,它有俩个View组成,其一 是可以拖动的handle,其二是隐藏内容的View.它里面的控件必须设置布局,在布局文件中必须指定handle和content.例如下面 复制代码 代码如下: <SlidingDrawer android:layout_width="fill_

随机推荐