[FEAT] 마이페이지 화면 - ECH-46

[mint3382]

화면

마이페이지 화면	내 투표리스트 화면

트러블 슈팅

Segment Control Custom

Segment Control을 선택시 밑에 선을 그려주는 모양으로 custom

class UnderlineSegmentedControl: UISegmentedControl {
    private lazy var underlineBackView: UIView = {
        let width = self.bounds.width
        let height = 2.0
        let xPosition = CGFloat(self.selectedSegmentIndex * Int(width))
        let yPosition = self.bounds.size.height - 1.0
        let frame = CGRect(x: xPosition, y: yPosition, width: width, height: height)
        let view = UIView(frame: frame)
        
        view.backgroundColor = .grayscale40Disabled
        self.addSubview(view)
        
        return view
    }()
    
    private lazy var underlineView: UIView = {
        let width = self.bounds.width / CGFloat(self.numberOfSegments)
        let height = 2.0
        let xPosition = CGFloat(self.selectedSegmentIndex * Int(width))
        let yPosition = self.bounds.size.height - 1.0
        let frame = CGRect(x: xPosition, y: yPosition, width: width, height: height)
        let view = UIView(frame: frame)
        
        view.backgroundColor = .black
        self.addSubview(view)
        
        return view
    }()
    
    override init(items: [Any]?) {
        super.init(items: items)
        
        self.removeDivider()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        let underlineFinalXPosition = (self.bounds.width / CGFloat(self.numberOfSegments)) * CGFloat(self.selectedSegmentIndex)
        
        UIView.animate(withDuration: 0.1) {
            self.underlineView.frame.origin.x = underlineFinalXPosition
        }
    }
    
    private func removeDivider() {
        let image = UIImage()
        
        self.setBackgroundImage(image, for: .normal, barMetrics: .default)
        self.setBackgroundImage(image, for: .selected, barMetrics: .default)
        self.setBackgroundImage(image, for: .highlighted, barMetrics: .default)
        
        self.setDividerImage(image, forLeftSegmentState: .selected, rightSegmentState: .normal, barMetrics: .default)
    }
}

[notion-workspace]

마이페이지 화면 구현