iOS开发UI篇章之应用管理的九宫格坐标计算

iOS开发UI篇—九宫格坐标计算

一、要求

完成下面的布局

二、分析

寻找左边的规律,每一个uiview的x坐标和y坐标。

三、实现思路

(1)明确每一块用得是什么view

(2)明确每个view之间的父子关系,每个视图都只有一个父视图,拥有很多的子视图。

(3)可以先尝试逐个的添加格子,最后考虑使用for循环,完成所有uiview的创建

(4)加载app数据,根据数据长度创建对应个数的格子

(5)添加格子内部的子控件

(6)给内部的子控件装配数据

四、代码示例

//

//  TXViewController.m

//  屌丝逆天-应用管理01

//

//  Created by 鑫 on 14-10-4.

//  Copyright (c) 2014年 梁镋鑫. All rights reserved.

//

#import "TXViewController.h"

@interface TXViewController ()

/**

 *  传放应用信息

 */

@property(nonatomic ,strong)NSArray *apps;

@end

@implementation TXViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

    //添加应用信息

    

    //总列数(一行最多3列)

    int totalColumns = 3;

    

    //应用尺寸

    CGFloat appW = 85;

    CGFloat appH = 90;

    

    //间隙 = (控制器view的宽度-3* 应用宽度)/4

    CGFloat marginX = (self.view.frame.size.width - totalColumns * appW) / (totalColumns + 1);

    CGFloat marginY = 15;

    

    //根据应用个数创建对用框框

    

    for (int index = 0; index < self.apps.count; index++) {

        //3.1创建一个小框框

        UIView *appView = [[UIView alloc]init];

        

        //计算框框的位置

        

        //计算行列号

        int row = index / totalColumns;

        int col = index % totalColumns;

        //计算x和y

        CGFloat appX = marginX + (appW + marginX)*col;

        CGFloat appY = 30 + (appW + marginY) * row;

        

        //设置frame

        

        appView.frame = CGRectMake(appX, appY, appW, appH);

        

        //添加框框到控制器的view中

        [self.view addSubview:appView];

        

        //创建内部小控件

        

        //index对应的应用信息

        NSDictionary *appInfo = self.apps[index];

        

        

        //添加图片

        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.image = [UIImage imageNamed:appInfo[@"icon"]];

        [appView addSubview:iconView];

        

        

        //添加名字

        

        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:12];

        //设置文字剧中

        namelable.textAlignment = NSTextAlignmentCenter;

        [appView addSubview:namelable];

        

        //添加下载按钮

        

        UIButton * downloaBtn = [[UIButton alloc] init];

        

        //设置位置

        

        CGFloat downloadX = 12;

        CGFloat downloadY = nameY +nameH;

        CGFloat downloadW = appW - 2 * downloadX;

        CGFloat downloadH = 20;

        downloaBtn.frame = CGRectMake(downloadX, downloadY, downloadW, downloadH);

        //设置默认背景

        [downloaBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];

        [downloaBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateHighlighted];

        [downloaBtn setTitle:@"下载" forState:UIControlStateNormal];

        [appView addSubview:downloaBtn];

        

        

    

    }

    

    

}

-(NSArray *)apps

{

    if (_apps ==nil) {

        //初始化

        

        //1.获取plist的全路径

        NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];

        

        //2.加载数组

        _apps = [NSArray arrayWithContentsOfFile:path];

        

    }

    return _apps;

}

执行效果:

时间: 2024-10-11 01:22:37

iOS开发UI篇章之应用管理的九宫格坐标计算的相关文章

iOS开发UI篇章之-Button基础

iOS开发UI篇—Button基础 一.简单说明 一般情况下,点击某个控件后,会做出相应反应的都是按钮 按钮的功能比较多,既能显示文字,又能显示图片,还能随时调整内部图片和文字的位置 二.按钮的三种状态 normal(普通状态) 默认情况(Default) 对应的枚举常量:UIControlStateNormal highlighted(高亮状态) 按钮被按下去的时候(手指还未松开) 对应的枚举常量:UIControlStateHighlighted disabled(失效状态,不可用状态) 如

