iOS Objective-c实现左右滑动切换页面

本文实例为大家分享了iOS Objective-c实现左右滑动切换页面的具体代码,供大家参考,具体内容如下

ScrollView + n个view

1.storyboard布局一个ScrollView

2.拖出两个输出口,定义三个属性

@property (weak, nonatomic) IBOutlet UIScrollView *XMScrollView;
@property (weak, nonatomic) IBOutlet UIView *scrollContentView;

///第一次按下
@property (nonatomic) BOOL isBeginScroll;
///开始结束滑动scroll动画
@property (nonatomic) BOOL isBeginAnimationScroll;
///开始坐标
@property (nonatomic) NSInteger beginX;

3.在viewDidAppear中重新设置scrollContentView的布局宽和tableVIew大小和位置

///遍历布局
    for (NSLayoutConstraint *constraint in self.scrollContentView.constraints) {
       ///判断布局是不是自己想要的 NSLayoutAttribute类型
        if (constraint.firstAttribute == NSLayoutAttributeWidth) {
            
            [constraint setConstant:self.view.frame.size.width*3];
            
        }
     
    }

    [self.tableView1 setFrame:CGRectMake(0, 0, self.view.frame.size.width, scrollViewContentViewFrame.size.height)];
            
    [self.tableView2 setFrame:CGRectMake(self.view.frame.size.width, 0, self.view.frame.size.width, scrollViewContentViewFrame.size.height)];
            
    [self.tableView3 setFrame:CGRectMake(self.view.frame.size.width*2, 0, self.view.frame.size.width, scrollViewContentViewFrame.size.height)];

4.添加scrollView的代理方法

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    ///开始滑动scrollView
    self.isBeginScroll = YES;

    ///开始滑动scrollView的位置
    self.beginX = scrollView.contentOffset.x;;

}

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
    ///停下自动滑动scrollView
    [self.XMScrollView setContentOffset:CGPointZero animated:YES];
    ///结束滑动scrollView
    self.isBeginScroll = NO;
    ///开始滑动动画
    self.isBeginAnimationScroll = YES;
    
}

///结束滑动动画
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
    
    if (self.isBeginAnimationScroll) {
        
        CGFloat currentX = scrollView.contentOffset.x;
        
        NSInteger page = currentX/self.view.frame.size.width;
        ///判断到哪一页了,加载数据
        switch (page) {
                
            case 0:
                
  
                break;
                
            case 1:
                

                break;
                
            case 2:
                
    
                break;
                
            default:
                
                break;
                
        }
        
    }
    
    self.isBeginAnimationScroll = NO;

}

5.在viewDidLoad中添加监听

///页面切换ScrollView
    self.XMScrollView.delegate = self;
    
    [self addObserver:self forKeyPath:@"isBeginScroll" options:NSKeyValueObservingOptionNew context:nil];

