• 手机作为一小屏设备,需要显示的信息往往无法在一屏幕上显示,此时就需要使用到滚动条,当然除了像TableView这样可以自带滚动功能的。如果一个界面上View较多,那就必须要使用到ScrollView了。现在我们将会使用...

           手机作为一个小屏设备,需要显示的信息往往无法在一个屏幕上显示,此时就需要使用到滚动条,当然除了像TableView这样可以自带滚动功能的。如果一个界面上View较多,那就必须要使用到ScrollView了。现在我们将会使用Swift在iOS上实现滚动效果。具体实现如下:

    (1)创建一个新的iOS项目,语言选择Swift,并在Main.storyboard中拖入一个ScrollView控件。然后在ScrollView中拖入几张照片,等下可以使用滚动功能查看照片,界面如下:


    (2)把ScrollView和几个ImageView拖拽与代码进行Outlet绑定,绑定后代码如下:

        @IBOutlet weak var homepageScrollView: UIScrollView!  //这个是滚动条;
        @IBOutlet weak var image1: UIImageView!
        @IBOutlet weak var image2: UIImageView!
        @IBOutlet weak var image3: UIImageView!
        

    (3)然后在viewDidLoad()方法中实现 滚动条的代码,注意如下contentSize的使用,必须设置ScrollView的内容大小,界面才会有滚动效果,并且这个大小是可以自己任意输入的,你设置多大的长和宽,整个ScrollView就像画布,这个画布的大小就是多大,然后由于屏幕较小,只能显示一部分,所以你就可以通过滑动查看其他未见的部分。

        override func viewDidLoad() {
            super.viewDidLoad()
    
            //在滚动条中增加View;
            homepageScrollView.addSubview(image1)//不断在ScrollView中添加子控件;
            homepageScrollView.addSubview(image2)
            homepageScrollView.addSubview(image3)
    
            homepageScrollView.contentSize=CGSize(width: image1.bounds.size.width, height: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height+500)
            //注意要添加所有控件的高度到ScrollView中;也可以自定义长和宽;
            
        }

    (4)运行程序,查看结果。



    (5)可能会有人有疑问,我上面的图片都是直接添加到storyboard中的,都是写死的,我现在通过代码动态增加一张图片,并且添加到ScrollView中。以此来真正实现滚动条的功能;

    动态显示图片代码:

            //这里的“image4”是通过代码动态添加的,而不是在storyboard中写死的,加在image3下面;
            var imageView:UIImage = UIImage(named: "gallery4")!
            //gallery4是这张图片的名字,不需要扩展名;
            var image4:UIImageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0,y: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height), 
    size: image1.bounds.size))
            //设置这张图片的显示位置和大小,原图较大,我设置为和image1大小一样;
            image4.image = imageView

    继续在ScrollView中增加这个View:

     homepageScrollView.addSubview(image4)

    最后别忘了在contentSize中增加相应的长度:

    homepageScrollView.contentSize=CGSize(width: image1.bounds.size.width, height: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height+
    image4.bounds.size.height+500)//注意要添加所有控件的高度到ScrollView中;也可以自定义长和宽;

    所以最后整个类中的代码如下:

    class HomepageViewController: UIViewController,UIScrollViewDelegate{    //注意要实现这个Delegate委托;
        
        
        @IBOutlet weak var homepageScrollView: UIScrollView!  //这个是滚动条;
        @IBOutlet weak var image1: UIImageView!
        @IBOutlet weak var image2: UIImageView!
        @IBOutlet weak var image3: UIImageView!
        
        override func viewDidLoad() {
            super.viewDidLoad()
    
            //这里的“image4”是通过代码动态添加的,而不是在storyboard中写死的,加在image3下面;
            var imageView:UIImage = UIImage(named: "gallery4")!
            //gallery4是这张图片的名字,不需要扩展名;
            var image4:UIImageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0,y: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height), 
    size: image1.bounds.size))
            //设置这张图片的显示位置和大小,原图较大,我设置为和image1大小一样;
            image4.image = imageView
            
            //在滚动条中增加View;
            homepageScrollView.addSubview(image1)//不断在ScrollView中添加子控件;
            homepageScrollView.addSubview(image2)
            homepageScrollView.addSubview(image3)
                homepageScrollView.addSubview(image4)
    
            homepageScrollView.contentSize=CGSize(width: image1.bounds.size.width, height: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height+
    image4.bounds.size.height+500)//注意要添加所有控件的高度到ScrollView中;也可以自定义长和宽;
            
        }
    
        override func didReceiveMemoryWarning() {
            super.didReceiveMemoryWarning()
            // Dispose of any resources that can be recreated.
            ///////////////////////////////////////////
        }
    
    }
    

    (6)最后运行结果如下:



         其实ScrollView滚动条还有很多其他的属性设置和特性,有一部分也可以在storyboard中进行设置,是博大精深的,我们以后在开发中在慢慢学习。



    github主页:https://github.com/chenyufeng1991  。欢迎大家访问!






    展开全文
  • swift scrollView滑动 2015-03-23 00:08:27
    下面看一下scrollView如何实现界面滑动的。 首先我先简单做一图层的UI。 所以我们需要先声明一scrollView.然后再在scrollView上面进行操作 废话不多说。直接上代码 var scroller = ...
  • iOS 文字上下滚动 2019-12-02 17:02:19
    项目中可能会用到单条数据需要上下滚动显示,下面是一非常简单的封装Demo,可以根据自己的项目进行自定义修改。 效果如下: Demo下载 ###项目代码 /** 数据 */ @property (nonatomic, copy) NSArray *dataArr; /...
  • 主Activity布局只有一Viewpager 代码如下:public class Btn03Activity extends BaseActivity implements ViewPager.OnPageChangeListener { private ViewPager viewPager; private MyAdapter myAdapter; ...
  • Swift仿今日头条的多页面滑动切换
  • override func viewWillDisappear(_ animated: Bool) {  super.viewWillDisappear(animated)  navigationController?.interactivePopGestureRecognizer?.isEnabled = true;  }
  • 日历-基本功能都有的日历 选择日期 上下月 动画 仿抖音卡节拍界面 垂直、水平方向皆可滚动、header悬浮的列表视图 Auto Layout中Stack View的使用 swift,MVVM,Moya,SwiftyJSON,完整项目,高仿,...
  • 核心代码 ...界面代码VFL /* 浏览作品view*/ import UIKit /** * 图片浏览器(大图和缩略图) */ class JYBrowseWorksView: UIView { /// 数据源参数(外界传入) var data...
  • swift开源项目-界面布局 2018-08-09 13:24:05
    swift开源项目-界面布局   swift Spring Meng To 提供动画调试功能的强大动画的 API 库 ReactiveAnimation ReactiveCocoa 知名ReactiveAnimation 的 Swift 版子项目 DKChainableAnimationKit ...
  • 这貌似已经成为了生活中的一种习惯,它独特翻页方式也是本人喜欢的一原因,通过上划与下滑进行页面的翻页,不必返回再进入下一页面,显得非常的简介并且人性化,这里就模拟知乎进行一次模拟滚动换页,...
  • 提到collectionview,很多人都会想到用他作为图片...到时如何让collectionview显示为一行的数据,并可以横向的滚动,在xcode的中,我们很容易的想到使用故事版修改属性,将ScrollDirection 修改为Horizontal,如图所示:
  • 为什么要做这效果 在聊天app,例如微信中,你会注意到一效果,就是在你点击输入框时输入框会跟随键盘一起向上弹出,当你点击其他地方时,输入框又会跟随键盘一起向下收回,二者完全无缝连接,那么这是怎么...
  • 仿苹果地图搜索滑动视图
  • 对于项目中的数据接口都是通过 Charles 抓包获得,基本每个界面都是有数据请求,不会抓包的朋友可以看我 这一篇文章。 项目中有的地方代码写的不是很简洁,毕竟自己能力有限,对 Swift 使用不是很熟练,还请各位...
  • _scrollView.directionalLockEnabled=YES;
  • 仿高德上下滑动控件 2019-10-29 10:20:33
    implementation 'com.yinglan.scrolllayout:scrolllayout:1.0.2' /**设置 setting*/ mScrollLayout.setMinOffset(0); mScrollLayout.setMaxOffset((int) (ScreenUtil.getScreenHeight(this) * 0.5));...
  • 使用: -(WelcomView*)welcomeView{ if (!_welcomeView) { _welcomeView = [[NSBundle mainBundle] loadNibNamed:@"WelcomView" owner:nil options:nil].firstObject; _welcomeView.fram...
  • // RecommendNewsCell.swift // XMLYFM // // Created by Domo on 2018/8/2. // Copyright © 2018年 知言网络. All rights reserved. // import UIKit class RecommendNewsCell: UICollectionViewCe...
1 2 3 4 5 ... 20
收藏数 976
精华内容 390