Swift3.0自定义具有视觉差效果的Segment控件
<p>一款具有视觉差效果的Segment,常见于今日头条,网易新闻类,Write By Swift3.0</p> <p>废话不多说,先上效果</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a46449605ffd2142ddf76cb114330a4b.gif"></p> <p style="text-align:center">segment1.gif</p> <p>可以看到红色高亮部分 在不同Segment切换时,会有一个视觉差的效果,在高亮部分文字为白色,非高亮部分文字为默认的黑色。而且高亮部分也会随着文字大小变化。</p> <h2><strong>主要原理</strong></h2> <p>这种类似页面的主要思路是由上部的Segment和下部的Scrollview容器组成,添加多个子控制器,并将自控制器的view添加到Scrollview容器中。这些实现起来都相对比较简单,难点就在于这种视觉差效果。给大家看看图层关系(为了视觉效果,将选中的字体颜色设置为紫色)</p> <p>我自定义的控件主要包括三个层次,从下至上分别是最底层bottomContainer(scrollview),高亮区域highlightView(uiview),最顶层topContainer(scrollview),highlightView是bottomContainer的子视图,topContainer是highlightView的子视图。在初始化过程中,会无差别给bottomContainer,topContainer添加label内容在scrollview中依次排布,只是字体颜色不同。最后比较关键的来了,highlightView开始向右滑动时,它的frame 永远等于相邻的两个Label的frame的计算结果。与此同时topContainer会相应的向左滑动相同的距离,造成的视觉效果是bottomContainer和topContainer的位置不变,而只是高亮区域向右滑动一段距离。而正是这一点所以字体颜色才能无缝切换。(不太好描述,希望大家能够细细体会或者给我留言)</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/3326de7604955df9b4f25ab86e09d33e.png"></p> <p style="text-align:center">jianshu010.png</p> <h2><strong>简单的介绍下使用方法</strong></h2> <p>首先对TransitionSegmentView进行初始化,设置segment点击闭包回调方法</p> <pre> <code class="language-swift">//配置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!) }</code></pre> <p>然后给控制器添加自控制器</p> <pre> <code class="language-swift">//配置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!) }</code></pre> <p>当scrollview开始滑动和开始减速时,分别调用segment相应的方法。</p> <pre> <code class="language-swift">//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) }</code></pre> <h2><strong>写在最后</strong></h2> <p>初学Swift没多久写的第一个 完整的工具类,可能封装效果不太好,大家多多包涵。</p> <p> </p> <p> </p> <p>来自:http://www.jianshu.com/p/7ddf966e4bf3</p> <p> </p>
本文由用户 dengyuannet 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!