Imitation Sina Weibo IOS client (v5.2.8)-Implementation of the drop-down menu bar, iosv5.2.8

Source: Internet
Author: User

Imitation Sina Weibo IOS client (v5.2.8)-Implementation of the drop-down menu bar, iosv5.2.8

Reprinted please indicate the source: http://blog.csdn.net/android_ls/article/details/45877983

Statement: similar to the Sina Weibo project, all image resources are sourced from the official website.Sina WeiboFor IOS clients, the purpose of writing this application is to learn and communicate. If infringement is involved, please inform us that I will promptly Replace the images used.


Next, let's talk about how to implement the pull-down menu in the middle part of the Sina Weibo navigation bar by clicking titleView.

1. Customize the titleView in the middle of the navigation bar. The Code is as follows:

// Set titleView _ titleButton = [self titleViewWithNickname: @ ""]; self. navigationItem. titleView = _ titleButton;

2. By default, UIButton has two sub-views: imageView and titleLabel. By default, imageView is on the left, while titleLabel is on the right. On the Sina Weibo homepage, titleView displays titleLabel on the left and imageView on the Right of titleView. We try to adjust the position of UIButton neutron View. The specific implementation code is as follows:

# Pragma mark sets titleView-(UIButton *) titleViewWithNickname :( NSString *) nickname {UIButton * titleButton = [[UIButton alloc] init] in the middle of the navigation bar; // set the image and text [titleButton setTitle: nickname forState: UIControlStateNormal]; [titleButton setTitleColor: [UIColor blackColor] forState: UIControlStateNormal]; titleButton. titleLabel. font = [UIFont systemFontOfSize: 18]; [titleButton setImage: [UIImage imageNamed: @ "success"] forState: UIControlStateNormal]; [titleButton setImage: [UIImage imageNamed: @ "navigationbar_arrow_up"] forState: UIControlStateSelected]; // The value of 90 40 is currently a random titleButton. imageEdgeInsets = UIEdgeInsetsMake (0, 90, 0, 0); titleButton. titleEdgeInsets = UIEdgeInsetsMake (0, 0, 0, 40); // The value 130 is currently Randomly Written, And the length titleButton is automatically calculated based on the Content later. size = CGSizeMake (130, 40); // titleButton. backgroundColor = [UIColor redColor]; [titleButton addTarget: self action: @ selector (titleClick :) forControlEvents: UIControlEventTouchUpInside]; return titleButton ;}

Note: you do not need to stick to this method. Other methods can also be implemented (for example, you can customize a View and add two subviews to it ).

3. The adjusted values are as follows:



4. Click the custom titleView to bring up the drop-down menu. The specific implementation code is as follows:

# Pragma mark click the title event processor in the navigation bar-(void) titleClick :( UIButton *) titleButton {// 1. create a drop-down menu: DropdownMenuView * dropdownMenuView = [[DropdownMenuView alloc] init]; // set the drop-down menu to pop up and destroy the event listener dropdownMenuView. delegate = self; // 2. set TitleMenuViewController * titleMenuVC = [[TitleMenuViewController alloc] init]; titleMenuVC. dropdownMenuView = dropdownMenuView; titleMenuVC. delegate = self; titleMenuVC. view. width = kMobilePhoneScreenWidth/2; titleMenuVC. view. height = kMobilePhoneScreenHeight/2; dropdownMenuView. contentController = titleMenuVC; // 3. show the drop-down menu [dropdownMenuView showFrom: titleButton];}

5. Let the current controller implement the DropdownMenuDelegate and TitleMenuDelegate protocols to implement the corresponding functions. The specific code is as follows:

@interface HomeViewController ()<DropdownMenuDelegate, TitleMenuDelegate>{    UIButton *_titleButton;}@end

# Pragma mark-DropdownMenuDelegate # The pragma mark drop-down menu is destroyed-(void) dropdownMenuDidDismiss :( DropdownMenuView *) menu {// set the direction arrow to UIButton * titleButton = (UIButton. navigationItem. titleView; titleButton. selected = NO;} # The pragma mark drop-down menu shows-(void) dropdownMenuDidShow :( DropdownMenuView *) menu {// set the direction arrow to UIButton * titleButton = (UIButton *) self. navigationItem. titleView; titleButton. selected = YES;} # pragma mark-TitleMenuDelegate-(void) selectAtIndexPath :( NSIndexPath *) indexPath title :( NSString *) title {MyLog (@ "indexPath = % ld", indexPath. row); MyLog (@ "% @", title selected currently); // modify the navigation bar title [_ titleButton setTitle: title forState: UIControlStateNormal]; // call to return the corresponding Weibo Data Based on search criteria //...}

6. First, let's take a look at what has been implemented.



Click any place on the screen except the drop-down menu, or click an item in the drop-down menu (for example, click "friend circle") to destroy the drop-down menu.



Click titleView again, for example:



7. the source code of the drop-down menu implementation core class (DropdownMenuView. h) is as follows:

//// DropdownMenuView. h // SinaWeibo o // Created by android_ls on 15/5/20. // Copyright (c) 2015 android_ls. all rights reserved. //// drop-down menu component # import <UIKit/UIKit. h> @ class DropdownMenuView; @ protocol DropdownMenuDelegate <NSObject> @ optional-(void) initialize :( DropdownMenuView *) menu;-(void) dropdownMenuDidShow :( DropdownMenuView *) menu; @ end @ interface DropdownMenuView: UIView @ property (nonatomic, weak) id <DropdownMenuDelegate> delegate; # pragma mark displays the menu-(void) showFrom :( UIView *) from below the specified UIView; # pragma mark destruction drop-down menu-(void) dismiss; // The content controller to be displayed @ property (nonatomic, strong) UIViewController * contentController; @ end

