iOS仿热门话题热点轮播界面tableView

废话不多说直接上代码:

这个功能应该是挺常见的, 一个tableView到另一个tableView, 类似segment的一个东西, 我把它封装起来了:

//
// ViewController.m
//
//
// Created by 高雅馨 on 16/6/3.
// Copyright © 2016年 高雅馨. All rights reserved.
//

#import "DCNavTabBarController.h"
#import "HTMacro.h"

@interface DCNavTabBarController ()<UIScrollViewDelegate>
@property (nonatomic, weak) UIButton *oldBtn;
@property(nonatomic,strong) NSArray *VCArr;
@property (nonatomic, weak) UIScrollView *contentView;
@property (nonatomic, weak) UIScrollView *topBar;
@property(nonatomic,assign) CGFloat btnW ;
@property (nonatomic, weak) UIView *slider;

@end

@implementation DCNavTabBarController
-(UIColor *)sliderColor
{
 if(_sliderColor == nil)
 {
  _sliderColor = [UIColor colorWithRed:1.00 green:0.36 blue:0.25 alpha:1.00];
 }
 return _sliderColor;
}
-(UIColor *)btnTextNomalColor
{
 if(_btnTextNomalColor == nil)
 {
  _btnTextNomalColor = [UIColor colorWithWhite:0.205 alpha:1.000];
 }
 return _btnTextNomalColor;
}
-(UIColor *)btnTextSeletedColor
{
 if(_btnTextSeletedColor == nil)
 {
  _btnTextSeletedColor = [UIColor colorWithRed:1.00 green:0.36 blue:0.25 alpha:1.00];
 }
 return _btnTextSeletedColor;
}
-(UIColor *)topBarColor
{
 if(_topBarColor == nil)
 {
  _topBarColor = [UIColor whiteColor];
 }
 return _topBarColor;
}
-(instancetype)initWithSubViewControllers:(NSArray *)subViewControllers
{
 if(self = [super init])
 {
  _VCArr = subViewControllers;
 }
 return self;
}
- (void)viewDidLoad {
 [super viewDidLoad];
 //添加上面的导航条
 [self addTopBar];
 //添加子控制器
 [self addVCView];
 //添加滑块
 [self addSliderView];
}
-(void)addSliderView
{
 if(self.VCArr.count == 0) return;
 UIView *slider = [[UIView alloc]initWithFrame:CGRectMake(25,41,self.btnW - 50, 3)];
 slider.backgroundColor = self.sliderColor;
 [self.topBar addSubview:slider];
 self.slider = slider;
}
-(void)addTopBar
{
 if(self.VCArr.count == 0) return;
 NSUInteger count = self.VCArr.count;
 UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 44)];
 scrollView.backgroundColor = self.topBarColor;
 self.topBar = scrollView;
 self.topBar.bounces = NO;
 [self.view addSubview:self.topBar];
 if(count <= 5) {
   self.btnW = SCREEN_WIDTH / count;
 } else {
   self.btnW = SCREEN_WIDTH / 5.0;
 }
 //添加button
 for (int i = 0; i<count; i++) {
  UIViewController *vc = self.VCArr[i];
  UIButton *btn = [[UIButton alloc]initWithFrame:CGRectMake(i*self.btnW, 0, self.btnW, 44)];
  btn.titleLabel.font = [UIFont systemFontOfSize:15];
  btn.titleLabel.numberOfLines = 0;
  btn.titleLabel.textAlignment = 1;
  btn.tag = 10000+i;
  [btn setTitleColor:self.btnTextNomalColor forState:UIControlStateNormal];
  [btn setTitleColor:self.btnTextSeletedColor forState:UIControlStateSelected];
  [btn setTitle:vc.title forState:UIControlStateNormal];
  [btn addTarget:self action:@selector(click:) forControlEvents:UIControlEventTouchUpInside];
  [self.topBar addSubview:btn];
  if(i == 0)
  {
   btn.selected = YES;
   self.oldBtn = btn;
  }
}
 self.topBar.contentSize = CGSizeMake(self.btnW *count, -64);
}
-(void)addVCView
{
 UIScrollView *contentView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0+44, SCREEN_WIDTH, SCREEN_HEIGHT -44)];
 self.contentView = contentView;
 self.contentView.bounces = NO;
 contentView.delegate = self;
 contentView.backgroundColor = [UIColor colorWithWhite:0.859 alpha:1.000];
 [self.view addSubview:contentView];

 NSUInteger count = self.VCArr.count;
 for (int i=0; i<count; i++) {
  UIViewController *vc = self.VCArr[i];
  [self addChildViewController:vc];
  vc.view.frame = CGRectMake(i*SCREEN_WIDTH, 0, SCREEN_WIDTH, SCREEN_HEIGHT -44);
  [contentView addSubview:vc.view];
 }
 contentView.contentSize = CGSizeMake(count*SCREEN_WIDTH, SCREEN_HEIGHT - 44);
 contentView.pagingEnabled = YES;
}
-(void)click:(UIButton *)sender
{
 if(sender.selected) return;
 self.oldBtn.selected = NO;
 sender.selected = YES;
 self.contentView.contentOffset = CGPointMake((sender.tag - 10000) *SCREEN_WIDTH, 0);
  self.oldBtn.transform = CGAffineTransformIdentity;
 self.oldBtn = sender;

 //判断导航条是否需要移动
 CGFloat maxX = CGRectGetMaxX(self.slider.frame);
 if(maxX >=SCREEN_WIDTH && sender.tag != self.VCArr.count + 10000 - 1)
 {
  [UIView animateWithDuration:0.3 animations:^{
   self.topBar.contentOffset = CGPointMake(maxX - SCREEN_WIDTH + self.btnW, -64);
  }];
 }else if(maxX < SCREEN_WIDTH)
 {
  [UIView animateWithDuration:0.3 animations:^{
   self.topBar.contentOffset = CGPointMake(0, 0);
  }];
 }
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
 //滑动导航条
 self.slider.frame = CGRectMake(scrollView.contentOffset.x / SCREEN_WIDTH *self.btnW + 25 , 41, self.btnW - 50, 3);
}
//判断是否切换导航条按钮的状态
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
 CGFloat offX = scrollView.contentOffset.x;
 int tag = (int)(offX /SCREEN_WIDTH + 0.5) + 10000;
 UIButton *btn = [self.view viewWithTag:tag];
 if(tag != self.oldBtn.tag)
 {
  [self click:btn];
 }
}
- (void)didReceiveMemoryWarning {
 [super didReceiveMemoryWarning];
}
@end

