Question

更改颜色非常简单，但是可以更改所有未选定点的边框吗？

例如：

dot.layer.borderWidth = 0.5 dot.layer.borderColor = UIColor.blackColor()

Answer 1

是的，这可以做到.. 实际上很简单。

Pagecontrol由许多您可以访问的子视图组成。 self.pageControl.subviews返回[UIView]，即UIView的数组。获得单个视图后，您可以为其添加边框，更改其borderColor，更改其边框宽度，转换点大小，如缩放它。可以使用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 。如果有任何问题请告诉我。希望这能解决你的问题。一切顺利

Answer 2

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
                }
            }
        }
    }
}

Answer 3

设置页面控制指示符边框/ 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

Answer 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)
        }
    }

}

您可以以编程方式或Stoaryboard

使用

要更新当前点调用此函数

self.pageControl.updateCurrentDots(borderColor: .white, backColor: .white, index:1)

如何更改UIPageControl点的边框？

4 个答案: