iOS-乐刻健身APP.png使用YNPageScrollViewController库实现如下图页面效果
1、CocoaPods安装:
一、可以直接在项目Podfile 文件中 pod 'YNPageViewController'
pod 'YNPageViewController'
2、使用
1.0、新建BasePageViewController类(.h、.m页面)
//
// BasePageViewController.h
// JK_SegmentHH
//
// Created by 纵昂 on 2022/9/2.
// 中间层 - 为了演示API功能操作
//
#import "YNPageViewController.h"
NS_ASSUME_NONNULL_BEGIN
@interface BasePageViewController : YNPageViewController
@end
NS_ASSUME_NONNULL_END
//
// BasePageViewController.m
// JK_SegmentHH
//
// Created by 纵昂 on 2022/9/2.
//
#import "BasePageViewController.h"
@interface BasePageViewController ()
@end
@implementation BasePageViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
}
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
NSLog(@"--%@--%@", [self class], NSStringFromSelector(_cmd));
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
NSLog(@"--%@--%@", [self class], NSStringFromSelector(_cmd));
}
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
NSLog(@"--%@--%@", [self class], NSStringFromSelector(_cmd));
}
- (void)viewDidDisappear:(BOOL)animated {
[super viewDidDisappear:animated];
NSLog(@"--%@--%@", [self class], NSStringFromSelector(_cmd));
}
/*
#pragma mark - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
// Get the new view controller using [segue destinationViewController].
// Pass the selected object to the new view controller.
}
*/
@end
1.1、在创建一个JKViewController页面用于展示控制页面。
JKViewController.h.png 继承#import "BasePageViewController.h"#import "JKViewController.h"
//引入创建好的两个页面
#import "TuiJianViewController.h" //推荐
#import "GuanZhuViewController.h" //关注
//遵循代理
@interface JKViewController ()<YNPageViewControllerDelegate, YNPageViewControllerDataSource>
@end
+ (instancetype)navPageVC {
YNPageConfigration *configration = [YNPageConfigration defaultConfig];
configration.pageStyle = YNPageStyleNavigation;
configration.headerViewCouldScale = YES;
configration.headerViewScaleMode = YNPageHeaderViewScaleModeTop;
configration.showTabbar = NO;
configration.showNavigation = YES;
configration.scrollMenu = NO;
configration.aligmentModeCenter = YES;
configration.lineWidthEqualFontWidth = NO;
configration.showBottomLine = NO;//是否显示底部线条 NO
configration.lineHeight = 4; //底部红线高度
configration.bottomLineHeight = 2;//底部线height 2
configration.itemFont = [UIFont systemFontOfSize:15];//选项字体 14
configration.selectedItemFont = [UIFont systemFontOfSize:15]; //选中
configration.itemMaxScale = 1.3; //缩放系数
configration.selectedItemColor = [UIColor blackColor];//选项选中color
configration.itemMargin = 30;//选项之间间隙
JKViewController *vc = [JKViewController pageViewControllerWithControllers:[self getArrayVCs]
titles:[self getArrayTitles]
config:configration];
vc.dataSource = vc;
vc.delegate = vc;
return vc;
}
+ (NSArray *)getArrayVCs {
TuiJianViewController *secondVC = [[TuiJianViewController alloc] init];
secondVC.cellTitle = @"推荐";
TuiJianViewController *thirdVC = [[TuiJianViewController alloc] init];
thirdVC.cellTitle = @"关注";
return @[ secondVC, thirdVC];
}
+ (NSArray *)getArrayTitles {
return @[@"推荐", @"关注"];
}
#pragma mark - YNPageViewControllerDataSource
- (UIScrollView *)pageViewController:(YNPageViewController *)pageViewController pageForIndex:(NSInteger)index {
TuiJianViewController *baseVC = pageViewController.controllersM[index];
return [baseVC tableView];
}
实现雏形效果,上面示例图是选项之间是有间隔的
雏形效果.png
设置选项文字间隔的代码语句
//我随意设定30的间距
configration.itemMargin = 30;//选项之间间隙
稍微画了一个样子(2022-9-3)
乐刻健身App社区模块仿写.png后续会抽空修改并完善加以补充。。。
本文代码已上传GitHub
网友评论