闲来无事，写了一个有关两个tableView和按钮联动的小demo。很多App里面都是有这种效果的。分享给初学者，大家一起学习。
效果图~~~
联动.gif
这个demo为纯代码模式编写，布局采用Masonry。
因为只是个简单的demo，对于控件也没有进行懒加载。请大家注意！
代码的逻辑真的很简单，只要你有基本的iOS能力一定都能够轻易的看懂了。因此不做过多的注释解释了。
#import "ViewController.h"
#import <Masonry/Masonry.h>
#define KWIDTH (self.view.bounds.size.width)
#define KHEIGHT (self.view.bounds.size.height)
@interface ViewController ()<UIScrollViewDelegate>
@property (nonatomic, strong) UIView * greenView;
@property (nonatomic, strong) UIView * orangeView;
底部按钮视图中间的分割线
@property (nonatomic, strong) UIView * centerView;
底部按钮视图中间的下划线
@property (nonatomic, strong) UIView * bottomView;
@property (nonatomic, strong) UIView * buttonView;
@property (nonatomic, strong) UIScrollView * scrollView;
@property (nonatomic, strong) UIButton * buttonA;
@property (nonatomic, strong) UIButton * buttonB;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self setup_UI];
//设置代理
[self.scrollView setDelegate:self];
}
初始化控件，添加到控件到视图上并设置控件属性。
- (void)setup_UI {
self.scrollView = [[UIScrollView alloc] init];
self.greenView = [[UIView alloc] init];
self.orangeView = [[UIView alloc] init];
self.buttonView = [[UIView alloc] init];
self.centerView = [[UIView alloc] init];
self.bottomView = [[UIView alloc] init];
self.buttonA = [[UIButton alloc] init];
self.buttonB = [[UIButton alloc] init];
[self.view addSubview:self.scrollView];
[self.scrollView addSubview:self.greenView];
[self.scrollView addSubview:self.orangeView];
[self.view addSubview:self.buttonView];
[self.buttonView addSubview:self.buttonA];
[self.buttonView addSubview:self.buttonB];
[self.buttonView addSubview:self.bottomView];
[self.buttonView addSubview:self.centerView];
[self.scrollView setBackgroundColor:[UIColor purpleColor]];
[self.greenView setBackgroundColor:[UIColor greenColor]];
[self.orangeView setBackgroundColor:[UIColor orangeColor]];
[self.centerView setBackgroundColor:[UIColor blackColor]];
[self.bottomView setBackgroundColor:[UIColor blackColor]];
[self.buttonA setTitle:@"按钮一" forState:UIControlStateNormal];
[self.buttonB setTitle:@"按钮二" forState:UIControlStateNormal];
[self.buttonA setBackgroundColor:[UIColor lightGrayColor]];
[self.buttonB setBackgroundColor:[UIColor lightGrayColor]];
[self.buttonA setTitle:@"选中了" forState:UIControlStateSelected];
[self.buttonB setTitle:@"选中了" forState:UIControlStateSelected];
[self.buttonA setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[self.buttonB setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
self.buttonA.titleLabel.font = [UIFont systemFontOfSize:22];
self.buttonB.titleLabel.font = [UIFont systemFontOfSize:18];
self.buttonA.selected = YES;
[self.buttonA addTarget:self action:@selector(clickButtonA) forControlEvents:UIControlEventTouchUpInside];
[self.buttonB addTarget:self action:@selector(clickButtonB) forControlEvents:UIControlEventTouchUpInside];
[self setup_Layout];
[self setup_ScrollView];
}
按钮的点击方法，当按钮被点击时，移动到相应的位置，显示相应的tableView。
#pragma mark - 按钮的点击事件
- (void)clickButtonA {
self.buttonB.selected = NO;
self.buttonA.selected = YES;
[UIView animateWithDuration:0.3 animations:^{
[self.scrollView setContentOffset:CGPointMake(0, 0) animated:NO];
}];
}
- (void)clickButtonB {
self.buttonA.selected = NO;
self.buttonB.selected = YES;
[UIView animateWithDuration:0.3 animations:^{
[self.scrollView setContentOffset:CGPointMake(KWIDTH, 0) animated:NO];
}];
}
为各个控件设置约束，用Masonry设置约束。Masonry设置约束一定要注意：先添加然后再设置约束，不然会崩溃报错。
#pragma mark - 约束设置
- (void)setup_Layout {
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.bottom.right.mas_equalTo(self.view);
}];
[self.greenView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.mas_equalTo(self.scrollView);
make.width.mas_equalTo(KWIDTH);
make.height.mas_equalTo(KHEIGHT - 50);
}];
[self.orangeView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self.view.mas_top);
make.left.mas_equalTo(self.greenView.mas_right);
make.width.mas_equalTo(KWIDTH);
make.height.mas_equalTo(KHEIGHT - 50);
}];
[self.buttonView mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.mas_equalTo(self.view);
make.width.mas_equalTo(self.view);
make.height.mas_equalTo(50);
}];
[self.buttonA mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(self.buttonView);
make.width.mas_equalTo(KWIDTH / 2);
make.left.mas_equalTo(self.buttonView);
make.height.mas_equalTo(self.buttonView);
}];
[self.buttonB mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(self.buttonView);
make.width.mas_equalTo(KWIDTH / 2);
make.right.mas_equalTo(self.buttonView);
make.height.mas_equalTo(self.buttonView);
}];
[self.centerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(3);
make.height.mas_equalTo(34);
make.center.mas_equalTo(self.buttonView);
}];
[self.bottomView mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.mas_equalTo(self.buttonView);
make.width.mas_equalTo(KWIDTH / 2 - 20);
make.height.mas_equalTo(2);
make.left.mas_equalTo(10);
}];
}
配置ScrollView的属性
- (void)setup_ScrollView {
[self.scrollView setPagingEnabled:YES];
[self.scrollView setBounces:NO];
[self.scrollView setContentSize:CGSizeMake(KWIDTH * 2, KHEIGHT)];
}
ScrollView代理方法的代理方法，通过此方法获取当前拖动时的contentOffset.x来判断当前的位置，然后选中相应的按钮，执行相应的动画效果。
#pragma mark - scrollView代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// NSLog(@"%s",__func__);
//判断当前滚动的水平距离时候超过一半
if (scrollView.contentOffset.x > KWIDTH / 2) {
//更新约束动画
[self.bottomView mas_updateConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(10 + KWIDTH / 2);
}];
//修改button按钮的状态
[UIView animateWithDuration:0.3 animations:^{
//强制刷新页面布局，不执行此方法，约束动画是没有用的！！！！！
[self.buttonView layoutIfNeeded];
self.buttonA.selected = NO;
self.buttonB.selected = YES;
self.buttonB.titleLabel.font = [UIFont systemFontOfSize:22];
self.buttonA.titleLabel.font = [UIFont systemFontOfSize:18];
}];
} else {
[self.bottomView mas_updateConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(10);
}];
[UIView animateWithDuration:0.3 animations:^{
[self.buttonView layoutIfNeeded];
self.buttonB.selected = NO;
self.buttonA.selected = YES;
self.buttonB.titleLabel.font = [UIFont systemFontOfSize:18];
self.buttonA.titleLabel.font = [UIFont systemFontOfSize:22];
}];
}
}
@end
这个简单的demo所有的代码就在这里了，demo也就不上传GitHub了。相信大家也一定能够看懂的~~~。欢迎大家交流改正。
网友评论