demo.gif

思路分析

1.可以橫向滾動,scrollView
2.能顯示7個有序的文字,7個label控件
3.兩邊都可以滾到邊,內容是個有序數組

@interface ViewController ()<UIScrollViewDelegate>{
    UIScrollView *titleScrollView;
    UILabel *circleLabel; //入住人數
    NSMutableArray *titleArr;
}

@property (weak, nonatomic) IBOutlet UIView *inNumberView;

@end

@implementation ViewController
#define numberRow  7
#define screenWidth [UIScreen mainScreen].bounds.size.width
- (void)viewDidLoad {
    [super viewDidLoad];
   
    titleArr = [NSMutableArray array];
    for (NSInteger i = 0; i<15; i++) {
        [titleArr addObjectsFromArray:@[@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"不限"]];
    }
    
    CGFloat labelWidth =  screenWidth/numberRow;
    titleScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, screenWidth, 85)];
    titleScrollView.contentOffset = CGPointMake((titleArr.count+1)/2 * labelWidth - 10*labelWidth, 0);
    [self.inNumberView addSubview:titleScrollView];
    titleScrollView.delegate = self;
    titleScrollView.showsHorizontalScrollIndicator = NO;
    titleScrollView.contentSize = CGSizeMake(titleArr.count *labelWidth, 0);
    circleLabel = [[UILabel alloc] initWithFrame:CGRectMake(screenWidth /2 - labelWidth/2 , 85/2 - labelWidth/2, labelWidth , labelWidth)];
    [self.inNumberView addSubview:circleLabel];
    circleLabel.layer.cornerRadius = labelWidth/2;
    circleLabel.layer.borderColor = [UIColor redColor].CGColor;
    circleLabel.backgroundColor = [UIColor whiteColor];
    circleLabel.text = @"不限";
    circleLabel.textColor = [UIColor redColor];
    circleLabel.textAlignment = NSTextAlignmentCenter;
    circleLabel.layer.borderWidth = 1;
    circleLabel.font = [UIFont systemFontOfSize:13];
    for (int i = 0; i < titleArr.count; i++) {
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(i*labelWidth, 0, labelWidth, 85)];
        [titleScrollView addSubview:label];
        label.tag = i+100;
        label.font = [UIFont systemFontOfSize:12];
        label.textAlignment = NSTextAlignmentCenter;
        label.text = titleArr[i];
    }

}
// 滾動到最近的item
- (void)snapToNearestItem{
    CGFloat pageSize = screenWidth/numberRow;
    CGPoint targetOffset = [self nearestTargetOffsetForOffset:titleScrollView.contentOffset];
    [titleScrollView setContentOffset:targetOffset animated:YES];
    UILabel *label = (UILabel *)[titleScrollView viewWithTag:3+targetOffset.x/pageSize+100];
    circleLabel.text = label.text;
    circleLabel.textAlignment = NSTextAlignmentCenter;
    circleLabel.font = [UIFont systemFontOfSize:13];
    circleLabel.textColor = [UIColor redColor];
    circleLabel.backgroundColor = [UIColor whiteColor];
    
}
// 找到最近目標點
- (CGPoint)nearestTargetOffsetForOffset:(CGPoint)offset{
    CGFloat pageSize = screenWidth/numberRow;
    NSInteger page = roundf(offset.x / pageSize);
    CGFloat targetX = pageSize * page;
    return CGPointMake(targetX, 0);
}
// 即將拖拽
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    circleLabel.textColor = [UIColor clearColor];
    circleLabel.backgroundColor = [UIColor clearColor];
}

// 結束減速
- (void)scrollViewDidEndDecelerating:(nonnull UIScrollView *)scrollView{
    if (scrollView == titleScrollView) {
        [self snapToNearestItem];
    }
}

// 結束拖拽
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    if (scrollView == titleScrollView) {
        if (!decelerate) {
            [self snapToNearestItem];
        }
    }
}

swift版本傳送門