您的位置:首页 > 产品设计 > UI/UE

[IOS]今天开始学UI---UIActivityIndicatorView

2015-08-05 00:13 567 查看
所有内容皆来源于官方文档

UICatalog:
Creating and Customizing UIKit Controls (Obj-C and Swift)

UIActivityIndicatorView

作用:进行提示用户当前正在加载进度,该控件可以消除用户等待的心理事件,增加用户体验。

让我们看看它长什么样子



对 就是中间那个菊花 20x20

iPhone提供了几种不同样式的UIActivityIndicatorView类。

UIActivityIndicatorViewStyleWhite和UIActivityIndicatorViewStyleGray是最简洁的。黑色背景下最适合白色版本的外观,白色背景最适合灰色外观。

选择白色还是灰色时要格外注意。全白显示在白色背景下将不能显示任何内容。

而UIActivityIndicatorViewStyleWhiteLarge只能用于深色背景。它提供最大、最清晰的指示器。

首先预览以下它的内置属性

activityIndicatorViewStyle // 默认UIActivityIndicatorViewStyleWhite

hidesWhenStopped // 默认YES.

color //设置转轮的颜色 UIActivityIndicatorViewStyleWhite情况下是白色的 UIActivityIndicatorViewStyleGray是灰色的

并且该类可调用的方法并不多

startAnimating //开始转动画面

stopAnimating // 如果其hidesWhenStopped属性设置为YES 则将隐藏该view

isAnimating //返回是否加载动画状态

上节讲了 这其实也是个UIView所以可以设置其几何属性 frame bounds center

但是该转轮并不会随着width 和 height的值而改变 默认20x20 因为太大 如果想用的大的设置styleWhiteLarge

初始化一个UIActivityIndicatorView也很简单

UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];


当然只这么改变一点是不好玩的 所以就有了一下的demo

来测试其各种属性和功能

//
//  ViewController.m
//  UIActivityIndicatorView
//
//  Created by Kratos on 8/4/15.
//  Copyright (c) 2015 Kratos. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic,strong) UIActivityIndicatorView *indicator;
@end

@implementation ViewController
@synthesize indicator = _indicator;

- (void)viewDidLoad {
[super viewDidLoad];
//init a UIActivityIndicatorView with Style
_indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
CGPoint center = self.view.center;
[_indicator setCenter:CGPointMake(center.x, center.y-50)];
[_indicator startAnimating];
[self.view addSubview:_indicator];

//add button to change UIActivityIndicatorStyle
UIButton *button1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button1 setFrame:CGRectMake(0, 0, 100, 50)];
[button1 setCenter:CGPointMake(center.x+100, center.y+30)];
[button1 setTitle:@"ChangeStyle" forState:UIControlStateNormal];
[button1 setContentHorizontalAlignment:UIControlContentHorizontalAlignmentCenter];
[button1 addTarget:self action:@selector(changeIndicatorStyle:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button1];
//add button to change UIActivityIndicatorStatus
UIButton *button2 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button2 setFrame:CGRectMake(0, 0, 100, 50)];
[button2 setCenter:CGPointMake(center.x-100, center.y+30)];
[button2 setTitle:@"ChangeStatus" forState:UIControlStateNormal];
[button2 setContentHorizontalAlignment:UIControlContentHorizontalAlignmentCenter];
[button2 addTarget:self action:@selector(changeStatus:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button2];
//add button to change UIActivityIndicator's Color with random RGB
UIButton *button3 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button3 setFrame:CGRectMake(0, 0, 100, 50)];
[button3 setCenter:CGPointMake(center.x, center.y+30)];
[button3 setTitle:@"ChangeColor" forState:UIControlStateNormal];
[button3 setContentHorizontalAlignment:UIControlContentHorizontalAlignmentCenter];
[button3 addTarget:self action:@selector(changeColor:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button3];
//make background white to see clear the changes
self.view.backgroundColor = [UIColor whiteColor];
}

- (void)changeStatus:(UIButton *)sender{
if ([_indicator isAnimating]) {
[_indicator stopAnimating];
}else{
[_indicator startAnimating];
}
}

- (void)changeHidden:(UIButton *)sender{
_indicator.hidden = !_indicator.hidden;
}

- (void)changeColor:(UIButton *)sender{
UIColor *color = [UIColor colorWithRed:drand48() green:drand48() blue:drand48() alpha:1];
[_indicator setColor:color];
}

- (void)changeIndicatorStyle:(UIButton *)sender{
static NSInteger styleCase = 0;
styleCase ++;
if (styleCase == 3) {
styleCase = 0;
}
switch (styleCase) {
case 0:
[_indicator setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleGray];
break;
case 1:
[_indicator setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleWhite];
break;
default:
[_indicator setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleWhiteLarge];
break;
}
}

@end




可以屏幕中添加了三个按钮 分别 改变当前UIActivityIndicatorView的显示状态 随机设置菊花颜色 改变其Style UIActivityIndicatorViewStyleWhite和UIActivityIndicatorViewStyleGray 的尺寸是一样的 只是颜色不一样而已

本章到此结束

that's all

thx

Everything you see on Screen is UIView.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: