(作业)UIScrollView

2023-05-16

好啦,本次作业的最后一个题,只需要实现UIScrollView的图片轮播和放大功能即可。
这里写图片描述

这个实现起来也不麻烦,要想实现轮播和缩放效果,需要先让ViewController遵循UIScrollViewDelegate协议。
这里写图片描述

接下来先声明三个属性,两个scrollview,一个pagecontroll,第一个scroll与pagecontroll配合使用实现图片轮播效果,第二个scroll实现图片缩放效果。

//轮播
var scroll1: UIScrollView!
var page: UIPageControl!
//缩放
var scroll2: UIScrollView!

轮播效果

接下来先实现轮播效果,我们可以先从网上下载几张高清的图片,博主这里下了5张,并有规律的命名(从1~5),然后将图片拖到资源文件夹下面
这里写图片描述
(还有个6的图片,是用在第二个scrollview上实现缩放效果的)

然后我们就需要初始化并配置一下scrollview

self.view.backgroundColor = UIColor.white

        let width = self.view.bounds.width - 20
        let height = width * 0.56

        scroll1 = UIScrollView(frame: CGRect(x: 10, y: 100, width: width, height: height))
        //按一页一页的方式滚动
        scroll1.isPagingEnabled = true
        //隐藏水平滚动条
        scroll1.showsHorizontalScrollIndicator = false
        //设置内容大小
        scroll1.contentSize = CGSize(width: width*5, height: height)
        //设置代理
        scroll1.delegate = self
        self.view.addSubview(scroll1)

需要注意的是,使用scrollview必须设置其内容的大小,否则内容大小与scrollview大小一致,这样就不能实现轮播效果了。

配置好scrollview之后,我们就需要初始化pagecontroll了

page = UIPageControl(frame: CGRect(x: 10, y: 100+height, width: width, height: 30))
//总页数
page.numberOfPages = 5
//当前页
page.currentPage = 0
//指示器未选中时颜色
page.pageIndicatorTintColor = UIColor.brown
//指示器选中时颜色
page.currentPageIndicatorTintColor = UIColor.red
//添加事件
page.addTarget(self, action: #selector(pageChanged(page:)), for: .touchUpInside)
self.view.addSubview(page)

然后我们需要向scrollview中添加图片视图

for i in 1...5 {
    let image = UIImage(named: "\(i)")
    let imageView = UIImageView(frame: CGRect(x: width*CGFloat(i-1), y: 0, width: width, height: height))
    imageView.image = image
    imageView.contentMode = .scaleAspectFill
    scroll1.addSubview(imageView)
}

这样,我们的数据准备工作就完成了,可以打开模拟器试一下效果,发现scrollview可以滚动图片了,但是下面的pagecontroll却没有反应,点击pagecontroll,scrollview也没有反应。这是因为它们两个还没有关联起来。
首先实现scrollview里面的图片滚动后,将pagecontroll的当前页做相应的更改,这就需要UIScrollViewDelegate中的方法了。

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let currentPage = Int(scrollView.contentOffset.x / (self.view.bounds.width - 20))
        page.currentPage = currentPage
    }

然后我们再实现pagecontroll绑定的方法

@objc func pageChanged(page: UIPageControl) {
        let rect = CGRect(x: scroll1.bounds.width*CGFloat(page.currentPage), y: 0, width: scroll1.bounds.width, height: scroll1.bounds.height)
        scroll1.scrollRectToVisible(rect, animated: true)
    }

到这里,图片轮播的效果就实现完成了。

缩放效果

轮播效果实现完成之后,我们就来实现缩放效果吧。
我们只需要先初始化一个scrollview并做一点设置,然后向其添加图片

scroll2 = UIScrollView(frame: CGRect(x: 10, y: 200+height, width: width, height: height))
scroll2.backgroundColor = UIColor.yellow
scroll2.contentSize = CGSize(width: width, height: height)
//最大缩放比例
scroll2.maximumZoomScale = 10
//最小缩放比例
scroll2.minimumZoomScale = 0.1
scroll2.delegate = self
self.view.addSubview(scroll2)

let image = UIImage(named: "6")
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: width, height: height))
imageView.contentMode = .scaleAspectFill
imageView.image = image
scroll2.addSubview(imageView)

然后实现UIScrollViewDelegate中的方法,返回需要缩放的视图即可。

func viewForZooming(in scrollView: UIScrollView) -> UIView? {
    return scroll2.subviews.first
}

