iOS开发——UI篇&九宫格算法

九宫格算法

关于iOS开发中九宫格的实现虽然使用不多,而且后面会有更好的方实现,但是作为一个程序员必需要知道的就是九宫格算法的实现。

一:实现思路:

  • (1)明确每一块用得是什么view
  • (2)明确每个view之间的父子关系,每个视图都只有一个父视图,拥有很多的子视图。
  • (3)可以先尝试逐个的添加格子,最后考虑使用for循环,完成所有uiview的创建
  • (4)加载app数据,根据数据长度创建对应个数的格子
  • (5)添加格子内部的子控件
  • (6)给内部的子控件装配数据

二:算法的实现

 1 /*
 2  * 总列数
 3  */
 4 NSUInteger totalloc = 3;
 5
 6 /*
 7  * View的宽高
 8  */
 9 CGFloat shopW = 80;
10 CGFloat shopH = 100;
11
12 /*
13  * 每个View之间的间隔
14  */
15 CGFloat margin = (self.view.frame.size.width - totalloc * shopW) / (totalloc + 1);
16
17 /*
18  * View的总个数
19  */
20 NSUInteger count = 12;
21
22 /*
23  *  根据总个数使用总列数来除和取余获取对应的行和列
24  */
25 NSUInteger loc = count / totalloc;
26 NSUInteger row = count % totalloc;
27
28 /*
29  * View的X和Y
30  */
31 CGFloat shopX = margin + (margin + shopW) * row;
32 CGFloat shopY = margin + (margin + shopH) * loc;
33
34
35 /*
36  * 创建自定义View,设置背景颜色,添加到界面上去
37  */
38  UIView *shopV = [[UIView alloc] initWithFrame:CGRectMake(shopX, shopY, shopW, shopH)];
39  shopV.backgroundColor = [UIColor lightGrayColor];
40  [self.shopView addSubview:shopV];
41
42 /*
43  *  创建UIImageView用于放置图片,设置frame然后加到自定义的View上面
44  */
45  UIImageView *imageV = [[UIImageView alloc] init];
46  imageV.frame = CGRectMake(0, 0, 80, 80);
47  [shopV addSubview:imageV];
48
49 /*
50  *  创建UILabel用于放置显示文字,设置frame然后加到自定义的View上面
51  */
52  UILabel *l = [[UILabel alloc] init];
53  l.frame = CGRectMake(0, 80, 80, 20);
54  l.textAlignment = NSTextAlignmentCenter;
55  [shopV addSubview:l];

三:最后实现效果差不多就是这样的

注:在后面的学习中我们会学习使用UICollectionView和ios9新出的特性UIStackView可以非常简单实现九宫格,后面的文章里面我们再见吧!

时间: 2024-10-19 10:00:04

iOS开发——UI篇&九宫格算法的相关文章

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

iOS开发UI篇—九宫格坐标计算 一.要求 完成下面的布局 二.分析 寻找左边的规律,每一个uiview的x坐标和y坐标. 三.实现思路 (1)明确每一块用得是什么view (2)明确每个view之间的父子关系,每个视图都只有一个父视图,拥有很多的子视图. (3)可以先尝试逐个的添加格子,最后考虑使用for循环,完成所有uiview的创建 (4)加载app数据,根据数据长度创建对应个数的格子 (5)添加格子内部的子控件 (6)给内部的子控件装配数据 四.代码示例 // // YYViewCont

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

一.要求 完成下面的布局 二.分析 寻找左边的规律,每一个uiview的x坐标和y坐标. 三.实现思路 (1)明确每一块用得是什么view (2)明确每个view之间的父子关系,每个视图都只有一个父视图,拥有很多的子视图. (3)可以先尝试逐个的添加格子,最后考虑使用for循环,完成所有uiview的创建 (4)加载app数据,根据数据长度创建对应个数的格子 (5)添加格子内部的子控件 (6)给内部的子控件装配数据 四.代码示例 // // YYViewController.m // 九宫格练习

