iOS 自定义滑动切换TabBar
貌似经常会用到,自己整理收藏起来,方便日后查找备用。
效果如图:
由于制作gif,调整了属性,所以看起来的效果不好。如果用默认配置,生成的gif会很大。
制作gif:
1.使用QuickTimePlayer ,mac上插上iPhone, 然后进行屏幕录制,但是要选择插上的iPhone,然后会自动在Mac弹出同步的iPhone屏幕,点击录制。
2.使用GIFBrewery,选中录制文件*.mov, 进行生成gif。
代码如下:
#import "XPBaseView.h" @protocol XPDetailTabBarViewDelegate; @interface XPDetailTabBarView : XPBaseView @property (nonatomic,weak) id<XPDetailTabBarViewDelegate> delegate;
/**
* 是否是双语
*/
@property (nonatomic,assign) BOOL isBilingual;
/**
* 是否点赞
*/
@property (nonatomic,assign) BOOL isLike; @end @protocol XPDetailTabBarViewDelegate <NSObject> @optional
- (void)XPDetailTabBarView:(XPDetailTabBarView*)view clickIndex:(NSInteger)index; @end
#import "XPDetailTabBarView.h" @interface XPDetailTabBarView () @property (nonatomic,strong) NSArray *dataImages;
@property (nonatomic,strong) UIView *moveView;
@property (nonatomic,assign) NSInteger moveIndex; @end @implementation XPDetailTabBarView -(void)initData{ } -(void)initSubViews{
self.dataImages = @[@"detail_tab_english",@"icon_like",@"detail_tab_recording",@"detail_tab_quiz",@"detail_tab_myrecord"]; CGFloat itemWidth = SCREEN_WIDTH / self.dataImages.count;
CGFloat itemHeight = 44; self.moveView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, itemWidth, itemWidth)];
self.moveView.backgroundColor = AppStyleThemeOrangeColor;
[self addSubview:self.moveView]; for (int i = 0; i<self.dataImages.count; i++)
{
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.tag = 20000+i;
button.frame = CGRectMake(i*itemWidth, 0, itemWidth, itemHeight);
button.backgroundColor = [UIColor clearColor];
[button setImage:[UIImage imageNamed:[self.dataImages objectAtIndex:i]] forState:UIControlStateNormal];
[button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:button];
}
} -(void)setMoveIndex:(NSInteger)moveIndex{ NSInteger animationType = 1;//1左,2右
if(moveIndex > _moveIndex){
animationType = 2;
} _moveIndex = moveIndex; CGFloat itemWidth = SCREEN_WIDTH / self.dataImages.count;
CGFloat itemHeight = 44; CGRect rect = CGRectMake(moveIndex*itemWidth, 0, itemWidth, itemHeight); WS(weakSelf)
[UIView animateWithDuration:0.2 animations:^{
if (animationType == 2){//右
weakSelf.moveView.frame = CGRectMake(rect.origin.x+2, rect.origin.y, rect.size.width, rect.size.height);
} else if (animationType == 1){//左
weakSelf.moveView.frame = CGRectMake(rect.origin.x-2, rect.origin.y, rect.size.width, rect.size.height);
}
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3 animations:^{
if (animationType == 2){//右
weakSelf.moveView.frame = CGRectMake(rect.origin.x-5, rect.origin.y, rect.size.width, rect.size.height);
} else if (animationType == 1){//左
weakSelf.moveView.frame = CGRectMake(rect.origin.x+5, rect.origin.y, rect.size.width, rect.size.height);
}
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.4 animations:^{
weakSelf.moveView.frame = rect;
} completion:^(BOOL finished) { }];
}];
}];
} - (void)setIsBilingual:(BOOL)isBilingual{
_isBilingual = isBilingual; UIButton *button = [self viewWithTag:20000];
if(isBilingual){
[button setImage:[UIImage imageNamed:@"detail_tab_english"] forState:UIControlStateNormal];
}else{
[button setImage:[UIImage imageNamed:@"detail_tab_bilingual"] forState:UIControlStateNormal];
}
} - (void)setIsLike:(BOOL)isLike{
_isLike = isLike; UIButton *button = [self viewWithTag:20001];
if(isLike){
[button setImage:[UIImage imageNamed:@"icon_like_selected"] forState:UIControlStateNormal];
}else{
[button setImage:[UIImage imageNamed:@"icon_like"] forState:UIControlStateNormal];
}
} - (void)buttonClicked:(UIButton*)button{
NSInteger index = button.tag - 20000; self.moveIndex = index; if(self.delegate && [self.delegate respondsToSelector:@selector(XPDetailTabBarView:clickIndex:)]){
[self.delegate XPDetailTabBarView:self clickIndex:index];
}
}
@end
iOS 自定义滑动切换TabBar的更多相关文章
- iOS 自定义滑动切换TabbarItem 觉得设计丑也要做出来的UI效果。。。
UI丑却要继续做的感言: 对UI不满意的时候,就会觉得丑爆了,时间长了,却丑习惯了. 论前一阵子Tabbar 多丑,丑得最后不要tabbar了...但是自定义tabbar 和遇到的问题解决的过程可以记 ...
- IOS自定义场景切换动画。
IOS中我们可以通过Storyborad以及segue来实现我们自己的场景切换动画,新建项目使用Single View Application模板并取名为MyCustomSegue. 使用storyb ...
- iOS 自定义UITabBarController的tabBar
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDeleg ...
- iOS开发之多表视图滑动切换示例(仿"头条"客户端)---优化篇
前几天发布了一篇iOS开发之多表视图滑动切换示例(仿"头条"客户端)的博客,之所以写这篇博客,是因为一位iOS初学者提了一个问题,简单的写了个demo做了个示范,让其在基础上做扩展 ...
- Android自定义顶部栏及侧滑菜单和fragment+viewpag滑动切换的实现
嘿嘿嘿,关于android滑动的操作,是不是经常都会用到呢. 我肯定也要学习一下啦. https://blog.csdn.net/u013184970/article/details/82882107 ...
- 【iOS自定义键盘及键盘切换】详解
[iOS自定义键盘]详解 实现效果展示: 一.实现的协议方法代码 #import <UIKit/UIKit.h> //创建自定义键盘协议 @protocol XFG_KeyBoardDel ...
- iOS彩票项目--第五天,新特性引导页的封装、返回按钮的自定义、导航控制器的滑动返回以及自定义滑动返回功能
一.上次实现了在AppDelegate中通过判断app版本决定是否进入新特性页面,今天将AppDelegate中的一坨进行了封装.将self.window的根控制器到底应该为新特性界面,还是主页面,封 ...
- WPF 自定义滑动ScrollViewer
自定义滑动滚动条 预期目标:横向滚动条,可以左右滑动,用鼠标按住(触摸)然后释放可以实现快速滑动. 我们有几种方案: 1.ScrollViewer,修改其中的横向滚动条,将其中的背景设置为透明. 但是 ...
- FlexSlider jQuery滑动切换插件 参数
demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...
随机推荐
- 用c#开发微信 (16) 微活动 2 刮刮卡
微信营销是一种新型的营销模式,由于微信更重视用户之间的互动,故而这种营销推广不不能盲目地套用微博营销的单纯大量广告推送方式.这种方式在微信营销中的效果非常差,会令用户反感,继而取消去企业或商家的微信公 ...
- 《JavaScript高级程序设计》学习笔记12篇
写在前面: 这12篇博文不是给人看的,而是用来查的,忘记了什么基础知识,点开页面Ctrl + F关键字就好了 P.S.如果在对应分类里没有找到,麻烦告诉我,以便尽快添上.当然,我也会时不时地添点遗漏的 ...
- 团队项目--站立会议 DAY2
小组名称:D&M 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1,张靖颜:进行了对需求的分析,将项目框架搭建进行完善,辅助编写代码. 2,钟灵毓秀:相关功能的代码的完善,进行一 ...
- SQL Server 重新初始化系统数据库中的单引号问题
在最近的数据库跨机房迁移中,由于硬件的限制,需要滚动式地将数据库一台台迁移到新机房,先在新机房搭建一个新环境,将数据迁移过去,再将旧机房的机器下架搬到新机房,重新配置后用于下一轮的升级,重新配置过程中 ...
- UnicodeDecodeError while using json.dumps()
UnicodeDecodeError 系统.文件.vim全部设置为utf-8 export LANG=zh_CN.UTF8 # coding:utf-8 json.dumps(content, ens ...
- jenkins2 groovy语法
文章来自:http://www.ciandcd.com 文中的代码来自可以从github下载: https://github.com/ciandcd 安装: wget https://dl.bin ...
- oracle违反完整约束条件
oracle违反完整约束条件 Oracle ORA-02292: 违反完整约束条件 (UNITELE.TA_SUB_REFERENCE3) - 已找到子记录 A表被B表引用,删除A表的时候提示ORA- ...
- python web框架——扩展Django&tornado
一 Django自定义分页 目的:自定义分页功能,并把它写成模块(注意其中涉及到的python基础知识) models.py文件 # Create your models here. class Us ...
- Leetcode 125 Valid Palindrome 字符串处理
题意:判断字符串是否是回文字符串 先将所有的字母和数字字符保留,并将大写字母转化成小写字母,然后将字符串倒置,比较前后两个字符串是否相同. 该题最好的解法可以模仿 Leetcode 345 Rever ...
- Leetcode 200 Number of Islands DFS
统计联通区域块的个数,简单dfs,请可以参考DFS框架:Leetcode 130 Surrounded Regions DFS class Solution { public: int m, n; b ...