图片缩放效果看起来就是这么简单,接下来看看最终运行的效果吧。
这里写图片描述

所有代码如下:
ViewControlle.swift

class ViewController: UIViewController, UIScrollViewDelegate {

    //轮播
    var scroll1: UIScrollView!
    var page: UIPageControl!
    //缩放
    var scroll2: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        self.view.backgroundColor = UIColor.white

        let width = self.view.bounds.width - 20
        let height = width * 0.56

        scroll1 = UIScrollView(frame: CGRect(x: 10, y: 100, width: width, height: height))
        //按一页一页的方式滚动
        scroll1.isPagingEnabled = true
        //隐藏水平滚动条
        scroll1.showsHorizontalScrollIndicator = false
        //设置内容大小
        scroll1.contentSize = CGSize(width: width*5, height: height)
        //设置代理
        scroll1.delegate = self
        self.view.addSubview(scroll1)

        page = UIPageControl(frame: CGRect(x: 10, y: 100+height, width: width, height: 30))
        //总页数
        page.numberOfPages = 5
        //当前页
        page.currentPage = 0
        //指示器未选中时颜色
        page.pageIndicatorTintColor = UIColor.brown
        //指示器选中时颜色
        page.currentPageIndicatorTintColor = UIColor.red
        //添加事件
        page.addTarget(self, action: #selector(pageChanged(page:)), for: .touchUpInside)
        self.view.addSubview(page)

        for i in 1...5 {
            let image = UIImage(named: "\(i)")
            let imageView = UIImageView(frame: CGRect(x: width*CGFloat(i-1), y: 0, width: width, height: height))
            imageView.image = image
            imageView.contentMode = .scaleAspectFill
            scroll1.addSubview(imageView)
        }

        scroll2 = UIScrollView(frame: CGRect(x: 10, y: 200+height, width: width, height: height))
        scroll2.backgroundColor = UIColor.yellow
        scroll2.contentSize = CGSize(width: width, height: height)
        //最大缩放比例
        scroll2.maximumZoomScale = 10
        //最小缩放比例
        scroll2.minimumZoomScale = 0.1
        scroll2.delegate = self
        self.view.addSubview(scroll2)

        let image = UIImage(named: "6")
        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: width, height: height))
        imageView.contentMode = .scaleAspectFill
        imageView.image = image
        scroll2.addSubview(imageView)

    }

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let currentPage = Int(scrollView.contentOffset.x / (self.view.bounds.width - 20))
        page.currentPage = currentPage
    }

    @objc func pageChanged(page: UIPageControl) {
        let rect = CGRect(x: scroll1.bounds.width*CGFloat(page.currentPage), y: 0, width: scroll1.bounds.width, height: scroll1.bounds.height)
        scroll1.scrollRectToVisible(rect, animated: true)
    }

    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return scroll2.subviews.first
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

