我试图UIStackView
在Storyboard检查器中将背景从透明更改为白色,但是在模拟时,堆栈视图的背景颜色仍然具有清晰的颜色。
如何更改的背景颜色UIStackView
?
我试图UIStackView
在Storyboard检查器中将背景从透明更改为白色,但是在模拟时,堆栈视图的背景颜色仍然具有清晰的颜色。
如何更改的背景颜色UIStackView
?
Answers:
您不能执行此操作–
UIStackView
是非绘图视图,这意味着drawRect()
从不调用该视图, 并且其背景颜色将被忽略。如果您非常需要背景颜色,请考虑将堆栈视图放置在另一个视图中UIView
,并为该视图提供背景颜色。
参考从这里。
编辑:
您可以在此处或下面的答案中(如下)将subView添加到其中UIStackView
,并为其分配颜色。请查看以下内容:extension
extension UIStackView {
func addBackground(color: UIColor) {
let subView = UIView(frame: bounds)
subView.backgroundColor = color
subView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
insertSubview(subView, at: 0)
}
}
您可以像这样使用它:
stackView.addBackground(color: .red)
drawRect()
被称为。您可以简单地通过子类化进行测试UIStackView
if let backgroundView = self.subviews.first(where: {$0.tag == 123}) {
。如果是这样,我将更改该视图的背景色。
我这样做是这样的:
@IBDesignable
class StackView: UIStackView {
@IBInspectable private var color: UIColor?
override var backgroundColor: UIColor? {
get { return color }
set {
color = newValue
self.setNeedsLayout() // EDIT 2017-02-03 thank you @BruceLiu
}
}
private lazy var backgroundLayer: CAShapeLayer = {
let layer = CAShapeLayer()
self.layer.insertSublayer(layer, at: 0)
return layer
}()
override func layoutSubviews() {
super.layoutSubviews()
backgroundLayer.path = UIBezierPath(rect: self.bounds).cgPath
backgroundLayer.fillColor = self.backgroundColor?.cgColor
}
}
奇迹般有效
@IBDesignable class StackView
允许您在Story Board上进行设计。我不太关心在运行时添加背景,但是当故事板上没有颜色时,很难设计Stackview
UIStackView
是一个非渲染元素,因此不会在屏幕上绘制。这意味着更改backgroundColor
本质上没有任何作用。如果要更改背景颜色,只需将其添加UIView
为子视图(未排列),如下所示:
extension UIStackView {
func addBackground(color: UIColor) {
let subview = UIView(frame: bounds)
subview.backgroundColor = color
subview.autoresizingMask = [.flexibleWidth, .flexibleHeight]
insertSubview(subview, at: 0)
}
}
也许最简单,更易读,更不容易破解的方法是将嵌入UIStackView
到UIView
并将背景颜色设置为视图。
并且不要忘记在这两个视图之间正确配置自动布局约束…;-)
Pitiphong是正确的,要获取具有背景色的stackview,请执行以下操作...
let bg = UIView(frame: stackView.bounds)
bg.autoresizingMask = [.flexibleWidth, .flexibleHeight]
bg.backgroundColor = UIColor.red
stackView.insertSubview(bg, at: 0)
这将为您提供一个stackview,其内容将放置在红色背景上。
要将填充添加到stackview中,以使内容不与边缘齐平,请在代码中或故事板上添加以下内容...
stackView.isLayoutMarginsRelativeArrangement = true
stackView.layoutMargins = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
这适用于Swift 3和iOS 10:
let stackView = UIStackView()
let subView = UIView()
subView.backgroundColor = .red
subView.translatesAutoresizingMaskIntoConstraints = false
stackView.addSubview(subView) // Important: addSubview() not addArrangedSubview()
// use whatever constraint method you like to
// constrain subView to the size of stackView.
subView.topAnchor.constraint(equalTo: stackView.topAnchor).isActive = true
subView.bottomAnchor.constraint(equalTo: stackView.bottomAnchor).isActive = true
subView.leftAnchor.constraint(equalTo: stackView.leftAnchor).isActive = true
subView.rightAnchor.constraint(equalTo: stackView.rightAnchor).isActive = true
// now add your arranged subViews...
stackView.addArrangedSubview(button1)
stackView.addArrangedSubview(button2)
在iOS10中,@ Arbitur的答案在设置颜色后需要setNeedsLayout。这是需要进行的更改:
override var backgroundColor: UIColor? {
get { return color }
set {
color = newValue
setNeedsLayout()
}
}
backgroundColor
在将其添加到a之前进行设置,则superview
它可以在ios10和ios9上运行,但是,如果在调用backgroundColor
其layoutSubviews()
功能后更新了它,则只会更新没有视觉更新backgroundColor
的backgroundLayer
含义。已修复,感谢您指出。
这是添加堆栈视图背景颜色的简要概述。
class RevealViewController: UIViewController {
@IBOutlet private weak var rootStackView: UIStackView!
创建带有圆角的背景视图
private lazy var backgroundView: UIView = {
let view = UIView()
view.backgroundColor = .purple
view.layer.cornerRadius = 10.0
return view
}()
为了使其显示为背景,我们将其添加到根堆栈视图的subviews数组中的索引0。这将其置于堆栈视图的排列视图之后。
private func pinBackground(_ view: UIView, to stackView: UIStackView) {
view.translatesAutoresizingMaskIntoConstraints = false
stackView.insertSubview(view, at: 0)
view.pin(to: stackView)
}
通过在UIView上使用一个小的扩展,添加约束以将backgroundView固定到堆栈视图的边缘。
public extension UIView {
public func pin(to view: UIView) {
NSLayoutConstraint.activate([
leadingAnchor.constraint(equalTo: view.leadingAnchor),
trailingAnchor.constraint(equalTo: view.trailingAnchor),
topAnchor.constraint(equalTo: view.topAnchor),
bottomAnchor.constraint(equalTo: view.bottomAnchor)
])
}
}
调用pinBackground
从viewDidLoad
override func viewDidLoad() {
super.viewDidLoad()
pinBackground(backgroundView, to: rootStackView)
}
参考来自:这里
您可以对 UIStackView
extension UIStackView {
func setBackgroundColor(_ color: UIColor) {
let backgroundView = UIView(frame: .zero)
backgroundView.backgroundColor = color
backgroundView.translatesAutoresizingMaskIntoConstraints = false
self.insertSubview(backgroundView, at: 0)
NSLayoutConstraint.activate([
backgroundView.topAnchor.constraint(equalTo: self.topAnchor),
backgroundView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
backgroundView.bottomAnchor.constraint(equalTo: self.bottomAnchor),
backgroundView.trailingAnchor.constraint(equalTo: self.trailingAnchor)
])
}
}
用法:
yourStackView.setBackgroundColor(.black)
UIStackView *stackView;
UIView *stackBkg = [[UIView alloc] initWithFrame:CGRectZero];
stackBkg.backgroundColor = [UIColor redColor];
[self.view insertSubview:stackBkg belowSubview:stackView];
stackBkg.translatesAutoresizingMaskIntoConstraints = NO;
[[stackBkg.topAnchor constraintEqualToAnchor:stackView.topAnchor] setActive:YES];
[[stackBkg.bottomAnchor constraintEqualToAnchor:stackView.bottomAnchor] setActive:YES];
[[stackBkg.leftAnchor constraintEqualToAnchor:stackView.leftAnchor] setActive:YES];
[[stackBkg.rightAnchor constraintEqualToAnchor:stackView.rightAnchor] setActive:YES];
子类UIStackView
class CustomStackView : UIStackView {
private var _bkgColor: UIColor?
override public var backgroundColor: UIColor? {
get { return _bkgColor }
set {
_bkgColor = newValue
setNeedsLayout()
}
}
private lazy var backgroundLayer: CAShapeLayer = {
let layer = CAShapeLayer()
self.layer.insertSublayer(layer, at: 0)
return layer
}()
override public func layoutSubviews() {
super.layoutSubviews()
backgroundLayer.path = UIBezierPath(rect: self.bounds).cgPath
backgroundLayer.fillColor = self.backgroundColor?.cgColor
}
}
那你上课
yourStackView.backgroundColor = UIColor.lightGray
您可以在StackView中插入一个子层,它对我有用:
@interface StackView ()
@property (nonatomic, strong, nonnull) CALayer *ly;
@end
@implementation StackView
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
_ly = [CALayer new];
[self.layer addSublayer:_ly];
}
return self;
}
- (void)setBackgroundColor:(UIColor *)backgroundColor {
[super setBackgroundColor:backgroundColor];
self.ly.backgroundColor = backgroundColor.CGColor;
}
- (void)layoutSubviews {
self.ly.frame = self.bounds;
[super layoutSubviews];
}
@end
我对子类化UI组件有些怀疑。这就是我的使用方式
struct CustomAttributeNames{
static var _backgroundView = "_backgroundView"
}
extension UIStackView{
var backgroundView:UIView {
get {
if let view = objc_getAssociatedObject(self, &CustomAttributeNames._backgroundView) as? UIView {
return view
}
//Create and add
let view = UIView(frame: .zero)
view.translatesAutoresizingMaskIntoConstraints = false
insertSubview(view, at: 0)
NSLayoutConstraint.activate([
view.topAnchor.constraint(equalTo: self.topAnchor),
view.leadingAnchor.constraint(equalTo: self.leadingAnchor),
view.bottomAnchor.constraint(equalTo: self.bottomAnchor),
view.trailingAnchor.constraint(equalTo: self.trailingAnchor)
])
objc_setAssociatedObject(self,
&CustomAttributeNames._backgroundView,
view,
objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN_NONATOMIC)
return view
}
}
}
这就是用法
stackView.backgroundView.backgroundColor = .white
stackView.backgroundView.layer.borderWidth = 2.0
stackView.backgroundView.layer.borderColor = UIColor.red.cgColor
stackView.backgroundView.layer.cornerRadius = 4.0
注意:使用这种方法时,如果要设置边框,则必须layoutMargins
在stackView上进行设置,以使边框可见。
您不能将背景添加到stackview。但是您可以做的是在视图中添加stackview,然后设置视图背景,这将完成工作。*它不会中断stackview的流程。希望这会有所帮助。
我们可以有一个这样的自定义类StackView
:
class StackView: UIStackView {
lazy var backgroundView: UIView = {
let otherView = UIView()
addPinedSubview(otherView)
return otherView
}()
}
extension UIView {
func addPinedSubview(_ otherView: UIView) {
addSubview(otherView)
otherView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
otherView.trailingAnchor.constraint(equalTo: trailingAnchor),
otherView.topAnchor.constraint(equalTo: topAnchor),
otherView.heightAnchor.constraint(equalTo: heightAnchor),
otherView.widthAnchor.constraint(equalTo: widthAnchor),
])
}
}
可以这样使用:
let stackView = StackView()
stackView.backgroundView.backgroundColor = UIColor.lightGray
这比func addBackground(color: UIColor)
其他人建议的扩展功能要好。背景视图是惰性的,因此在实际调用之前不会创建它stackView.backgroundView.backgroundColor = ...
。并且多次设置/更改背景颜色不会导致在堆栈视图中插入多个子视图。
如果要从设计器本身进行控制,请将此扩展添加到堆栈视图
@IBInspectable var customBackgroundColor: UIColor?{
get{
return backgroundColor
}
set{
backgroundColor = newValue
let subview = UIView(frame: bounds)
subview.backgroundColor = newValue
subview.autoresizingMask = [.flexibleWidth, .flexibleHeight]
insertSubview(subview, at: 0)
}
}
您可以这样做:
stackView.backgroundColor = UIColor.blue
通过提供扩展以覆盖backgroundColor
:
extension UIStackView {
override open var backgroundColor: UIColor? {
get {
return super.backgroundColor
}
set {
super.backgroundColor = newValue
let tag = -9999
for view in subviews where view.tag == tag {
view.removeFromSuperview()
}
let subView = UIView()
subView.tag = tag
subView.backgroundColor = newValue
subView.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(subView)
subView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
subView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
subView.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
subView.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
}
}
}