對於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
 

-(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];
    
}
 

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

@class LBListDataModel;
@interface ServiceDetailBottomView : UIView

@property(nonatomic,strong)LBListDataModel *model;

@end

這一步是精髓所在,其實也是最簡單的部分,就是對model的get方法.在兩個自定義檢視.m檔案中對控制元件進行重新賦值

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

}

這樣就完成了控制元件的重新賦值,也就是重新整理效果.

scrollView