美文网首页SwiftSwiftui
iOS - 使用UIStackView构建分享面板

iOS - 使用UIStackView构建分享面板

作者: 阿兽 | 来源:发表于2021-07-05 09:36 被阅读0次

    一、前言

    最近我们iOS适配可以放弃iOS8了(喜大普奔)。想想也是,连微信最新版本都要求使用iOS11版本了。于是我们可以热情的使用iOS9之后的控件了。例如:UIStackView

    UIStackView继承自UIView,用来管理在它内部的views,确实可以很大程度提高界面开发效率,每一个iOS开发者都应该熟练掌握UIStackView的使用。

    二、效果

    1、UIStackView + UIScrollow 的效果

    QQ20210702-152244-HD.gif

    2、UIStackView 单独效果

    QQ20210702-152642-HD.gif

    三、项目描述

    项目代码比较通俗易懂,布局使用了 SnapKit 。

    枚举类型

    因为我们是分享面板,枚举类型是必不可少的类型,我们定义了分享平台的枚举,以及分享样式的枚举

    //分享平台枚举
    public enum LGSharePlateformEnum: String {
        case wechat = "微信"
        case wechatTimeline = "朋友圈"
        case qqFriend = "QQ"
        case qqZone = "QQ空间"
        case dingTalk = "钉钉"
        case none = ""
    
        public func info() -> (title: String?, icon: UIImage?) {
    
            switch self {
            case .wechat:
                return ("微信", UIImage(named: "nav_share_weixin"))
            case .qqFriend:
                return ("QQ", UIImage(named: "nav_share_qq"))
            case .wechatTimeline:
                return ("朋友圈", UIImage(named: "nav_share_pengyouquan")
            case .qqZone:
                return ("QQ空间", UIImage(named: "nav_share_kaliao_qqzone"))
            case .dingTalk:
                return ("钉钉", UIImage(named: "nav_share_dingding"))
            case .none:
                return (nil, nil)
            }
    
        }
    }
    
    //分享样式枚举
    public enum LGShareTypeEnum {
        case normal
        case scrollow
    }
    
    

    1、因为我们使用swift开发,枚举可以定义字符串类型枚举,甚至可以调用方法,极大的便利了我们的开发效率

    2、分享平台枚举我们定义了.none的枚举,是因为UIStackView的特性,用空元素补齐。

    单行的可滑动的分享面板

    public class LGShareScrollView: UIView {
    
        var didSelectItem: ((_ plateform: LGSharePlateformEnum?) -> Void)?
        //平台分享
        lazy var platformStackView: UIStackView = {
            let stackView = UIStackView()
            stackView.spacing = 25
            stackView.isUserInteractionEnabled = true
            stackView.axis = .horizontal
            stackView.distribution = .equalSpacing
            return stackView
        }()
    
        var plateform: [LGSharePlateformEnum]? {
            didSet {
                for plateItem in plateform ?? [] {
                    let itemView = LGShareItemView()
                    itemView.didSelectItem = didSelectItem
                    itemView.sharePlateform = plateItem
                    platformStackView.addArrangedSubview(itemView)
                    itemView.snp.makeConstraints { (make) in
                        make.height.equalTo(100)
                        make.width.equalTo(50)
                    }
                }
    
            }
        }
    
        private var scrollow: UIScrollView?
    
        public var safeBottomHeight: CGFloat {
            var bottomH: CGFloat = 0.0
            if #available(iOS 11.0, *) {
                bottomH = UIApplication.shared.delegate?.window??.safeAreaInsets.bottom ?? 0
            }
            return bottomH
        }
    
    
        override init(frame: CGRect) {
            super.init(frame: frame)
            setupStackView()
    
        }
    
        override public func layoutSubviews() {
            super.layoutSubviews()
            let stackViewWidth = platformStackView.frame.size.width
            scrollow?.contentSize = CGSize(width: stackViewWidth + 30, height: 0)
        }
    
        func setupStackView() {
            self.isUserInteractionEnabled = true
            let scrollow = UIScrollView()
            scrollow.showsHorizontalScrollIndicator = false
            self.scrollow = scrollow
            scrollow.isUserInteractionEnabled = true
            self.addSubview(scrollow)
            scrollow.snp.makeConstraints { (make) in
                make.top.left.right.equalToSuperview()
                make.height.equalTo(100)
                make.bottom.equalToSuperview().offset(-safeBottomHeight)
            }
    
            scrollow.addSubview(platformStackView)
    
            platformStackView.snp.makeConstraints { (make) in
                make.top.bottom.equalToSuperview()
                make.left.equalToSuperview().offset(15)
                make.height.equalTo(100)
            }
    
        }
    
        required init?(coder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    
    }
    
    

    1、使用 UIScrollView + UIStackView 的方式

    2、设置UIStackView的上、左、下、高度,snapKit的 AutoLayout 会自动计算宽度

    3、在layoutSubviews里要设置scrollow.contentSize,否则不能滑动

    可自动换行的分享面板

    public class LGShareStackView: UIView {
    
        var didSelectItem: ((_ plateform: LGSharePlateformEnum?) -> Void)?
    
        var lineNumber = 5
        //纵向的
        lazy var platformStackView: UIStackView = {
            let stackView = UIStackView()
            stackView.isUserInteractionEnabled = true
            stackView.axis = .vertical
            stackView.distribution = .fillEqually
            return stackView
        }()
    
        var plateform: [LGSharePlateformEnum]? {
            didSet {
    
                let line = (((plateform?.count ?? 0) - 1) / lineNumber) + 1
                for i in 0..<line {
                    let stackView = UIStackView()
                    stackView.isUserInteractionEnabled = true
                    stackView.axis = .horizontal
                    stackView.distribution = .fillEqually
                    platformStackView.addArrangedSubview(stackView)
                    stackView.snp.makeConstraints { (make) in
                        make.left.right.equalToSuperview()
                        make.height.equalTo(100)
                    }
                    for j in 0..<lineNumber {
                        let plateItem = (((i * lineNumber) + j) < plateform?.count ?? 0) ? plateform?[((i * lineNumber) + j)] : LGSharePlateformEnum.none
                        let itemView = LGShareItemView()
                        itemView.didSelectItem = didSelectItem
                        itemView.sharePlateform = plateItem
                        stackView.addArrangedSubview(itemView)
                        itemView.snp.makeConstraints { (make) in
                            make.height.equalTo(100)
                            make.top.equalToSuperview()
                        }
                    }
                }
    
            }
        }
    
        public var safeBottomHeight: CGFloat {
            var bottomH: CGFloat = 0.0
            if #available(iOS 11.0, *) {
                bottomH = UIApplication.shared.delegate?.window??.safeAreaInsets.bottom ?? 0
            }
            return bottomH
        }
    
    
        override init(frame: CGRect) {
            super.init(frame: frame)
            setupStackView()
    
        }
    
        func setupStackView() {
            self.isUserInteractionEnabled = true
            self.addSubview(platformStackView)
            platformStackView.snp.makeConstraints { (make) in
                make.top.left.right.equalToSuperview()
                make.bottom.equalToSuperview().offset(-safeBottomHeight)
            }
        }
    
        required init?(coder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    
    }
    

    1、逻辑是一个纵向的UIStackView,套着多个横向的UIStackView
    2、可以设置行数个数来设置每行的个数

    如图所示

    截屏2021-07-02 下午4.50.03.png

    四、最后

    iOS9之后 使用UIStackView,不用考虑views坐标,类似安卓的线性布局。使用非常舒服,方便。
    项目github地址 :https://github.com/Qinzhao/LGShareViewTool

    相关文章

      网友评论

        本文标题:iOS - 使用UIStackView构建分享面板

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