首页手记带你实现【京东收货地址】

带你实现【京东收货地址】

标签：

iOS

导读

目前大多数APP的地址选择是用系统的picker View,也不乏用tableview自定义的.
这里分享一个高仿京东的地址选择给大家.
源码地址:https://github.com/HelloYeah/ChooseLocation
欢迎大家checkout,Star...

下面是京东收货地址的一些交互以及代码思路分析

1.刚打开选择地址视图时,底部ScrollView的滚动范围只有一屏宽.
2.点击某个省时,增加对应的市级列表,底部ScrollView横向滚动区域增加一屏宽.

1.当重新选择省的时候,移除后面的市级别列表,区级别列表
2.移除顶部的市按钮,区按钮.
3.并且底部ScrollView的滚动范围减少至两屏宽.

1.当重新选择省市的时候,对应顶部按钮的宽度跟着改变,对应下级的按钮的x值要相应调整
2.按钮底部的指示条的长度和位置跟着相应变化

其他注意点

1.点击灰色区域,取消地址选择,回到主界面
2.京东用的是网络请求获取省市区信息,每点击一个cell,向服务器发送请求,获取下级信息.这里用的是本地plist表

下面是plist表的格式

大体思路已经出来了，写代码中的一些注意点

数据源的切换，省市区各级别数据源，如何处理。在哪里对数据源进行赋值
地址模型

#import <Foundation/Foundation.h>
@interface AddressItem : NSObject
//省、市、区 地名
@property (nonatomic,copy) NSString * name;
//记录选中状态，根据这个值设置对应cell内label的字体颜色以及是否显示勾选图片
@property (nonatomic,assign) BOOL  isSelected; 
+ (instancetype)initWithName:(NSString *)name isSelected:(BOOL)isSelected;
@end

省级别数据源，直接从plist表中获取

//省级别数据源
- (NSArray *)dataSouce{

    if (_dataSouce == nil) {
       //省级别数据源，直接从plist表里面获取
       NSString * path = [[NSBundle mainBundle] pathForResource:@"address.plist" ofType:nil];

        NSDictionary * dict = [NSDictionary dictionaryWithContentsOfFile:path];
        NSMutableArray * mArray = [NSMutableArray array];
        for (NSDictionary * dict0 in dict[@"address"]) {
            NSMutableDictionary *mDict = [NSMutableDictionary dictionary];
            [mDict setValue:dict0[@"sub"] forKey:@"sub"];
            AddressItem * item = [AddressItem initWithName:dict0[@"name"] isSelected:NO];
            [mDict setValue:item forKey:@"addressItem"];
            [mArray addObject:mDict];
        }

        _dataSouce = mArray;
    }
    return _dataSouce;
}

市，地区级别数据源的赋值。在cell将要选中的代理方法中对下一级数据源进行处理。

