EasySegmentedControl是HMSegmentedControl的swift版本,两个库的实现细节及实现方式是一致的,鉴于里面有很多属性参数的设置,第一次使用此库的人对有的参数使用不是很明白,各参数使用对定制样式实际作用不会很熟悉,故写此文,可以更好的帮助你使用此第三方库,灵活地定制出自己想要的样式。此文提供五种样式Demo,可在此五种样式上灵活调整参数,以定制出不同样式的分段控制器。
接入方式可选择如下方式中的一种:
- pod 'EasySegmentedControl'
- 将EasySegmentedControl.swift文件导入自己的工程
Demo①
Style1:
- 效果图
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.pngCode:
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.pngCode:
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.pngCode:
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.pngCode:
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设计的样式规范。
网友评论