iOS UI基础-4.0应用程序管理

功能与界面

功能分析：

1. 以九宫格的形式展示应用信息
2. 点击下载按钮后，做出相应的操作

步骤分析：

1. 加载应用信息
2. 根据应用的个数创建对应的view
3. 监听下载按钮点击

整个应用界面：

程序实现

思路

1. UI布局：N宫格
2. 事件监听
3. 动态添加 (by plist)
4. 整体封装，组合每个应用信息，使用View的层级包装帮助布局

项目工程

纯代码

//
//  UYViewController.m
//  4.0应用程序管理
//
//  Created by jiangys on 15/8/23.
//  Copyright (c) 2015年 uxiaoyuan. All rights reserved.
//

#import "UYViewController.h"

#define kAppViewW 80
#define kAppViewH 90
#define kColCount 3
#define kStartY 20


@interface UYViewController ()

/** 存放应用信息*/
@property(nonatomic,strong) NSArray *appList;
@end

@implementation UYViewController

-(NSArray *) appList
{
    if (nil==_appList) {
        NSString *path=[[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
        _appList=[NSArray arrayWithContentsOfFile:path];
    }
    return  _appList;
}


- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //计算边距
    CGFloat marginX=(self.view.bounds.size.width-kColCount * kAppViewW)/(kColCount +1 );
    CGFloat marginY=10;
    
    for (int i=0; i<self.appList.count; i++) {
        
        NSDictionary *appData=self.appList[i];
        
        // 行
        // 0, 1, 2 => 0
        // 3, 4, 5 => 1
        int row = i / kColCount;
        
        // 列
        // 0, 3, 6 => 0
        // 1, 4, 7 => 1
        // 2, 5, 8 => 2
        int col = i % kColCount;
        
        CGFloat x=marginX +col*(marginX+kAppViewW);
        CGFloat y=kStartY+marginY+row*(marginY+kAppViewH);
        
        UIView *appView = [[UIView alloc] initWithFrame:CGRectMake(x, y, kAppViewW, kAppViewH)];
        [self.view addSubview:appView];
        
        // 1> UIImageView
        UIImageView *icon = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kAppViewW, 50)];
        // 设置图像
        icon.image = [UIImage imageNamed:appData[@"icon"]];
        // 设置图像填充模式，等比例显示(CTRL+6)
        icon.contentMode = UIViewContentModeScaleAspectFit;
        [appView addSubview:icon];
        
        // 2> UILabel -> 应用程序名称
        // CGRectGetMaxY(frame) = frame.origin.y + frame.size.height
        UILabel *lable = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(icon.frame), kAppViewW, 20)];
        lable.text = appData[@"name"];
        
        // 设置字体
        lable.font = [UIFont systemFontOfSize:13.0];
        lable.textAlignment = NSTextAlignmentCenter;
        
        [appView addSubview:lable];
        
        // 3> UIButton -> 下载按钮
        UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(lable.frame), kAppViewW, 20)];
        button.backgroundColor = [UIColor yellowColor];
        
        // 背景图片
        [button setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];
        [button setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateHighlighted];
        // 按钮都是有状态的，不同状态可以对应不同的标题
        [button setTitle:@"下载" forState:UIControlStateNormal];
        // 修改字体（titleLabel是只读的）
        // readonly表示不允许修改titleLabel的指针，但是可以修改label的字体
        // 提示：按钮的字体是不区分状态的！
        button.titleLabel.font = [UIFont systemFontOfSize:12.0];
        [appView addSubview:button];
        
        // 给按钮添加监听方法
        button.tag = i;
        [button addTarget:self action:@selector(click:) forControlEvents:UIControlEventTouchUpInside];
    }
}

/** 按钮监听方法 */
- (void)click:(UIButton *)button
{

    NSDictionary *appData=self.appList[button.tag];
    
    // 添加一个UILabel到界面上
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(80, 400, 160, 40)];
    // 数值是0表示黑色，1表示纯白
    // alpha表示透明度
    label.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.2];
    label.text = appData[@"name"];
    label.textAlignment = NSTextAlignmentCenter;
    
    [self.view addSubview:label];
    // 动画效果
    // 收尾式动画，修改对象的属性，frame,bounds,alpha
    // 初始透明度，完全透明
    label.alpha = 0.0;
    
    // 禁用按钮
    button.enabled = NO;
    
    // 动画结束之后删除
    // ^ 表示是block，块代码，是一个预先准备好的代码块，可以当做参数传递，在需要的时候执行！
    // 块代码在OC中，使用的非常普遍！
    [UIView animateWithDuration:1.0f animations:^{
        NSLog(@"动画开始");
        // 要修改的动画属性
        label.alpha = 1.0;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1.0 animations:^{
            label.alpha = 0.0;
        } completion:^(BOOL finished) {
            // 动画完成后，所做的操作
            NSLog(@"动画完成");
            [label removeFromSuperview];
        }];
    }];
    
    NSLog(@"-------");
}

@end