6.通过监听实现滑动结束后自动滑动

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{

    if (!self.isBeginScroll) {
        
        CGFloat offSetX = self.XMScrollView.contentOffset.x;
        
        NSInteger scale = (int)(offSetX/self.view.frame.size.width);
   
        if (offSetX >= self.beginX) {
  
                [self.XMScrollView setContentOffset:CGPointMake((scale+1)*self.view.frame.size.width, 0) animated:YES];
    
        }
        
        if (offSetX < self.beginX) {
            
            if (self.beginX >= self.view.frame.size.width){
       
                [self.XMScrollView setContentOffset:CGPointMake((scale)*self.view.frame.size.width, 0) animated:YES];

            }
            
        }
        
    }
    
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS Segment带滑动条切换效果

    本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下 #import "ViewController.h"   @interface ViewController ()   @property (nonatomic,strong) NSArray *arrTitle;   @property (nonatomic,strong) UIView *flyBar;   @end   @implementation ViewController

  • iOS使用pageViewController实现多视图滑动切换

    本文实例为大家分享了pageViewController实现多视图(控制器)滑动切换的具体代码,供大家参考,具体内容如下 先看一下效果动画 类似的界面做过不少,在几个APP中都有用到过,再次之前不了解uipageViewController 曾经的思路有两个现在想想都觉得繁琐. 之前的思路1:使用嵌套,collectionview嵌套,每个item中添加内容 之前的思路2:使用scrollview 在上面创建一个一个的controller 实现左右滑动 这两个思路无疑是可以实现的,并且可以实现每

  • iOS 页面滑动与标题切换颜色渐变的联动效果实例

    话不多说,直接上图,要实现类似如下效果. 这个效果非常常见,这里着重讲讲核心代码 封装顶部的PageTitleView 封装构造函数 封装构造函数,让别人在创建对象时,就传入其实需要显示的内容 frame:创建对象时确定了 frame就可以直接设置子控件的位置和尺寸 isScrollEnable:是否可以滚动.某些地方该控件是可以滚动的. titles:显示的所有标题 // MARK:- 构造函数 init(frame: CGRect, isScrollEnable : Bool, titles

  • 浅析iOS多视图滑动点击切换的集成

    前言 多视图滑动点击切换这个视图在很多App都有用到,我对这个View进行了封装,外界只需要调用一个接口,就能实现这个效果,使用方法和系统的tabbarController很相似. 外界只需要调用下面这个接口即可集成. /** * 添加一个子控制器 */ - (void)addSubItemWithViewController:(UIViewController *)viewController; HYTabbarView效果图如下 HYTabbarView可灵活配置一屏宽显示多少个标题,以及标

  • iOS Objective-c实现左右滑动切换页面

    本文实例为大家分享了iOS Objective-c实现左右滑动切换页面的具体代码,供大家参考,具体内容如下 ScrollView + n个view 1.storyboard布局一个ScrollView 2.拖出两个输出口,定义三个属性 @property (weak, nonatomic) IBOutlet UIScrollView *XMScrollView; @property (weak, nonatomic) IBOutlet UIView *scrollContentView; ///

  • 微信小程序左右滑动切换页面详解及实例代码

    微信小程序--左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标. touchstart在触摸开始时触发事件; touchend在触摸结束时触发事件; touchmove触摸的过程中不断激发这个事件; 这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmov

  • 微信小程序 监听手势滑动切换页面实例详解

    微信小程序 监听手势滑动切换页面实例详解 1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> 2.js: var touchDot = 0;//触摸时的原点 var time = 0;// 时

  • Android使用TabLayou+fragment+viewpager实现滑动切换页面效果

    TabLayou 主要实现的是标题头的 滑动 这个 控件 类似于 ScrollView XML中的布局 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <android.support.design.widget.TabLayout a

  • Android实现页面滑动切换动画

    本文实例为大家分享了Android实现页面滑动切换动画的具体代码,供大家参考,具体内容如下 实现两个页面滑动切换,一些相册的效果也是如此 一个Activity的界面配置文件 activity_main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  • Android仿微信左右滑动点击切换页面和图标

    本文实例为大家分享了Android仿微信左右滑动点击切换页面和图标的具体代码,供大家参考,具体内容如下 目标效果: 使用鼠标滑动屏幕或者点击下边的小图标,可以更改页面和图标,因为没有那么多素材所以只用了两张图片区分. 1.layout文件夹下新建top.xml页面,作为顶部标题. top.xml页面: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="h

  • Android编程实现ViewPager多页面滑动切换及动画效果的方法

    本文实例讲述了Android编程实现ViewPager多页面滑动切换及动画效果的方法.分享给大家供大家参考,具体如下: 一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式, 白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了,接下来我们就来实现它. 二.在开始前,我们先要认识一个控件,ViewPager.它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换. 这个附加包是and

  • 微信浏览器弹出框滑动时页面跟着滑动的实现代码(兼容Android和IOS端)

    在做微信开发的时候遇到这个问题:微信浏览器弹出框滑动时页面跟着滑动. 我觉得这个问题用的是下面这几行代码: var $body = $('body'), dialogIsInView = !1,//当前是不是对话框 lastContentContainerScrollTop = -1,//用于弹出框禁止内容滚动 $contentContainer = $('#content-container');//内容容器 //阻止Window滚动 function stopWindowScroll() {

  • Android如何使用ViewPager2实现页面滑动切换效果

    目录 1.引言 2.实现页面滑动切换 2.1 引入ViewPager2库 2.2 使用ViewPager2 2.3 构建Fragment 2.4 继承FragmentStateAdapter 2.5 将ViewPager2与适配器绑定 2.6 垂直方向滑动切换 2.7 Fragment更新 3.总结 1.引言 在很多应用中,我们经常会看到多个页面之间滑动切换的场景,ViewPager2是ViewPager的升级版,本文将简要介绍如何使用ViewPager2.FragmentStateAdapte

随机推荐