2017-08-28 40 views
0

我正在创建自己的自定义分段控制器。我正在关注这个视频(https://www.youtube.com/watch?v=xGdRCUrSu94)。这是自定义组件的代码:为什么这个UIView的宽度比故事板长?

// 
// YearSelectorSegControl.swift 
// OurDailyStrength iOS 
// 
// Created by Rob Avery on 8/28/17. 
// Copyright © 2017 Rob Avery. All rights reserved. 
// 

import UIKit 

@IBDesignable 
class YearSelectorSegControl: UIView { 

    var buttons = [UIButton]() 
    var selector: UIView! 
    var sv: UIStackView! 

    @IBInspectable 
    var borderWidth: CGFloat = 0 { 
     didSet { 
      layer.borderWidth = borderWidth 
     } 
    } 

    @IBInspectable 
    var borderColor: UIColor = UIColor.clear { 
     didSet { 
      layer.borderColor = borderColor.cgColor 
     } 
    } 

    @IBInspectable 
    var commaSeparatedButtonTitles: String = "" { 
     didSet { 
      updateView() 
     } 
    } 

    @IBInspectable 
    var textColor: UIColor = .lightGray { 
     didSet { 
      updateView() 
     } 
    } 

    @IBInspectable 
    var selectorColor: UIColor = .darkGray { 
     didSet { 
      updateView() 
     } 
    } 

    @IBInspectable 
    var selectorTextColor: UIColor = .white { 
     didSet { 
      updateView() 
     } 
    } 

    func updateView() { 
     // clear previous history 
     buttons.removeAll() 
     subviews.forEach { (view) in 
      view.removeFromSuperview() 
     } 

     let buttonTitles = commaSeparatedButtonTitles.components(separatedBy: ",") 

     // get names for buttons 
     for buttonTitle in buttonTitles { 
      let button = UIButton(type: .system) 
      button.setTitle(buttonTitle, for: .normal) 
      button.setTitleColor(textColor, for: .normal) 
      button.addTarget(self, action: #selector(buttonTapped(clickedBtn:)), for: .touchUpInside) 
      buttons.append(button) 
     } 

     buttons[0].setTitleColor(selectorTextColor, for: .normal) 

     // configure selector (widget that highlights the selected item) 
     let selectorWidth = frame.width/CGFloat(buttonTitles.count) // length given for selector 
     selector = UIView(frame: CGRect(x: 0, y: 0, width: selectorWidth, height: frame.height)) 
     selector.layer.cornerRadius = 0 
     selector.backgroundColor = selectorColor 
     addSubview(selector) 

     // add buttons to stackview 
     sv = UIStackView(arrangedSubviews: buttons) 
     sv.axis = .horizontal 
     sv.alignment = .fill 
     sv.distribution = .fillProportionally 
     addSubview(sv) 

     // set constraints for stackview 
     sv.translatesAutoresizingMaskIntoConstraints = false 
     sv.topAnchor.constraint(equalTo: self.topAnchor).isActive = true 
     sv.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true 
     sv.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true 
     sv.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true 
    } 

    override func draw(_ rect: CGRect) { 
     layer.cornerRadius = 0 
    } 

    func buttonTapped(clickedBtn: UIButton) { 

     for (index, button) in buttons.enumerated() { 
      if button == clickedBtn { 
       let selectorStartPosition = frame.width/CGFloat(buttons.count) * CGFloat(index) 
       UIView.animate(withDuration: 0.3, animations: { 
        self.selector.frame.origin.x = selectorStartPosition 
       }) 
       button.setTitleColor(selectorTextColor, for: .normal) 
      } else { 
       button.setTitleColor(textColor, for: .normal) 
      } 
     } 
    } 

} 

在故事板,它呈现并提请组件后,就说明这一点:

StoryBoard screenshot

这似乎是正常的。你应该有能力,当你点击任何其他年份按钮时,橙色选择器将移动到那一年。 (这与分段控制相似)。

当我运行它,模拟器给出了这样:

Sim screenshot

这似乎有点奇怪。 ornage选择器看起来比storybaord中的更宽一些。所以,我点击了最后一个按钮(“2020”),这是结果:

enter image description here

啊,我看的选择似乎得到它所需要的宽度不正确。在代码中,你可以看到它获得了正确的宽度,但由于某种原因,事实并非如此。

为什么它得到错误的宽度?我是否使用错误的变量来计算正确的宽度?

+0

我不会合并自动布局和帧操作。你应该尽力而为。 – Paulw11

回答

0

为什么要添加视图来突出显示按钮?你应该配置按钮的选择状态。您可以设置色调颜色来设置选定的背景色,并为所选状态设置按钮的标题颜色。

+0

我可以,但后来我无法制作它。当用户点击每个按钮时,该选择器将滑过。 –

+0

好吧,我明白了。您应该使用约束来定位这些视图,看起来您正在手动设置框架。 –

+0

我使用YearSelectorSegControl视图的约束条件,但是这是在Storyboard中完成的。 –

相关问题