Search code examples
iosswiftsegment

Swift ios how to change font , font color when tap and uptate , and some other properties in a segment control

I wanted to design tabs using segment control but the thing that i know regarding all its properties is just limited for now. the first image is my current one the 2nd image is what i want to achieve my current output enter image description here

What i really want to achieved is the segment control which has items all , pending , expired , finished. does anyone has an idea how to achieve distance between items in segments , also change the font color and style according to the design sample below. Thank You.

what i have so far.

let appearance = SMSegmentAppearance()
            appearance.segmentOnSelectionColour =  UIColor(red: 1, green: 0.8706, blue: 0.7608, alpha: 1.0)
            appearance.segmentOffSelectionColour = UIColor(red: 1, green: 0.8706, blue: 0.7608, alpha: 1.0)
            appearance.titleOnSelectionFont = UIFont.systemFont(ofSize: 25.0)
//            segmentControlView.font = UIFont(name: "Avenir-Black", size: 12)
            appearance.titleOffSelectionFont = UIFont.systemFont(ofSize: 25.0)
            appearance.contentVerticalMargin = 10

            /*
             Init SMsegmentView
             Set divider colour and width here if there is a need
             */
            let segmentFrame = CGRect(x: self.margin, y: 5, width: self.segmentControlView.frame.size.width - self.margin*8, height: 50.0)
            self.segmentView = SMSegmentView(frame: segmentFrame, dividerColour: UIColor(red: 1, green: 0.8706, blue: 0.7608, alpha: 1.0), dividerWidth: 1.0, segmentAppearance: appearance)
            self.segmentView.backgroundColor = UIColor(red: 1, green: 0.8706, blue: 0.7608, alpha: 1.0)

            self.segmentView.layer.cornerRadius = 5.0
            self.segmentView.layer.borderColor = UIColor(red: 1, green: 0.8706, blue: 0.7608, alpha: 1.0).cgColor
            self.segmentView.layer.borderWidth = 1.0


            self.segmentView.addTarget(self, action: #selector(selectSegmentInSegmentView(segmentView:)), for: .valueChanged)

            self.segmentView.addSegmentWithTitle("All", onSelectionImage: UIImage(named: ""), offSelectionImage: UIImage(named: ""))

            self.segmentView.addSegmentWithTitle("Pending", onSelectionImage: UIImage(named: ""), offSelectionImage: UIImage(named: ""))

                self.segmentView.addSegmentWithTitle("Finished", onSelectionImage: UIImage(named: ""), offSelectionImage: UIImage(named: ""))

                self.segmentView.addSegmentWithTitle("Expired", onSelectionImage: UIImage(named: ""), offSelectionImage: UIImage(named: ""))

//            var ownerNames = [String]()
//
//            if  fetchedToDoItems.count > 0 {
//                for item in fetchedToDoItems {
//                    if item.houseNo == loggedInUserHouseNumber &&
//                        !ownerNames.contains(item.ownerName!) {
//                        ownerNames.append(item.ownerName!)
//                    }
//                }
//
//                for name in ownerNames {
//                    // Add segments
//                    self.segmentView.addSegmentWithTitle(name, onSelectionImage: UIImage(named: ""), offSelectionImage: UIImage(named: ""))
//                }
//
//            }

            // Set segment with index 0 as selected by default
            self.segmentView.selectedSegmentIndex = 0
            self.segmentControlView.addSubview(self.segmentView)
Solution

  • As i have Seen the documentation:

    You just need to change the Font style and size:

    You can try :

    Step:1 Print fonts

    func printFonts() {
    let fontFamilyNames = UIFont.familyNames
    for familyName in fontFamilyNames {
        print("------------------------------")
        print("Font Family Name = [\(familyName)]")
        let names = UIFont.fontNames(forFamilyName: familyName)
        print("Font Names = [\(names)]")
    }
}

    Step :2 Set it to appearance:-

    appearance.titleOnSelectionFont = UIFont(name: "TradeGothicLTStd-Cn18", size: 10.0)!
appearance.titleOffSelectionFont = UIFont(name: "TradeGothicLTStd-Cn18", size: 10.0)!

    Hope this help!

    Edit to set Selected to Black and Unselected to White

    appearance.segmentOffSelectionColour = UIColor.white //UnSelected Colour
appearance.segmentOnSelectionColour = UIColor.black //Selected Colour