來到這家公司之后,接手這個項目中付費頁面功能的開發,這個模塊是從之前離職員工那里接受的。首先說一些這個頁面的復雜程序,這個頁面會根據不同的情況展示三個不同的頁面,這個頁面整體是采用TableView來寫的,三個頁面加起來總共有18中cell樣式。在接手的時候,由于整個項目采用的是TableView,但是卻沒有使用重用機制,整個頁面在滑動起來比較卡頓。
1.第一步優化,如果根據不同的情況展示不同的Cell
我們的項目采用的是MVVM的設計模式,重新對tableView代理方法返回行數,以及返回那些Cell做了一層重構。首先把每種cell定義成枚舉。
typedef NS_ENUM(NSUInteger, YCIAPUITableViewCellStyle) {
YCIAPUITableViewCellStyleVipHeaderViewCell = 0, // vip黃色頭部view
YCIAPUITableViewCellStyleGainCircumViewCell, // 周邊
YCIAPUITableViewCellStyleCourseIntroductionViewCell, // 課程介紹
YCIAPUITableViewCellStyleGoodsListViewCell, // 商品
YCIAPUITableViewCellStyleMoreVipPrivilegeViewCell, // vip特權
YCIAPUITableViewCellStyleStudyReportViewCell, // 學情報告
YCIAPUITableViewCellStyleTryForFreeViewCell, // 體驗一下
YCIAPUITableViewCellStyleMyVipAssistantViewCell,// 會員客服
YCIAPUITableViewCellStylePaymentSwitchCell, // 切換金牌課程
YCIAPUITableViewCellStyleCircumIntroductionViewCell,//周邊介紹
YCIAPUITableViewCellStyleIAPEmptyCell,//空cell
YCIAPUITableViewCellStyleGoldenHeaderViewCell, // 非會員頭部
YCIAPUITableViewCellStyleAnimationThemeViewCell, // 全動畫
YCIAPUITableViewCellStyleTeamIntroduceCell, // 團隊
YCIAPUITableViewCellStyleCoursePredictViewCell, //課程預告
YCIAPUITableViewCellStyleLearningPhaseCell, // 課程學習階段
YCIAPUITableViewCellStyleEfficientScoreCell, // 高效學習
};
然后定義三個數組分別去存放,三中不同情況下,應該展示的cell的樣式,我這里做的處理是把枚舉放到數組中。為什么要這樣處理呢,就是在tableview代理方中,可以通過枚舉來加載不同的cell
self.vipArray = [NSMutableArray arrayWithObjects:
@(YCIAPUITableViewCellStyleVipHeaderViewCell),
@(YCIAPUITableViewCellStyleStudyReportViewCell),
@(YCIAPUITableViewCellStyleGoodsListViewCell),
@(YCIAPUITableViewCellStyleMoreVipPrivilegeViewCell),
@(YCIAPUITableViewCellStyleMyVipAssistantViewCell),
nil
];
self.noVipArray = [NSMutableArray arrayWithObjects:
@(YCIAPUITableViewCellStyleGoldenHeaderViewCell),
@(YCIAPUITableViewCellStyleCourseIntroductionViewCell),
@(YCIAPUITableViewCellStyleTeamIntroduceCell),
@(YCIAPUITableViewCellStyleAnimationThemeViewCell),
@(YCIAPUITableViewCellStyleLearningPhaseCell),
@(YCIAPUITableViewCellStyleEfficientScoreCell),
@(YCIAPUITableViewCellStyleMoreVipPrivilegeViewCell),
@(YCIAPUITableViewCellStyleGoodsListViewCell),
@(YCIAPUITableViewCellStyleTryForFreeViewCell),
nil
];
self.switchArray = [NSMutableArray arrayWithObjects:
@(YCIAPUITableViewCellStyleGoldenHeaderViewCell),
@(YCIAPUITableViewCellStyleCourseIntroductionViewCell),
@(YCIAPUITableViewCellStyleTeamIntroduceCell),
@(YCIAPUITableViewCellStyleAnimationThemeViewCell),
@(YCIAPUITableViewCellStyleLearningPhaseCell),
@(YCIAPUITableViewCellStyleEfficientScoreCell),
@(YCIAPUITableViewCellStyleMoreVipPrivilegeViewCell),
@(YCIAPUITableViewCellStyleCoursePredictViewCell),
@(YCIAPUITableViewCellStylePaymentSwitchCell),
nil
];
接下來問題來了,對于每一種情況,展示的cell的個數又是不確定的,怎么保證,只展示需要展示的cell呢。 這個地方我偷了一個懶或者采用另外一種解決方法,就是把不需要展示的cell的高度設置成0。下面的這段代碼寫在VM中
- (CGFloat)cellHeight:(NSIndexPath *)indexPath{
if (self.switchType == YCIAPPaymentViewModelSwitchOn) {
if (self.isVip) { // 會員
// 學情報告解鎖
if (indexPath.row == 1) {
if (!self.unlockLearningReport) { // 學情報告
return 0;
}else{
return UITableViewAutomaticDimension;
}
}else if (indexPath.row == 2) {
if (!self.ycPay || !self.ycRenewPay) { // 商品列表
return 0;
}else{
return UITableViewAutomaticDimension;
}
}else{
return UITableViewAutomaticDimension;
}
}else{ // 引導付費
if (indexPath.row == 7) {
if (!self.ycPay || !self.ycRenewPay) { // 商品列表
return 0;
}else{
return UITableViewAutomaticDimension;
}
}else if (indexPath.row == 8){
if (!self.hasTryForFreeRights) { // 免費體驗
return 0;
}else{
return UITableViewAutomaticDimension;
}
}else{
return UITableViewAutomaticDimension;
}
}
}else{ // 開關外
if (indexPath.row == 8) {
if (self.isVip) {
return UITableViewAutomaticDimension;
}else{
return 0;
}
}
return UITableViewAutomaticDimension;
}
return 0;
}
這種方法雖然不是最優解,但是相比每一種情況又要單獨處理,每一個cell是否顯示,還要單獨處理顯示cell以及不顯示cell的高度,顯得更加方便。
如果確定tableView應該展示幾行呢,這個時候,我定義的三個數組就發揮作用了。
- (NSArray *)getVipArray{
return [self.vipArray copy];
}
- (NSArray *)getNoVipArray{
return [self.noVipArray copy];
}
- (NSArray *)getSwitchArray{
return [self.switchArray copy];
}
2.第二步優化,在控制器的tableView方法中該怎么使用呢?
// MARK:引導付費的cell
- (UITableViewCell *)loadTableCellOfNoVipWithIndexPath:(NSIndexPath *)indexPath {
if (indexPath.row > [[self.viewModel getNoVipArray] count]) {
return [[UITableViewCell alloc] init];
}
NSInteger cellStyleIndex = [[[self.viewModel getNoVipArray] objectAtIndex:indexPath.row] integerValue];
return [self cellWithType:cellStyleIndex];
}
// MARK:會員的cell
- (UITableViewCell *)loadTableCellOfVipWithIndexPath:(NSIndexPath *)indexPath {
if (indexPath.row > [[self.viewModel getVipArray] count]) {
return [[UITableViewCell alloc] init];
}
NSInteger cellStyleIndex = [[[self.viewModel getVipArray] objectAtIndex:indexPath.row] integerValue];
return [self cellWithType:cellStyleIndex];
}
// 返回開關外,課程預告 cell
- (UITableViewCell *)loadSwitchOffPredictionCellWithIndexPath:(NSIndexPath *)indexPath {
if (indexPath.row > [[self.viewModel getSwitchArray] count]) {
return [[UITableViewCell alloc] init];
}
NSInteger cellStyleIndex = [[[self.viewModel getSwitchArray] objectAtIndex:indexPath.row] integerValue];
return [self cellWithType:cellStyleIndex];
}
3.第三步優化,解決tableView重用問題
可以先看一段之前的代碼,這是之前返回cell的方法,if else 判斷有幾十個。這個代碼已經難以維護,只要有新的需求就要改動很多地方。
// MARK:引導付費的cell
- (UITableViewCell *)loadTableCellOfNoVipWithIndexPath:(NSIndexPath *)indexPath {
if (indexPath.row == 0) {
YCGoldenHeaderViewCell *cell = [[YCGoldenHeaderViewCell alloc]init];
return cell;
}else if (indexPath.row == 1) {
@weakify(self);
YCCourseIntroductionViewCell *introductiongView = [[YCCourseIntroductionViewCell alloc]initWithCourseDesignClick:^(YCCourseIntroductionViewButtonClickType type) {
@strongify(self);
[self showAlertWithType:type];
}];
return introductiongView;
}else if (indexPath.row == 2){
if (self.viewModel.ycRenewPay && self.viewModel.ycPay) {
YCGoodsListViewCell *goodListView = [[YCGoodsListViewCell alloc] initWithGoodModelList:self.viewModel.goodsModelList payButtonClickBlock:[self returnClickPaymentButtonBlockWithPostionIsPage:YES] agreementClickBlock:[self pushToAgreementVC] agreementHidden:NO];
return goodListView;
}else if (self.viewModel.prizeActivity) {
// 周邊介紹
YCCircumIntroductionViewCell *circumView = [[YCCircumIntroductionViewCell alloc] init];
return circumView;
}else {
// VIP特權
YCMoreVipPrivilegeViewCell *privilegeView = [[YCMoreVipPrivilegeViewCell alloc]initWithIsBottom:[self.viewModel judgeMoreVipPrivilegeViewIsBottom]];
return privilegeView;
}
}else if (indexPath.row == 3){
if (self.viewModel.ycRenewPay && self.viewModel.ycPay) {
if (self.viewModel.prizeActivity) {
// 周邊介紹
YCCircumIntroductionViewCell *circumView = [[YCCircumIntroductionViewCell alloc] init];
return circumView;
}else {
// VIP特權
YCMoreVipPrivilegeViewCell *privilegeView = [[YCMoreVipPrivilegeViewCell alloc]initWithIsBottom:[self.viewModel judgeMoreVipPrivilegeViewIsBottom]];
return privilegeView;
}
}else if (self.viewModel.prizeActivity) {
// VIP特權
YCMoreVipPrivilegeViewCell *privilegeView = [[YCMoreVipPrivilegeViewCell alloc]initWithIsBottom:[self.viewModel judgeMoreVipPrivilegeViewIsBottom]];
return privilegeView;
}else {
if (self.viewModel.unlockLearningReport) {
@weakify(self);
YCStudyReportViewCell *studyView = [[YCStudyReportViewCell alloc] initWithCheckStudyReportButtonClickBlock:^{
@strongify(self);
[self pushToStudyReportVC];
} isBottom:[self.viewModel judgeStudyReportViewIsBottom] isVip:self.viewModel.isVip];
return studyView;
}else {
// 體驗一下
@weakify(self);
YCTryForFreeViewCell *tryForFreeView = [[YCTryForFreeViewCell alloc]initWithTryForFreeButtonClickBlock:^{
@strongify(self);
[self pushToTopicVCTryForFree];
} hasGreyBottom:[self.viewModel judgeHasPayButtonOnBottom]];
return tryForFreeView;
}
}
}else if (indexPath.row == 4){
if (self.viewModel.ycRenewPay && self.viewModel.ycPay && self.viewModel.prizeActivity) {
………………
大家可以對比一下下面的返回cell的方法,是不是感覺清爽了好多,對于一些邏輯處理都放在ViewModel中做處理了。如果有新的需求變化,比如添加新的cell或者減少cell直接在viewModel中操縱cell的數據就可以了。
在cellWithType:cellStyleIndex這個方法中,就是通過傳入的枚舉類型,返回不同的cell
- (UITableViewCell *)cellWithType:(YCIAPUITableViewCellStyle)style{
switch (style) {
case YCIAPUITableViewCellStyleVipHeaderViewCell:{ // vip頭部視圖
YCVipHeaderViewCell *vipHeaderViewCell = [self.tableView dequeueReusableCellWithIdentifier:[YCVipHeaderViewCell identifier]];
vipHeaderViewCell.feedbackBlock = [self returnFeedbackBlock];
return vipHeaderViewCell;
}
break;
case YCIAPUITableViewCellStyleGainCircumViewCell: { // 抱枕
YCGainCircumViewCell *gainCircumViewCell = [self.tableView dequeueReusableCellWithIdentifier:[YCGainCircumViewCell identifier]];
return gainCircumViewCell;
}
break;
case YCIAPUITableViewCellStyleCourseIntroductionViewCell:{ // 課程介紹
YCCourseIntroductionViewCell *introductiongViewCell = [self.tableView dequeueReusableCellWithIdentifier:[YCCourseIntroductionViewCell identifier]];
return introductiongViewCell;
}
break;
case YCIAPUITableViewCellStyleGoodsListViewCell: { // 商品列表
YCGoodsListViewCell *goodListViewCell = [self.tableView dequeueReusableCellWithIdentifier:[YCGoodsListViewCell identifier]];
goodListViewCell.goodsList = self.viewModel.goodsModelList;
goodListViewCell.payButtonBlock = [self returnClickPaymentButtonBlockWithPostionIsPage:YES];
goodListViewCell.agreementBlock = [self pushToAgreementVC];
goodListViewCell.questionClickBlock = [self pushToQuestionVC];
goodListViewCell.agreementHidden = NO;
goodListViewCell.isVip = self.viewModel.isVip;
goodListViewCell.isBottom = [self.viewModel judgeGoodsListIsBottom];
[goodListViewCell reloadData];
return goodListViewCell;
}
break;
……………………
在解決返回cell邏輯復雜的同時,我也順被把cell的重用解決了一下,這個地方就不粘貼出來了,只要把每一個cell注冊一下,準守tableView的注冊機制就可了。難度在怎么把原來的cell直接初始化數據來填充布局,改成數據回來之后,再去更新cell的布局,這個大家都有經驗,我就不說了。