美文网首页
EasySegmentedControl定制样式使用

EasySegmentedControl定制样式使用

作者: wsj_2012 | 来源:发表于2018-12-23 14:28 被阅读0次

    EasySegmentedControlHMSegmentedControl的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:

    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定制样式使用

          本文链接:https://www.haomeiwen.com/subject/ulcnkqtx.html