UIView中的clipsTobounds属性及扩展

本文介绍了一个 UIButton 在动态添加到 UIView 后点击无响应的问题及其解决方案。通过调整 view 的 frame 和设置 clipsToBounds 属性,解决了按钮超出视图边界而无法触发点击事件的问题。
最近在写一个项目的时候,遇到了一个问题:在一个视图中动态添加一个子视图,并在子视图中添加一个UIButton, 运行后发现虽然在界面上可以看到这个buton,但是点击这个按钮的时候按钮却没响应,纠结了很久也没发现是什么问题,代码如下:

UIView *view = [UIView alloc] init];
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
button.frame = CGRectMake(20, 20, 50, 30);
[button setTitle:@"click" forState:UIControlStateNormal];
[button addTarget:self action:@selector(clickMe:) orControlEvents:UIControlEventTouchUpInside];
[view addSubview:button];
[self.view addSubView:view]; 
后来在网上找了些资料,发现UIView有一个clipsTobounds的属性,于是吧view.clipsTobounds设置为YES, 发现界面上button看不见了,继续看了些clipsTobounds的资料,原来是button的frame超出了view的frame的范围(即button的坐标超出view的frame了), clipsTobounds默认值是NO, 即超出范围后依然可以显示,但是超出范围这部分是无法响应触摸事件的,把 clipsTobounds设置为YES后,超出范围这部分的内容就不会再显示了。在上面的代码中给view设置一个frame后,button的响应就正常了。

以下是clipsTobounds的说明图(借用别人的图), 图中是把view2添加到view1中, 且view2有部分超出了view1的frame:

clipsTobounds = NO时(默认值)


clipsTobounds = YES时


