`
2014马年
  • 浏览: 121914 次
  • 性别: Icon_minigender_1
  • 来自: 晋中
社区版块
存档分类
最新评论

[转载]一个ScrollView的例子

 
阅读更多
//
//  ViewController.swift
//  AutolayoutScrollViewInCode
//
//  Created by 张星宇 on 15/12/21.
//  Copyright © 2015年 张星宇. All rights reserved.
//

import UIKit
import SnapKit

let ScreenWidth = UIScreen.mainScreen().bounds.width
let ScreenHeight = UIScreen.mainScreen().bounds.height
let topScrollHeight: CGFloat = UIScreen.mainScreen().bounds.height / 3
let boxWidth: CGFloat = ScreenWidth * 2 / 3
let boxGap: CGFloat = 20

class ViewController: UIViewController {
    
    let scrollView = UIScrollView()
    let containerView = UIView()

    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        /**
        使用Container进行布局
        Use container in scrollview to layout subviews
        */
        
        /**
        使用外部视图进行布局
        Use views outside to locate subviews in scrollview
        */
        layoutWithContainer()
//        layoutWithAbsoluteView()
//        layoutWithCustomePageSize()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    override func viewDidLayoutSubviews() {
//        scrollView.contentSize = CGSizeMake(1000, topScrollHeight)
//        scrollView.contentSize.width = 1000
        print(scrollView.contentSize.width)
    }
}

// MARK: - 用Container实现自动布局
extension ViewController {
    func layoutWithContainer() {
        scrollView.bounces = false
        view.addSubview(scrollView)
        scrollView.backgroundColor = UIColor.yellowColor()
        scrollView.addSubview(containerView)
        
        containerView.backgroundColor = scrollView.backgroundColor
        
        /**
        *  对scrollView添加约束
        *  Add constraints to scrollView
        */
        scrollView.snp_makeConstraints { (make) -> Void in
            make.centerY.equalTo(view.snp_centerY)
            make.left.right.equalTo(view)
            make.height.equalTo(topScrollHeight)
        }
        
        /**
        *  对containerView添加约束,接下来只要确定containerView的宽度即可
        *  Add constraints to containerView, the only thing we will do
        *  is to define the width of containerView
        */
        containerView.snp_makeConstraints { (make) -> Void in
            make.edges.equalTo(scrollView)
            make.height.equalTo(topScrollHeight)
        }
        
        for i in 0...5 {
            let box = UIView()
            box.backgroundColor = UIColor.redColor()
            containerView.addSubview(box)
            
            box.snp_makeConstraints(closure: { (make) -> Void in
                make.top.height.equalTo(containerView)  // 确定top和height之后,box在竖直方向上完全确定
                make.width.equalTo(boxWidth)
                if i == 0 {
                    make.left.equalTo(containerView).offset(boxGap / 2)
                }
                else if let previousBox = containerView.subviews[i - 1] as? UIView{
                    make.left.equalTo(previousBox.snp_right).offset(boxGap)
                }
                if i == 5 {
                    containerView.snp_makeConstraints(closure: { (make) -> Void in
                        // 这一步是关键,它确定了container的宽度,也就确定了contentSize
                        // This step is very important, it set the width of container, so the 
                        // contentSize is available now
                        make.right.equalTo(box)
                    })
                }
            })
        }
    }
}

extension ViewController {
    func layoutWithAbsoluteView() {
        scrollView.bounces = false
        view.addSubview(scrollView)
        scrollView.backgroundColor = UIColor.yellowColor()
        
        scrollView.snp_makeConstraints { (make) -> Void in
            make.centerY.equalTo(view.snp_centerY)
            make.left.right.equalTo(view)
            make.height.equalTo(topScrollHeight)
        }
        
        for i in 0...5 {
            let box = UIView()
            box.backgroundColor = UIColor.redColor()
            scrollView.addSubview(box)
            
            // box依赖于外部视图布局,不能依赖scrollView
            // The position of box rely on self.view instead of scrollView
            box.snp_makeConstraints(closure: { (make) -> Void in
                make.top.equalTo(0)
                // This bottom can be incorret when device is rotated
                make.bottom.equalTo(view).offset(-(ScreenHeight - topScrollHeight) / 2)
                make.height.equalTo(topScrollHeight)
                
                make.width.equalTo(boxWidth)
                if i == 0 {
                    make.left.equalTo(boxGap / 2)
                }
                else if let previousBox = scrollView.subviews[i - 1] as? UIView{
                    make.left.equalTo(previousBox.snp_right).offset(boxGap)
                }
                
                if i == 5 {
                    // 这里设定最右侧的box,距离contentSize的右边界距离
                    // The the distance from the box on the right side 
                    // to the right side of contentSize
                    make.right.equalTo(scrollView)
                }
            })
        }
    }
}

// MARK: - 用Container实现自动布局
extension ViewController {
    /**
     The key is to set clipsToBounds to false and make the width of frame of scrollview less than the width of screen.
     Usually the width now is padding + subviewWidth
     关键在于clipsToBounds设置为no,scrollview自身的width小于屏幕宽度,一般设置为padding + 子视图width
     */
    func layoutWithCustomePageSize() {
        scrollView.bounces = false
        view.addSubview(scrollView)
        scrollView.pagingEnabled = true
        scrollView.clipsToBounds = false   // *important!* //
        scrollView.backgroundColor = UIColor.yellowColor()
        scrollView.addSubview(containerView)
        
        containerView.backgroundColor = scrollView.backgroundColor
        
        /**
        *  对scrollView添加约束
        *  Add constraints to scrollView
        */
        scrollView.snp_makeConstraints { (make) -> Void in
            make.center.equalTo(view.snp_center)
            make.width.equalTo(boxWidth + boxGap)   // *important!* //
            make.height.equalTo(topScrollHeight)
        }
        
        /**
        *  对containerView添加约束,接下来只要确定containerView的宽度即可
        *  Add constraints to containerView, the only thing we will do
        *  is to define the width of containerView
        */
        containerView.snp_makeConstraints { (make) -> Void in
            make.edges.equalTo(scrollView)
            make.height.equalTo(topScrollHeight)
        }
        
        for i in 0...40 {
            let box = UIView()
            box.backgroundColor = UIColor.redColor()
            containerView.addSubview(box)
            
            box.snp_makeConstraints(closure: { (make) -> Void in
                make.top.height.equalTo(containerView)  // 确定top和height之后,box在竖直方向上完全确定
                make.width.equalTo(boxWidth)
                if i == 0 {
                    make.left.equalTo(containerView).offset(boxGap / 2)
                }
                else if let previousBox = containerView.subviews[i - 1] as? UIView{
                    make.left.equalTo(previousBox.snp_right).offset(boxGap)
                }
                if i == 40 {
                    containerView.snp_makeConstraints(closure: { (make) -> Void in
                        // 这一步是关键,它确定了container的宽度,也就确定了contentSize
                        // This step is very important, it set the width of container, so the
                        // contentSize is available now
                        make.right.equalTo(box).offset(boxGap / 2)
                    })
                }
            })
        }
    }
}

 

分享到:
评论

相关推荐

    scrollview例子

    在这个例子中,我们创建了一个LinearLayout作为ScrollView的唯一子视图,并将其高度设置为`wrap_content`,这样ScrollView就会根据其内容的高度来决定自己的高度。然后,我们在LinearLayout中添加了一个ListView,...

    android scroolview嵌套scrollview例子

    在Android开发中,ScrollView是一个非常常用的布局控件,它允许用户滚动查看其内部内容,当内容超出屏幕范围时尤其有用。当我们需要在一个ScrollView内再嵌套另一个ScrollView时,可能会遇到一些挑战,因为这两个...

    大小2个ScrollView

    在Android开发中,ScrollView是一个非常常见的布局容器,用于允许用户滚动查看超过屏幕尺寸的内容。当我们在应用中需要展示大量的文本或者多个组件时,ScrollView就显得尤为重要。本篇将深入探讨如何在Android应用中...

    Unity嵌套滚动ScrollView.zip

    本项目“Unity嵌套滚动ScrollView.zip”着重探讨了如何在Unity中实现ScrollView的嵌套,即在一个ScrollView内嵌入另一个ScrollView,以创建横竖滑动的复杂布局。 首先,我们关注的核心文件是"CustomScrollRect.cs...

    Android ScrollView 嵌套解决方案

    在Android开发中,ScrollView是一个常用的布局控件,用于展示可滚动的内容。然而,当一个ScrollView内嵌套另一个ScrollView时,可能会出现冲突和不期望的行为,因为两个可滚动的区域可能会相互干扰。这个问题在实际...

    ScrollView

    ScrollView是移动应用开发中的一个关键组件,特别是在 Titanium 框架中。Titanium 是一个开源的 JavaScript 框架,允许开发者使用 JavaScript 来构建原生的 iOS 和 Android 应用程序。ScrollView 是一个可滚动的视图...

    经典ScrollView嵌套ListView和ScrollView

    很多朋友因项目需求问题需要在ScrollView中...在此个大家分享一种一个案例源代码能够很随意的解决ScrollView与ListView、ScrollView与ScrollView的嵌套滑动的问题,个人亲手测试200%达到你预期的目的!希望能帮到大家!

    ScrollView中嵌套ListView的例子

    ScrollView是一个可以垂直滚动的布局容器,而ListView则是一个可滚动的列表视图,通常用于显示大量的数据。然而,将ListView嵌套在ScrollView中可能会引发一些问题,因为这两个组件都有滚动功能,它们可能会冲突,...

    ScrollView嵌套ScrollView滑动

    当一个ScrollView内嵌套另一个ScrollView时,可能会遇到一些滑动事件处理的问题。这种情况下,我们需要理解Android事件分发机制以及如何解决嵌套滚动冲突。 首先,我们要明白Android的事件分发机制,它主要包括三个...

    ScrollView And PageControl简单例子

    ScrollView是一个可滚动的视图,可以容纳比屏幕更大的内容,而PageControl则是一个小控件,通常显示为一系列圆点,用于指示用户当前在ScrollView中的位置以及总共有多少页面。 首先,让我们深入了解一下...

    SCrollView自动滚动视图

    在本项目"SCrollView自动滚动视图"中,开发者旨在实现一个具备循环翻页效果的ScrollView,它能自动滚动并展示内容,这在很多应用的广告轮播或内容展示场景中非常实用。 首先,我们需要了解ScrollView的基本概念。...

    ScrollView 的滚动事件监听

    在Android开发中,ScrollView是一个非常常见的布局控件,它允许用户在单个屏幕上滚动查看超过一屏幕内容的视图。ScrollView通常用于包含多个其他视图,如TextView、ImageView或者LinearLayout等,以提供垂直滚动功能...

    安卓scrollview动画滚动到顶部

    在Android开发中,ScrollView是一个非常常用的布局控件,它允许用户在内容超出屏幕时通过滚动查看更多的信息。本文将深入探讨如何实现一个ScrollView动画滚动到顶部的功能,这在很多应用场景中都非常有用,例如用户...

    scrollView

    总的来说,ScrollView是Android开发中一个基础而重要的组件,它允许用户查看超出屏幕大小的内容,并能与其他组件配合,实现丰富的交互功能。理解和熟练运用ScrollView的特性,对于提升Android应用的用户体验至关重要...

    Unity实现ScrollView滑动吸附功能

    最近在做一个展示模块的时候遇到了一个需要实现滑动窗口并且能固定吸附距离的需求,借助UGUI的ScrollView的API以及Dotween实现了这个功能。主要核心逻辑就是检测Content节点的RectTransform的localPosX的移动距离...

    Unity Super ScrollView 2.4.2 超强功能

    总的来说,Unity的Super ScrollView 2.4.2是一个高效且功能强大的解决方案,它解决了原生ScrollView在处理大量数据和复杂布局时的局限性。通过熟练掌握和运用这个组件,开发者能够创建出更加流畅、响应快速且用户...

    UGUI Super ScrollView插件

    例如,你可以用它来创建一个动态的商品展示区,其中每个商品都是一个独立的单元,包含图片、价格和描述等信息。 此外,UGUI Super ScrollView还支持动态加载和异步更新数据。这意味着你可以从服务器获取数据并在...

    scrollview的应用 定时切换

    在Android开发中,ScrollView是一个非常重要的布局组件,它允许用户在一个垂直方向上滚动查看超过屏幕大小的内容。在标题“scrollview的应用 定时切换”中,我们关注的是ScrollView的一个特定应用,即如何实现定时...

    scrollview+listview 条目高度不一致,导致最后一个条目不显示

    在Android开发中,ScrollView和ListView的组合使用是一个常见的需求,特别是在设计复杂的用户界面时。然而,这种组合也常常带来一些问题,比如“最后一个条目不显示”。这个问题通常由条目高度不一致引起,因为...

    无限循环列表 SuperScrollView

    SuperScrollView 无限循环列表插件 有十几个例子的实现 SuperScrollView 无限循环列表插件 有十几个例子的实现 SuperScrollView 无限循环列表插件 有十几个例子的实现

Global site tag (gtag.js) - Google Analytics