Swift3.0自定義具有視覺差效果的Segment控件

一款具有視覺差效果的Segment，常見于今日頭條，網易新聞類，Write By Swift3.0

廢話不多說，先上效果

segment1.gif

可以看到紅色高亮部分 在不同Segment切換時，會有一個視覺差的效果，在高亮部分文字為白色，非高亮部分文字為默認的黑色。而且高亮部分也會隨著文字大小變化。

主要原理

這種類似頁面的主要思路是由上部的Segment和下部的Scrollview容器組成，添加多個子控制器，并將自控制器的view添加到Scrollview容器中。這些實現起來都相對比較簡單，難點就在于這種視覺差效果。給大家看看圖層關系（為了視覺效果，將選中的字體顏色設置為紫色）

我自定義的控件主要包括三個層次，從下至上分別是最底層bottomContainer（scrollview），高亮區域highlightView（uiview），最頂層topContainer（scrollview），highlightView是bottomContainer的子視圖，topContainer是highlightView的子視圖。在初始化過程中，會無差別給bottomContainer，topContainer添加label內容在scrollview中依次排布，只是字體顏色不同。最后比較關鍵的來了，highlightView開始向右滑動時，它的frame 永遠等于相鄰的兩個Label的frame的計算結果。與此同時topContainer會相應的向左滑動相同的距離，造成的視覺效果是bottomContainer和topContainer的位置不變，而只是高亮區域向右滑動一段距離。而正是這一點所以字體顏色才能無縫切換。（不太好描述，希望大家能夠細細體會或者給我留言）

jianshu010.png

簡單的介紹下使用方法

首先對TransitionSegmentView進行初始化，設置segment點擊閉包回調方法

//配置segment
    func configSegment() {

        let titles:[String] = ["推薦","專題","真相","兩性","不孕不育","一圖讀懂","腫瘤","慢病","營養","母嬰"]

        let rect = CGRect(x:0,y:64,width:screenWidth,height:35)

        let configure = SegmentConfigure(textSelColor:UIColor.blue, highlightColor:UIColor.red,titles:titles)

        segmentView = TransitionSegmentView.init(frame: rect, configure: configure)

        segmentView?.backgroundColor = UIColor.yellow

        ///segment的label被點擊時調用
        segmentView?.setScrollClosure(tempClosure: { (index) in

            let point = CGPoint(x:CGFloat(index)*screenWidth,y:0)
            self.scrollContainer?.setContentOffset(point, animated: true)

        })

        self.view.addSubview(segmentView!)
    }

然后給控制器添加自控制器

//配置scrollview
    func configScrollView()  {
         //scrollview容器
        scrollContainer = UIScrollView.init(frame: CGRect(x:0,y:99,width:screenWidth,height:screenHeight-99))

        for index in 0...9 {

            let vc: UIViewController = UIViewController.init()
            vc.view.frame = CGRect(x:CGFloat(index)*screenWidth,y:0,width:(scrollContainer?.bounds.width)!,height:(scrollContainer?.bounds.height)!)

            let temp1 = Float(arc4random()%255)/255
            let temp2 = Float(arc4random()%255)/255
            let temp3 = Float(arc4random()%255)/255
            vc.view.backgroundColor = UIColor.init(colorLiteralRed: temp1, green: temp2, blue: temp3, alpha: 1)

            //添加子控制器
            scrollContainer?.addSubview(vc.view)
            self.addChildViewController(vc)

        }

        //配置scrollview容器
        scrollContainer?.contentSize = CGSize(width:10*screenWidth,height:0)
        scrollContainer?.showsHorizontalScrollIndicator = true
        scrollContainer?.delegate = self
        scrollContainer?.isPagingEnabled = true
        self.automaticallyAdjustsScrollViewInsets = false
        self.view.addSubview(scrollContainer!)

    }

當scrollview開始滑動和開始減速時，分別調用segment相應的方法。

//scollview滑動代理
    func scrollViewDidScroll(_ scrollView: UIScrollView) {

        let point = scrollView.contentOffset

        segmentView?.segmentWillMove(point: point)


    }

    //scollview開始減速代理
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {

        self.scrollViewDidEndScrollingAnimation(scrollView)
    }


    //scollview停止減速代理
    func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {

        let point = scrollView.contentOffset

        segmentView?.segmentDidEndMove(point: point)
    }

寫在最后

初學Swift沒多久寫的第一個 完整的工具類，可能封裝效果不太好，大家多多包涵。

來自：http://www.jianshu.com/p/7ddf966e4bf3