iOS开发UI篇—xib的简单使用

iOS开发UI篇—xib的简单使用 一.简单介绍 xib和storyboard的比较,一个轻量级一个重量级. 共同点: 都用来描述软件界面 都用Interface Builder工具来编辑 不同点: Xib是轻量级的,用来描述局部的UI界面 Storyboard是重量级的,用来描述整个软件的多个界面,并且能展示多个界面之间的跳转关系 二.xib的简单使用 1.建立xib文件 建立的xib文件命名为appxib.xib 2.对xib进行设置 根据程序的需要,这里把view调整为自由布局 建立vie

文顶顶 iOS开发UI篇—xib的简单使用

iOS开发UI篇—xib的简单使用 一.简单介绍 xib和storyboard的比较,一个轻量级一个重量级. 共同点: 都用来描述软件界面 都用Interface Builder工具来编辑 不同点: Xib是轻量级的,用来描述局部的UI界面 Storyboard是重量级的,用来描述整个软件的多个界面,并且能展示多个界面之间的跳转关系 二.xib的简单使用 1.建立xib文件 建立的xib文件命名为appxib.xib 2.对xib进行设置 根据程序的需要,这里把view调整为自由布局 建立vie

iOS开发UI篇—自定义瀑布流控件(基本实现)

iOS开发UI篇—自定义瀑布流控件(基本实现) 一.基本实现 说明:在View加载的时候,刷新数据. 1.实现代码 YYViewController.m文件 1 // 2 // YYViewController.m 3 // 06-瀑布流 4 // 5 // Created by apple on 14-7-28. 6 // Copyright (c) 2014年 wendingding. All rights reserved. 7 // 8 9 #import "YYViewControll

iOS开发UI篇—实现一个简单的手势解锁应用(基本)

iOS开发UI篇—实现一个简单的手势解锁应用(基本) 一.实现效果 实现效果图: 二.手势解锁应用分析 1.监听手指在view上的移动,首先肯定需要自定义一个view,重写touch began,touch move等方法,当手指移动到圈上时,让其变亮.可以通过button按钮来实现. 2.界面搭建 背景图片(给控制器的view添加一个imageview,设置属性背景图片) 九个按钮(把九个按钮作为一个整体,使用一个大的view来管理这些小的view,这些小的view就是9个button.如果使

iOS开发UI篇—自定义瀑布流控件(接口设计)

iOS开发UI篇—自定义瀑布流控件(接口设计) 一.简单说明 1.关于瀑布流 电商应用要展示商品信息通常是通过瀑布流的方式,因为每个商品的展示图片,长度和商都都不太一样. 如果不用瀑布流的话,展示这样的格子数据,还有一种办法是使用九宫格. 但利用九宫格有一个缺点,那就是每个格子的宽高是一样的,如果一定要使用九宫格来展示,那么展示的商品图片可能会变形. 为了保证商品图片能够按照原来的宽高比进行展示,一般采用的是瀑布流的方式. 2.瀑布流的特点: 由很多的格子组成,但是每个格子的宽度和高速都是不确定

iOS开发UI篇—推荐两个好用的Xcode插件(提供下载链接)

iOS开发UI篇—推荐两个好用的Xcode插件(提供下载链接) 这里推荐两款好用的Xcode插件,并提供下载链接. 一.插件和使用如下: 1.两款插件 对项目中图片提供自动提示功能的插件:KSImageNamed-Xcode-master 提供快速创建自动注释:VVDocumenter-Xcode-master 2.使用介绍: (1)KSImageNamed-Xcode-master的使用 安装该插件后,会对文件中图片进行智能提示. (2)VVDocumenter-Xcode-master能提供

iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序

iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序 一.plist文件和项目结构图 说明:这是一个嵌套模型的示例 二.代码示例: YYcarsgroup.h文件代码: // // YYcarsgroup.h // 07-汽车展示(高级) // // Created by apple on 14-5-28. // Copyright (c) 2014年 itcase. All rights reserved. // #import <Foundation/Foundation.h> @