模拟网易新闻上方滚动条
此次的小demo是模仿网易新闻上方的滚动条，用的最最简单的方法做的，一看即懂，话不多说，先看效果：
具体步骤：
一、思路
1.功能分析：
（1）标题选中状态颜色和大小发生变化，未选中恢复原样。
（2）实现上方标题的滚动，随着选中的标题实现自动滚动。
2.操作思路：
（1）准备数据（标题内容）。
（2）创建滚动视图。
（3）给标题添加按钮并添加相应的事件。
二、实现代码
1.属性变量的定义
1 #import "ViewController.h" 2 3 @interface ViewController () 4 //保存标题数据 5 @property(nonatomic, strong) NSArray *titlesArray; 6 //滚动视图 7 @property(nonatomic, strong) UIScrollView *titleScrollView; 8 //保存被选中的按钮 9 @property(nonatomic, strong) UIButton *lastSelectedButton; 10 @end
2.数据准备
1 //1.提供一个懒加载的方式获取标题 2 //准备数据 3 #pragma mark -------懒加载------------ 4 -(NSArray *)titlesArray{ 5 if (_titlesArray == nil) { 6 self.titlesArray = @[@"头条",@"体育",@"房产",@"NBA",@"重庆",@"娱乐",@"汽车",@"科技"]; 7 } 8 return _titlesArray; 9 10 }
3.界面设计（包括滚动视图和按钮）
1 #pragma mark -------创建UI------------ 2 -(void)initUI{ 3 //创建滚动视图 4 self.titleScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, 60)]; 5 //设置滚动视图的属性 6 _titleScrollView.backgroundColor = [UIColor whiteColor]; 7 _titleScrollView.showsVerticalScrollIndicator = NO; 8 _titleScrollView.showsHorizontalScrollIndicator = NO; 9 _titleScrollView.bounces = NO; 10 _titleScrollView.contentSize = CGSizeMake(100*self.titlesArray.count, 60); 11 [self.view addSubview:_titleScrollView]; 12 13 //添加每一个标题按钮 14 for (int i = 0; i<self.titlesArray.count; i++) { 15 NSString *title = [self.titlesArray objectAtIndex:i]; 16 17 //创建按钮 18 UIButton *btn = [[UIButton alloc]initWithFrame:CGRectMake(i*100, 0, 100, 60)]; 19 [btn setTitle:title forState:UIControlStateNormal];//标题内容 20 [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];//标题颜色 21 //给按钮添加事件 22 [btn addTarget:self action:@selector(buttonDidClicked:) forControlEvents:UIControlEventTouchUpInside]; 23 [self.titleScrollView addSubview:btn]; 24 25 26 } 27 }
4.按钮的事件
1 #pragma mark ------------按钮事件---------------- 2 - (void)buttonDidClicked:(UIButton *)sender{ 3 //判断之前是否有选中的按钮 4 if (_lastSelectedButton != nil) { 5 //之前被点中过的,需要将之前的按钮还原 6 [_lastSelectedButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; 7 _lastSelectedButton.transform = CGAffineTransformMakeScale(1, 1); 8 9 } 10 //点击后按钮变大变红 11 [sender setTitleColor:[UIColor redColor] forState:UIControlStateNormal];//变红 12 sender.transform = CGAffineTransformMakeScale(1.3, 1.3); 13 14 //记录当前被选中的按钮 15 _lastSelectedButton = sender; 16 17 //处理按钮的滚动 18 //处理左边区域 center.x-width/2 19 CGFloat offset = sender.center.x - self.titleScrollView.frame.size.width/2; 20 if (offset < 0) { 21 //小于0，不能滚动 22 offset = 0; 23 } 24 25 //处理右边的区域 26 CGFloat maxOffset = self.titleScrollView.contentSize.width - self.titleScrollView.frame.size.width; 27 if (offset > maxOffset) { 28 offset = maxOffset; 29 } 30 [self.titleScrollView setContentOffset:CGPointMake(offset, 0) animated:YES]; 31 32 }
5.把这些方法调用一下就可以实现本文开始的效果了
1 - (void)viewDidLoad { 2 [super viewDidLoad]; 3 self.view.backgroundColor = [UIColor lightGrayColor]; 4 [self initUI]; 5 }
三、总结
自我感觉此代码的难点在于如何让滚动视图随着点击按钮的位置而滚动，可以通过画图等方法找到它们之间的距离关系。
此处代码可移植性较差，后期可以封装类来完善此类操作。
