[Swift] SegmentsController Underline 밑줄 왔다리 갔다리

당근마켓 UI 따라하기중 아래와 같이 인디게이터바가 왔다리 갔다리 하는 애니메이션을 하고 싶었당

폭풍 구글링후, 그 결과를 찾았다.

 

우선 , 아래와 같이 세그먼트 컨트롤 추가해주신 후, 타이틀을 바꿔 줍니다. (이 과정은 그냥 스토리보드 슥삭 하면 되니 생략 하겠슴둥)

 

 

커맨드+N -> 코코아 추가 -> UI Segment  클래스를 추가해주십쇼

 

요 코드를

 

    private func removeBackgroundAndDivider() {

      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)

    }

    private lazy var underlineView: UIView = {

        let width = self.bounds.size.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 = UIColor.black

                            //UIColor(displayP3Red: 31/255, green: 130/255, blue: 63/255, alpha: 1) 색 RGB 값은 요놈 쓰면됩니당

        self.addSubview(view)

        return view

      }()

      

      override func layoutSubviews() {

        super.layoutSubviews()

        

        let underlineFinalXPosition = (self.bounds.width / CGFloat(self.numberOfSegments)) * CGFloat(self.selectedSegmentIndex)

        UIView.animate(

          withDuration: 0.1,

          animations: {

            self.underlineView.frame.origin.x = underlineFinalXPosition

          }

        )

      }

만든 클래스 파일에 복붙해주십쇼 코드 하나하나 분석은 알아서 해주십쇼 보시면 변수명을 알아보기 쉽게 슥삭 바꾸어 놓았습니다.

 

요고 잊지 않으셨겟죠?

슥삭 실행 해보겠습니다.

 

오잉? 

뒤에 배경을 날려야 겠군요

 

아 세그먼트 컨트롤러를 네비게이션바안에 넣었는데 저것도 그냥 수정해야겟군요

 

아울렛 변수 선언 후,

 

작은 함수를 만들어 보겠습니다.

 func customSeg() {

        let image = UIImage()

        SegmentedController.setBackgroundImage(image, for: .normal, barMetrics: .default)

        SegmentedController.setBackgroundImage(image, for: .selected, barMetrics: .default)

        SegmentedController.setBackgroundImage(image, for: .highlighted, barMetrics: .default)

            

        SegmentedController.setDividerImage(image, forLeftSegmentState: .selected, rightSegmentState: .normal, barMetrics: .default)

    }

 

잘 작동 되네요. 감사합니다..