//在将要选中cell的代理方法中，对下一级数据源进行处理，要注意的是，这里需要判断是第一次选中还是切换选中。
- (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath{

     if([self.tableViews indexOfObject:tableView] == 0){

        NSIndexPath * indexPath0 = [tableView indexPathForSelectedRow];

        //第二级数据源
        _dataSouce1 = [self addressDictToDataSouce:self.dataSouce[indexPath.row][@"sub"]];

        if (_dataSouce1.count == 1) { //此时为直辖市，第二级的地名都是区级别
            NSMutableArray * mArray = [NSMutableArray array];
            for (NSString * name in _dataSouce1.firstObject[@"sub"]) {
                AddressItem * item = [AddressItem initWithName:name isSelected:NO];
                [mArray addObject:item];
            }
            _dataSouce1 = mArray;
        }

        //之前有选中省，重新选择省,切换省.
        if (indexPath0 != indexPath && indexPath0) {

            for (int i = 0; i < self.tableViews.count; i++) {
                [self removeLastItem];
            }
            [self addTopBarItem];
            [self addTableView];
            AddressItem * item = self.dataSouce[indexPath.row][@"addressItem"];
            [self scrollToNextItem:item.name ];
            return indexPath;
        }

        //之前未选中省，第一次选择省
        [self addTopBarItem];
        [self addTableView];
        AddressItem * item = self.dataSouce[indexPath.row][@"addressItem"];
        [self scrollToNextItem:item.name ];

    }else if ([self.tableViews indexOfObject:tableView] == 1){

        UITableView * tableView0 = self.tableViews[1];
        NSIndexPath * indexPath0 = [tableView0 indexPathForSelectedRow];

        //重新选择市,切换市.
        if (indexPath0 != indexPath && indexPath0) {

            //如果发现省级别字典里sub关联的数组只有一个元素,说明是直辖市,这时2级界面为区级别
            if ([self.dataSouce1[indexPath.row] isKindOfClass:[AddressItem class]]){
                AddressItem * item = self.dataSouce1[indexPath.row];
                [self setUpAddress:item.name];
                return indexPath;
            }

            [self removeLastItem];
            [self addTopBarItem];
            [self addTableView];
            AddressItem * item = self.dataSouce1[indexPath.row][@"addressItem"];
            [self scrollToNextItem:item.name];

            return indexPath;
        }

        //之前未选中市,第一次选择
        if ([self.dataSouce1[indexPath.row] isKindOfClass:[AddressItem class]]){//只有两级,此时self.dataSouce1装的是直辖市下面区的数组

            AddressItem * item = self.dataSouce1[indexPath.row];
            [self setUpAddress:item.name];

        }else{

            NSMutableArray * mArray = [NSMutableArray array];
            NSArray * tempArray = _dataSouce1[indexPath.row][@"sub"];
            for (NSString * name in tempArray) {
                AddressItem * item = [AddressItem initWithName:name isSelected:NO];
                [mArray addObject:item];
            }
            _dataSouce2 = mArray;

            [self addTopBarItem];
            [self addTableView];
             AddressItem * item = self.dataSouce1[indexPath.row][@"addressItem"];
            [self scrollToNextItem:item.name];
        }

    }else if ([self.tableViews indexOfObject:tableView] == 2){

        AddressItem * item = self.dataSouce2[indexPath.row];
        [self setUpAddress:item.name];
    }

    return indexPath;
}

在cell选中的代理方法中对数据源进行修改。控制cell的展示

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{

    AddressTableViewCell * cell = [tableView cellForRowAtIndexPath:indexPath];
    AddressItem * item = cell.item;
    item.isSelected = YES;
    cell.item = item;
}

- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath{

    AddressTableViewCell * cell = [tableView cellForRowAtIndexPath:indexPath];
    AddressItem * item = cell.item;
    item.isSelected = NO;
    cell.item = item;
}

【当重新选择省市的时候,对应顶部按钮的宽度跟着改变,对应下级的按钮的x值要相应调整】的处理方案
这里我自定义一个专门的视图来存放地址按钮，每一次对按钮title重新赋值，或者有增删按钮时，外界只需要调用视图的layoutIfNeed方法，这时会调用视图的layoutSubViews方法进行重新布局,按钮的位置就能很方便的设置好了。
这样做的的好处是，外界不需要关心内部如何实现，逻辑会相对清晰点。

#import "AddressView.h"
#import "UIView+Frame.h"

static  CGFloat  const  HYBarItemMargin = 20;
@interface AddressView ()
@property (nonatomic,strong) NSMutableArray * btnArray;
@end

@implementation AddressView

- (void)layoutSubviews{

    [super layoutSubviews];

    for (NSInteger i = 0; i <= self.btnArray.count - 1 ; i++) {

        UIView * view = self.btnArray[i];
        if (i == 0) {
            view.left = HYBarItemMargin;
        }
        if (i > 0) {
            UIView * preView = self.btnArray[i - 1];
            view.left = HYBarItemMargin  + preView.right;
        }

    }
}

- (NSMutableArray *)btnArray{

    NSMutableArray * mArray  = [NSMutableArray array];
    for (UIView * view in self.subviews) {
        if ([view isKindOfClass:[UIButton class]]) {
            [mArray addObject:view];
        }
    }
    _btnArray = mArray;
    return _btnArray;
}

@end

源码地址:https://github.com/HelloYeah/ChooseLocation
欢迎大家checkout,Star...

点击查看更多内容