Select the implementation principle of the effect from the drop-down list.

Select the implementation principle of the effect from the drop-down list.

Effect of navigation bar and drop-down box

The result is the effect selected in the drop-down box in the middle of the navigation bar. When you select one, the above words are modified accordingly (this instance code can be viewed in the source code of Coding.net ), here we will extract it separately for testing and download the source code. Next we will briefly introduce the implementation method and main code;

1: Because we work with the navigation bar, we use NavigationController here. We put the effect of this page in viewController, And the pop-up drop-down list exists in the form of a table, each row is a row of a table. The row contains icons and text;

First, let's take a look at the AppDelegate. m code:

- (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;}

The code for ViewController. h and ViewController. m is as follows:

#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: @ "bubble square" image: @ "nav_tweet_all" badge: nil], [DownMenuTitle title: @ "friend circle" image: @ "nav_tweet_friend" badge: nil], [DownMenuTitle title: @ "Popular bubble" image: @ "nav_tweet_hot" badge: nil], [DownMenuTitle title: @ "my bubble" image: @ "nav_tweet_mine" badge: nil] andDefaultIndex: _ curIndex andBlock: ^ (id titleObj, NSInteger index) {[(DownMenuTitle *) titleObj setBadgeValue: nil]; _ curIndex = index; [self refreshFirst];}-(void) didReceiveMemoryWarning {[super didreceivemorywarning]; // Dispose of any resources that can be recreated .} -(void) refreshFirst {NSLog (@ "% ld", _ curIndex);} @ end

Here we encapsulate some content in the UIViewController + DownMenu. h file and implementation;

2: The main code of UIViewController + DownMenu is as follows:

#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

Note: UIDownMenuButton is the encapsulation of each row above. You can see that it is added to nav;

3: The main code of UIDownMenuButton is as follows:

#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 (angl E) (angle)/180.0 * M_PI) # define RADIANS_TO_DEGREES (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 @ implement Ation 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 * men UObj = [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, kNavImage Width); self. imageEdgeInsets = upper (0, titleWidth, 0,-titleWidth); [self setTitle: titleStr forState: UIControlStateNormal]; [self setImage: [UIImage imageNamed: @ "lower"] forState: UIControlStateNormal];}-(void) changeShowing {[kKeyWindow endEditing: YES]; if (! Self. myTableView) {// define its position 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. myTa BleView. 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) {// hide CGRect frame = self. myTableView. f Rame; 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. myTa BleView removeFromSuperview]; [self. myTapBackgroundView removeFromSuperview]; self. enabled = YES; self. isShowing =! Self. isShowing;}];} else {// display [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. myTapBa CkgroundView. 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 numberOfRowsInSect Ion :( NSInteger) section {return [self. titleList count];}-(UITableViewCell *) tableView :( UITableView *) tableView cellForRowAtIndexPath :( NSIndexPath *) indexPath {DownMenuCell * cell = [tableView paths: incluforindexpath: indexPath]; downMenuTitle * curItem = [self. titleList objectAtIndex: indexPath. row]; cell. curItem = curItem; cell. backgroundColor = (indexPa Th. row = self. curIndex )? [UIColor colorWithHexString: @ "0xf3f3f3"]: [UIColor whiteColor]; return cell;}-(CGFloat) tableView :( UITableView *) tableView details :( 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 extends mselector: @ 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

The refreshSelfUI method shows the changes in the text and text icons when implementing the selection. The key content is the changeShowing method, which defines the position of the list to be displayed, and the list creation initialization, and the appearance, display, and hidden content of the background mode, the creation and deletion of views, and the assignment of objects;

4: The layout of table unit rows is DownMenuCell. The main code is as follows:

#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