如何在UISegmentedControl中仅显示所选项目的底部边框? [英] How to display only bottom border for selected item in UISegmentedControl?
问题描述
我对iOS开发非常陌生,在为课程构建应用程序时遇到了一些麻烦。
I'm extremely new to iOS development and ran into some trouble while building an app for a course.
我创建了一个分段控件及其init函数(显示在包含分段控件的视图控制器类中调用)。我能够从分段控件类中删除分段控件的所有边框和分隔符,如下所示:
I created a segmented control and its init function (shown below) is being called in the view controller class containing the segmented control. I was able to remove all borders and dividers of the segmented control from the segmented control class as follows:
import Foundation
import UIKit
class CashSegmentedControl: UISegmentedControl{
func initUI(){
removeBorders()
}
func removeBorders(){
self.tintColor = UIColor.clear
}
我希望它在每个片段下都有一条线当片段被选中时(类似于instagram)
I want it to have a line under each segment WHEN the segment is selected (similar to instagram)
我搜索了很多并遇到了一些StackOverflow上的帖子,但它们似乎适用于旧版本的Swift。我真的很感激这方面的任何帮助,如果有更好的解决方案来定制边框(除了我所做的),我想了解更多!
I've searched a lot and come across some posts on StackOverflow but they seem to be for older versions of Swift. I'd really appreciate any help in this matter, and if there is a better solution for customising the borders (other than what I have done), I'd love to learn more!
非常感谢:)
推荐答案
在单独的swift文件中添加以下代码(命令+ N - >新建文件):
Add the following code in a separate swift file (command+N -> New File):
extension UISegmentedControl{
func removeBorder(){
let backgroundImage = UIImage.getColoredRectImageWith(color: UIColor.white.cgColor, andSize: self.bounds.size)
self.setBackgroundImage(backgroundImage, for: .normal, barMetrics: .default)
self.setBackgroundImage(backgroundImage, for: .selected, barMetrics: .default)
self.setBackgroundImage(backgroundImage, for: .highlighted, barMetrics: .default)
let deviderImage = UIImage.getColoredRectImageWith(color: UIColor.white.cgColor, andSize: CGSize(width: 1.0, height: self.bounds.size.height))
self.setDividerImage(deviderImage, forLeftSegmentState: .selected, rightSegmentState: .normal, barMetrics: .default)
self.setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.gray], for: .normal)
self.setTitleTextAttributes([NSForegroundColorAttributeName: UIColor(red: 67/255, green: 129/255, blue: 244/255, alpha: 1.0)], for: .selected)
}
func addUnderlineForSelectedSegment(){
removeBorder()
let underlineWidth: CGFloat = self.bounds.size.width / CGFloat(self.numberOfSegments)
let underlineHeight: CGFloat = 2.0
let underlineXPosition = CGFloat(selectedSegmentIndex * Int(underlineWidth))
let underLineYPosition = self.bounds.size.height - 1.0
let underlineFrame = CGRect(x: underlineXPosition, y: underLineYPosition, width: underlineWidth, height: underlineHeight)
let underline = UIView(frame: underlineFrame)
underline.backgroundColor = UIColor(red: 67/255, green: 129/255, blue: 244/255, alpha: 1.0)
underline.tag = 1
self.addSubview(underline)
}
func changeUnderlinePosition(){
guard let underline = self.viewWithTag(1) else {return}
let underlineFinalXPosition = (self.bounds.width / CGFloat(self.numberOfSegments)) * CGFloat(selectedSegmentIndex)
UIView.animate(withDuration: 0.1, animations: {
underline.frame.origin.x = underlineFinalXPosition
})
}
}
extension UIImage{
class func getColoredRectImageWith(color: CGColor, andSize size: CGSize) -> UIImage{
UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
let graphicsContext = UIGraphicsGetCurrentContext()
graphicsContext?.setFillColor(color)
let rectangle = CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height)
graphicsContext?.fill(rectangle)
let rectangleImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return rectangleImage!
}
}
然后调用 segmentedControl。从
,并创建一个 viewDidLoad()
方法添加addUnderlineForSelectedSegment() @IBAction
方法像这样的分段控件:
Then after call segmentedControl.addUnderlineForSelectedSegment()
from your viewDidLoad()
method, and create an @IBAction
method for the segmented control like so:
@IBAction func segmentedControlDidChange(_ sender: UISegmentedControl){
segmentedControl.changeUnderlinePosition()
}
然后调用 segmentedControl.changeUnderlinePosition()
来自此方法。
不要忘记将故事板中的分段控件连接到 @IBAction
你刚创建的方法。
Do not forget to connect the segmented control from your storyboard to the @IBAction
method you just created.
非常重要:不要忘记在故事板中使用自动布局来确定大小和位置你的分段控制。
Very important: Don't forget to use Auto layout in the storyboard to determine the size and position of your segmented control.
这就是结果:
随意提出您可能遇到的任何其他问题:)
Feel free to ask any other questions you may have :)
这篇关于如何在UISegmentedControl中仅显示所选项目的底部边框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!