導航欄與下拉框的效果
實現的效果是在導航欄中間出現下拉框選擇的效果，當選擇某一個時，則上面的字也相應進行修改（此實例代碼可以看Coding.net的源代碼），這邊有把它單獨提取出來進行測試，源代碼下載；接下來將簡單介紹一下此實現的方式及主要代碼；
1：因為我們是跟導航欄進行結合，所以這邊用到的NavigationController，我們把這個頁面的效果放在viewController中，彈出來的下拉列表這邊是以表格的形式存在，每個則是表格的一行，行里面包括圖標跟文字；
首先看一下AppDelegate.m的代碼：
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; // Override point for customization after application launch. self.window.backgroundColor = [UIColor whiteColor]; ViewController *loginVC = [[ViewController alloc] init]; [self.window setRootViewController:[[UINavigationController alloc] initWithRootViewController:loginVC]]; [self.window makeKeyAndVisible]; return YES;}
接著是ViewController.h及ViewController.m的代碼：
#import <UIKit/UIKit.h>#import "UIViewController+DownMenu.h"@interface ViewController : UIViewController@end
#import "ViewController.h"@interface ViewController ()@PRoperty (nonatomic, assign) NSInteger curIndex;@end@implementation ViewController- (void)viewDidLoad { [super viewDidLoad]; _curIndex = 0; [self customDownMenuWithTitles:@[[DownMenuTitle title:@"冒泡廣場" image:@"nav_tweet_all" badge:nil], [DownMenuTitle title:@"好友圈" image:@"nav_tweet_friend" badge:nil], [DownMenuTitle title:@"熱門冒泡" image:@"nav_tweet_hot" badge:nil], [DownMenuTitle title:@"我的冒泡" image:@"nav_tweet_mine" badge:nil]] andDefaultIndex:_curIndex andBlock:^(id titleObj, NSInteger index) { [(DownMenuTitle *)titleObj setBadgeValue:nil]; _curIndex = index; [self refreshFirst]; }];}- (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated.}-(void)refreshFirst{ NSLog(@"%ld",_curIndex);}@end
這邊把一些內容封裝到的UIViewController+DownMenu.h這個文件及實現里；
2：UIViewController+DownMenu主要代碼如下：
#import <UIKit/UIKit.h>#import "UIDownMenuButton.h"@class DownMenuTitle;@interface UIViewController (DownMenu)- (UIDownMenuButton *)customDownMenuWithTitles:(NSArray *)titleList andDefaultIndex:(NSInteger)index andBlock:(void (^)(id titleObj, NSInteger index))block;- (UIDownMenuButton *)downMenuBtn;@end
#import "UIViewController+DownMenu.h"@implementation UIViewController (DownMenu)- (UIDownMenuButton *)customDownMenuWithTitles:(NSArray *)titleList andDefaultIndex:(NSInteger)index andBlock:(void (^)(id titleObj, NSInteger index))block{ UIDownMenuButton *navBtn = [[UIDownMenuButton alloc] initWithTitles:titleList andDefaultIndex:index andVC:self]; navBtn.menuIndexChanged = block; self.navigationItem.titleView = navBtn; return navBtn;}- (UIDownMenuButton *)downMenuBtn{ if (self.navigationItem.titleView || [self.navigationItem.titleView isKindOfClass:[UIDownMenuButton class]]) { UIDownMenuButton *navBtn = (UIDownMenuButton *)self.navigationItem.titleView; return navBtn; }else{ return nil; }}@end
注意：UIDownMenuButton這個就是上面每個行的封裝，這邊可以看到在其對它進行增加到nav里面；
3：UIDownMenuButton主要代碼如下：
#import <UIKit/UIKit.h>#import "NSString+Common.h"@class DownMenuTitle;@interface UIDownMenuButton : UIButton <UITableViewDataSource, UITableViewDelegate>@property (nonatomic, assign) NSInteger curIndex;- (UIDownMenuButton *)initWithTitles:(NSArray *)titleList andDefaultIndex:(NSInteger)index andVC:(UIViewController *)viewcontroller;@property (nonatomic,copy) void(^menuIndexChanged)(id titleObj, NSInteger index);@end@interface DownMenuTitle : NSObject@property (nonatomic, strong) NSString *titleValue, *imageName, *badgeValue;+ (DownMenuTitle *)title:(NSString *)title image:(NSString *)image badge:(NSString *)badge;@end
#define kNavImageWidth (15.0+5.0)#define kDownMenu_ContentLeftPading 27.0#define kDownMenuCellHeight 50.0#define kNavTitleFontSize 19#define kScreen_Bounds [UIScreen mainScreen].bounds#define kScreen_Height [UIScreen mainScreen].bounds.size.height#define kScreen_Width [UIScreen mainScreen].bounds.size.width#define kKeyWindow [UIApplication sharedApplication].keyWindow#define DEGREES_TO_RADIANS(angle) ((angle)/180.0 *M_PI)#define RADIANS_TO_DEGREES(radians) ((radians)*(180.0/M_PI))#import "UIDownMenuButton.h"#import "DownMenuCell.h"@interface UIDownMenuButton()@property (nonatomic, strong) NSArray *titleList;@property (nonatomic, assign) BOOL isShowing;@property (nonatomic, strong) UIView *mySuperView, *myTapBackgroundView;@property (nonatomic, strong) UITableView *myTableView;@end@implementation UIDownMenuButton- (UIDownMenuButton *)initWithTitles:(NSArray *)titleList andDefaultIndex:(NSInteger)index andVC:(UIViewController *)viewcontroller{ self = [super init]; if (self) { _titleList = titleList; _curIndex = index; _isShowing = NO; _mySuperView = viewcontroller.view; self.backgroundColor = [UIColor clearColor]; [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [self setTitleColor:[UIColor blackColor] forState:UIControlStateHighlighted]; [self.titleLabel setFont:[UIFont systemFontOfSize:kNavTitleFontSize]]; [self.titleLabel setMinimumScaleFactor:0.5]; [self addTarget:self action:@selector(changeShowing) forControlEvents:UIControlEventTouchUpInside]; [self refreshSelfUI]; } return self;}- (void)refreshSelfUI{ NSString *titleStr = @""; DownMenuTitle *menuObj = [self.titleList objectAtIndex:self.curIndex]; titleStr = menuObj.titleValue; CGFloat titleWidth = [titleStr getWidthWithFont:self.titleLabel.font constrainedToSize:CGSizeMake(kScreen_Width, 30)]; CGFloat btnWidth = titleWidth +kNavImageWidth; self.frame = CGRectMake((kScreen_Width-btnWidth)/2, (44-30)/2, btnWidth, 30); self.titleEdgeInsets = UIEdgeInsetsMake(0, -kNavImageWidth, 0, kNavImageWidth); self.imageEdgeInsets = UIEdgeInsetsMake(0, titleWidth, 0, -titleWidth); [self setTitle:titleStr forState:UIControlStateNormal]; [self setImage:[UIImage imageNamed:@"nav_arrow_down"] forState:UIControlStateNormal];}- (void)changeShowing{ [kKeyWindow endEditing:YES]; if (!self.myTableView) { //定義其顯示的位置 self.myTableView = [[UITableView alloc] initWithFrame:CGRectMake(0,64, kScreen_Width, 0) style:UITableViewStylePlain]; [self.myTableView registerClass:[DownMenuCell class] forCellReuseIdentifier:kCellIdentifier_DownMenu]; self.myTableView.separatorStyle = UITableViewCellSeparatorStyleNone; self.myTableView.dataSource = self; self.myTableView.delegate = self; self.myTableView.alpha = 0; self.myTableView.scrollEnabled = NO; } if (!self.myTapBackgroundView) { self.myTapBackgroundView = [[UIView alloc] initWithFrame:kScreen_Bounds]; self.myTapBackgroundView.backgroundColor = [UIColor clearColor]; UITapGestureRecognizer *bgTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(changeShowing)]; [self.myTapBackgroundView addGestureRecognizer:bgTap]; } if (self.isShowing) {//隱藏 CGRect frame = self.myTableView.frame; frame.size.height = 0; self.enabled = NO; [UIView animateWithDuration:0.3 animations:^{ [self refreshSelfUI]; self.myTapBackgroundView.backgroundColor = [UIColor colorWithWhite:0 alpha:0]; self.myTableView.alpha = 0; self.myTableView.frame = frame; self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, DEGREES_TO_RADIANS(180)); } completion:^(BOOL finished) { [self.myTableView removeFromSuperview]; [self.myTapBackgroundView removeFromSuperview]; self.enabled = YES; self.isShowing = !self.isShowing; }]; }else{//顯示 [[UIApplication sharedApplication].keyWindow addSubview:self.myTapBackgroundView]; [[UIApplication sharedApplication].keyWindow addSubview:self.myTableView]; [self.myTableView reloadData]; CGRect frame = self.myTableView.frame; frame.size.height = kDownMenuCellHeight *[self.titleList count]; self.enabled = NO; [UIView animateWithDuration:0.3 animations:^{ self.myTapBackgroundView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.2]; self.myTableView.alpha = 1.0; self.myTableView.frame = frame; self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, DEGREES_TO_RADIANS(180)); } completion:^(BOOL finished) { self.enabled = YES; self.isShowing = YES; }]; }}#pragma mark Table M- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return [self.titleList count];}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ DownMenuCell *cell = [tableView dequeueReusableCellWithIdentifier:kCellIdentifier_DownMenu forIndexPath:indexPath]; DownMenuTitle *curItem =[self.titleList objectAtIndex:indexPath.row]; cell.curItem = curItem; cell.backgroundColor = (indexPath.row == self.curIndex)? [UIColor colorWithHexString:@"0xf3f3f3"] : [UIColor whiteColor]; return cell;}- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ return kDownMenuCellHeight;}- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ [tableView deselectRowAtIndexPath:indexPath animated:YES]; self.curIndex = indexPath.row; [self changeShowing]; if (self.menuIndexChanged) { self.menuIndexChanged([self.titleList objectAtIndex:_curIndex], _curIndex); }}- (void)setCurIndex:(NSInteger)curIndex{ _curIndex = curIndex; [UIView animateWithDuration:0.3 animations:^{ [self refreshSelfUI];// [self.myTableView reloadData];// [self.myTableView performSelector:@selector(reloadData) withObject:nil afterDelay:0.3]; }];}- (void)dealloc{ self.myTableView.delegate = nil;}@end@implementation DownMenuTitle+ (DownMenuTitle *)title:(NSString *)title image:(NSString *)image badge:(NSString *)badge{ DownMenuTitle *menuObj = [[DownMenuTitle alloc] init]; menuObj.titleValue = title; menuObj.badgeValue = badge; menuObj.imageName = image; return menuObj;}@end
其中refreshSelfUI這個方法里面是實現的選擇時，對應文字跟箭頭圖標的變化；重點的內容在changeShowing這個方法，它有定義列表要顯示的位置，列表的創建初始化，及背景模態的出現，顯示及隱藏的內容，視圖的創建及刪除；最后一個是實體的賦值；
4：表格單元行的布局DownMenuCell，主要代碼如下：
#define kCellIdentifier_DownMenu @"DownMenuCell"#import <UIKit/UIKit.h>#import "UIDownMenuButton.h"#import "UIColor+expanded.h"@interface DownMenuCell : UITableViewCell@property (strong, nonatomic) DownMenuTitle *curItem;@end
#import "DownMenuCell.h"@implementation DownMenuCell- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{ self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; if (self) { // Initialization code } return self;}- (void)awakeFromNib{ // Initialization code}- (void)setSelected:(BOOL)selected animated:(BOOL)animated{ [super setSelected:selected animated:animated]; // Configure the view for the selected state}- (void)layoutSubviews{ [super layoutSubviews]; if (!_curItem) { return; } self.imageView.frame = CGRectMake(27, (50.0-25.0)/2, 25, 25); self.textLabel.frame = CGRectMake(65, (50.0-25.0)/2, 150, 25); self.textLabel.backgroundColor = [UIColor clearColor]; self.textLabel.textColor = [UIColor blackColor]; self.textLabel.font = [UIFont systemFontOfSize:15]; self.imageView.image = [UIImage imageNamed:_curItem.imageName]; self.textLabel.text = _curItem.titleValue;;}@end
新聞熱點
疑難解答