iOS开发UI篇章 15-项目中的常见文件

iOS开发UI篇-常见的项目文件介绍 一.项目文件结构示意图 二.文件介绍 1.products目录:主要用于mac电脑开发的可运行文件.ios开发用不到这个文件 2.frameworks目录主要用来放依赖的框架 3.test目录是用来做单元測试的 4.经常使用的目录(项目名称目录) (1)XXXinfo.plist文件(在该项目中为 01-常见文件-Info.plist) 1)简单说明 是配置文件.该文件对project做一些执行期的配置,很重要.不能删除. 在旧版本号xcode创建的proj

iOS开发UI篇章之通知中心(NSNotificationCenter)

一.通知中心(NSNotificationCenter) 每一个应用程序都有一个通知中心(NSNotificationCenter)实例,专门负责协助不同对象 之间的消息通信 • 任何一个对象都可以向通知中心发布通知(NSNotification),描述自己在做什么.其他感 兴趣的对象(Observer)可以申请在某个特定通知发布时(或在某个特定的对象发布通知时) 二.通知(NSNotification) •一个完整的通知一般包含3个属性: Ø- (NSString *)name; // 通知的

学习IOS开发UI篇--控制器的管理

控制器的创建方式: 1.代码直接创建ZYViewController * Vc = [[ZYViewController alloc] init]; 2.通过storyboard: UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Test" bundle:nil];  先加载storyboard文件 ZYViewController *vc = [storyboard instantiateInitialVie

iOS开发UI—Button基础

iOS开发UI篇—Button基础 一.简单说明 一般情况下,点击某个控件后,会做出相应反应的都是按钮 按钮的功能比较多,既能显示文字,又能显示图片,还能随时调整内部图片和文字的位置 二.按钮的三种状态 normal(普通状态) 默认情况(Default) 对应的枚举常量:UIControlStateNormal highlighted(高亮状态) 按钮被按下去的时候(手指还未松开) 对应的枚举常量:UIControlStateHighlighted disabled(失效状态,不可用状态) 如

iOS开发-UI 从入门到精通(二)

iOS开发-UI 从入门到精通(二)是对 iOS开发-UI 从入门到精通(一)知识点的巩固,主要以习题练习为主,增强实战经验,为以后做开发打下坚实的基础! ※开发环境和注意事项: 1.前期iOS-UI开发我们需要手动管理内存,所以我们要把ARC关掉(Xcode关掉ARC的步骤): (1)打开Xcode选中当前工程: (2)选中Build Settings: (3)在输入框内输入count: (4)选择Objective-C Automatic Reference Counting  将其设置为 

iOS开发UI篇—APP主流UI框架结构

iOS开发UI篇-APP主流UI框架结构 一.简单示例 说明:使用APP主流UI框架结构完成简单的界面搭建 搭建页面效果:                                二.搭建过程和注意点 1.新建一个项目,把原有的控制器删除,添加UITabBarController控制器作为管理控制器 2.对照界面完成搭建 3.注意点: (1)隐藏工具条:配置一个属性,Hideabotton bar在push的时候隐藏底部的bar在那个界面隐藏,就在哪个界面设置. (2).cell可以设置行

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 一.项目文件结构和plist文件 二.实现效果 三.代码示例 1.没有使用配套的类,而是直接使用xib文件控件tag值操作 数据模型部分: YYtg.h文件 // // YYtg.h // 01-团购数据显示(没有配套的类) // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. //

iOS开发UI篇—字典转模型

iOS开发UI篇—字典转模型 一.能完成功能的“问题代码” 1.从plist中加载的数据 2.实现的代码 // // LFViewController.m // 03-应用管理 // // Created by apple on 14-5-22. // Copyright (c) 2014年 heima. All rights reserved. // #import "LFViewController.h" @interface LFViewController () @proper