zoukankan      html  css  js  c++  java
  • 怎样在 AutoLayout 中使用 UIScrollView (多个ContentView)

    http://codehappily.wordpress.com/2013/11/14/ios-how-to-use-uiscrollview-with-autolayout-pure-autolayout-approach-multiple-smaller-views/

    本帖演示怎样在AutoLayout 下使用 UIScrollView 。在ScrollView  中还会包括多个子视图。在本例中。我用 3 个不同背景色的view 作为 ScrollView 的 ContentView。

    代码下载: https://github.com/djsison/iOS-ScrollView-AutoLayout-MultipleContents

    假设你想了解仅仅有一个 view 的 ScrollView,能够看
    iOS: How to use UIScrollView with Auto Layout (PureAuto Layout) – Single Content View

    本文将使用到纯AutoLayout 方式进行布局,请參考以下的连接:

    https://developer.apple.com/library/ios/technotes/tn2154/_index.html

    首先,我在故事板中定义例如以下视图层次:

    • View (UIViewController 的 view)

    ·      Scroll View (UIScrollView)– 暗灰色

    ·      Container View (UIView) – 轻灰色

    ·      Content1 (UIView) – 红色

    ·      Content2 (UIView) – 绿色

    ·      Content3 (UIView) – 蓝色

    终于在故事板中显示为例如以下布局:

    在设置布局规则之前,注意以下几点:

    • Scroll view 没有固定的高度和宽度。
    • Scroll View 的 宽度和高度由其内容所决定(即 Scroll View 的 contentSize 所决定) 。
    • 内容的大小必须不依赖于 Scroll View 的尺寸。

      比如。Content1。Content2。Content3 不能包括不论什么与 Container View 相关的 top。bottom,left 和 right 的布局约束。仅仅能包括固定宽度和高度的约束(每一个约束至少在得在当中之中的一个上定义)。假设不论什么一个 content view 都不包括这些约束,则它们的大小将依赖于 Scroll View(由于它们被绑定到 Scroll View 的边距),但 Scroll View 又依赖于内容的尺寸。这就导致矛盾冲突。

    •  ScrollView 必须至少有一个内容绑定它的四条边,比如 top,left,right,bottom。这样 ScrollView 才干知道它的内容的边界在哪里,即 Scroll View 的 ContentSize。

    如今,让我们開始布局。


    • Scroll View (UIScrollView):  相对于 superview 。 leading, trailing, top, bottom 四个方向都为 20。
      你也能够将 20 改为 0,这样将占领 View Controller 的整个 view 大小。
    • Container View (UIView): 相对于 Scroll View,leading, trailing, top, bottom 四个间距都取值 0。
      一般来说,这是固定不变的,除非你想做一个在边上留白的效果。
      在截图里, leading, trailing, top, 和 bottom 间距都设为 0。Container View 的尺寸将有 3 个 Content views 的大小决定。从而再影响 ScrollView 的大小(ScrollView 的实际大小将在执行时计算,在故事板上设置它的大小没有不论什么作用)。

    • Content1: 固定宽为 100,高 240,leading 和 trailing 边距 20。top 边距 8,bottom 边距 8( Content1 和 Content2 之间的间距)。
      注意 leading 和 trailing 约束,以及 width 约束。假设 content1 是位于另外一个固定大小的 view 中。则 Xcode 会提示有约束冲突。但 content1 除 bottom 外。 top。left。right 边距都是相对于 ScrollView 的。

    • Content2: leading 和 trailing 为 20 , bottom 为 8 (Content2 和 Content3 之间的垂直间距), 高度 100。
      我们没有加入宽度限制。这样,仅仅有 content1 能影响 ScrollView 的 contentSize。
    • Content3: leading 和 trailing 为 20。button 20(content3 和 superView 即 ContainerView 之间的垂直间距)。宽度固定为 100。如今,我们也有一个 view 跟 ScrollView 的底边是相关的了。

     iPhone 3.5 inch 模拟器执行程序。观察执行结果。

    怎么不能滚动?
    别急,这是由于 contentView 对于ScrollView 来说还不够大的缘故。

    我们能够改动不论什么一个 contentView 的 Size。这里,我仅仅改动了 Content1 的宽度:

    -(void)viewDidLoad {

         [super viewDidLoad];

        self.content1WidthConstraint.constant = 500;

     }

    执行程序。水平滚动栏出现。注意,别忘了为对应的约束创建 IBOulet。

    然后,尝试改动content2 的高度。

    -(void)viewDidLoad {

         [super viewDidLoad];

        self.content2HeightConstraint.constant = 200;

    }

    执行程序,垂直滚动栏也出现了。


  • 相关阅读:
    PHP与Web页面的交互
    PHP数组和数据结构(下)未完。。。。
    PHP数组和数据结构(上)
    网络
    单列模式(饿汉模式和懒汉模式)
    C++动态内存管理
    基础I/O
    进程程序替换(自主实现shell)
    进程控制
    调研task_struct结构体
  • 原文地址:https://www.cnblogs.com/slgkaifa/p/6886129.html
Copyright © 2011-2022 走看看