这个很容易看懂的, 是不是, 就不在这里多解释.

上面这张呢, 则是把导航栏隐藏, 自定义一个小UIView截取网络图片作为导航栏, 又自定义一个大View作为tableView头视图.并且我还运用了观察者注册消息通知, 代码有点长, 不过我写注释了哦, 可以看懂的.

//
// BookMarksViewController.m
// HotTopic
//
// Created by dllo on 16/9/7.
// Copyright © 2016年 高雅馨. All rights reserved.
//

#import "BookMarksViewController.h"
#import "HTMacro.h"
#import "UIView+Extension.h"
#import "BookTableViewCell.h"
#import "EssayViewController.h"
#import "SubscriberViewController.h"
#import "UMSocial.h"
#import "DCNavTabBarController.h"
#import "UIImageView+WebCache.h"
#import "AFNetworking.h"
#import "HotTopicsModel.h"
#import "TopicModel.h"
#import "NodeModel.h"
#import "UserModel.h"
#import "Source.h"
#import "DisposeViewController.h"
#import "HeadImageView.h"
static CGFloat const headViewHeight = 280;
@interface BookMarksViewController ()<UITableViewDelegate,UITableViewDataSource>
@property (nonatomic, strong) BookTableViewCell * mainTableView;
@property (nonatomic, strong) HeadImageView * headImageView;//头部图片
@property (nonatomic, strong) UIImageView * avatarImage;
@property (nonatomic, strong) UILabel * countentLabel;
@property (nonatomic, strong) UIImageView *img;
@property (nonatomic, strong) HotTopicsModel *hotTopic;
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, assign) BOOL canScroll;
@property (nonatomic, assign) BOOL isTopIsCanNotMoveTabView;
@property (nonatomic, assign) BOOL isTopIsCanNotMoveTabViewPre;
@property (nonatomic, strong) UIView *barView;
@property (nonatomic, strong) UILabel *titleText;

