在 AppDelegate.m 中导入头文件
#import "ViewController.h"
设置导航条更改主窗口
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// 更改主窗口
self.window.rootViewController = [[UINavigationController alloc] initWithRootViewController:[[ViewController alloc] init]];
return YES;
}
在 ViewController.m中做以下操作
设置tableView和scrollView的协议
<UIScrollViewDelegate, UITableViewDelegate, UITableViewDataSource>
// 定义全局成员变量
{
UIScrollView *topScrollView; // 顶部滚动视图
UITableView *smallTableView; // 下拉菜单tableView
UIButton *plusBtn; // "+"号按钮
UIScrollView *mainScrollView; // 内容部分的大滚动视图
}
便于使用，定义两个宏，获取视图的宽度和高度
// 屏幕的宽
#define VIEW_WIDTH [UIScreen mainScreen].bounds.size.width
// 屏幕的高
#define VIEW_HEIGHT [UIScreen mainScreen].bounds.size.height
- (void)viewDidLoad {
[super viewDidLoad];
// 标题
self.title = @"列表";
// 视图的背景颜色
self.view.backgroundColor = [UIColor whiteColor];
// 调用头部视图方法
[self createTopView];
// 调用内容部分大滚动视图方法
[self createMainScrollView];
// 创建表格
smallTableView = [[UITableView alloc] initWithFrame:CGRectMake(VIEW_WIDTH - 20, 64 + 50, 0.1, 0.1) style:UITableViewStylePlain];
smallTableView.delegate = self;
smallTableView.dataSource = self;
smallTableView.rowHeight = 60;
[self.view addSubview:smallTableView];
}
头部视图的自定义方法
// 创建头部视图
-(void)createTopView
{
// 创建头部滚动视图
topScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, VIEW_WIDTH - 50, 50)];
topScrollView.backgroundColor = [UIColor colorWithRed:(245/255.0) green:(245/255.0) blue:(245/255.0) alpha:(245/255.0)];
[self.view addSubview:topScrollView];
// 设置滚动范围
topScrollView.contentSize = CGSizeMake(VIEW_WIDTH + VIEW_WIDTH / 5, 0);
topScrollView.showsHorizontalScrollIndicator = NO;
// 创建按钮数组
NSArray *topBtnArr = @[@"第一第一",@"第二",@"第三",@"第四",@"第五",@"第六"];
// for 循环加入按钮
for (int i = 0; i < topBtnArr.count; i ++) {
UIButton *topBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
topBtn.frame = CGRectMake(VIEW_WIDTH / 5 * i, 0, VIEW_WIDTH / 5, 50);
[topBtn setTitle:topBtnArr[i] forState:UIControlStateNormal];
[topBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
topBtn.titleLabel.font = [UIFont systemFontOfSize:18];
if (i == 0) {
[topBtn setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
}else{
[topBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
}
[topBtn addTarget:self action:@selector(didClickTopBtn:) forControlEvents:UIControlEventTouchUpInside];
topBtn.tag = 1000 + i;
[topScrollView addSubview:topBtn];
}
// 创建 "+" 按钮
plusBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
plusBtn.frame = CGRectMake(VIEW_WIDTH - 50, 64, 50, 50);
[plusBtn setTitle:@"+" forState:UIControlStateNormal];
[plusBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
plusBtn.titleLabel.font = [UIFont systemFontOfSize:20];
[plusBtn addTarget:self action:@selector(didClickTopPlusBtn:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:plusBtn];
}
// 头部按钮的点击事件
-(void)didClickTopBtn:(UIButton *)sender
{
// 改变按钮的标题颜色
for (int i = 0; i < 6 ; i ++) {
UIButton *topBtn1 = [self.view viewWithTag:1000 + i];
if (sender.tag == topBtn1.tag) {
[topBtn1 setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
}else{
[topBtn1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
}
}
// 改变滚动视图的位置
mainScrollView.contentOffset = CGPointMake((sender.tag - 1000) * VIEW_WIDTH, 0);
}
// + 点击事件
-(void)didClickTopPlusBtn:(UIButton *)sender
{
if (sender.selected == NO) {
sender.selected = YES;
[UIView animateWithDuration:0.3 animations:^{
smallTableView.frame = CGRectMake(VIEW_WIDTH / 5 * 3, 64 + 50, VIEW_WIDTH / 5 * 2 - 7, 180);
}];
}else if (sender.selected == YES){
sender.selected = NO;
[UIView animateWithDuration:0.3 animations:^{
smallTableView.frame = CGRectMake(VIEW_WIDTH - 20, 64 + 50, 0.1, 0.1);
}];
}
}
创建内容部分的大滚动视图的自定义方法
// 创建内容部分滚动视图方法
-(void)createMainScrollView
{
// 创建大的滚动视图
mainScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64 + 50, VIEW_WIDTH, VIEW_HEIGHT - 64 - 50)];
mainScrollView.delegate = self;
mainScrollView.backgroundColor = [UIColor redColor];
[self.view addSubview:mainScrollView];
// 设置滚动范围
mainScrollView.contentSize = CGSizeMake(VIEW_WIDTH * 6, 0);
mainScrollView.pagingEnabled = YES;
// for 循环在滚动视图上添加视图
for (int i = 0; i < 6; i ++) {
// 创建视图
UIView *mainView = [[UIView alloc] initWithFrame:CGRectMake(VIEW_WIDTH * i, 0, VIEW_WIDTH, VIEW_HEIGHT - 64 - 50)];
// 设置视图的背景颜色为随机颜色
mainView.backgroundColor = [UIColor colorWithRed:((float)arc4random_uniform(256) / 255.0)green:((float)arc4random_uniform(256) / 255.0)blue:((float)arc4random_uniform(256) / 255.0)alpha:1.0];
[mainScrollView addSubview:mainView];
}
}
表格的数据源方法
// 数据源
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 3;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *reuseID = @"cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseID];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:reuseID];
}
// 创建表格内容数组
NSArray *cellArr = @[@"确认添加",@"确认删除",@"关闭"];
cell.textLabel.text = cellArr[indexPath.row];
cell.backgroundColor = [UIColor grayColor];
cell.textLabel.textColor = [UIColor whiteColor];
return cell;
}
点击表格单元格
// 表格的点击事件
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.row == 0) {
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"确认添加" message:@"操作已完成" preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *action = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
}];
[alert addAction:action];
[self presentViewController:alert animated:YES completion:nil];
}else if (indexPath.row == 2){
plusBtn.selected = NO;
// smallTableView.hidden = YES;
[UIView animateWithDuration:0.3 animations:^{
smallTableView.frame = CGRectMake(VIEW_WIDTH-10, 64 + 50, 0.1, 0.1);
}];
}
}
滚动视图的代理方法 - 设置按钮与滚动视图反关联
// 滚动视图的代理方法
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// 按钮与滚动视图相关联
for (int i = 0; i < 6; i ++) {
UIButton *topBtn = [self.view viewWithTag:1000 + i];
if (scrollView.contentOffset.x / VIEW_WIDTH == topBtn.tag - 1000) {
[topBtn setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
}else{
[topBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
}
}
}
