KJ初学IOS编程，看到INS 的地点标签系统，觉得很有意思，就想着模拟一遍，记录下思路和过程，加深印象。有没有弄明白的地方，我也些出来，请多指教。
首先上INS的效果：
1.gif
我们做的效果就是上图添加地点后面滑动效果。
分析：
这cell的整体有个UIScrollView，里面的条目可以用UIButton实现。这里我们选择用简单的autolayout来实现整个布局。（autolayout入门传送门：从此爱上autolayout。）
实际上就是一个tableView中添加一个UIScrollView。动态添加5个button的过程。好的，我们就从开始完整的实现这个过程。
1，新建一个空工程，给StoryBoard中拖一个UITableViewController，如下图：
初步设置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;
}
黑色显示的是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;
运行后：我们去掉底下的指示条
最后运行如下图所示
基本算是成功了 ，但是我们发现不同于原版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也有一篇类似文章，和这篇差不多，大家凑合看）完了更新
