Question

我尝试创建一个位于搜索控制器下方的自定义分段控件，如下面的模拟中所示

问题：

我在创建尖针时遇到困难（看起来像这样：＆＃34; ^＆＃34;），表示当前的索引。

尝试解决方案：

感谢下面问题的一些帮助，我能够让它看得很近，但是我无法让指针显示

https://stackoverflow.com/a/37705692/5254240

问题：

如何让我的代码看起来像我现在拥有的模型，并获得指针与分段控制器的当前索引一起移动？请参阅下面的代码

func imageWithColor(color: UIColor) -> UIImage {

    let rect = CGRectMake(0.0, 0.0, 1.0, segmentedController.frame.size.height)
    UIGraphicsBeginImageContext(rect.size)
    let context = UIGraphicsGetCurrentContext()
    CGContextSetFillColorWithColor(context, color.CGColor);
    CGContextFillRect(context, rect);
    let image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image

}

func initializeSearchController() {
    segmentedController.setTitleTextAttributes([NSFontAttributeName:UIFont(name: "Lato-Regular", size: 14)!,NSForegroundColorAttributeName:UIColor.init(red: 143/255, green: 142/255, blue: 148/255, alpha: 1.0)], forState:UIControlState.Normal)

    segmentedController.setTitleTextAttributes([NSFontAttributeName:UIFont(name: "Lato-Bold", size: 14)!,NSForegroundColorAttributeName:UIColor.init(red: 93/255, green: 176/255, blue: 175/255, alpha: 1.0)], forState:UIControlState.Selected)

    segmentedController.setDividerImage(self.imageWithColor(UIColor.clearColor()), forLeftSegmentState: UIControlState.Normal, rightSegmentState: UIControlState.Normal, barMetrics: UIBarMetrics.Default)

    segmentedController.setBackgroundImage(self.imageWithColor(UIColor.clearColor()), forState:UIControlState.Normal, barMetrics:UIBarMetrics.Default)

    segmentedController.setBackgroundImage(self.imageWithColor(UIColor.clearColor()), forState:UIControlState.Selected, barMetrics:UIBarMetrics.Default)

    segmentedController.setTitle("Search", forSegmentAtIndex: 0)
    segmentedController.setTitle("Meals", forSegmentAtIndex: 1)

    for  borderview in segmentedController.subviews {

        let upperBorder: CALayer = CALayer()
        upperBorder.backgroundColor = UIColor.init(red: 93/255, green: 176/255, blue: 175/255, alpha: 1.0).CGColor
        upperBorder.frame = CGRectMake(0, borderview.frame.size.height-1, borderview.frame.size.width, 1.0);
        borderview.layer.addSublayer(upperBorder);

    }

}

Answer 1

最简单的方法就是作弊。您可以使用高度为1的UIView绘制实线，而不是使用贝塞尔曲线绘制线条。在PhotoShop中将带有纯白色底部的三角形作为图像，并将其放在线条的顶部。现在要为位置设置动画，您可以更改其变换，更新其中心或使用自动布局约束，它将滑动到新位置。例如：

 body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
}



/*HOME*/

#navtop {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
}

#navtop > ul {
    list-style-type: none;
    padding: 0 5%;
    margin: 0 0 0 auto;
}

#navtop > ul > li {
    float: right;
    display: inline-block;
    margin-top: 0.9em;
    margin-bottom: 0.9em;
    padding: 0.6em 1.5em;
    border-right: solid #9b9b9b 0.15em;
    font-weight: 300;
}

#navtop > ul > li > a {
    text-decoration: none;
    color: #9b9b9b;

}




#navtop .rightmost {
    border: 0;
}


#intro {
    background-image: url("HTC Vive.jpg");
    background-size: cover;
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center center;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    z-index: 1;
}

#introCover {
    height: 100vh;
    width: 100%;
    position: relative;
    z-index: 10;
    background-color: rgba(20,40,45,0.8);
    display: flex;
    align-items: center;
    text-align: center;
}

.centered {
    text-align: center;
    color: white;
    font-size: 230%;
    margin: 0;
    padding-left: 10%;
    padding-right: 10%;
    width: 100%;
}

.mainTitle {
    font-size: 150%;
    color: #29A5AF;
}

#learn {
    text-align: center;
    padding: 20%;
    padding-top: 0;

}

.sub {
    font-size: 215%;
}

#learn p, .sub{
    font-weight: 300;
}

#return {
    list-style-type: none;
    color: #9b9b9b;

}




/* Our Product */

#survey {
    padding-bottom: 25px;
}

#list {
    text-align: center;
    text-decoration: bold;
}

您当然也可以使用CAShapeLayer以编程方式执行此操作。您将构建您的路径使用以下内容：

UIView.animate(withDuration: 0.25) {
    triangeImageView.center.x = selectedLabel.center.x
}

然后，您可以使用CABasicAnimation为从旧路径到新路径的路径设置动画。由于您以相同的顺序构造点，动画系统将插入位置，三角形将显示为滑动到位。

使用bezier路径创建自定义分段控件（Swift）

1 个答案: