Today we share a JFCitySelector that mimics the effect of the Meituan city selector. In a few lines of code, you can integrate a three-tier city selector, location, search, and alphabetical index into your project.

JFCitySelector:




JFCitySelector effect display.gif

JFCitySelector:

Note: you will need to import the navigation and FMDB framework online to retrieve all the items you would like to retrieve.

  • Download JFCitySelector and drag the JFCityViewController folder from the Demo into your project.

  • Importing header files

#import "JFCityViewController.h"Copy the code
  • Instantiation JFCityViewController
JFCityViewController *cityViewController = [[JFCityViewController alloc] init]; Cityviewcontroller.title = @" city "; __weak typeof(self) weakSelf = self; // The callback after you select the city, CityName is the city you choose [cityViewController choseCityBlock: ^ (nsstrings * cityName) {weakSelf. ResultLabel. Text = cityName;}]. // add a navigationController to JFCityViewController UINavigationController *navigationController = [UINavigationController alloc] initWithRootViewController:cityViewController]; [self presentViewController:navigationController animated:YES completion:nil];Copy the code
  • Modify the info.plist file

Obtain location permission:

Privacy-location Always Usage Description type is String privacy-location When In Use Usage Description type is StringCopy the code

Localization (search button’s English becomes Chinese) :

Change the value of Localization development region to ChinaCopy the code

You’re done integrating the JFCitySelector city selector, and that’s it!

Know you can’t wait to know the use of the method, so the front directly on the use of the method, if you are interested in the following project analysis, and technical points, I believe that through this little thing we will have harvest!

Analysis of Meituan City selector:

The structure of meituan’s city selector interface looks like this:




City selector analysis mindmap. PNG

From an intuitive analysis of the interface, the city selector of Meituan is mainly realized by UITableView plus UICollectionView. The search box and switch region and county button are added to the headerView of UITableView. When clicking the switch region and county button, insert a row of cells in the first row. The data in this row is obtained based on the current city. Clicking on the search button will add a grey translucent view under the headerView. This view will add a UITableView (which was not loaded before the search). Load the UITableView when you get feedback from the search results and refresh the data!

JFCityViewController file structure:




JFCityViewController file structure.png

Jfareadatamanager. m file in AreaDataManager folder. The JFCitySelector logic can be implemented in the jfCityViewController.m file. In fact, the layout of the interface is very simple to implement after analysis. The difficulty lies in data interaction, alphabetic index and the operation of inserting a row of cells by clicking “Select district and county” button. If you are interested, you can take a look at the source code (detailed comments).

Alphabetical index:

The core of alphabetic index is: Transfer Chinese characters to pinyin and then To English, cut the first character, and finally sort Chinese characters in alphabetical order. The core code (in JFCityViewController.m) :

#pragma mark -(void)processData:(void (^) (id))success {//code... } #pragma mark - (BOOL)matchLetter:(NSString *) STR {NSString *ZIMU = @"^[a-za-z]+$"; NSPredicate *regextestA = [NSPredicate predicateWithFormat:@"SELF MATCHES %@", ZIMU]; if ([regextestA evaluateWithObject:str] == YES) return YES; else return NO; }Copy the code

UISearchBar Search box

The implementation code can be seen in jfCityHeaderView.m:

- (void)addSearchBar {//code... } # pragma mark - UISearchBarDelegate / / / / searchBar start editing when the - (void) searchBarTextDidBeginEditing: (UISearchBar *)searchBar { //code... } - (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText {//code... } / / keyboard click search button calls the - (void) searchBarSearchButtonClicked: (searchBar UISearchBar *) {/ / code... } / / click the searchBar cancel button when the - (void) searchBarCancelButtonClicked: (searchBar UISearchBar *) {/ / code... }Copy the code

Next, the JFButton (custom walking text, Button in the image on the right) and JFLocation (city location) utility classes in the project.

The JFButton utility class uses:




PNG JFButton effect display

  • Importing header files:

    #import "JFButton.h"Copy the code

  • JFButton attributes:

#import @interface JFButton: UIButton /** button text */ @property (nonatomic, copy) NSString *title; /** text color */ @property (nonatomic, strong) UIColor *titleColor; /** imageName */ @property (nonatomic, copy) NSString *imageName; @endCopy the code
  • Instantiation:

Just instantiate JFButton, set the properties, and add it to the parent control. Here is the source in the jfCityHeaderView.m file in your project.

- (void)addJFButton { self.button = [[JFButton alloc] initWithFrame:CGRectMake(self.frame.size.width - 95, self.frame.size.height - 31, 75, 21)]; [_button addTarget:self action:@selector(touchUpJFButtonEnevt:) forControlEvents:UIControlEventTouchUpInside]; _button.imageName = @"down_arrow_icon1"; _button.title = @" select "; _button.titlecolor = JFRGBAColor(155, 155, 155, 1.0); [self addSubview:_button]; }Copy the code

Location using JFLocation:

The JFLocation is already used in the JFCityViewController for location. If you want to set the location function yourself, you can modify the jfloction.m file.

JFLocation:

  • Importing header files: 
    #import "JFLocation.h"Copy the code

  • Instantiation:

    JFLocation *locationManager = [[JFLocation alloc] init]; // Set the delegate locationManager.delegate = self;Copy the code

  • JFLocation proxy method:

/// Locating - (void) Locating; /** @param locationDictionary */ - (void)currentLocation (NSDictionary *)locationDictionary; / * * refused to locate agent callback after the @ param message prompt * / - (void) refuseToUsePositioningSystem (nsstrings *) message; */ - (void)locateFailure:(NSString *)message;Copy the code

See the viewController.m file in the JFCitySelector city selector Demo for details.

JFCitySelector city selector is a personal project that needs to be completed in a few days of spare time. There may be some unknown bugs, if you find them in the process of using them, please correct them!

Personal project: iOS- High imitation elegant Curiosity daily