iOS - 使用UIStackView构建分享面板
2021-07-05 本文已影响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