@end

@implementation BookMarksViewController
@synthesize mainTableView;

- (void)viewWillAppear:(BOOL)animated {
 [super viewWillAppear:animated];
 [self.navigationController setNavigationBarHidden:YES];
}
- (void)viewDidLoad {
 [super viewDidLoad];
// 这个api功能就是在NavigationController堆栈内的UIViewController可以支持右滑手势,也就是不用点击右上角的返回按钮,轻轻在屏幕左边一
滑,屏幕就会返回,随着ios设备屏幕的增大,这个小功能让手指短,拇指大和手残人士看到了福音。
 self.navigationController.interactivePopGestureRecognizer.delegate = (id)self;
 [self.navigationController setNavigationBarHidden:YES];
 self.automaticallyAdjustsScrollViewInsets = NO;
 [self.view addSubview:self.mainTableView];
 // 设置tableView头视图
 self.mainTableView.tableHeaderView = self.headImageView;
 // 将导航栏隐藏使其变为透明
 [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
 // 将导航栏那条黑线隐藏
 [self.navigationController.navigationBar setShadowImage:[UIImage new]];
 /** 观察者注册消息通知 */
 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(leaveTop:) name:@"leaveTop" object:nil];
 [self creatView];
}
// 把导航栏写成自定义View
- (void)creatView {
 _barView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 64)];
 UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
 backButton.frame = CGRectMake(10, 30, 30, 30);
 [backButton setImage:[UIImage imageNamed:@"backBar"] forState:UIControlStateNormal];
 [backButton addTarget:self action:@selector(clickBackBtn:) forControlEvents:UIControlEventTouchUpInside];
 UIButton *shareBtn = [UIButton buttonWithType:UIButtonTypeCustom];
 shareBtn.frame = CGRectMake(SCREEN_WIDTH - 50, 30, 30, 30);
 [shareBtn setImage:[UIImage imageNamed:@"shareBar"] forState:UIControlStateNormal];
 [shareBtn addTarget:self action:@selector(clickShareBtn:) forControlEvents:UIControlEventTouchUpInside];
 _titleText = [[UILabel alloc] initWithFrame:CGRectMake(50, 30, SCREEN_WIDTH - 100, 30)];
 _titleText.text = @"收藏夹";
 _titleText.textAlignment = 1;
 _titleText.textColor = [UIColor whiteColor];
 // 毛玻璃效果
 UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
 UIVisualEffectView *effectview = [[UIVisualEffectView alloc] initWithEffect:blur];
 effectview.backgroundColor = [UIColor colorWithWhite:0.508 alpha:1.000];
 effectview.alpha = 0.65;
 effectview.frame = CGRectMake(0, 0, SCREEN_WIDTH, 64);
 [_barView addSubview:effectview];
 [_barView addSubview:backButton];
 [_barView addSubview:shareBtn];
 [_barView addSubview:_titleText];
 [self.view addSubview:_barView];
}
/**
 * notificationObserver 观察者 : self
 * notificationSelector 处理消息的方法名: getUserProfileSuccess
 * notificationName 消息通知的名字: Notification_GetUserProfileSuccess
 * notificationSender 消息发送者 : 表示接收哪个发送者的通知,如果第四个参数为nil,接收所有发送者的通知
 */