(作业)UIScrollView 的相关文章

  • 向 UITextView 添加左边距

    我正在尝试向 UITextView 添加左边距 我尝试设置属性 contentInset 如下所示 UITextView textView UITextView alloc initWithFrame CGRectMake 0 0 self
  • UIScrollView 在 Swift 中不滚动

    我的 UIScrollView 不会向下滚动 我不知道为什么 我已经关注了有关此问题的 Apple 文档 IBOutlet weak var scroller UIScrollView override func viewDidLoad s
  • 让 ScrollView 与自动布局和情节提要一起使用

    我正在尝试为我想要构建的应用程序制作一个非常简单的布局 但我似乎正在努力使用 ScrollView 并通过 Storyboard 让它工作 基本上我正在尝试构建以下内容 我已经使用几个教程完成了约束 但它要么不滚动 要么看起来错误 有什么建
  • 向 UIScrollView 内的 UIImageView 添加捏合/缩放效果

    我有一个非常基本的屏幕共享iPhone应用程序 我已经使用a成功地将捏合 缩放效果添加到我的应用程序中UIImageView里面一个UIScrollView The UIImageView定期接收来自PC的屏幕内容 一切工作正常 但一旦我滚
  • UIViewController 在 vi​​ewWillAppear 和 viewDidAppear 之间调整自身大小?

    我的项目中有一个非常奇怪的错误 我有一个UIScrollView作为我的主要观点 在它里面 我有一个UIViewController not UITableViewController 其中有一个UITableView实例变量 以及一些杂项
  • 通过自动布局在 UIScrollView 中使用顶部布局指南

    I want to use the Top Layout Guide in the UIScrollView through Auto Layout Without the UIScrollView Auto Layout works we
  • 如何在Table View定制过程中调用“willDisplayHeaderView”方法?

    我想调用这些方法 void tableView UITableView tableView willDisplayHeaderView UIView view forSection NSInteger section NS AVAILABL
  • UIScrollView 就像 iPad 上的 Twitter 应用程序

    我正在寻找教程或一些想法来制作一个类似于 iPad 版 Twitter 应用程序中的自定义控制器 我的意思是左侧有主菜单的堆叠页面 预先感谢您的任何帮助 我们创建了一个模拟项目并添加到 github 中 https github com r
  • 以编程方式滚动 UIScrollView

    我有一个UIScrollView其中有几个观点 当用户轻弹手指时 视图会根据手指轻弹的方向向右或向左滚动 基本上我的代码的工作方式与 iPhone 照片应用程序类似 现在 有没有一种方法可以让我以编程方式执行相同的操作 以便我最终得到一个通
  • 如何获取 UIScrollView 中的当前缩放级别?

    为了尝试创建一种解决方法 使图像在 UIScrollView 中居中并使其表现得像 Apple 的照片应用程序一样 我需要获取当前的缩放级别并使用该数字来计算图像在每个缩放级别应插入的量 注意 我知道一些程序员通过将图像集中在与滚动视图大小
  • UIButton 在 UIScrollView 中时不起作用

    我的观点结构 UITableView UITableViewCell UIScrollView CustomView UIButton 问题是当我触摸 UIButton 时它不起作用 我用代码创建它 btn UIButton alloc i
  • UIScrollView 内视图中的 UIgestureRecognizer

    有没有人设法让 UIGestureRecognizer 在作为 UIScrollView 子视图的 UIView 上工作 我的回调似乎从未被调用 作为一个简单的示例 我想要一个分页滚动视图 并在第三页上使用 UITapGestureReco
  • 如何完全禁用 UITextView 的滚动?

    我正在使用 UITextView 为 iPad 开发一个简单的文本编辑应用程序 我在使用 UIScrollView 和 UITextView 时总是遇到一些问题 我想我对这两个人的期望太高了 当我将 myTextView text 设置为另
  • UITableViewCell 中的 UIScrollView 不滚动

    我正在向具有滚动视图的 UITableView 添加一个单元格 单元格中的代码是 UIScrollView scrollView UIScrollView alloc initWithFrame CGRectMake 0 30 320 44
  • 关闭 UIScrollView 中的键盘

    好吧 我有几个UITextFields and UITextViews里面一个UIScrollView 我想将键盘设置为消失scrollview被触摸或滚动 当然 当您触摸文本字段 视图内时除外 我目前的尝试是替换UIScrollView与
  • UIScrollView:缩放后内容偏移计算

    有人可以建议在 UIScrollView 放大后使用哪个公式来计算内容偏移吗 让我们考虑以下示例 我有一个 UIScrollView 内容视图的大小为 1000 1000 那么如果我以编程方式setZoomScale到 2 0 并在scro
  • 如何在 Swift 中实现 UIPageControl

    好吧 我在这里苦苦挣扎 无法找到有效的解决方案 我一直在自学 Swift 没有 Objective C 经验 我知道 我知道 在我的应用程序中 我有我的主要UIViewController 一个透明但从屏幕底部滑入的子视图 然后滑动子视图的
  • UIScrollView 与 UIWebViews

    stackoverflow 上似乎有很多关于这个主题的问题 但没有一个涉及 3 0 中的更新 经过几个小时的研究后 我终于发现 完全支持嵌套滚动视图 在我的例子中是滚动视图内的网页视图 但是给出的示例在http developer appl
  • 双击并滑动/拖动手指以放大/缩小

    如果有人使用过 iOS 版谷歌地图应用程序 那么它有一个很棒的功能 可以用一根手指放大 缩小 双击 uiscrollview 然后立即向上或向下滑动手指以放大 缩小 有谁知道这是如何实现的 谷歌发布了任何片段吗 我将此功能添加到我的 UIS
  • 无法在scrollView中滚动

    我有一个屏幕 我可以在输入字段中输入内容并获得相应的搜索结果 该列表在 ScrollView 中呈现 但当键盘打开时 在 Android 中 它仍然不允许我滚动 我怎样才能解决这个问题 return lt gt addressesFound

随机推荐