前言

要实现一个类似淘宝的购物软件的一个界面，这里的第一个界面是无限轮播图，第二个界面是“我的

提示：以下是本篇文章正文内容，下面案例可供参考

一、分栏控制器

要实现这样的主界面，我是通过分栏控制器来实现对两个界面加在一起的实现。
先定义VcFirst和VcSecond两个以UIViewController为父类的子类
这时VcFirst就代表我们要实现的“首页”界面，VcSecond代表我们要实现的"我的"界面

对于两个类的初始化，一定放在SceneDelegate.m中去实现！！！这里一定注意UIWindow的实现

//  SceneDelegate.m
//  Zara
#import "SceneDelegate.h"
#import "VcFirst.h"
#import "VcSecond.h"
@interface SceneDelegate ()@end@implementation SceneDelegate{self.window = [[UIWindow alloc]initWithWindowScene:(UIWindowScene*)scene];[self.window makeKeyAndVisible];
//在SceneDelegate.m中实现对两个类的一些初始化
//设置Color,title,等属性//将两个视图控制器存入数组中
NSArray* arr = [NSArray arrayWithObjects:vc1,vc2, nil];
//创建分栏控制器
UITabBarController* tbc = [[UITabBarController alloc]init];
//将数组添加到分栏控制器中
tbc.viewControllers = arr;
tbc.selectedIndex = 0;
//分栏控制器颜色不透明
tbc.tabBar.translucent = NO;
tbc.view.backgroundColor = [UIColor grayColor];self.window.rootViewController = tbc;
}

二、首页

首页部分我们需要实现的是一个无限轮播图，有按钮上下一张和用手势滑动上下一张的功能。
首先对VcFirst初始化
初始化时要注意宽度应该是屏幕的宽*要添加的图片的张数，长度是屏幕的长度
用循环将图片添加到UIImage里
用UIButton实现对上下一张图片操作的处理
无限轮播：每次按下按钮时判断当前屏幕上显示的图片是第几张，如果是第一张且按下了左翻按钮，则直接跳转到最后一张，如果是最好一张且按下了又翻按钮，直接跳转到第一张

//  VcFirst.m
//  Zara
//#import "VcFirst.h"@interface VcFirst ()@end@implementation VcFirst{vc.frame = CGRectMake(0, 0, 390, 844);vc.pagingEnabled = YES;vc.scrollEnabled = YES;//我使用的虚拟机是iPhone12，添加了5张图片，尺寸我采用了390*5vc.contentSize = CGSizeMake(390*5, 844);vc.bounces = YES;vc.alwaysBounceVertical = NO;vc.alwaysBounceHorizontal = YES;vc.showsVerticalScrollIndicator = YES;vc.showsHorizontalScrollIndicator = NO;vc.backgroundColor = [UIColor redColor];//这是添加图片的代码for(int i = 0;i<5;i++){//%d.jpg是名为（1-5).jpg的五张图片NSString* strName = [NSString stringWithFormat:@"%d.jpg",i+1];UIImage* image = [UIImage imageNamed:strName];UIImageView* iView = [[UIImageView alloc]initWithImage:image];iView.frame = CGRectMake(390*i, 0, 390, 844);[vc addSubview:iView];}[self.view addSubview:vc];//UIButton的实现UIButton* btnLeft1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];btnLeft1.frame = CGRectMake(0, (self.view.frame.size.height-100)/2, 100, 100);UIButton* btnRight1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];btnRight1.frame = CGRectMake((self.view.frame.size.width-100), (self.view.frame.size.height-100)/2, 100, 100);[btnLeft1 setTitle:@"<" forState:UIControlStateNormal];[btnRight1 setTitle:@">" forState:UIControlStateNormal];[btnLeft1 setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];[btnRight1 setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];btnLeft1.titleLabel.font = [UIFont systemFontOfSize:100];btnRight1.titleLabel.font = [UIFont systemFontOfSize:100];[btnLeft1 addTarget:self action:@selector(pressLeft)forControlEvents:UIControlEventTouchUpInside];[btnRight1 addTarget:self action:@selector(pressRight) forControlEvents:UIControlEventTouchUpInside];
}//这是按钮的按压函数-(void)pressLeft{int num = _sv.contentOffset.x/self.view.frame.size.width;_sv.contentOffset = CGPointMake(self.view.frame.size.width*(num-1), 0);NSLog(@"%f",_sv.contentOffset.x);if (num == 0){_sv.contentOffset= CGPointMake(self.view.frame.size.width*4, 0);num = 5;}
}
-(void)pressRight{int num = _sv.contentOffset.x/self.view.frame.size.width;_sv.contentOffset = CGPointMake(self.view.frame.size.width*(num+1), 0);if (num == 4){_sv.contentOffset = CGPointMake(self.view.frame.size.width*1, 0);}
}

