IOS notes on how to develop the essence of | package a package control from a menu bar

IOS notes on how to develop the essence of | package a package control from a menu bar

Write in front of

Custom controls can be said to be a part of every iOS developer’s daily life, every time we get a UI map we will observe the similar elements inside, to consider whether the need for packaging.

Two. Do you need packaging?

First clear: the ultimate purpose is to reuse packaging.

Look at a design:

IOS notes on how to develop the essence of | package a package control from a menu bar

can see the menu bar on multiple pages, and look alike, so we would have been decided to package the (major argument is: in order to reuse code, to better enhance the cohesion, there should be package).

IOS notes on how to develop the essence of | package a package control from a menu bar
menu bar

Three. How to package?

The principle of encapsulation: hide as many things as possible and provide a simple interface to the outside world.

Four. Start packaging

1 do a full range of needs analysis:

  • There are only two or three buttons in the design, will it be more? If it can be more, when the button is not to let the menu bar to support the left and right sliding? (PM: only two or three)
  • The text button in the upper right corner corner 0 hidden? The angle is larger than the display 99+ or exact number 99? (PM A. show the exact)
  • Is the width of the red line below the button fixed or the width of the text? (PM A: the same width as text)
  • Wait。。。 (PM one by one)

These problems need to be clear before we start to develop, rather than with the problem to develop, not to take it for granted to develop. Communicate with the product can sometimes reduce many unnecessary misunderstanding.

2 do a comprehensive analysis of the function:

  • When the button is clicked, the clicked button is selected and the other buttons are in general.
  • When the button is clicked, the red line moves to the bottom of the button, and the width is the same as the width of the text.
  • After the button is clicked, the scrollView at the bottom of the menu bar should be adjusted accordingly.
  • The button can show / hide the corner.

3 modaobuwukanchaigong, understand the two questions above and then start the first package:
package with the angle of the corner is in the button button: the upper right corner of the titleLabel, and the width of the titleLabel will change with the change of title, with the frame fixed controls have close connection, recommend the use of automatic layout. Override the layoutSubviews method without automatic layout. Here I use masonry.

  • The.H file with the angle of the button:
@interface BadgeButton: UIButton @param badgeNumber / * * display corner corner number * / - (void) showBadgeWithNumber: (NSInteger) badgeNumber; / * * * / hidden corner - (void) hideBadge; @end
  • The.M file with the angle of the button:
@interface BadgeButton (subscript label) / * * * / display button @property (nonatomic, strong) UILabel *badgeLabel @end @implementation BadgeButton #pragma; mark (instancetype) initWithFrame: construction method - (CGRect) frame{if (self = [super initWithFrame:frame]) {/ / button attribute set self.clipsToBounds = NO; self.badgeLabel = [[UILabel -------// //------- angle label alloc]init]; [self addSubview:self.badgeLabel] self.badgeLabel.backgroundColor = [UIColor; colorWithHexString:@ = "d51619"]; self.badgeLabel.font [UIFont systemFontOfSize:10]; self.badgeLabel.textColor [UIColor = whiteColor]; self.badgeLabel.layer.cornerRadius = 6; self.badgeLabel.clipsToBounds The establishment of label = YES; //------- angle constraint -------// [self.badgeLabel mas_makeConstraints:^ (MASConstraintMaker *make) {make.left.mas_equalTo (self.titleLabel.mas_right).Mas_offset (-3); make.bottom.mas_equalTo (self.titleLabel.mas_top).Mas_offset (8); make.height.mas_equalTo (12);}]}}; return self; #pragma mark - @param badgeNumber / * * display angle angle angle number * / - (void) showBadgeWithNumber: (NSInteger) badgeNumber{self.badgeLabel.hidden = NO; / / note number before and after leaving a space, or too much self.badgeLabel.text [NSString stringWithFormat:@ = "%ld", badgeNumber] #pragma mark;} / * * * / - hidden corner hidden corner - (void) hideBadge{ Self.badgeLabel.hidden = YES;} #pragma mark - set the button selected set button selected / * * * / - (void) setSelected: (BOOL) selected{if (selected) {[self setTitleColor:[UIColor colorWithHexString:@ d51619 UIControlStateNormal] [self.titleLabel setFont:[UIFont boldSystemFontOfSize:15]] forState:;}else{[self; setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [self.titleLabel setFont:[UIFont systemFontOfSize:15]];}} @end

Menu bar:

  • Menu bar.H file:
#import < UIKit/UIKit.h> @class BaseMenuView; @protocol BaseMenuViewDelegate < NSObject> button; the View menu is clicked / * * * (starting from 0) - (void) menuView: (BaseMenuView *) menuView didClickButtonAtIndex: (NSInteger) index; @end @interface BaseMenuView: UIView @property / * * * Title Array (nonatomic, strong) NSArray *titleArray; @property (nonatomic, weak) id< BaseMenuViewDelegate> delegate; / * * selected several buttons (starting from 0) * / - (void) selectButtonAtButtonIndex: (NSInteger) buttonIndex; / * * display buttons number @param buttonIndex badge @param corner corner several button * - (void) showButtonBadge: (NSInteger) badge atButtonIndex: (NSInteger) buttonIndex; @end
  • Menu bar.M file:
