iOS|iOS 仿网易新闻结构
1.首页效果
【iOS|iOS 仿网易新闻结构】
文章图片
2.滑动过程中颜色渐变，文字缩放
文章图片
3.滑动结束边缘标题自动适当居中
文章图片
实现代码：
//
//ViewController.m
//网易新闻
//
//Created by llkj on 2017/11/20.
//Copyright ? 2017年 LayneCheung. All rights reserved.
//#import "ViewController.h"
#import "TopLineViewController.h"
#import "HotViewController.h"
#import "VideoViewController.h"
#import "SocietyViewController.h"
#import "TechViewController.h"
#import "ReadViewController.h"#define ScreenW [UIScreen mainScreen].bounds.size.width
#define ScreenH [UIScreen mainScreen].bounds.size.height@interface ViewController ()
/** 标题scrollView */
@property (nonatomic, weak) UIScrollView *titleScrollView;
/** 内容scrollView */
@property (nonatomic, weak) UIScrollView *contentScrollView;
/** 标题数组 */
@property (nonatomic, strong) NSArray *titles;
/** 上一次点击选中的按钮 */
@property (nonatomic, weak) UIButton *previousClickButton;
/** 保存所有标题按钮的数组 */
@property (nonatomic, strong) NSMutableArray *titleButtons;
@end@implementation ViewController#pragma mark - 懒加载
- (NSMutableArray *)titleButtons {
if (_titleButtons == nil) {
_titleButtons = [NSMutableArray array];
}
return _titleButtons;
}
- (NSArray *)titles {
if (_titles == nil) {
_titles = @[@"头条", @"热点", @"视频", @"社会", @"订阅", @"科技",];
}
return _titles;
}- (void)viewDidLoad {
[super viewDidLoad];
self.navigationItem.title = @"网易新闻";
//1.添加标题滚动视图
[self setupTitleScrollView];
//2.添加内容滚动视图
[self setupContentScrollView];
//3.添加所有子控制器
[self setupAllChildVC];
//4.设置所有标题
[self setupAllTitle];
}#pragma mark -
//滚动完成调用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
//获取当前角标
NSInteger i = scrollView.contentOffset.x / scrollView.frame.size.width;
//获取标题按钮
UIButton *titleButton = self.titleButtons[i];
//1.选中标题
[self selectedButton:titleButton];
//2.把对应子控制器的View添加上去
[self addOneViewController:i];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
//字体缩放//1.获得左边按钮
NSInteger leftI = scrollView.contentOffset.x / ScreenW;
;
UIButton *leftButton = self.titleButtons[leftI];
//2.获得右边按钮
NSInteger rightI = leftI + 1;
UIButton *rightButton;
if (rightI < self.titleButtons.count) {
rightButton = self.titleButtons[rightI];
}
// 0 ~ 1 => 1 ~ 1.2
CGFloat scaleR = scrollView.contentOffset.x / ScreenW;
scaleR -= leftI;
CGFloat scaleL = 1 - scaleR;
//3.缩放按钮
leftButton.transform = CGAffineTransformMakeScale(scaleL * 0.2 + 1, scaleL * 0.2 + 1);
rightButton.transform = CGAffineTransformMakeScale(scaleR * 0.2 + 1, scaleR * 0.2 + 1);
//4.颜色渐变
UIColor *rightColor = [UIColor colorWithRed:scaleR green:0 blue:0 alpha:1];
UIColor *leftColor = [UIColor colorWithRed:scaleL green:0 blue:0 alpha:1];
[rightButton setTitleColor:rightColor forState:UIControlStateNormal];
[leftButton setTitleColor:leftColor forState:UIControlStateNormal];
}
#pragma mark - 设置所有标题
- (void)setupAllTitle {// 添加所有标题按钮
CGFloat btnX = 0;
CGFloat btnW = 100;
CGFloat btnH = self.titleScrollView.frame.size.height;
for (NSInteger i = 0;
i < self.titles.count;
i++) {
UIButton *titleButton = [UIButton buttonWithType:UIButtonTypeCustom];
titleButton.tag = i;
btnX = i * btnW;
titleButton.frame = CGRectMake(btnX, 0, btnW, btnH);
[titleButton setTitle:self.titles[i] forState:UIControlStateNormal];
[titleButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[titleButton addTarget:self action:@selector(titleButtonClick:) forControlEvents:UIControlEventTouchUpInside];
[self .titleScrollView addSubview:titleButton];
//把按钮保存在titleButtons数组中
[self.titleButtons addObject:titleButton];
if (i == 0) {//默认选中第0个标题
[self titleButtonClick:titleButton];
}
}
self.titleScrollView.contentSize = CGSizeMake(self.titles.count * btnW, 0);
self.contentScrollView.contentSize = CGSizeMake(self.titles.count * ScreenW, 0);
}
#pragma mark - 选中按钮
- (void)selectedButton:(UIButton *)button {
self.previousClickButton.transform = CGAffineTransformIdentity;
[self.previousClickButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
//标题居中
[self setupTitleCenter:button];
//字体缩放
button.transform = CGAffineTransformMakeScale(1.2, 1.2);
self.previousClickButton = button;
}
#pragma mark - 标题居中
- (void)setupTitleCenter:(UIButton *)button {
//修改titleScrollView的偏移量
CGFloat offSetX = button.center.x - ScreenW * 0.5;
if (offSetX < 0) {
offSetX = 0;
}
CGFloat maxOffsetX = self.titleScrollView.contentSize.width - ScreenW;
if (offSetX > maxOffsetX) {
offSetX = maxOffsetX;
}
[self.titleScrollView setContentOffset:CGPointMake(offSetX, 0) animated:YES];
}
#pragma mark - 加载对应子控制器View
- (void)addOneViewController:(NSInteger)i {
UIViewController *childVC = self.childViewControllers[i];
//如果View已经被加载直接返回
//if (childVC.view.superview) return;
if (childVC.viewIfLoaded) return;
//ios 9.0之后可以使用
CGFloat childViewW = self.contentScrollView.bounds.size.width;
CGFloat childViewH = self.contentScrollView.bounds.size.height;
;
CGFloat childViewX = i * childViewW;
childVC.view.frame = CGRectMake(childViewX, 0, childViewW, childViewH);
[self.contentScrollView addSubview:childVC.view];
}
#pragma mark - 标题点击
- (void)titleButtonClick:(UIButton *)titleButton {
// 1.标题颜色变红
[self selectedButton:titleButton];
// 2.加载对应子控制器View
[self addOneViewController:titleButton.tag];
// 3.内容滚动视图滚动到对应的位置
self.contentScrollView.contentOffset = CGPointMake(titleButton.tag * self.contentScrollView.bounds.size.width, 0);
}
#pragma mark - 添加所有子控制器
- (void)setupAllChildVC {
//注意:控制器加载的顺序要和titles中的一一对应，顺序和数量自己也可以调整
// 头条
[self addChildViewController:[[TopLineViewController alloc] init]];
// 热点
[self addChildViewController:[[HotViewController alloc] init]];
// 视频
[self addChildViewController:[[VideoViewController alloc] init]];
// 社会
[self addChildViewController:[[SocietyViewController alloc] init]];
// 订阅
[self addChildViewController:[[ReadViewController alloc] init]];
// 科技
[self addChildViewController:[[TechViewController alloc] init]];
}
#pragma mark - 添加标题滚动视图
- (void)setupTitleScrollView {
//创建titleScrollView
UIScrollView *titleScrollView = [[UIScrollView alloc] init];
CGFloat y = self.navigationController.navigationBarHidden ? 20 : 64;
titleScrollView.frame = CGRectMake(0, y, ScreenW, 44);
titleScrollView.showsHorizontalScrollIndicator = NO;
[self.view addSubview:titleScrollView];
_titleScrollView = titleScrollView;
}
#pragma mark - 添加内容滚动视图
- (void)setupContentScrollView {
//创建contentScrollView
UIScrollView *contentScrollView = [[UIScrollView alloc] init];
CGFloat y = CGRectGetMaxY(self.titleScrollView.frame);
contentScrollView.frame = CGRectMake(0, y, ScreenW, ScreenH - y);
contentScrollView.pagingEnabled = YES;
contentScrollView.showsHorizontalScrollIndicator = NO;
contentScrollView.bounces = NO;
contentScrollView.delegate = self;
[self.view addSubview:contentScrollView];
_contentScrollView = contentScrollView;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
推荐阅读
- 2020-04-07vue中Axios的封装和API接口的管理
- iOS中的Block
- 记录iOS生成分享图片的一些问题，根据UIView生成固定尺寸的分享图片
- 2019-08-29|2019-08-29 iOS13适配那点事
- Hacking|Hacking with iOS: SwiftUI Edition - SnowSeeker 项目（一）
- iOS面试题--基础
- 接口|axios接口报错-参数类型错误解决
- iOS|iOS 笔记之_时间戳 + DES 加密
- iOS，打Framework静态库
- 常用git命令总结