今天本該閑著沒(méi)事，看看百度新聞就下班的，無(wú)奈被一個(gè)坑比讓我給他封裝控件。。。
我能怎么辦，我也很無(wú)奈啊。。。
基本了解需求之后，大概知道他要什么效果了，其實(shí)也很簡(jiǎn)單，自己以前做的項(xiàng)目也都用到了這個(gè)，但是之前一直忙（可能是忘記了。。。）,一直沒(méi)有做過(guò)相關(guān)的封裝，這次簡(jiǎn)單的來(lái)做一下封裝。。。其實(shí)前幾天做過(guò)一個(gè)更為復(fù)雜的，但是那個(gè)是借助了別人的封裝，所以也沒(méi)有發(fā)出來(lái)，畢竟是別人的勞動(dòng)成果
二話不說(shuō)，拿起鍵盤一頓敲?。?！
敲完了，效果出來(lái)了
（界面略丑。。。）
來(lái)說(shuō)下簡(jiǎn)單的思路
首先考慮到到封裝，很多屬性以及顏色需要使用，所以做了一個(gè)接口
- (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;
外部創(chuàng)建之后，直接去調(diào)用
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];
這里因?yàn)橹挥袃蓚€(gè)按鈕，還是比較簡(jiǎn)單的功能，所以我就直接用了button（多的話可能會(huì)使用collectionView 這里我之后會(huì)再封裝一個(gè)collectionView的控件）
具體的實(shí)現(xiàn)思路：
1、點(diǎn)擊button，觸發(fā)響應(yīng)事件，相應(yīng)事件里面改變button字體的顏色，做成選中后的效果
2、button下方的線條，做一個(gè)動(dòng)畫過(guò)渡過(guò)去，看著會(huì)比較舒服
- (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坐標(biāo)，也就是最小的X坐標(biāo)
基本就是這些思路，如有要在下面嵌套一個(gè)tableView的話，也可以在button的觸發(fā)事件里，切換scrollView的ContentOffset，實(shí)現(xiàn)也不是很難
代碼在git里面，下面附上地址
https://github.com/bommmmmmm/head-change-with-animation
