如何更改 UIPageControl 点的边框？
Posted
技术标签:
【中文标题】如何更改 UIPageControl 点的边框？【英文标题】：How to change borders of UIPageControl dots? 【发布时间】：2016-02-26 11:47:25 【问题描述】：更改颜色非常简单，但是否可以更改所有未选中点的边框？
例如：
dot.layer.borderWidth = 0.5
dot.layer.borderColor = UIColor.blackColor()
【问题讨论】：
我认为这是不可能的。但是您可以轻松实现自己的页面控件来做到这一点。 有可能@dasdom。在***.com/a/40101494/5043234下方查看我的答案@ @KunalGupta 我强烈建议不要这样做。这可能会随着每次小的操作系统更新而中断。 【参考方案1】：是的，这可以做到.. 其实很简单。
对于 iOS 14，Apple 引入了出色的自定义功能，您可以在其中设置自定义图像甚至设置背景
let pageControl = UIPageControl()
pageControl.numberOfPages = 5
pageControl.backgroundStyle = .prominent
pageControl.preferredIndicatorImage = UIImage(systemName: "bookmark.fill")
pageControl.setIndicatorImage(UIImage(systemName: "heart.fill"), forPage: 0)
对于 iOS 14 之前的版本：-
Pagecontrol 由许多您可以访问的子视图组成。 self.pageControl.subviews 返回 [UIView] 即 UIView 的数组。 获得单个视图后，您可以为其添加边框，更改其边框颜色，更改其边框宽度，像缩放一样转换点大小.. UIView 具有的所有这些属性都可以使用。
for index in 0..<array.count // your array.count
let viewDot = weakSelf?.pageControl.subviews[index]
viewDot?.layer.borderWidth = 0.5
viewDot?.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
if (index == indexPath.row) // indexPath is the current indexPath of your selected cell or view in the collectionView i.e which needs to be highlighted
viewDot?.backgroundColor = UIColor.black
viewDot?.layer.borderColor = UIColor.black.cgColor
else
viewDot?.backgroundColor = UIColor.white
viewDot?.layer.borderColor = UIColor.black.cgColor
它看起来像这样
记住你不需要设置weakSelf?.pageControl.currentPage = indexPath.row。如果有任何问题，请告诉我。希望这能解决你的问题。
一切顺利
【讨论】：
嗨！我测试了您的代码（但在目标 c 中），但我无法获得边框。你能帮帮我吗？ 在 Swift 4 中测试。为我工作不到 2 分钟。谢谢，伙计，聚会时间到了。 Woohoooo 很高兴听到它对你有帮助 ;) @Ravi 我可以在目标 c 中获得相同的代码吗？【参考方案2】：设置页面控制指示器边框的扩展/Swift 3
extension UIImage
class func outlinedEllipse(size: CGSize, color: UIColor, lineWidth: CGFloat = 1.0) -> UIImage?
UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
guard let context = UIGraphicsGetCurrentContext() else
return nil
context.setStrokeColor(color.cgColor)
context.setLineWidth(lineWidth)
let rect = CGRect(origin: .zero, size: size).insetBy(dx: lineWidth * 0.5, dy: lineWidth * 0.5)
context.addEllipse(in: rect)
context.strokePath()
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
使用：
let image = UIImage.outlinedEllipse(size: CGSize(width: 7.0, height: 7.0), color: .lightGray)
self.pageControl.pageIndicatorTintColor = UIColor.init(patternImage: image!)
self.pageControl.currentPageIndicatorTintColor = .lightGray
【讨论】：
【参考方案3】：ios 14 允许使用 SFSymbol 设置指示器图像这是我的 UIPageControl
子类化class BorderedPageControl: UIPageControl
var selectionColor: UIColor = .black
override var currentPage: Int
didSet
updateBorderColor()
override init(frame: CGRect)
super.init(frame: frame)
currentPageIndicatorTintColor = selectionColor
required init?(coder: NSCoder)
super.init(coder: coder)
func updateBorderColor()
if #available(iOS 14.0, *)
let smallConfiguration = UIImage.SymbolConfiguration(pointSize: 8.0, weight: .bold)
let circleFill = UIImage(systemName: "circle.fill", withConfiguration: smallConfiguration)
let circle = UIImage(systemName: "circle", withConfiguration: smallConfiguration)
for index in 0..<numberOfPages
if index == currentPage
setIndicatorImage(circleFill, forPage: index)
else
setIndicatorImage(circle, forPage: index)
pageIndicatorTintColor = selectionColor
else
subviews.enumerated().forEach index, subview in
if index != currentPage
subview.layer.borderColor = selectionColor.cgColor
subview.layer.borderWidth = 1
else
subview.layer.borderWidth = 0
【讨论】：
【参考方案4】：如果有人想要CustomUIPageControl，那么可能需要这个
@IBDesignable
class CustomPageControl: UIView
var dotsView = [RoundButton]()
var currentIndex = 0
@IBInspectable var circleColor: UIColor = UIColor.orange
didSet
updateView()
@IBInspectable var circleBackgroundColor: UIColor = UIColor.clear
didSet
updateView()
@IBInspectable var numberOfDots: Int = 7
didSet
updateView()
@IBInspectable var borderWidthSize: CGFloat = 1
didSet
updateView()
override init(frame: CGRect)
super.init(frame: frame)
required init?(coder aDecoder: NSCoder)
super.init(coder: aDecoder)
func updateView() -> Void
for v in self.subviews
v.removeFromSuperview()
dotsView.removeAll()
let stackView = UIStackView()
stackView.axis = NSLayoutConstraint.Axis.horizontal
stackView.distribution = UIStackView.Distribution.fillEqually
stackView.alignment = UIStackView.Alignment.center
stackView.spacing = 10
stackView.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(stackView)
//Constraints
stackView.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
NSLayoutConstraint.activate([
stackView.heightAnchor.constraint(equalToConstant: 20.0)
])
stackView.removeFullyAllArrangedSubviews()
for i in 0..<numberOfDots
let button:RoundButton = RoundButton(frame: CGRect.zero)
button.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
button.heightAnchor.constraint(equalToConstant: 10.0),
button.widthAnchor.constraint(equalToConstant: 10.0),
])
button.tag = i
button.layer.borderWidth = 1
// button.backgroundColor = circleBackgroundColor
// button.layer.borderWidth = borderWidthSize
// button.layer.borderColor = circleColor.cgColor
button.addTarget(self, action:#selector(self.buttonClicked), for: .touchUpInside)
stackView.addArrangedSubview(button)
dotsView.append(button)
func updateCurrentDots(borderColor : UIColor, backColor : UIColor, index : Int)
for button in dotsView
if button == dotsView[index]
button.backgroundColor = backColor
button.layer.borderColor = borderColor.cgColor
else
button.backgroundColor = .clear
button.layer.borderColor = borderColor.cgColor
@objc func buttonClicked()
print("Button Clicked")
class RoundButton: UIButton
override init(frame: CGRect)
super.init(frame: frame)
required init?(coder aDecoder: NSCoder)
super.init(coder: aDecoder)
override func prepareForInterfaceBuilder()
super.prepareForInterfaceBuilder()
override func layoutSubviews()
self.layer.cornerRadius = self.frame.size.width / 2
extension UIStackView
func removeFully(view: UIView)
removeArrangedSubview(view)
view.removeFromSuperview()
func removeFullyAllArrangedSubviews()
arrangedSubviews.forEach (view) in
removeFully(view: view)
您可以使用以编程方式或Storyboard
要更新当前点调用这个函数
self.pageControl.updateCurrentDots(borderColor: .white, backColor: .white, index:1)
【讨论】：
以上是关于如何更改 UIPageControl 点的边框？的主要内容，如果未能解决你的问题，请参考以下文章
基于 iOS 页面的模板，关于点的 UIPageViewController 和 UIPageControl 颜色