The source code of the drop-down menu implementation core class (DropdownMenuView. m) is as follows:

//// DropdownMenuView. m // SinaWeibo o // Created by android_ls on 15/5/20. // Copyright (c) 2015 android_ls. all rights reserved. // # import "DropdownMenuView. h "@ interface DropdownMenuView () {// container UIImageView * _ containerView;} @ end @ implementation DropdownMenuView-(id) initWithFrame :( CGRect) frame {self = [super initWithFrame: frame]; if (self) {// clear the Default background color self. backgroundColor = [UIColor clearColor]; // Add a gray image as the background of the drop-down menu _ containerView = [[UIImageView alloc] init]; _ containerView. image = [UIImage imageNamed: @ "popover_background"]; _ containerView. userInteractionEnabled = YES; [self addSubview: _ containerView];} return self;}-(void) setContentController :( UIViewController *) contentController {_ contentController = contentController; UIView * content = contentController. view; // adjust the content position content. x = 7; content. y = 13; _ containerView. height = CGRectGetMaxY (content. frame) + 9; _ containerView. width = CGRectGetMaxX (content. frame) + 7; // Add the content to the gray image [_ containerView addSubview: content];} # pragma mark displays the menu-(void) showFrom :( UIView *) below the specified UIView *) from {// 1. obtain the top window UIWindow * window = [[UIApplication sharedApplication]. windows lastObject]; // 2. add yourself to the window [window addSubview: self]; // 3. set size self. frame = window. bounds; // 4. adjust the position of the gray image // by default, the frame is based on the coordinate origin in the upper left corner of the parent control. // convert the coordinate system CGRect newFrame = [from convertRect: from. bounds toView: window]; _ containerView. centerX = CGRectGetMidX (newFrame); _ containerView. y = CGRectGetMaxY (newFrame); // notifies the outside world that if ([self. delegate respondsToSelector: @ selector (dropdownMenuDidShow :)]) {[self. delegate dropdownMenuDidShow: self] ;}# pragma mark destruction drop-down menu-(void) dismiss {[self removeFromSuperview]; // notify the outside world that if ([self. delegate respondsToSelector: @ selector (dropdownMenuDidDismiss :)]) {[self. delegate dropdownMenuDidDismiss: self] ;}# pragma mark click to execute the destroy action by yourself-(void) touchesBegan :( NSSet *) touches withEvent :( UIEvent *) event {[self dismiss];} @ end

8. The source code of TitleMenuViewController. h is as follows:

/// TitleMenuViewController. h // SinaWeibo o // Created by android_ls on 15/5/20. // Copyright (c) 2015 android_ls. all rights reserved. // # import <UIKit/UIKit. h> @ class DropdownMenuView; @ protocol TitleMenuDelegate <NSObject> # The row selected by pragma mark @ required-(void) selectAtIndexPath :( NSIndexPath *) indexPath title :( NSString *) title; @ end @ interface TitleMenuViewController: UITableViewController @ property (nonatomic, weak) id <TitleMenuDelegate> delegate; @ property (nonatomic, weak) DropdownMenuView * dropdownMenuView; @ end

The source code of TitleMenuViewController. m is as follows:

/// TitleMenuViewController. m // SinaWeibo o // Created by android_ls on 15/5/20. // Copyright (c) 2015 android_ls. all rights reserved. // # import "TitleMenuViewController. h "# import" DropdownMenuView. h "@ interface TitleMenuViewController () @ property (nonatomic, strong) NSMutableArray * data; @ end @ implementation TitleMenuViewController-(void) viewDidLoad {[super viewDidLoad]; _ data = [mongoar Ray]; [_ data addObject: @ "Homepage"]; [_ data addObject: @ ""]; [_ data addObject: @ ""]; [_ data addObject: @ "my Weibo"]; [_ data addObject: @ "special attention"]; [_ data addObject: @ "Celebrity Star"]; [_ data addObject: @ "colleague"]; [_ data addObject: @ "Classmate"]; [self. tableView reloadData] ;}# pragma mark-Table view data source-(NSInteger) tableView :( UITableView *) tableView numberOfRowsInSection :( NSInteger) section {return _ data. count;}-(UITable ViewCell *) tableView :( UITableView *) tableView cellForRowAtIndexPath :( NSIndexPath *) indexPath {static NSString * ID = @ "statusCell"; UITableViewCell * cell = [tableView metadata: ID]; if (! Cell) {cell = [[UITableViewCell alloc] initWithStyle: UITableViewCellStyleSubtitle reuseIdentifier: ID];} NSString * name = _ data [indexPath. row]; cell. textLabel. text = name; return cell;} # pragma mark Cell Click Event processor-(void) tableView :( UITableView *) tableView didSelectRowAtIndexPath :( NSIndexPath *) indexPath {[tableView deselectRowAtIndexPath: indexPath animated: YES]; if (_ dropdownMenuView) {[_ dropdownMenuView dismiss];} if (_ delegate) {[_ delegate selectAtIndexPath: indexPath title: _ data [indexPath. row] ;}}@ end


Let's get here tonight. I'm tired. I went to bed first. Good night.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.