- (void)leaveTop:(NSNotification *)notification{
 NSDictionary *userInfo = notification.userInfo;
 NSString *canScroll = userInfo[@"canScroll"];
 if ([canScroll isEqualToString:@"1"]) {
  _canScroll = YES;
 }
}
/** 将自定义View的背景图设置tableView头视图的背景图*/
- (UIImage *)clipImageInOffsetY:(CGFloat)y
{
 if (_headImageView.image == nil) {
  return [UIImage new];
 }
 CGRect rect = CGRectMake(0, y, SCREEN_WIDTH, 64);
 CGImageRef imageRef = CGImageCreateWithImageInRect([_headImageView.image CGImage], rect);
 self.blurView.frame = CGRectMake(0, 0, SCREEN_WIDTH, 64);
 self.blurView.alpha = 0.7;
 [self.navigationController.navigationBar addSubview:_blurView];
 UIImage *thumbScale = [UIImage imageWithCGImage:imageRef];
 return thumbScale;
}
// 用scrollView的偏移量来判断
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
 CGFloat yOffset = scrollView.contentOffset.y;
 if (yOffset >= _headImageView.height - 64) {
  yOffset = _headImageView.height - 64;
 }
 UIImage *image = [self clipImageInOffsetY:yOffset];
 _barView.backgroundColor = [UIColor colorWithPatternImage:image];
 //获取滚动视图y值的偏移量
 self.navigationController.navigationBar.alpha = (headViewHeight+yOffset)/(headViewHeight-64);
 CGFloat tabOffsetY = [mainTableView rectForSection:0].origin.y - 64.0f;
 CGFloat offsetY = scrollView.contentOffset.y;
 _isTopIsCanNotMoveTabViewPre = _isTopIsCanNotMoveTabView;
 if (offsetY >= tabOffsetY) {
  //不能滑动
  scrollView.contentOffset = CGPointMake(0, tabOffsetY);
  _isTopIsCanNotMoveTabView = YES;
  _titleText.text = self.urlTitle;
 }else{
  //可以滑动
  _isTopIsCanNotMoveTabView = NO;
  _titleText.text = @"收藏夹";
 }
 if (_isTopIsCanNotMoveTabView != _isTopIsCanNotMoveTabViewPre) {
  if (!_isTopIsCanNotMoveTabViewPre && _isTopIsCanNotMoveTabView) {
   [[NSNotificationCenter defaultCenter] postNotificationName:@"goTop" object:nil userInfo:@{@"canScroll":@"1"}];
   _canScroll = NO;
  }
  if(_isTopIsCanNotMoveTabViewPre && !_isTopIsCanNotMoveTabView){
   if (!_canScroll) {
    scrollView.contentOffset = CGPointMake(0, tabOffsetY);
   }
  }
 }

}
// 头视图
- (UIImageView *)headImageView
{
 if (_headImageView == nil)
 {
  _headImageView = [[HeadImageView alloc]initWithFrame:CGRectMake(0, 0,SCREEN_WIDTH,headViewHeight)];
  _headImageView.userInteractionEnabled = YES;
  [_headImageView sd_setImageWithURL:[NSURL URLWithString:self.urlHeadImg] placeholderImage:[UIImage imageNamed:@"touxiang"]completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {

  }];
  UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
  UIVisualEffectView *effectview = [[UIVisualEffectView alloc] initWithEffect:blur];
  effectview.backgroundColor = [UIColor colorWithWhite:0.508 alpha:1.000];
  effectview.alpha = 0.7;
  effectview.frame = CGRectMake(0, 0, SCREEN_WIDTH, headViewHeight);
  [_headImageView addSubview:effectview];
  self.navigationController.hidesBarsOnSwipe = NO;
  _avatarImage = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20 + 64, SCREEN_WIDTH / 3.3, SCREEN_WIDTH / 3.3)];
  [_headImageView addSubview:_avatarImage];
  _avatarImage.userInteractionEnabled = YES;
  _avatarImage.layer.masksToBounds = YES;
  [ _avatarImage sd_setImageWithURL:[NSURL URLWithString:self.urlHeadImg] placeholderImage:[UIImage imageNamed:@"detailViewDefaultMidImage"]];
  _countentLabel = [[UILabel alloc] initWithFrame:CGRectMake(_avatarImage.frame.size.width + 40, 20 + 64, SCREEN_WIDTH - (SCREEN_WIDTH / 3 + 20 + 10), _avatarImage.frame.size.height / 4)];
  _countentLabel.font = [UIFont systemFontOfSize:15];
  _countentLabel.textColor = [UIColor whiteColor];
  _countentLabel.lineBreakMode = NSLineBreakByWordWrapping;
  _countentLabel.numberOfLines = 0;
  _countentLabel.text = self.urlTitle;
  [_headImageView addSubview:_countentLabel];

  _img = [[UIImageView alloc] initWithFrame:CGRectMake(_countentLabel.frame.origin.x, _countentLabel.frame.size.height + _avatarImage.frame.origin.y + 10, 30, 30)];
  _img.layer.cornerRadius = 15;
  _img.layer.masksToBounds = YES;
  _img.backgroundColor = [UIColor yellowColor];
  [_headImageView addSubview:_img];
  _titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(_img.frame.size.width + _img.frame.origin.x + 5, _img.frame.origin.y, SCREEN_WIDTH / 1.9 , 30)];
  _titleLabel.textColor = [UIColor whiteColor];
  _titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
  _titleLabel.numberOfLines = 0;
  _titleLabel.font = [UIFont systemFontOfSize:12];
  [_headImageView addSubview:_titleLabel];
  UILabel *contextLabel = [[UILabel alloc] initWithFrame:CGRectMake(_img.frame.origin.x , _img.frame.origin.y + _img.frame.size.height + 6, SCREEN_WIDTH / 2 , SCREEN_WIDTH / 8)];
  contextLabel.textColor = [UIColor whiteColor];
  contextLabel.text = self.urlContect;
  contextLabel.lineBreakMode = NSLineBreakByWordWrapping;
  contextLabel.numberOfLines = 0;
  contextLabel.font = [UIFont systemFontOfSize:12];
  [_headImageView addSubview:contextLabel];
  UIButton *takeBtn = [UIButton buttonWithType:UIButtonTypeSystem];
  takeBtn.frame = CGRectMake(_img.frame.origin.x - 20 , contextLabel.frame.size.height + contextLabel.frame.origin.y + 10, SCREEN_WIDTH / 4, _avatarImage.frame.size.height / 3.2);
  [takeBtn setTitle:@"+ 订阅" forState:UIControlStateNormal];
  [takeBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
  takeBtn.backgroundColor = [UIColor colorWithRed:1.00 green:0.36 blue:0.25 alpha:1.00];
  takeBtn.titleLabel.font = [UIFont systemFontOfSize:14];
  takeBtn.layer.cornerRadius = 10;
  [_headImageView addSubview:takeBtn];
  UIButton *contributeBtn = [UIButton buttonWithType:UIButtonTypeSystem];
  contributeBtn.frame = CGRectMake(takeBtn.frame.origin.x + takeBtn.frame.size.width + 5, contextLabel.frame.size.height + contextLabel.frame.origin.y + 10, SCREEN_WIDTH / 8, _avatarImage.frame.size.height / 3.2);
  [contributeBtn setTitle:@"投稿" forState:UIControlStateNormal];
  [contributeBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
  contributeBtn.layer.borderWidth = 1.0;
  contributeBtn.titleLabel.font = [UIFont systemFontOfSize:14];
  contributeBtn.layer.borderColor = [UIColor whiteColor].CGColor;
  contributeBtn.layer.cornerRadius = 5;
  [_headImageView addSubview:contributeBtn];
  UIButton *manageLabel = [[UIButton alloc] initWithFrame:CGRectMake(contributeBtn.frame.size.width + contributeBtn.frame.origin.x, contributeBtn.frame.origin.y + 5, SCREEN_WIDTH / 5 , 30)];
  [manageLabel setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
  [manageLabel setTitle:@"0未处理☞" forState:UIControlStateNormal];
  manageLabel.titleLabel.textAlignment = 0;
  manageLabel.titleLabel.font = [UIFont systemFontOfSize:12];
  [manageLabel addTarget:self action:@selector(clickManageBtn:) forControlEvents:UIControlEventTouchUpInside];
  [_headImageView addSubview:manageLabel];

 }
 return _headImageView;
}
// 大tableView
-(UITableView *)mainTableView
{
 if (mainTableView == nil)
 {
  mainTableView= [[BookTableViewCell alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH,SCREEN_HEIGHT)];
  mainTableView.delegate = self;
  mainTableView.dataSource=self;
  mainTableView.bounces = NO;
  mainTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
  mainTableView.showsVerticalScrollIndicator = NO;
  mainTableView.backgroundColor = [UIColor clearColor];
  mainTableView.rowHeight = SCREEN_HEIGHT;
 }
 return mainTableView;
}

#pragma marl -tableDelegate
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
 return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
 return 1;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
 return SCREEN_HEIGHT;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
 UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
 cell.selectionStyle = UITableViewCellSelectionStyleNone;
 //添加pageView
 [cell.contentView addSubview:self.setPageViewControllers];
 return cell;
}
// 调用两个小VC
-(UIView *)setPageViewControllers{
 EssayViewController *essay = [[EssayViewController alloc] init];
 essay.urlStr = self.urlStr;
 essay.title = [NSString stringWithFormat:@"文章\n%@", self.articleCount];
 SubscriberViewController *subscribe = [[SubscriberViewController alloc] init];
 subscribe.urlStr = self.urlStr;
 subscribe.title = [NSString stringWithFormat:@"订阅者\n%@", self.subscriberCount];
 NSArray *subViewControllers=@[essay, subscribe];
 DCNavTabBarController *tabBarVC = [[DCNavTabBarController alloc]initWithSubViewControllers:subViewControllers];
 tabBarVC.view.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
 [self.view addSubview:tabBarVC.view];
 [self addChildViewController:tabBarVC];
 return tabBarVC.view;
}
@end

