应用软件百科

广告

UI基础-应用管理小案例(单纯界面)

2015-05-02 09:32:16 本文行家:成功9134

1.UIView的常见属性和方法 2.九宫格计算方法 3.字典转模型

UI基础:搭建界面.显示如下图的界面.以九宫格的形式展示应用信息.完成这个需要掌握一些知识:



显示九宫格应用界面显示九宫格应用界面



知识预览

1.UIView的常见属性和方法

2.九宫格计算方法

3.字典转模型

4.Xib

5.view的封装


6.简单的MVC(model-view-control模型-视图-控制)


九宫格分析

明确每一块用的是什么view以及每个view之间的父子关系
先尝试添加一个格子,完成后找出相应规律,使用for循环完成添加
加载app数据,根据数据长度创建对应的个数的格子
将框架搭好之后,添加格子内部的子控件
给格子内部的子控件装配好数据

       按照最上面效果图片分析,(坐标为x,y)每一行的y值相同,每一列的x值相同,每个view之间都有相应的间隙,间隙的大小可以使用整个view的宽度,减去这一行的应用的宽度(共有3个应用),再除以4.    appW和appH是根据图片素材大小来写的.

//总列数(一行最多3列)
    int totalColums = 3;
    
    //1,应用的尺寸
    CGFloat appW = 85;
    CGFloat appH = 90;
    
    //2,计算间隙 = (控制器view的宽度 - 3*应用宽度)/4
    CGFloat marginX = (self.view.frame.size.width - totalColums * appW)/(totalColums+1);
    CGFloat marginY = 20;
  

由上面分析可以得知,(坐标为x,y)每一行的y值相同(所以行号决定y值,每一行除以3,正好对应行号),每一列的x值相同(列号决定x值,每一列%3,正好为对应的x值)


  1  2
  3
  4  5
  6  7  8
  9  10  11


首先是创建一个小的view

// 尝试添加1个小框框
    UIView *appView = [[UIView alloc] init];
    appView.backgroundColor = [UIColor redColor];
    CGFloat appX = margin;
    CGFloat appY = 30;
    appView.frame = CGRectMake(appX, appY, appW, appH);
    [self.view addSubview:appView];
    
    // 尝试添加2个小框框
    UIView *appView2 = [[UIView alloc] init];
    appView2.backgroundColor = [UIColor blueColor];
    CGFloat appX2 = appX + appW + margin;
    CGFloat appY2 = 30;
    appView2.frame = CGRectMake(appX2, appY2, appW, appH);
    [self.view addSubview:appView2];
    
    // 尝试添加3个小框框
    UIView *appView3 = [[UIView alloc] init];
    appView3.backgroundColor = [UIColor greenColor];
    CGFloat appX3 = appX2 + appW + margin;
    CGFloat appY3 = 30;
    appView3.frame = CGRectMake(appX3, appY3, appW, appH);
    [self.view addSubview:appView3];
    
    // 尝试添加4个小框框
    UIView *appView4 = [[UIView alloc] init];
    appView4.backgroundColor = [UIColor grayColor];
    CGFloat appX4 = appX;
    CGFloat appY4 = 30 + margin + appH;
    appView4.frame = CGRectMake(appX4, appY4, appW, appH);
    [self.view addSubview:appView4];

但是这样做,需要挨个写出view的创建代码,很繁琐,通过上面的分析,我们可以找到规律,每一个的view的大小和位置是有规律的:(坐标为x,y)每一行的y值相同(所以行号决定y值,每一行除以3,正好对应行号),每一列的x值相同(列号决定x值,每一列%3,正好为对应的x值)

将代码改进:这里使用到了app.plist文件:

ViewController.m文件

//
//  ViewController.m
//  10-应用管理1
//
//  Created by hukezhu on 15/5/1.
//
//

