Kustomisasi ActivityIndicatorView

Tutorial ini menunjukkan bagaimana aktifitas indikator SDK oleh rounded view yang berisi tampilan aktivitas indikator dan label teks yang terlihat seperti contoh berikut:

Bagaimana cara kerjanya:
1) Pertama, delarasikan sebuah UIActivityIndicatorView, UIView dan contoh UILabel instance antarmuka controller tampilan di mana Anda ingin menerapkan custom indikator aktivitas.


@interface RootViewController : UIViewController {
UIActivityIndicatorView *activityView;
UIView *loadingView;
UILabel *loadingLabel;
}

@property (nonatomic, retain) UIActivityIndicatorView * activityView;
@property (nonatomic, retain) UIView *loadingView;
@property (nonatomic, retain) UILabel *loadingLabel;



2) Kedua, buat synthesize ketiga variabel class implementasi dan tambahkan kode berikut ke dalam viewDidLoad method:

//  APPViewController.m

//  ActivityIndicatorView

//

//  Created by Muhamad Yusup on 10/06/13.

//  Copyright (c) 2013 raharja. All rights reserved.

//

#import "APPViewController.h"

#import "QuartzCore/QuartzCore.h"

#ifdef __IPHONE_6_0

# define ALIGN_CENTER NSTextAlignmentCenter

#else

# define ALIGN_CENTER UITextAlignmentCenter

#endif

@interface APPViewController ()

@end

@implementation APPViewController

@synthesize activityView;

@synthesize loadingLabel;

@synthesize loadingView;

- (void)viewDidLoad

{

    [super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

    

    

    loadingView = [[UIView alloc] initWithFrame:CGRectMake(75, 155, 170, 170)];

    loadingView.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.5];

    loadingView.clipsToBounds = YES;

    loadingView.layer.cornerRadius = 10.0;

    

    activityView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];

    activityView.frame = CGRectMake(65, 40, activityView.bounds.size.width, activityView.bounds.size.height);

    [loadingView addSubview:activityView];

    

    loadingLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 115, 130, 22)];

    loadingLabel.backgroundColor = [UIColor clearColor];

    loadingLabel.textColor = [UIColor whiteColor];

    loadingLabel.adjustsFontSizeToFitWidth = YES;

   

    

    loadingLabel.textAlignment = ALIGN_CENTER;

        

    loadingLabel.text = @"Getting Channel List...";

    

    [loadingView addSubview:loadingLabel];

    [self.view addSubview:loadingView];

    [activityView startAnimating];

}

- (void)didReceiveMemoryWarning

{

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end

Pada awalnya akan muncul loading view melakukan initialized dan konfigurasi dengan ukuran dan sudut bulat. Ini akan membentuk bagian agak gelap pada indikator aktivitas dan label teks tersebut muncul. Selanjutnya, activity view akan melakukan inisialisasi, konfigurasi dan penambahan sebagai sub view ke dalam loading view. Sama juga pada loading label yang juga akan melakukan inisialisasi, konfigurasi dengan beberapa parameter dan penambahan sebagai sub view ke dalam loading view. Akhirnya, loading view berisi tampilan aktivitas indikator dan loading label yang ditambahkan sebagai sub view untuk super view pada view controller (Di contohkan pada RootViewController pada toturial ini).

3) Jalankan aktivitas indikator

[activityView startAnimating];


Pada point class implementasi di mana pengolahan data atau loading akan dijalankan. Ketika aktivitas processing dan loading dilakukan,  indikator aktivitas menghentikan animasi dan menghapus tampilan indikator aktivitas dari super view pada penerapannya.

[activityView stopAnimating];
[loadingView removeFromSuperview];

4) Selanjutnya impor class QuartzCore ke view controller class implementation.

#import "QuartzCore/QuartzCore.h"

Demikian tutorial untuk membuat custome ActivityIndicator, selanjutnya anda gabungkan dengan aplikasi yang lain dan hasilnya akan tampil seperti pada gambar di atas.

Tweet