EasySegmentedControl定制样式使用

EasySegmentedControl是HMSegmentedControl的swift版本,两个库的实现细节及实现方式是一致的,鉴于里面有很多属性参数的设置,第一次使用此库的人对有的参数使用不是很明白,各参数使用对定制样式实际作用不会很熟悉,故写此文,可以更好的帮助你使用此第三方库,灵活地定制出自己想要的样式。此文提供五种样式Demo,可在此五种样式上灵活调整参数,以定制出不同样式的分段控制器。

接入方式可选择如下方式中的一种:

  • pod 'EasySegmentedControl'
  • 将EasySegmentedControl.swift文件导入自己的工程

Demo①

Style1:

  • 效果图
ScreenShot1.png
        let viewWidth = view.frame.size.width
        let sc = EasySegmentedControl.init(with: ["Trending", "News", "Library"])
        sc.frame = CGRect(x: 0, y: 88, width: viewWidth, height: 40)
        sc.autoresizingMask = [.flexibleRightMargin, .flexibleWidth]
        sc.backgroundsColor = UIColor.clear
        sc.addTarget(self, action: #selector(segmentedControlChangedValue(segmentedControl:)), for: .valueChanged)
        view.addSubview(sc)

Demo②

Style2:

ScreenShot2.png

Code:

        let sc1 = EasySegmentedControl.init(with: ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"])
        sc1.autoresizingMask = [.flexibleRightMargin, .flexibleWidth]
        sc1.frame = CGRect(x: 0, y: 60 + 68, width: viewWidth, height: 40)
        sc1.segmentEdgeInset = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10)
        sc1.selectionStyle = .FullWidthStripe
        sc1.selectionIndicatorLocation = .Down
        sc1.verticalDividerEnabled = true
        sc1.verticalDividerColor = .black
        sc1.verticalDividerWidth = 1.0
        sc1.titleFormatter = {(seg, title, index, selected) in
            let attString = NSAttributedString.init(string: title, attributes: [NSAttributedString.Key.foregroundColor : UIColor.blue])
            return attString
        }
        sc1.addTarget(self, action: #selector(segmentedControlChangedValue(segmentedControl:)), for: .valueChanged)
        view.addSubview(sc1)

Demo③

Style3:

ScreenShot3.png

Code:

        sc1.addTarget(self, action: #selector(segmentedControlChangedValue(segmentedControl:)), for: .valueChanged)
        view.addSubview(sc1)
        
        // Segmented control with images
        let images: [UIImage] = [UIImage(named: "1")!, UIImage(named: "2")!, UIImage(named: "3")!, UIImage(named: "4")!]
        let selectedImages: [UIImage] = [UIImage(named: "1-selected")!, UIImage(named: "2-selected")!, UIImage(named: "3-selected")!, UIImage(named: "4-selected")!]
        let titles: [String] = ["1", "2", "3", "4"]
        let sc2 = EasySegmentedControl.init(with: images, sectionSelectedImages: selectedImages, sectiontitles: titles)
        sc2.imagePosition = .LeftOfText
        sc2.frame = CGRect(x: 0, y: 120 + 68, width: viewWidth, height: 50)
        sc2.selectionIndicatorHeight = 4.0
        sc2.backgroundsColor = UIColor.clear
        sc2.selectionIndicatorLocation = .Down
        sc2.selectionStyle = .TextWidthStripe
        sc2.segmentWidthStyle = .Dynamic
        sc2.addTarget(self, action: #selector(segmentedControlChangedValue(segmentedControl:)), for: .valueChanged)
        view.addSubview(sc2)

Demo④

Style4:

ScreenShot4.png

Code:

        let sc3 = EasySegmentedControl.init(with: ["one", "Two", "Three", "4", "Five"])
        sc3.frame = CGRect(x: 0, y: 180 + 68, width: viewWidth, height: 50)
        sc3.indexChangeBlock = { index in
            print("Selected index \(index) (via block)")
        }
        sc3.selectionIndicatorHeight = 4.0
        sc3.backgroundsColor = UIColor(red: 0.1, green: 0.4, blue: 0.8, alpha: 1)
        sc3.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
        sc3.selectionIndicatorColor = UIColor(red: 0.5, green: 0.8, blue: 1, alpha: 1)
        sc3.selectionIndicatorBoxColor = UIColor.black
        sc3.selectionIndicatorBoxOpacity = 1.0
        sc3.selectionStyle = .Box
        sc3.selectedSegmentIndex = NoSegment
        sc3.selectionIndicatorLocation = .Down
        sc3.shouldAnimateUserSelection = false
        sc3.tag = 2
        view.addSubview(sc3)

Demo⑤

Style5:

EasySegmentedControl定制样式使用_第1张图片
ScreenShot5.png

Code:


    lazy var scrollView: UIScrollView = {
        let s = UIScrollView.init(frame: CGRect(x: 0, y: 310 + 68, width: view.frame.size.width, height: 210))
        s.backgroundColor = UIColor(red: 0.7, green: 0.7, blue: 0.7, alpha: 1)
        s.isPagingEnabled = true
        s.showsHorizontalScrollIndicator = false
        s.contentSize = CGSize(width: view.frame.size.width * 3, height: 200)
        s.delegate = self
        s.scrollRectToVisible(CGRect(x: view.frame.size.width, y: 0, width: view.frame.size.width, height: 200), animated: false)
        return s
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

       let sc4 = EasySegmentedControl.init(frame: CGRect(x: 0, y: 260 + 68, width: view.frame.size.width, height: 50))
        sc4.sectionTitles = ["Worldwide", "Local", "Headlines"]
        sc4.selectedSegmentIndex = 1
        sc4.backgroundColor = UIColor(red: 0.7, green: 0.7, blue: 0.7, alpha: 1)
        sc4.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
        sc4.selectedTitleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor(red: 0.1, green: 0.1, blue: 0.1, alpha: 1)]
        sc4.selectionIndicatorColor = UIColor(red: 0.3, green: 0.3, blue: 0.3, alpha: 1)
        sc4.selectionStyle = .Box;
        sc4.selectionIndicatorLocation = .Up;
        sc4.tag = 3;
        sc4.indexChangeBlock = {[weak self] index in
            if let strongSelf = self {
                strongSelf.scrollView.scrollRectToVisible(CGRect(x: viewWidth * CGFloat(index), y: 0, width: viewWidth, height: 200), animated: true)
            }
        }
        view.addSubview(sc4)

       let lable1 = UILabel.init(frame: CGRect(x: 0, y: 0, width: viewWidth, height: 210))
        setApperanceFor(label: lable1)
        lable1.text = "Worldwide"
        scrollView.addSubview(lable1)
        
        let lable2 = UILabel.init(frame: CGRect(x: viewWidth, y: 0, width: viewWidth, height: 210))
        setApperanceFor(label: lable2)
        lable2.text = "Local"
        scrollView.addSubview(lable2)
        
        let lable3 = UILabel.init(frame: CGRect(x: viewWidth * 2, y: 0, width: viewWidth, height: 210))
        setApperanceFor(label: lable3)
        lable3.text = "Headlines"
        scrollView.addSubview(lable3)
    }

    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let pageWidth = scrollView.frame.size.width
        let page = Int(scrollView.contentOffset.x / pageWidth)
        sc4.setSelectedSegment(index: page, animated: true)
    }

您可根据自己的需要,调整参数达到UI设计的样式规范。

你可能感兴趣的:(EasySegmentedControl定制样式使用)