这是“首页”的效果

三、我的

在我的界面，主要是使用UITableView控件
需要根据我们的具体需要来自定义cell

//注意.m文件里一定实现这几个函数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{return 7;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {if(indexPath.row == 0){return 100;}else{return 60;}
}

myTableViewCell.m

//这是设置的其中一条的信息
//会员详情代表要现实什么样的文字
//01.png代表我们要添加的图片
_label = [[UILabel alloc] init];_label.text = @"会员详情";[self.contentView addSubview:_label];_imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"01.png"]];[self.contentView addSubview: _imageView];_label.frame = CGRectMake(70, 7, 100, 50);_imageView.frame = CGRectMake(20, 10, 40, 40);

这是“我的”界面的效果

UI——无限轮播图和分栏控制器相关推荐

用JavaScript实现网页无限轮播图效果，附整套源码
用JavaScript实现无限轮播图效果(附源码) javascript群内每日课题-今日课题:用JavaScript实现无限轮播图效果 PS:很多企业通用的案例自己再学习过程中肯定是要熟练的,所以今 ...
无限轮播图三种实现方式
无限轮播图三种实现方式:(源码地址) 1.首尾相接方式: https://github.com/jakajacky/DRScrollerView 2.imageView复用方式: https://gi ...
iOS UI篇——轮播图Banner图片动图混合无限轮播
KJBannerView 介绍一下自己之前写的无限轮播图库,无限自动循环滚动,大家有什么需求可以给我留言,持续更新中- Demo地址:KJBannerViewDemo 功能介绍 KJBannerVie ...
Android之无限轮播图源代码
Android轮播广告图是大家经常用到的一个控件今天便撸了一把代码实现步骤使用Viewpager进行实现图片滑动设置ViewPager的数据,让其无限切换 Activity代码 public c ...
vue element ui 走马灯轮播图（简单几句话实现自动缩放效果）
实现效果 element ui 简单实现轮播图本文,中间叙述的是过程,完整代码在最后面. 最近在写公司官网,用的是element ui 走马灯组件写的轮播图,ui想要自动缩放的效果,如上视频.在这里 ...
dev控件swiftplot图滚动方法_无限轮播图使用Scroller就这么简单
前言这几天又拾起老本行,复习复习Android,才发现忘的差不多了,上午做了一个小Demo,配合Scroller做了一个轮播图,效果如下,但是不知为何,录制的GIF成这样,凑乎一下看看. 原理是继承 ...
swift－自定义无限轮播图
一前言 1.之前一直在用OC编程,最近才开始接触使用swift就发现使用OC越来越不习惯,感觉已经爱上了swift. 2.这个自定义轮播图只是对之前OC版本进行了翻译,欢迎指正. 3.我决定一步步 ...
Android Banner(无限轮播图)控件的简单使用（网络数据OkHttp3）
一言不合就上图 banner是第三方集成好的直接注入依赖就可以用老套路先注入依赖: //banner这个版本才是王道(我的studio是2.3.3)compile 'com.youth.banner ...
微信小程序种利用轮播图实现tab栏切换
js文件 navList: ['推荐', '视频', '热点', '娱乐'],idx: 0},handleChange (e) {var idx = e.target.dataset.idxthis. ...
仿小米商城电脑官网-纯HTML+CSS（含轮播图）
来自作者的话这是我第一次写博客,也是为了激励自己学习,分享一些前端学习的知识,有写的不好的多多包涵.下面是参考的一些博客的链接 https://blog.csdn.net/weixin_439768 ...

UI——无限轮播图和分栏控制器

文章目录

前言

一、分栏控制器

二、首页

三、我的

UI——无限轮播图和分栏控制器相关推荐

最新文章

热门文章