iOS常用技术-微信下标栏
1 // 2 // Header.h 3 // 04-TabBar 4 // 5 // Created by andezhou on 16/1/6. 6 // Copyright (c) 2016年 周安德. All rights reserved. 7 // 8 9 // 屏幕高度 10 #define kViewHeight [UIScreen mainScreen].bounds.size.height 11 // 屏幕宽度 12 #define kViewWidth [UIScreen mainScreen].bounds.size.width 13 // RGB颜色 14 #define RGBA(r,g,b,a) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:(a)]
/********************************************************/
1 // 2 // SXTTabBar.h 3 // 04-TabBar 4 // 5 // Created by andezhou on 16/1/6. 6 // Copyright (c) 2016年 周安德. All rights reserved. 7 // 8 9 #import <UIKit/UIKit.h> 10 #import "Header.h" 11 12 //typedef enum _SXTTabBarType1{ 13 // SXTTabBarTypeHome = 0, 14 // SXTTabBarTypeMessage, 15 // SXTTabBarTypeContact, 16 // SXTTabBarTypeMe 17 //} SXTTabBarType1; 18 19 // 定义一个枚举 20 typedef NS_OPTIONS(NSUInteger, SXTTabBarType) { 21 SXTTabBarTypeHome = 1000, // 跟buttton的tag相同 22 SXTTabBarTypeMessage, 23 SXTTabBarTypeContact, 24 SXTTabBarTypeMe 25 }; 26 27 // 定义一个block 28 typedef void(^SXTTabBarBlock)(SXTTabBarType type); 29 30 @class SXTTabBar; 31 @protocol SXTTabBarDelegate <NSObject> 32 33 @optional 34 - (void)tabBar:(SXTTabBar *)tabBar selectedIndex:(SXTTabBarType)type; 35 36 @end 37 38 @interface SXTTabBar : UIView 39 40 @property (weak, nonatomic) id<SXTTabBarDelegate> delegate; 41 42 // block回调方法 43 - (void)tabBarSelectedIndexBlock:(SXTTabBarBlock)block; 44 45 @end
/******************************************************/
1 // 2 // SXTTabBar.m 3 // 04-TabBar 4 // 5 // Created by andezhou on 16/1/6. 6 // Copyright (c) 2016年 周安德. All rights reserved. 7 // 8 9 #import "SXTTabBar.h" 10 #import "SXTDockItem.h" 11 12 static NSUInteger kTag = 1000; 13 14 @interface SXTTabBar () 15 16 @property (strong, nonatomic) SXTDockItem *selectedBtn; // 全局button 17 @property (strong, nonatomic) NSArray *dataList; // 存放文字和图片的数组 18 19 @property (copy, nonatomic) SXTTabBarBlock block; // block 20 21 @end 22 23 @implementation SXTTabBar 24 25 #pragma mark - 26 #pragma mark init methods 27 - (NSArray *)dataList 28 { 29 if (!_dataList) { 30 NSString *file = [[NSBundle mainBundle] pathForResource:@"TabBarPlist" ofType:@"plist"]; 31 _dataList = [NSArray arrayWithContentsOfFile:file]; 32 } 33 return _dataList; 34 } 35 36 #pragma mark - 37 #pragma mark lifecycle 38 - (instancetype)initWithFrame:(CGRect)frame 39 { 40 if (self = [super initWithFrame:frame]) { 41 // 设置背景颜色 42 self.backgroundColor = [UIColor blackColor]; 43 // 获取button的宽度 44 CGFloat width = kViewWidth / self.dataList.count; 45 for (NSUInteger idx = 0; idx < self.dataList.count; idx ++) { 46 // 获取存放文字和图片的字典 47 NSDictionary *dict = self.dataList[idx]; 48 49 // 获取btn的X坐标 50 CGFloat pointX = width * idx; 51 // 初始化一个btn 52 SXTDockItem *btn = [SXTDockItem buttonWithType:UIButtonTypeCustom]; 53 // 设置frame 54 btn.frame = CGRectMake(pointX, 0, width, CGRectGetHeight(self.frame)); 55 56 // 设置文字 57 [btn setTitle:dict[@"title"] forState:UIControlStateNormal]; 58 // 设置文字颜色 59 [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateSelected]; 60 [btn setTitleColor:RGBA(128, 102, 103, 1) forState:UIControlStateNormal]; 61 62 // 设置图片 63 [btn setImage:[UIImage imageNamed:dict[@"normal"]] forState:UIControlStateNormal]; 64 [btn setImage:[UIImage imageNamed:dict[@"selected"]] forState:UIControlStateSelected]; 65 66 // 添加事件响应 67 [btn addTarget:self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside]; 68 69 // 设置tag 70 btn.tag = kTag + idx; 71 72 // 第一个按钮默认选中 73 if (!idx) { 74 self.selectedBtn = btn; 75 btn.selected = YES; 76 } 77 78 [self addSubview:btn]; 79 } 80 } 81 return self; 82 } 83 84 // 按钮事件响应方法 85 - (void)buttonAction:(SXTDockItem *)btn 86 { 87 // 把以前选中的button设置为不选中 88 self.selectedBtn.selected = NO; 89 // 把当前选中的button设置为选中 90 btn.selected = YES; 91 // 把当前选中的button赋值给全局button 92 self.selectedBtn = btn; 93 94 // delegate 95 if ([self.delegate respondsToSelector:@selector(tabBar:selectedIndex:)]) { 96 [self.delegate tabBar:self selectedIndex:btn.tag]; 97 } 98 99 // block 100 if (self.block) { 101 self.block(btn.tag); 102 } 103 } 104 105 // block回调 106 - (void)tabBarSelectedIndexBlock:(SXTTabBarBlock)block 107 { 108 self.block = block; 109 } 110 111 @end
/***********************************************************/
1 // 2 // SXTDockItem.h 3 // 04-TabBar 4 // 5 // Created by andezhou on 16/1/6. 6 // Copyright (c) 2016年 周安德. All rights reserved. 7 // 8 9 #import <UIKit/UIKit.h> 10 11 @interface SXTDockItem : UIButton 12 13 @end
/***********************************************************/
1 // 2 // SXTDockItem.m 3 // 04-TabBar 4 // 5 // Created by andezhou on 16/1/6. 6 // Copyright (c) 2016年 周安德. All rights reserved. 7 // 8 9 #import "SXTDockItem.h" 10 11 static CGFloat kImageScale = 0.64f; 12 13 @implementation SXTDockItem 14 15 #pragma mark - 16 #pragma mark lifecycle 17 - (instancetype)initWithFrame:(CGRect)frame 18 { 19 if (self = [super initWithFrame:frame]) { 20 // 设置文字字体大小 21 self.titleLabel.font = [UIFont systemFontOfSize:14]; 22 // 设置文字居中 23 self.titleLabel.textAlignment = NSTextAlignmentCenter; 24 25 // 调整图片 26 self.imageView.contentMode = UIViewContentModeCenter; 27 } 28 return self; 29 } 30 31 // 调整文字的frame contentRect：button的frame 32 - (CGRect)titleRectForContentRect:(CGRect)contentRect 33 { 34 CGFloat pointX = 0; 35 CGFloat pointY = contentRect.size.height * kImageScale; 36 CGFloat width = contentRect.size.width; 37 CGFloat height = contentRect.size.height * (1 - kImageScale); 38 return CGRectMake(pointX, pointY, width, height); 39 } 40 41 // 调整图片的frame contentRect：button的frame 42 - (CGRect)imageRectForContentRect:(CGRect)contentRect 43 { 44 CGFloat pointX = 0; 45 CGFloat pointY = 0; 46 CGFloat width = contentRect.size.width; 47 CGFloat height = contentRect.size.height * kImageScale; 48 return CGRectMake(pointX, pointY, width, height); 49 } 50 51 @end
/*****************************************************/
1 // 2 // ViewController.m 3 // 04-TabBar 4 // 5 // Created by andezhou on 16/1/6. 6 // Copyright (c) 2016年 周安德. All rights reserved. 7 // 8 /* 9 1. 初始化一个用来显示Button的View 10 2. 自定义四个按钮 11 3. 处理响应事件 12 */ 13 14 /* 15 手机屏幕 16 4\4s 3.5寸 {{0, 0}, {320, 480}} 17 5\5s\5c 4寸 {{0, 0}, {320, 568}} 18 6\6s 4.7寸 {{0, 0}, {375, 667}} 19 6plus\6splus 5.5寸 {{0, 0}, {414, 736}} 20 4寸\4.7寸\5.5寸 比例都是16:9 21 */ 22 23 #import "ViewController.h" 24 #import "SXTTabBar.h" 25 26 @interface ViewController () <SXTTabBarDelegate> 27 28 @property (strong, nonatomic) SXTTabBar *backgroundView; // 背景view 29 @property (weak, nonatomic) IBOutlet UILabel *textLab; 30 31 @end 32 33 @implementation ViewController 34 35 #pragma mark - 36 #pragma mark init methods 37 - (SXTTabBar *)backgroundView 38 { 39 if (!_backgroundView) { 40 _backgroundView = [[SXTTabBar alloc] initWithFrame:CGRectMake(0, kViewHeight - 64, kViewWidth, 64)]; 41 _backgroundView.delegate = self; 42 43 44 // [_backgroundView tabBarSelectedIndexBlock:^(SXTTabBarType type) { 45 // [self showWithType:type]; 46 // }]; 47 } 48 return _backgroundView; 49 } 50 51 #pragma mark - 52 #pragma mark SXTTabBarDelegate 53 - (void)tabBar:(SXTTabBar *)tabBar selectedIndex:(SXTTabBarType)type 54 { 55 [self showWithType:type]; 56 } 57 58 - (void)showWithType:(SXTTabBarType)type 59 { 60 switch (type) { 61 case SXTTabBarTypeHome: 62 self.textLab.text = @"首页"; 63 break; 64 65 case SXTTabBarTypeMessage: 66 self.textLab.text = @"消息"; 67 break; 68 69 case SXTTabBarTypeContact: 70 self.textLab.text = @"通讯录"; 71 break; 72 73 case SXTTabBarTypeMe: 74 self.textLab.text = @"我"; 75 break; 76 77 default: 78 break; 79 } 80 } 81 82 #pragma mark - 83 #pragma mark lifecycle 84 85 - (void)viewDidLoad 86 { 87 [super viewDidLoad]; 88 89 [self.view addSubview:self.backgroundView]; 90 91 } 92 93 - (void)bounds 94 { 95 // 获取屏幕的size(包含状态栏) 96 CGRect bounds = [UIScreen mainScreen].bounds; 97 // 获取屏幕的size(不包含状态栏) 98 CGRect applicationFrame = [UIScreen mainScreen].applicationFrame; 99 100 NSLog(@"applicationFrame:%@", NSStringFromCGRect(applicationFrame)); 101 NSLog(@"bounds:%@", NSStringFromCGRect(bounds)); 102 } 103 104 - (void)didReceiveMemoryWarning { 105 [super didReceiveMemoryWarning]; 106 // Dispose of any resources that can be recreated. 107 } 108 109 @end
/************************************************************/
