【京东收货地址】
2016-08-26 本文已影响1709人
HelloYeah
导读
目前大多数APP的地址选择是用系统的picker View,也不乏用tableview自定义的.
这里分享一个高仿京东的地址选择给大家.
源码地址:https://github.com/HelloYeah/ChooseLocation
欢迎大家checkout,Star...
下面是京东收货地址的一些交互以及代码思路分析
1.刚打开选择地址视图时,底部ScrollView的滚动范围只有一屏宽.
2.点击某个省时,增加对应的市级列表,底部ScrollView横向滚动区域增加一屏宽.
1.gif
1.当重新选择省的时候,移除后面的市级别列表,区级别列表
2.移除顶部的市按钮,区按钮.
3.并且底部ScrollView的滚动范围减少至两屏宽.
2.gif
1.当重新选择省市的时候,对应顶部按钮的宽度跟着改变,对应下级的按钮的x值要相应调整
2.按钮底部的指示条的长度和位置跟着相应变化
tmp5deefbb7.png
其他注意点
1.点击灰色区域,取消地址选择,回到主界面
2.京东用的是网络请求获取省市区信息,每点击一个cell,向服务器发送请求,获取下级信息.这里用的是本地plist表
下面是plist表的格式
tmp4fa6b8b2.png
大体思路已经出来了，写代码中的一些注意点
数据源的切换，省市区各级别数据源，如何处理。在哪里对数据源进行赋值
地址模型
#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...