写到这里, 就完成了, 下面让我们来看一下成果吧!

是不是特别棒呢, 喜欢的话就来试试看吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS开发中使用UIScrollView实现图片轮播和点击加载

    UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 复制代码 代码如下: #import "YYViewController.h" @interface YYViewController () <UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; /**  *  页码  */ @pro

  • IOS使用UICollectionView实现无限轮播效果

    一.案例演示 本案例Demo演示的是一个首页轮播的案例,支持手动轮播和自动轮播.知识点主要集中在UICollectionView和NSTimer的使用. 二.知识储备 2.1.UICollectionView横向布局 只需要设置UICollectionViewFlowLayout的scrollDirection为UICollectionViewScrollDirectionHorizontal即可. 2.2.NSTimer的基本使用 NSTimer的初始化: 复制代码 代码如下: + (NSTi

  • iOS实现图片轮播效果

    本文实例为大家分享了IOS图片轮播效果的实现过程,供大家参考,具体内容如下 平时APP中的广告位或者滚动的新闻图片等用到的就是图片轮播这种效果,实现方式主要有两种,一种ScrollView+ImageView,另一种则是通过CollectionView,今天总结的是ScrollView这种方式. 1.图片轮播效果实现 主要实现思路是:根据图片总数及宽高设置好ScrollView的大小,每切换一张图片相当于在ScrollView上进行一个图片宽度的移动行为,并加入定时器,实现自动轮播. 如图所示,

  • 一行iOS代码实现图片无限轮播器

    最近一直在找实现图片无限轮播的方法,在网上也看了不少方法,大都不太合适,最终看到某IT培训公司一位讲师用 UICollectionView:一行代码实现图片无限轮播器的方法,当然想一行代码实现轮播功能,前期还是有一些工作要做.下面就把这个方法分享给大家! 一.图片无限轮播实现效果图: 图片无限轮播.gif 二.实现原理与分析: 假设有三张图片0.1.2,想要实现无限轮播,我们可以将UICollectionView的cell个数设为图片的个数 x 3,也就是把三张图片重复添加到9个cell中,可以

  • iOS实现轮播图banner示例

    楼主项目中需要有一个轮播图,因为比较简单,就自己写了个,因为是从网上弄得图片 所以用了SDWebImage 这个三方库 当然自己也可以去掉 类型后面有*号 如用使用 请自行加上..... 代码:.h 文件 @protocol TJXViewDelegate<NSObject> //判断点击的那个 -(void)sendImageName:(TJXView *)TJXView andName:(NSInteger)selectImage; @end @interface TJXView : UI

  • IOS实现图片轮播无限循环效果

    本文接着上篇文章进行叙述讲解,主要为大家分享了图片轮播无限循环效果的实现方法,具体内容如下 之前说到第一个问题,ScrollView移动到最后一张图片时无法移动了,这是因为ScrollView已经移动到最后,而图片又是依次排列,自然也就无法移动. 解决办法是,我们换一个思路实现图片轮播效果,ScrollView上只放三个ImageView,屏幕始终显示中间的ImageView,左边和右边的ImageView分别代表前一张图片和后一张图片,屏幕移动的时候,中间的ImageView变化,同时左右两边

  • iOS实现无限循环图片轮播器的封装

    项目中很多时候会碰到这个需求,实现多张图片的无限循环轮转,以前做过,项目中几个地方的都用到了,当时没有封装,几个地方都拷贝几乎一样的代码,代码复用性不好,今天没事封装了一下,使用起来比较简单. 首先,说说我实现循环轮转图片的思想,在UIScrollView中添加了3个UIImageView,并排排列,我们看到的永远只是第二个UIImageView,这样的话,你一直可以向左,向右滑动,当你向左滑动是,这是你滑动到了最后一个UIImageView不能在向左边滑动了,这时,我在后面悄悄的将第二个UII

  • IOS图片无限轮播器的实现原理

    首先实现思路:整个collectionView中只有2个cell.中间始终显示第二个cell. 滚动:向前滚动当前cell的脚标为0,向后滚动当前的cell脚标为2.利用当前cell的脚标减去1,得到+1,或者-1,来让图片的索引加1或者减1,实现图片的切换. 声明一个全局变量index来保存图片的索引,用来切换显示在当前cell的图片. 在滚动前先让显示的cell的脚标变为1.代码viewDidLoad中设置 完成一次滚动结束后,代码再设置当前的cell为第二个cell(本质上就是让当前显示的

  • iOS仿热门话题热点轮播界面tableView

    废话不多说直接上代码: 这个功能应该是挺常见的, 一个tableView到另一个tableView, 类似segment的一个东西, 我把它封装起来了: // // ViewController.m // // // Created by 高雅馨 on 16/6/3. // Copyright © 2016年 高雅馨. All rights reserved. // #import "DCNavTabBarController.h" #import "HTMacro.h&qu

  • iOS 仿微博客户端红包加载界面 XLDotLoading效果

    一.显示效果 二.原理简介 1.思路 要实现这个效果需要先知道这两个硬币是怎样运动的,然后通过放大.缩小的效果实现的这种有距离感的效果.思路如下: 一.这两个硬币是在一定范围内做相对运动的,可以先使一个硬币在一个固定范围内做左右的往复运动,另一个硬币和它做"相对运动"即可. 二.让硬币从左至右移动时先变小再回复正常:从右至左移动时先变大再回复正常:这样就实现了这用有距离感的"相对运动". 2.代码 第一步 要实现一个硬币在一定范围内实现左右往复运动,需要先固定一个范

  • iOS实现3D卡片式轮播效果

    本文实例为大家分享了iOS实现3D卡片式轮播效果的具体代码,供大家参考,具体内容如下 效果: 参考UITableView的UITableViewDataSource和UITableViewDelegate两个方法实现:支持五险轮播,可以加载本地图片,也可以加载网络图片,可以根据自己的需求自定义 Demo地址 UITableViewDelegate /** * 当前显示cell的Size(中间页显示大小) * * @param flowView <#flowView description#>

  • 基于jquery实现的仿优酷图片轮播特效代码

    本文为大家分享了一种常见的并且比较复杂的轮播效果,就是优酷主界面的轮播图,效果图如下: 我们在书写代码之前,先分析效果图的结构: 1. 左右两个方向按钮,可以用来切换上一张与下一张. 2. 下方有分页指示器,用来标注滚动到了第几张,当然,你点击对应的按钮,也可以跳转到对应的图片. 3. 中间主要显示区域就是用来摆放需要轮播的图片. 根据上面描述,我们首先可以书写HTML代码. 一.HTML代码 <body> <div id="youku"> <div cl

  • 基于jQuery的仿flash的广告轮播代码

    整个页面如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

  • 基于jQuery的仿flash的广告轮播

    整个页面如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

  • 用vue写一个仿简书的轮播图的示例代码

    1.先展示最终效果: 2.解决思路 Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.动画效果交给transition完成.可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示: 3.代码实现 各个slide的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $

  • Android仿京东快报无限轮播效果

    我们常用的京东有一个非常好看的效果: 首页的京东快播有一个无限轮播的公告栏,先看效果: 公告内容大概每3s从中间向上滑出,同时下一条内容从底部向上滑动进入.整个过程还伴随有内容的渐变消失,动画效果很流畅. 采用ViewFlipper来实现更为简单. 看看ViewFlipper类官方注释: Simple {@link ViewAnimator} that will animate between two or more views that have been added to it. Only

  • iOS实现UIScrollView的无限轮播功能(原理)详解

    前言 同学们在写需求的时候肯定会时常用到UIScrollView. UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容 (3)普通的UIView不具备滚动功能,不能显⽰示过多的内容 (4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容 (5) 举例:手机上的"设置"

随机推荐