美文网首页IOS
Swift SB 容器 Container View使用

Swift SB 容器 Container View使用

作者: Xml_Sw | 来源:发表于2017-07-06 22:52 被阅读870次

    最近比较清闲,就把以前学习的过程记录下吧,多少年后如果能在互联网上找到自己的痕迹,想想还是一件蛮值得高兴的事情

    容器在开发过程中用到的地方还是蛮多的,像网易新闻的框架如果使用代码去实现的话,调用系统的API

    addChildViewController(<#T##childController: UIViewController##UIViewController#>)
    

    使它成为子控制器,加入一个类似的容器里面就可以,具体的大家在做项目过程中都用到过,这里就不多说了。今天就分享一下SB上使用容器类管理VC的控件ContainerView(纯代码里没有这个控件)

    新建个项目(这里我使用的是以前自己随便写的一个小demo),在Manstoryboard 的 view 上拖拽两个ContainerView ,给他们两个分别设置约束,宽度加起来等于屏幕宽度就可以。拖拽完后你会发现view上多出来两根线并且关联到两个VC。其实这就是containerView 自带的容器VC,它让我们可以把代码和业务都分发到一个独立的VC里面去操作,耦合性更低。

    F9020D89-DD10-499B-867C-EAEB671EA94C.png

    为了后面的操作我们需要在swift文件里面给这两个VC绑定两个Class,取名为Class1 和Class2 都继承于BaseVC(BaseVC里面只是简单的对导航栏里面的操作) 。然后要将ContainerView关联的VC跟我们swift文件里面的类关联起来,并且绑定它们的storyboardId


    496E928E-DF3D-4EEF-8AB3-5E00B88C88E4.png

    到现在的话,基本上容器的使用算是完成了,我们想做的业务就可以分别在两个vc里面实现了。但是这样的话就太不直观了,接着说个例子吧。

    现在好多App 都有双列表,比方说京东的

    E9CF7C2DEB41E4D5ABE42757F3743A19.png

    这个双列表页面,我们就能使用ContainerView 来实现类似的效果。

    首先我们在Class1 和Class2 里面各自添加两个tableView 并给他们附上数据,最终的效果是这样的

    4111837F-1E2A-4BC2-9907-C5689457B970.png

    这个时候如果我们想做数据的交互,就需要传值。OC里面的传值方式有很多,通知,代理,block 等等,其实最简单的就是使用NSNotificationCenter ,通知比较简单,我就不说了,swift里面的使用跟OC差不多。这里说一下代理的用法和swift里面闭包的用法

    代理在这里的用法

    先说下代理,因为我们使用的是容器ContainerView 它会自带两个VC,又加上原来的一个VC,相当于三个VC,怎么ContainerView里面取到对应关联的两个VC,这是一个关键。

    在承载连个ContainerView 的VC里面重写下面的方法

     override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
            
        }
    

    只需要重写系统的这个方法,这个方法是SB里面的视图切换的时候系统会调用的一个方法,它的参数 segue.destination

    let vc = segue.destination
    

    返回的就是对应的ContainerView 自带的VC

    E7476A3F-5AAC-4209-924B-4D9F3EA52CC1.png

    因为我们使用了两个VC 所以要判断下是具体哪个VC

        var class1:Class1? = nil
        var class2:Class2? = nil
        override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
            if let vc = segue.destination as? Class1 {
                class1 = vc
            }
            if let vc = segue.destination as? Class2 {
                class2 = vc
            }
        }
    

    取到这两个VC后,就好办多了。然后要做的无非就是声明协议,遵循代理,实现代理方法

    protocol XWContainerViewResponseDelegate {
        func clickWithGetIndex(index:NSIndexPath)
    }
    

    声明一个协议,参数为NSIndexPath 类型,然后让Class1 声明一个代理属性

        var delegate:XWContainerViewResponseDelegate?
    

    然后在Class1 tabviewVIew 的点击方法里面调用代理(不需要去调用responds(to: <#T##Selector!#>) delegate? 就相当于OC里面的responds)

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
           delegate?.clickWithGetIndex(index: (indexPath as? NSIndexPath)!)
       }
    

    然后让Class2 去遵循协议,实现代理方法,这样就OK了。但是不知道大家有没有发现,OC使用的时候我们一般都会设置

    XXXX.delegate = XXXX
    

    这一步我们还没有写,但是这Class1 和 Class2 又是独立的,没有关联。所以这个时候我们就要用到承载这两个容器所在的VC了,在上面的那个方法里面,我们获取到了这两个VC,在这里进行关联

        var class1:Class1? = nil
        var class2:Class2? = nil
        override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
            if let vc = segue.destination as? Class1 {
                class1 = vc
            }
            if let vc = segue.destination as? Class2 {
                class2 = vc
            }
            class1?.delegate = class2
        }
    

    OK,这样就完整了,点击Class1 的cell 就会把对应的IndexPath 传过去,就可以做操作了

    闭包在这里的用法

    在说下使用闭包传值的做法
    其实核心的地方都在承载两个ContainerView 所在的VC里面。因为我们所做的操作是想点击Class1 里面的cell,把对方的Indexpath 给传过去,那么肯定是想把IndexPath 给回调出去。回调出去之后Class2 怎么去接受呢?其实Class2 也可以有一个闭包专门去接受这个数据,但是这样就太麻烦了。我们可以在Class2 里面声明一个属性,去实现它的属性观察器方法,这样就能随时监听这个属性的变化,更方便的去做操作

    首先在class1 里面去声明闭包,顺便给它一个属性去记录所要传递的IndexPath

        typealias CallBack = (_ index:NSIndexPath)->Void
        var xwCallBack:CallBack?
        var class1Index: NSIndexPath? = nil
    

    Class2 里面的操作 声明属性观察器

     var class2Index:NSIndexPath? = nil {
            willSet {
                
            }
            didSet {
                print("得到的从1传过来的值  \(String(describing: class2Index?.row))")
            }
        }
    

    然后在Class1 cell的点击方法里面去调用它

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
            xwCallBack!(indexPath as NSIndexPath)   
        }
    

    ContainerView 承载所在的VC 让Class1 实现闭包

     var class1:Class1? = nil
        var class2:Class2? = nil
        override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
            if let vc = segue.destination as? Class1 {
                class1 = vc
            }
            if let vc = segue.destination as? Class2 {
                class2 = vc
            }
            
            unowned let weakSelf = self
            class1?.xwCallBack = { index in
                weakSelf.class2?.class2Index = index
            }
        }
    

    然后把Class1传过来的IndexPath 赋值给Class2的 带有属性观察器的属性。OK,这样就可以了

    其实swift 里面的东西 大致跟OC用法还是一样的,只不过增加了一些确实特别好用的东西。无论什么方法,用到好就行。黑猫白猫,逮到老鼠就是好猫

    一起学习吧。。。

    相关文章

      网友评论

        本文标题:Swift SB 容器 Container View使用

        本文链接:https://www.haomeiwen.com/subject/xwoxhxtx.html