数据加载后刷新UI界面

对于IOS初学者来说,UI界面的交互有时候会让你不知所措,在开发中,一般的设计思路是:1.先搭建好UI界面,需要网络数据的控件先不显示或者让它处于等待显示状态;2.开始加载网络数据,数据加载完毕后,重新刷新UI界面或者将控件赋值后,让他们从等待显示状态变为显示状态.

这两种方法各有利弊,第一种方法,是将UI界面(除网络数据部分外)先显示出来,让用户有一种界面的直观概念,不需要等待,但是如果网络状态不佳,数据会在UI界面显示后在出现在的相应的位置上,给人一种不流畅的感觉.第二种方法会让数据全部加载完成后显示数据,无需进行二次刷新,一撮而就,但是同样在网络状态不佳的情况下,用户可能连UI界面的外观结构都见不到,一直处于"小菊花"状态.

我个人推荐第一种方法,因为用户处于等待"小菊花"状态时,你的app印象分已经定格了,第一种方式,至少能迅速展现界面,给人的流畅度比较高.下面我就以一个例子来说明下第一种刷新UI界面的方式的使用方法,优点在于简单,易用.

先展示下效果界面:

简单的介绍下这个界面,整个界面是一个scrollView,它有两部分组成,上面灰色字体为一块,下面黑色字体为一块,这两个视图,我都是写在了自定义View里,分别是ServiceDetailTopView和ServiceDetailBottomView,除了前面的标题外,内容来自后台数据.

1.定义全局变量:

@interface ServiceDetailViewController ()<UIScrollViewDelegate>

@property(nonatomic,strong)ServiceDetailTopView *topView;
@property(nonatomic,strong)ServiceDetailBottomView *bottomView;

@end

2.创建UI界面

-(void)createUI
{
    UIScrollView *scrollView =[[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT-64)];
    scrollView.pagingEnabled = NO;
    scrollView.showsHorizontalScrollIndicator = NO;
    scrollView.showsVerticalScrollIndicator = NO;
    scrollView.delegate = self;
    [scrollView setContentOffset:CGPointMake(0, 0) animated:NO];

    ServiceDetailTopView *topView =[[ServiceDetailTopView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 155) withTiltles:@[@"业主:",@"网点:",@"地址:",@"业务:"]];
    [scrollView addSubview:topView];
    self.topView =topView;
    
    ServiceDetailBottomView *bottomView =[[ServiceDetailBottomView alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(topView.frame), SCREEN_WIDTH, 520)];
    [scrollView addSubview:bottomView];
    self.bottomView =bottomView;
    
    scrollView.contentSize =CGSizeMake(SCREEN_WIDTH, topView.frame.size.height+bottomView.frame.size.height);
    [self.view addSubview:scrollView];
    
}

具体两个自定义视图的布局就不展示了.此时我们获取了没有加载数据的UI界面.

3.数据加载获取你存储数据模型model:

            self.topView.model =serViceDetailModel;
            self.bottomView.model =serViceDetailModel;

这是ServiceDetailTopView.h的接口方法:

#import <UIKit/UIKit.h>

@class LBListDataModel;
@interface ServiceDetailTopView : UIView

-(instancetype)initWithFrame:(CGRect)frame withTiltles:(NSArray *)titleArr;

@property(nonatomic,strong)LBListDataModel *model;

@end

这是ServiceDetailBottomView的接口方法

@class LBListDataModel;
@interface ServiceDetailBottomView : UIView

@property(nonatomic,strong)LBListDataModel *model;

@end

4.刷新UI界面:

这一步是精髓所在,其实也是最简单的部分,就是对model的get方法.在两个自定义视图.m文件中对控件进行重新赋值

-(void)setModel:(LBListDataModel *)model
{
    _model =model;
    self.label.text =_model.column_1

}

以此类推,对所有label控件,用模型赋值.

这样就完成了控件的重新赋值,也就是刷新效果.

scrollView

数据加载后刷新UI界面

猜你喜欢