iOS DeveloperiOS程序猿

顶部表头切换

2017-03-16  本文已影响61人  Booooooooom

今天本该闲着没事,看看百度新闻就下班的,无奈被一个坑比让我给他封装控件。。。
我能怎么办,我也很无奈啊。。。


基本了解需求之后,大概知道他要什么效果了,其实也很简单,自己以前做的项目也都用到了这个,但是之前一直忙(可能是忘记了。。。),一直没有做过相关的封装,这次简单的来做一下封装。。。其实前几天做过一个更为复杂的,但是那个是借助了别人的封装,所以也没有发出来,毕竟是别人的劳动成果

二话不说,拿起键盘一顿敲!!!

敲完了,效果出来了

Untitled1222..gif

(界面略丑。。。)

来说下简单的思路

首先考虑到到封装,很多属性以及颜色需要使用,所以做了一个接口

- (void)ChoseColor:(UIColor *)choseColor notChoseColor:(UIColor *)notChoseColor lineColor:(UIColor *)lineColor choseLineColor:(UIColor *)choseLineColor linewidth:(float)lineWidth firstButtonTittle:(NSString *)firstButtonTittle secondButtonTittle:(NSString *)secondButtonTittle buttonWidth:(float)buttonWidth;

外部创建之后,直接去调用

TopSlideView *view = [[TopSlideView alloc] initWithFrame:CGRectMake(0, 200, self.view.frame.size.width, 60)];
    [view ChoseColor:[UIColor redColor] notChoseColor:[UIColor blueColor] lineColor:[UIColor grayColor] choseLineColor:[UIColor orangeColor] linewidth:2 firstButtonTittle:@"推荐模型" secondButtonTittle:@"我的模型" buttonWidth:100];

//    view.backgroundColor = [UIColor greenColor];
    [self.view addSubview:view];

这里因为只有两个按钮,还是比较简单的功能,所以我就直接用了button(多的话可能会使用collectionView 这里我之后会再封装一个collectionView的控件)

具体的实现思路:

1、点击button,触发响应事件,相应事件里面改变button字体的颜色,做成选中后的效果
2、button下方的线条,做一个动画过渡过去,看着会比较舒服

- (void)rightButtonAction {
    
    
    [self.leftButton setTitleColor:self.notchoseColor forState:(UIControlStateNormal)];
    [self.rightButton setTitleColor:self.choseColor forState:(UIControlStateNormal)];
    [UIView animateWithDuration:0.3 animations:^{
        CGRect rect = self.choseImageView.frame;
        rect.origin.x = CGRectGetMinX(self.rightButton.frame);
        self.choseImageView.frame = rect;
    }];
}

这里要注意,在获取self.rightButton.frame,我们用 CGRectGetMinX(self.rightButton.frame),可以直接获取到最左边的X坐标,也就是最小的X坐标

基本就是这些思路,如有要在下面嵌套一个tableView的话,也可以在button的触发事件里,切换scrollView的ContentOffset,实现也不是很难

代码在git里面,下面附上地址
https://github.com/bommmmmmm/head-change-with-animation

上一篇下一篇

猜你喜欢

热点阅读