美文网首页
cell灵活的页面布局

cell灵活的页面布局

作者: lanmoyingsheng | 来源:发表于2018-07-05 15:37 被阅读30次

有时候cell的风格可能有很多种,而只用一个cell类去实现。

在布局[可有可无的控件]时,需要根据style来设置其约束。
对于约束依赖[可有可无的控件],需要配合优先级priority()来进行约束:依赖[可有可无的控件]的约束优先级高,这样通过控制一旦[可有可无的控件]是否有约束,就可以生成不同的界面。


//
//  TableViewCell.swift
//  SnapKitDemo
//
//  Created by 骆鹏飞 on 2018/7/5.
//  Copyright © 2018年 GXCJ. All rights reserved.
//

import UIKit


class TableViewCell: UITableViewCell {

    enum Style: Int {
        
        case `default` = -1
        case one = 1
        case two = 2
    }
    
    var cellStyle: Style = .default {
        
        didSet {
            
            if cellStyle == .one {
                
                label1.snp.remakeConstraints { (make) in
                    make.top.equalToSuperview().offset(10)
                    make.centerX.equalToSuperview()
                }
                
            } else if cellStyle == .two {
                label1.snp.removeConstraints()
                
//                label1.snp.remakeConstraints { (make) in
//                    make.height.equalTo(0)
//                }
                
//                clipsToBounds = true
            }
            
        }
    }
    
    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        initSubviews()
    }
    
    var label1:UILabel!
    var label2:UILabel!
    var label3:UILabel!
    
    func initSubviews() {
        
        label1 = UILabel()
        label1.numberOfLines = 0
        label1.preferredMaxLayoutWidth = 400
        label1.text = "1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"
        contentView.addSubview(label1)
        label1.snp.makeConstraints { (make) in
            make.top.equalToSuperview().offset(10)
            make.centerX.equalToSuperview()
        }
        
        label2 = UILabel()
        label2.numberOfLines = 0
        label2.preferredMaxLayoutWidth = 400
        label2.text = "222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222"
        contentView.addSubview(label2)
        label2.snp.makeConstraints { (make) in
            make.top.equalToSuperview().offset(10).priority(500)
            make.top.equalTo(label1.snp.bottom).offset(20)
            make.centerX.equalToSuperview()
        }
        
        label3 = UILabel()
        label3.numberOfLines = 0
        label3.preferredMaxLayoutWidth = 400
        label3.text = "333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333"
        contentView.addSubview(label3)
        label3.snp.makeConstraints { (make) in
            make.top.equalTo(label2.snp.bottom).offset(20)
            make.centerX.equalToSuperview()
            make.bottom.equalToSuperview().offset(-10)
        }
        
        
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

相关文章

  • cell灵活的页面布局

    有时候cell的风格可能有很多种,而只用一个cell类去实现。 在布局[可有可无的控件]时,需要根据style来设...

  • iOS支持头部的多页面控制器

    效果图: 效果图中页面结构: 功能支持:1、多种类型cell共存(如上,支持多种类型cell的布局,更灵活)2、支...

  • Android GridView 使用示例

    GridView 常用的属性 页面布局文件: 主程序代码: 主程序中用到的cell布局文件和cellImage对象...

  • flexbox 收缩算法(上)

    基础的flexbox布局方法,大家都比较熟悉了,日常画页面 flexbox 布局用的66的,灵活布局、不同移动设备...

  • Flutter 仿写微信发现、我的页面

    发现页面实现 这里我们仿照微信的发现页面用 Flutter 类实现这页面的简单布局及每个 cell 的点击效果及点...

  • CSS3之Flexbox布局在ReactNative的应用

    CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局,被成为弹性布局(或者伸缩布局)。相比...

  • 入坑 React Native 之FlexBox布局

    FlexBox布局也叫弹性盒子,弹性布局.是CSS3为我们提供了一种可伸缩的灵活的页面布局方式-flexbox布局...

  • Android-Listview和Gridview(MVC创建)

    1、页面中初始化控件 2、点击事件 3、创建Model 4、创建Adapter 5、主页面布局 6、cell里面的...

  • flex布局(弹性布局)浅析

    1.Flex布局是什么? Flex是Flexible Box的缩写,就是灵活的弹性页面布局。 作用是为盒子模型提供...

  • flex布局

    Flex 弹性布局能为盒状模型提供最大的灵活性,可以简便完整响应式地实现各种页面布局。对布局还不是很 OK 的我决...

网友评论

      本文标题:cell灵活的页面布局

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