INS 的地点标签UIScrollView autoLayout的实现

KJ初学IOS编程，看到INS 的地点标签系统，觉得很有意思，就想着模拟一遍，记录下思路和过程，加深印象。有没有弄明白的地方，我也些出来，请多指教。
首先上INS的效果：

1.gif

我们做的效果就是上图添加地点后面滑动效果。
分析：
这cell的整体有个UIScrollView，里面的条目可以用UIButton实现。这里我们选择用简单的autolayout来实现整个布局。（autolayout入门传送门：从此爱上autolayout。）
实际上就是一个tableView中添加一个UIScrollView。动态添加5个button的过程。好的，我们就从开始完整的实现这个过程。
1，新建一个空工程，给StoryBoard中拖一个UITableViewController，如下图：

2

初步设置IndexSection.section=2,IndexSection.row=2
模拟器效果如下：

2

接下来我们使用懒加载初始化按钮。

-(NSDictionary *)buttonContainer{
     if (!_buttonContainer)
    {
        _buttonContainer=@{@"button1":[[UIButton alloc] init],@"button2":[[UIButton alloc] init],@"button3":[[UIButton alloc] init],@"button4":[[UIButton alloc] init]};
    }
    return _buttonContainer;
}

在UITableView函数中自定义UIViewCell

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell=[[UITableViewCell alloc] init];
    //首先定义UIScrollView
    UIScrollView *scrollView=[[UIScrollView alloc] init];
    [cell addSubview:scrollView]; 
    //autoLayout，使得scrollView的宽高等于cell的宽高
    
    //首先设置scrollView的AutoesizingMask为NO，原因：
    //AutosizingMask是旧版本的小范围的自动布局，和autoLayout冲突
    scrollView.translatesAutoresizingMaskIntoConstraints=NO;  

    //添加约束
    NSDictionary *scrollViewDic=NSDictionaryOfVariableBindings(scrollView);
    NSString *VFLScrollViewH=@"|[scrollView]|";//width等于cell.width
    NSString *VFLScrollViewV=@"V:|[scrollView]|";//height等于cell.height
    [cell addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:VFLScrollViewH options:0 metrics:nil views:scrollViewDic]];
    [cell addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:VFLScrollViewV options:0 metrics:nil views:scrollViewDic]]; 

    //测试 
    scrollView.backgroundColor=[UIColor blackColor];   
    return cell;
}

screenshot 7副本.png

黑色显示的是scrollView
说明autoLayout应用成功，然后我们继续添加代码。

 UIButton *button1 =[self.buttonContainer objectForKey:@"button1"];
    button1.backgroundColor=[UIColor grayColor];
    button1.translatesAutoresizingMaskIntoConstraints=NO;
    [scrollView addSubview:button1];

UIButton *button2=[self.buttonContainer objectForKey:@"button2"];
    button2.backgroundColor=[UIColor grayColor];
    button2.translatesAutoresizingMaskIntoConstraints=NO;
    [scrollView addSubview:button2];
    
    NSDictionary *dicButton=NSDictionaryOfVariableBindings(button1,button2);
    //这个意思是让button1，和button2在水平位置相连，中间间隔8space，且两个button的长度不能超过300.长度超过300时，将省略超出长度的内容    
    NSString *VFLButtonH=@"|[button1(<=300)]-[button2(<=300)]|";
    NSString *VFLButton1V=@"|[button1]|";
    NSString *VFLButton2V=@"|[button2]|";
    
    
    [scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:VFLButtonH options:0 metrics:nil views:dicButton]];
    [scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:VFLButton1V options:0 metrics:nil views:dicButton]];
    [scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:VFLButton2V options:0 metrics:nil views:dicButton]];
    
    //简单测试，我们可以给button赋一个长值
    [button1 setTitle:@"陕西省西安市西安市高新区新型工业园创汇路邮编10000号西安电信" forState:UIControlStateNormal];
    [button2 setTitle:@"陕西省西安市西安市高新区新型工业园创汇路邮编10000号西安电信" forState:UIControlStateNormal];
去掉底下的指示条

    scrollView.showsHorizontalScrollIndicator=NO;

运行后：我们去掉底下的指示条
最后运行如下图所示

模拟效果gif.gif

基本算是成功了 ，但是我们发现不同于原版INS，我们的省略号在中间，这个需要改button textLabel的LineBreakMode
button1.titleLabel.lineBreakMode=NSLineBreakByTruncatingTail;
如果大于300，神略号到最后了。这个简单的模拟就到这里。问题来了
为什么scrollView添加至cell底下有20px的空间，这个我在谷歌上查不出来原因。求告知

效果出来了，大家疑问来了，为什么我们没有设置contentSize。
UIScrollView的本质是什么东西。
先说答案，UIScrollView就是通过改变父坐标的bounds，来实现移动原理的UIView。
欢迎阅读这篇UIScrollView的本质。
http://www.jianshu.com/p/bd0023af0c9a

（我github也有一篇类似文章，和这篇差不多，大家凑合看）完了更新