import SnapKit final class TPMediaPlayerTooView : UIView, TPMediaViewRefreshDelegate { private(set) var clickAction : TPMediaPlayerClickAction?; private var viewBtns = [UIButton](); private var btnItems = [TPMediaPlayToolItem](); private let maxCnt : Int = 5; private lazy var contentView : UIScrollView = { let view = UIScrollView(); view.showsHorizontalScrollIndicator = false; view.showsVerticalScrollIndicator = false; view.backgroundColor = UIColor.clear; view.delegate = self; return view }() var isVertical : Bool = false { didSet { self.relaySubviews(views: self.viewBtns, isVertical: isVertical); } } var isInScreen: Bool = false { didSet { if (!isInScreen && !self.indicator.isHidden) { self.contentView.contentOffset = .zero; self.indicator.offset = 0; } } } var darkStyle : Bool = false; var enableIndicator : Bool = false; let indicatorWidth : CGFloat = 25; private(set) lazy var indicator : TPProgressIndicatorView = { let view = TPProgressIndicatorView(); view.clipsToBounds = true; view.backgroundColor = UIColor.tpbGrey//.tpbProgressBackground; view.isHidden = true; return view; }() init(items:[TPMediaPlayToolItem], downloadCenterViewModel: TPDownloadCenterViewModel? = nil, clickAction:@escaping TPMediaPlayerClickAction) { super.init(frame: CGRectZero); self.addSubview(self.contentView); self.contentView.snp.remakeConstraints { make in make.top.bottom.leading.trailing.equalToSuperview() }; self.clickAction = clickAction; self.downloadCenterViewModel = downloadCenterViewModel; self.downloadCenterViewModel?.reloadDownloadTaskNumberViewInToolViewAction = { [weak self](downloadTaskNumber: Int, failedTaskNumber: Int) in if let self = self { for (index, item) in items.enumerated() { if index >= 0 && index < self.viewBtns.count && item.type == .PlayBackDownload { reloadDownloadNumberSubScript(downloadTaskNumber: downloadTaskNumber, errorTaskNumber: failedTaskNumber); } } } } self.setItems(items: items); } var downloadCenterViewModel: TPDownloadCenterViewModel?; lazy var downloadingTaskNumberLabel: UILabel = { let downloadingTaskNumberLabel = UILabel(frame: .zero); downloadingTaskNumberLabel.textColor = UIColor.tpbTextWhite; downloadingTaskNumberLabel.font = .projectFont(ofSize: 12); downloadingTaskNumberLabel.textAlignment = .center; downloadingTaskNumberLabel.backgroundColor = .tpbRed; return downloadingTaskNumberLabel; }() lazy var downloadErrorImageView: UIImageView = { let imageView = UIImageView(frame: .zero) imageView.backgroundColor = .clear; imageView.image = UIImage(named: "playback_download_error"); return imageView; }() public func setItems(items:[TPMediaPlayToolItem]) { if self.btnItems.elementsEqual(items, by: { item1, item2 in return item1.type == item2.type }) { refresh(self.darkStyle); return } self.viewBtns.forEach({$0.removeFromSuperview()}); self.viewBtns.removeAll() self.btnItems.removeAll(); self.btnItems.append(contentsOf: items); for item in items { let btn = UIButton.init(type: .custom); btn.setImage(TPImageLiteral(item.normalImgUri), for: .normal); btn.imgUri = item.normalImgUri; btn.secondUri = item.secondUri; var img = TPImageLiteral(item.highImgUri) btn.setImage(img, for: .highlighted) img = TPImageLiteral(item.disableImgUri) btn.setImage(img, for: .disabled) btn.uriList = item.uriList; btn.tag = TPMediaPreviewUtils.kMediaPlayerSubviewBaseTag + item.type.rawValue; btn.addTarget(self, action: #selector(clickViewAction), for: .touchUpInside); // 如果有图片变化的需要在变化的时候再次修改 btn.accessibilityLabel = item.accessibilityLabel self.contentView.addSubview(btn); self.viewBtns.append(btn); } relaySubviews(views: self.viewBtns, isVertical: isVertical) refresh(self.darkStyle); reloadDownloadNumberSubScript(downloadTaskNumber: self.downloadCenterViewModel?.downloadingTaskNumber ?? 0, errorTaskNumber: self.downloadCenterViewModel?.failedTaskNumber ?? 0) } func reloadDownloadNumberSubScript(downloadTaskNumber: Int, errorTaskNumber: Int){ relayoutDownloadingSubviews() if downloadTaskNumber > errorTaskNumber { // 存在正在下载的任务,优先显示正在下载的任务数 downloadingTaskNumberLabel.isHidden = false; downloadErrorImageView.isHidden = true; downloadingTaskNumberLabel.text = String(format: "%d", downloadTaskNumber - errorTaskNumber); } else if downloadTaskNumber == errorTaskNumber && errorTaskNumber > 0 { // 没有正在下载任务,但是有下载失败任务,显示error图标 downloadErrorImageView.isHidden = false; downloadingTaskNumberLabel.isHidden = true; } else { downloadingTaskNumberLabel.isHidden = true; downloadErrorImageView.isHidden = true; } } private func relayoutDownloadingSubviews() { guard let downBtn = self.viewWithType(type: .PlayBackDownload) else { return } let blk = { (view:UIView, clip:Bool) in if (view.superview != downBtn) { view.removeFromSuperview() downBtn.addSubview(view) let downloadingTaskNumberLabelHW = 16.0; view.snp.remakeConstraints { make in make.leading.equalToSuperview().offset(30); make.top.equalToSuperview().offset(-6); make.width.height.equalTo(downloadingTaskNumberLabelHW); } if (clip) { view.layer.cornerRadius = downloadingTaskNumberLabelHW / 2.0; view.clipsToBounds = true; } } } blk(self.downloadErrorImageView, false); blk(self.downloadingTaskNumberLabel, true); } public func viewWithType(type:TPMediaPlayerFuncType) -> UIButton? { let tag = type.rawValue + TPMediaPreviewUtils.kMediaPlayerSubviewBaseTag; return self.viewWithTag(tag) as? UIButton; } public func view(types:[TPMediaPlayerFuncType]) -> [UIButton]? { var items : [UIButton] = [UIButton](); for type in types { guard let btn = self.viewWithType(type: type) else { continue } items.append(btn); } return items; } public func setEnable(enable:Bool) { if enable { self.viewBtns.forEach({$0.isEnabled = true}) } else { self.viewBtns.forEach({$0.isEnabled = false}) } } public func setEnable(type:TPMediaPlayerFuncType, enable:Bool) { self.viewWithType(type: type)?.isEnabled = enable; } public func hitInBtn(point:CGPoint, parent:UIView) -> Bool { if (self.isHidden) { return false; } for btn in self.viewBtns { let btnFrame = btn.convert(btn.bounds, to: parent); if (btnFrame.contains(point)) { self.clickViewAction(btn); return true } } return false; } public func itemTypes() -> [TPMediaPlayerFuncType] { var types : [TPMediaPlayerFuncType] = []; self.btnItems.forEach({ types.append($0.type) }); return types; } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func layoutSubviews() { super.layoutSubviews() relaySubviews(views: self.viewBtns, isVertical: isVertical) } override func didMoveToSuperview() { super.didMoveToSuperview() if !self.isInScreen, self.indicator.superview == nil, let superView = self.superview { superView.addSubview(self.indicator) self.indicator.snp.remakeConstraints { make in make.centerX.equalTo(self); make.size.equalTo(CGSize(width: indicatorWidth, height: 2)); make.top.equalTo(self.snp.bottom).offset(5); } self.indicator.layer.cornerRadius = 1; } } override func removeFromSuperview() { super.removeFromSuperview() self.indicator.removeFromSuperview() } //MARK: - TPMediaViewRefreshDelegate func refresh(_ darkStyle: Bool) { self.darkStyle = darkStyle; self.viewBtns.forEach({ $0.refresh(darkStyle)}) self.indicator.isHidden = self.isHidden || !enableIndicator || darkStyle || self.viewBtns.count <= maxCnt; if (!self.indicator.isHidden) { self.handleScroll(self.contentView); } } //MARK: - Private private func relaySubviews(views: [UIButton], isVertical: Bool) { guard views.count > 0 else { return } let squareSize: CGFloat = 70.0 // 小方块大小 let btnWH: CGFloat = 56.0 // 按钮大小 let itemMargin: CGFloat = 75 // 按钮间距(增大了) let lrMargin: CGFloat = 16.0 // 左右边距 let minVMargin: CGFloat = 8.0 // 垂直方向最小边距 var containerViewArray: [UIView] = [] // 存储带有背景的小方块容器 for i in 0..<views.count { let btn = views[i] // 创建小方块背景视图 let backgroundView = UIView() // 设置背景颜色:前五个为透明,其余为默认颜色 if i < 3 { backgroundView.backgroundColor = .clear // 透明 } else { backgroundView.backgroundColor = UIColor.tpbBackground // 默认颜色 } backgroundView.layer.cornerRadius = 8 // 将按钮从 contentView 中移除,并加入 backgroundView btn.removeFromSuperview() backgroundView.addSubview(btn) // 设置按钮在小方块中的位置和大小 btn.snp.remakeConstraints { make in make.center.equalTo(backgroundView) make.width.height.equalTo(btnWH) } // 将 backgroundView 添加到 contentView self.contentView.addSubview(backgroundView) containerViewArray.append(backgroundView) } // 创建一个中间容器视图,用于包裹所有按钮容器并实现整体居中 let buttonContainer = UIView() self.contentView.addSubview(buttonContainer) // 设置中间容器的约束 - 居中 buttonContainer.snp.makeConstraints { make in make.center.equalToSuperview() // 整体居中 } // 根据布局方向设置约束 if !isVertical { // 🎯 水平布局 - 居中对齐、间距大一些、宽度占满 for i in 0..<containerViewArray.count { let view = containerViewArray[i] // 将每个按钮添加到 buttonContainer 内部 buttonContainer.addSubview(view) if i == 0 { view.snp.makeConstraints { make in make.leading.equalTo(buttonContainer).offset(lrMargin) make.centerY.equalTo(buttonContainer) make.width.height.equalTo(squareSize) } } else { view.snp.makeConstraints { make in make.leading.equalTo(containerViewArray[i - 1].snp.trailing).offset(itemMargin) make.centerY.equalTo(buttonContainer) make.width.height.equalTo(squareSize) } } } // 确保最后一个按钮与右边有适当的边距 containerViewArray.last?.snp.makeConstraints { make in make.trailing.lessThanOrEqualTo(buttonContainer).offset(-lrMargin) } // 更新 contentSize let totalWidth = containerViewArray.reduce(0) { $0 + $1.frame.width } + (itemMargin * CGFloat(max(0, containerViewArray.count - 1))) self.contentView.contentSize = CGSize(width: totalWidth, height: self.contentView.frame.height) } else { // 垂直布局 for i in 0..<containerViewArray.count { let view = containerViewArray[i] // 将每个按钮添加到 buttonContainer 内部 buttonContainer.addSubview(view) if i == 0 { view.snp.makeConstraints { make in make.top.equalTo(buttonContainer).offset(minVMargin) make.centerX.equalTo(buttonContainer) make.width.height.equalTo(squareSize) } } else { view.snp.makeConstraints { make in make.top.equalTo(containerViewArray[i - 1].snp.bottom).offset(itemMargin) make.centerX.equalTo(buttonContainer) make.width.height.equalTo(squareSize) } } } // 更新 contentSize let totalHeight = containerViewArray.reduce(0) { $0 + $1.frame.height } + (itemMargin * CGFloat(max(0, containerViewArray.count - 1))) self.contentView.contentSize = CGSize(width: self.contentView.frame.width, height: totalHeight) } } @objc private func clickViewAction(_ sender:UIButton) { guard let type = TPMediaPlayerFuncType(rawValue: sender.tag - TPMediaPreviewUtils.kMediaPlayerSubviewBaseTag) else { return } for item in self.btnItems { if (type == item.type) { guard let callback = item.clickAction else { self.clickAction?(type, false, nil); break } callback(type, false, nil); break; } } } } extension UIButton { @objc var textLable : UILabel { get { if let view = objc_getAssociatedObject(self, unsafeBitCast(#selector(setter: self.textLable), to: UnsafeRawPointer.self)) as? UILabel { return view; } let view = UILabel.init(); view.font = .projectFont(ofSize: 12) view.textColor = UIColor.tpbTextWhite; view.textAlignment = .center; view.backgroundColor = .clear; self.addSubview(view); view.snp.remakeConstraints { make in make.center.equalTo(self); }; self.textLable = view; return view; } set { objc_setAssociatedObject(self, unsafeBitCast(#selector(setter: textLable), to: UnsafeRawPointer.self), newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC); } } @objc var subTextLabel: UILabel { get { if let view = objc_getAssociatedObject(self, unsafeBitCast(#selector(setter: self.subTextLabel), to: UnsafeRawPointer.self)) as? UILabel { return view } let view = UILabel.init() view.font = .projectFont(ofSize: 12) view.textColor = .tpbRed view.textAlignment = .center view.backgroundColor = .clear self.addSubview(view) view.snp.remakeConstraints { make in make.centerX.equalTo(self) make.top.equalTo(self.snp.bottom) make.height.equalTo(15) }; self.subTextLabel = view return view; } set { objc_setAssociatedObject(self, unsafeBitCast(#selector(setter: subTextLabel), to: UnsafeRawPointer.self), newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC); } } } extension TPMediaPlayerTooView : UIScrollViewDelegate { func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { handleScroll(scrollView) } func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) { handleScroll(scrollView, decelerate: decelerate) } func scrollViewDidScroll(_ scrollView: UIScrollView) { handleScroll(scrollView) } private func handleScroll(_ scrollView:UIScrollView, decelerate: Bool = false) { if (decelerate || self.indicator.isHidden) { return } let len = scrollView.contentSize.width - CGRectGetWidth(self.frame); let offset = scrollView.contentOffset.x; if (len >= 1) { self.indicator.offset = offset / len * (indicatorWidth - self.indicator.width); } } } final class TPProgressIndicatorView : UIView { required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } var width : CGFloat = 11 { didSet { width != oldValue ? self.setNeedsDisplay() : nil; } } var color : UIColor = .tpbGreen { didSet { color != oldValue ? self.setNeedsDisplay() : nil } } var offset : CGFloat = 0 { didSet { if (offset != oldValue) { self.setNeedsDisplay() } } } init() { super.init(frame: .zero) } override func draw(_ rect: CGRect) { super.draw(rect) let pathH = CGRectGetHeight(rect); let path = UIBezierPath(rect: CGRect(x: offset, y: 0, width: width , height: pathH)) path.lineWidth = pathH; color.setStroke() path.stroke() } } 说一下图标按钮的相关逻辑
最新发布
10-14
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值