#import "BaseMenuView.h" #import "BadgeButton.h" button to start the tag / * * * const NSInteger Button_Begin_Tag = 100; @interface (BaseMenuView) {/ * * red line at the bottom of the mobile / UIView *_redView @end @implementation BaseMenuView #pragma mark;} - construction method - (instancetype) initWithFrame: (CGRect) frame{if (self = [super initWithFrame:frame]) {/ / UI [self setUpUI] return self set;}}; #pragma mark - UI UI / * * * / - built building (void) setUpUI{self.backgroundColor = [UIColor whiteColor]; _redView = //------- create red line -------// [[UIView alloc]initWithFrame:CGRectMake (0, self.height - 2, 0, 2)]; [self addSubview:_redView]; _redView.backgroundColor [UIColor = colorWithH ExString:@ "d51619"];} #pragma mark - set menu title settings menu title * / / * * - (void) setTitleArray: (NSArray * titleArray{) _titleArray = titleArray; //------- first will remove all existing button -------// for (BadgeButton *button in self.subviews if ([button isMemberOfClass:[BadgeButton) {class]]}}) {[button removeFromSuperview]; //------- then create a button -------// for (int i = 0; I < _titleArray.count; I + +) {CGFloat buttonWidth = SCREEN_WIDTH / _titleArray.count; / / *button = [[BadgeButton alloc]initWithFrame:CGRectMake button width BadgeButton (I * buttonWidth, 0, buttonWidth, self.height - 2)]; [self addSubview:button]; button.sel Ected = NO; [button addTarget:self action:@selector (buttonClicked:) forControlEvents:UIControlEventTouchDown]; button.tag = Button_Begin_Tag + I; [button setTitle:_titleArray[i] forState:UIControlStateNormal];}} #pragma mark - click on the button click on the button * / / * * - (void) buttonClicked: (BadgeButton *) sender{NSInteger index = sender.tag - Button_Begin_Tag; / / selectButtonAtButtonIndex:index] / / [self button to change the state; the agent executes the corresponding method if ([self.delegate respondsToSelector:@ selector (menuView:didClickButtonAtIndex:)])}} {[self.delegate menuView:self didClickButtonAtIndex:index]; #pragma mark - the first of several button is selected (only to change UI, does not trigger the proxy method) / * * A button is selected (only to change UI, does not trigger the proxy method) * / - (void) selectButtonAtButtonIndex: (NSInteger) buttonIndex{/ for (BadgeButton *button button all in self.subviews if ([button isMemberOfClass:[BadgeButton) {class]]}) {button.selected = NO;} / / get the current by clicking on the button BadgeButton viewWithTag: (buttonIndex *clickedButton = [self + Button_Begin_Tag)]; clickedButton.selected = YES; / / the bottom line was moved to the red button below the [UIView animateWithDuration: 0.3 animations:^{_redView.width = clickedButton.titleLabel.width; _redView.centerX = clickedButton.centerX;}]; #pragma} mark - display button display button @p / * * subscript subscript Aram badge @param buttonIndex the button subscript number * / - (void) showButtonBadge: (NSInteger) badge atButtonIndex: (NSInteger) buttonIndex{BadgeButton *button viewWithTag: = [self (buttonIndex + Button_Begin_Tag)]; [button showBadgeWithNumber:badge];} @end

Five. Use this control

1 introduction of delegate

< BaseMenuViewDelegate>

2 set attributes and determine the agent:

//------- menu bar -------// self.menuView = [[MainViewControllerMenuView alloc]initWithFrame:CGRectMake (0, self.naviView.maxY, SCREEN_WIDTH, self.menuView.titleArray = 30); @[@ "to pick up", "distribution", @ @ "delivery" []; self.view addSubview:self.menuView]; self.menuView.delegate = self; [self.menuView selectButtonAtButtonIndex:0]; / / default "to pick up"

3 processing agent method

Methods #pragma mark agent proxy method - #pragma - mark custom control menu bar - (void) menuView: (BaseMenuView *) menuView didClickButtonAtIndex: (NSInteger) index{[self scrollToPage:index];}

Six. Note & details

1 protocol naming:

@protocol BaseMenuViewDelegate < NSObject>

See how the official is named:
UITableViewDelegate UIScrollViewDelegate
named: class name +Delegate

2 proxy method naming:

@protocol BaseMenuViewDelegate < NSObject> button; the View menu is clicked / * * * (starting from 0) - (void) menuView: (BaseMenuView *) menuView didClickButtonAtIndex: (NSInteger) index; @end

Look at what the official name is:

- (void) tableView: (UITableView *) tableView didSelectRowAtIndexPath: (NSIndexPath *) indexPath - (void) scrollViewDidScroll: (UIScrollView *) scrollView;

Name: what event is a control

If you don’t know how to name it, check the official document or think about how the official named the system method.

Seven. Summary

1 package before the need to clarify the requirements do not leave doubt
2 clear ideas and then start
strict requirements of the code for the specification of the
write a clear comment on the
5 to allow small partners code review

Finally, drive

IOS notes on how to develop the essence of | package a package control from a menu bar
every code you can inadvertently reflect your level