推荐关注是我们App中常见的模块,今天我将总结一下具体的实现。
效果图如下:
从图中我们可以看到,该界面是由两个UITableView组成的
首先我们先完成左边的类别数据的加载,以下都是代码加xib完成的。
一.Controller
1.创建推荐关注控制器
DDZRecommendViewController
并在xib中添加一个UITableView控件
需要你自己添加约束,将其固定在左边。
然后将其关联在代码中
@property (weak, nonatomic) IBOutlet UITableView *categoryTableView;
2.添加第三方框架
因为需要向服务器中请求数据,所以引入AFNetworking框架
因为需要背景蒙版,所以引入SVProgressHUD框架
因为需要将服务器中回传的字典数组转换成模型数组,所以引入MJExtension框架
因为后期需要缓存图片数据,所以引入SDWebImage框架
3.加载viewDidLoad
- (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = DDZGlobalBg; self.title = @"推荐关注"; //隐藏滚动条 self.categoryTableView.showsVerticalScrollIndicator = NO; //注册cell [self.categoryTableView registerNib:[UINib nibWithNibName:NSStringFromClass([DDZRecommendCategoryCell class]) bundle:nil] forCellReuseIdentifier:@"category"]; //设置背景蒙版 [SVProgressHUD show]; [SVProgressHUD setDefaultMaskType:SVProgressHUDMaskTypeBlack]; //数据请求 AFHTTPSessionManager *manager = [AFHTTPSessionManager manager]; NSMutableDictionary *dict = [NSMutableDictionary dictionary]; dict[@"a"] = @"category"; dict[@"c"] = @"subscribe"; [manager GET:@"http://api.budejie.com/api/api_open.php" parameters:dict progress:^(NSProgress * _Nonnull downloadProgress) { } success:^(NSURLSessionDataTask * _Nonnull task, id _Nullable responseObject) { [SVProgressHUD dismiss]; //回传数据成功(需要字典转数据模型框架) self.categories = [DDZRecommendCategory mj_objectArrayWithKeyValuesArray:responseObject[@"list"]]; //刷新页面 [self.categoryTableView reloadData]; //默认选中首行 [self.categoryTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0] animated:NO scrollPosition:UITableViewScrollPositionTop]; } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) { [SVProgressHUD showErrorWithStatus:@"加载推荐信息失败!"]; }]; }
其中DDZGlobalBg是自定义的宏定义
#define DDZRGBColor(r, g, b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(g)/255.0 alpha:233/255.0] #define DDZGlobalBg DDZRGBColor(233,233,233)
4.实现UITableView的委托
#pragma mark - <UITableViewDataSource,UITableViewDelegate> - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return self.categories.count; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { DDZRecommendCategoryCell *cell = [tableView dequeueReusableCellWithIdentifier:@"category"]; cell.category = self.categories[indexPath.row]; return cell; }
二.Model
数据模型用于保存服务器回传过来的数据
@interface DDZRecommendCategory : NSObject /** id */ @property (nonatomic,assign) NSInteger id; /** count */ @property (nonatomic,assign) NSInteger count; /** name */ @property (nonatomic,copy) NSString *name; @end
三.View
1.其中我们需要自定义UITableView的Cell
@class DDZRecommendCategory; @interface DDZRecommendCategoryCell : UITableViewCell /** 模型数据 */ @property (nonatomic,strong) DDZRecommendCategory *category; @end
在xib中
//每次唤醒cell时加载 - (void)awakeFromNib { [super awakeFromNib]; self.backgroundColor = DDZRGBColor(244, 244, 244); //当cell的selection为none时,即使 cell被选中,内部的子控件不会进入高亮状态 // self.textLabel.textColor = DDZRGBColor(78, 78, 78); // self.textLabel.highlightedTextColor = DDZRGBColor(219, 21, 26); } //设置模型数据 - (void)setCategory:(DDZRecommendCategory *)category { _category = category; self.textLabel.text = category.name; } //设置子控件布局 - (void)layoutSubviews { [super layoutSubviews]; //重新调整内部textlabel的frame // self.textLabel.y = 2; self.textLabel.height = self.contentView.height - 4; } /** * 可以在这个方法中监听cell的选中与取消 */ - (void)setSelected:(BOOL)selected animated:(BOOL)animated { self.selectedIndicator.hidden = !selected; self.textLabel.textColor = selected ? DDZRGBColor(219, 21, 26):DDZRGBColor(78, 78, 78); }