#import "ViewController.h"

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

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //添加应用信息
    
    
    //总列数(一行最多3列)
    int totalColums = 3;
    
    //1,应用的尺寸
    CGFloat appW = 85;
    CGFloat appH = 90;
    
    //2,计算间隙 = (控制器view的宽度 - 3*应用宽度)/4
    CGFloat marginX = (self.view.frame.size.width - totalColums * appW)/(totalColums+1);
    CGFloat marginY = 20;
    
    //3,根据应用的个数创建对象的框框
    for (int index = 0; index <self.apps.count; index ++) {
        //3.1创建一个小框
        UIView *appView = [[UIView alloc]init];
        //设置背景色
        //appView.backgroundColor=[UIColor redColor];
        
        //3.2计算框框的位置
        
        //计算行号和列号
        int row = index / totalColums;
        int col = index % totalColums;
        
        CGFloat appX = marginX + (appW+marginX) *col;
        CGFloat appY = marginY + (appH + marginY) * row;
        appView.frame = CGRectMake(appX, appY, appW, appH);
        
        //3.3添加框框到控制器的view
        [self.view addSubview:appView];
        
        
 
        
        
        
        
        //3.4添加内部的小控件
        
        //index位置对应的应用信息
        NSDictionary *appInfo = self.apps[index];
        

        //3.4.1添加图片
        UIImageView *iconView = [[UIImageView alloc]init];
        CGFloat iconW = 45;
        CGFloat iconH = 45;
        CGFloat iconX = (appW - iconW)*0.5;
        CGFloat iconY = 0;
        iconView.frame = CGRectMake(iconX,  iconY, iconW,iconH);
        //iconView.backgroundColor = [UIColor blueColor];
        
        iconView.image = [UIImage imageNamed:appInfo[@"icon"]];
        [appView addSubview:iconView];
        //3.4.2添加名字
        UILabel *nameLable = [[UILabel alloc]init];
        CGFloat nameW = appW;
        CGFloat nameH = 20;
        CGFloat nameX = 0;
        CGFloat nameY = iconY + iconH;
        nameLable.frame = CGRectMake(nameX,  nameY, nameW,nameH);
        nameLable.text = appInfo[@"name"];
        //设置字体大小
        nameLable.font = [UIFont systemFontOfSize:13];
        //设置居中
        nameLable.textAlignment = NSTextAlignmentCenter;
        //nameLable.backgroundColor = [UIColor greenColor];
        
        [appView addSubview:nameLable];
        //3.4.3添加下载按钮
        UIButton *downloadBtn = [[UIButton alloc]init];
        CGFloat downloadX = 15;
        CGFloat downloadY = nameY + nameH;
        CGFloat downloadW = appW - 2*downloadX;
        CGFloat downloadH = 20;

        downloadBtn.frame = CGRectMake(downloadX,  downloadY, downloadW,downloadH);
        downloadBtn.backgroundColor = [UIColor grayColor];
        UIImage *normal = [UIImage imageNamed:@"buttongreen"];
        [downloadBtn setBackgroundImage:normal forState:UIControlStateNormal];
        
        UIImage *high = [UIImage imageNamed:@"buttongreen_highlighted"];
        [downloadBtn setBackgroundImage:high forState:UIControlStateHighlighted];
        //给按钮添加文字
        [downloadBtn setTitle:@"下载" forState:UIControlStateNormal];
        
        //这个不推荐使用,不能指定按钮的状态
        //downloadBtn.titleLabel.text = @"112345";
        
        //设置字体大小
        downloadBtn.titleLabel.font = [UIFont systemFontOfSize:15];
        [appView addSubview:downloadBtn];
        
        
        
        
        
        
        
        

    }
    
    
    
    
    
    
    
    
    
}

最开始是使用直接加载的方法,改进之后使用"懒加载"的方式,即在get方法中实现加载,只有在调用的时候才会加载,而不是在程序运行的时候就安全加载.

/**
 *  "懒加载":在get方法中实现加载,只有调用的时候才会加载
 *
 *  @return 返回_apps
 */
-(NSArray *)apps{

    if (_apps == nil) {
        //初始化
        
        //1,获得plist的全路径
        NSString *path = [[NSBundle mainBundle]pathForResource:@"app.plist" ofType:nil];
        
        //2,加载数组
        _apps = [NSArray arrayWithContentsOfFile:path];
        NSLog(@"%@",_apps);
    }
    return _apps;
}
@end

分享:
标签: UIView 九宫格 字典转模型 | 收藏
百科的文章(含所附图片)系由网友上传,如果涉嫌侵权,请与客服联系,我们将按照法律之相关规定及时进行处理。如需转载,请注明来源于www.baike.com
广告

本文行家向Ta提问

成功9134本人是一名在校大学生,所学计算机软件工程专业。希望与各位的交流促进自己的学习

行家更新