ios实战开发之UISegmentedControl
1、效果演示：http://player.youku.com/player.php/sid/XNjkwOTQyOTcy/v.swf
2、需求分析：
1、创建一个Segmented control，并设置4列，创建若干个表情到view；
2、点击segment上的按钮，对表情进行调整成不同的列展示；
3、功能简单
3、设计过程：
首先利用storyboard添加一个Segmented Control
关键代码：
SAViewController.h
//
//SAViewController.h
//Segment
//
//Created by yusian on 14-3-27.
//Copyright (c) 2014年 yusian. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface SAViewController : UIViewController
- (IBAction)segmentControl:(UISegmentedControl *)sender;
@end
SAViewController.m
//
//SAViewController.m
//Segment
//
//Created by yusian on 14-3-27.
//Copyright (c) 2014年 yusian. All rights reserved.
//
#import "SAViewController.h"
// 宏定义，尽量避免直接将数字写在代码中
#define kImageCount 20
#define kDefaultSize 75
#define kImageTypes 3
@interface SAViewController ()
@end
@implementation SAViewController
// 系统界面加载完之后调用的函数
- (void)viewDidLoad
{
;
// 调用adjustImageWithColumns:(int)columns函数初始列数为3列
;
}
// 该函数主要功能为在界面上生成/自动排列UIImageView表情元素 (重构优化过后的代码)
- (void)adjustImageWithColumns:(int)columns
{
// 获得UIView上subview的个数，后面需要用到
int count = self.view.subviews.count;
// 定义png图标大小，为实现3列、5列、7列、9列时图片大小分别不一样加个算法，列数越少图标越大
CGFloat imgWidth =kDefaultSize - (columns * 5);
// 将高度和宽度设置与一样大小，表情会有小小的拉伸
CGFloat imgHeight = imgWidth;
// 定义一个变量用来存储表情之间间隔值大小
CGFloat imgSpacing = (self.view.frame.size.width - imgWidth * columns) / (columns + 1);
// 一切准备就绪可以开始for循环了，循环次数为创建表情的个数，也为排列表情的个数，将这个值定义为宏，方便全局统一与修改
for (int i = 0; i < kImageCount; i++) {
// 定义表情坐标位置，这是这个项目的核心点，当前循环次数、当前表情x值、当前表情y值，最关键的是当前表情在当前行的序号正好为(i % columns)、而当前行数正好为(i / columns);
// 同一排两个表情x值相差(表情宽度 + 表情间隔)，第一表情的x值也应该等于两表情的间隔宽度
CGFloat imgX = imgSpacing + (i % columns) * (imgWidth + imgSpacing);
// y值也一样，不同的是y值的基准从70开始，70=segment的y值加segment的高度再加20做为间隔
CGFloat imgY = 70 + (i / columns) * (imgHeight + imgSpacing);
// 无论是创建表情还是表情重新排列，算法基本一致，第一次加载界面调用该函数是为创建表情，后续再调用该函数是为重新排列，所以后续要先进行判断再执行相关代码
// 函数开始定义了一个count变量，取UIView上subview的个数，如果该值为1则说明面手机面板上只有segment一个subview，如果(count > 1)说明主面板上不止一个subview，说明表情已经创建好了，此时应该只排列，不创建；
if (count > 1) {
// 调整UIImageView
// 取出subview数组中的值赋值给一个UIView变量
UIView *temp = self.view.subviews;
// 将上述循环计算得到的各个值(主要是x坐标与y坐标)，重新分配给表情(UIImageView.frame)
temp.frame = CGRectMake(imgX, imgY, imgWidth, imgHeight);
// count = 1则执行以下代码创建表情
} else {
// 创建UIImageView
// 创建一个UIImageView并初始化
UIImageView *img = [ init];
// UIImageView上显示的图片利用循环i值，分别从 1.png ~ n.png，当循环次数超过表情个数时，可以通过对表情个数进行取余操作再从1开始
img.image = ];
// 将上述循环计算得到的各个值(主要是x坐标与y坐标)，赋值给刚刚创建好的UIImageView
img.frame = CGRectMake(imgX, imgY, imgWidth, imgHeight);
// 将该UIImageView添加到view
;
}// END IF
}// END FOR
}// END FUN
// 接收segment按键的事件，
- (IBAction)segmentControl:(UISegmentedControl *)sender {
// 动画效果开始
;
// 动画时长
;
// 将列数与segment传进来的值对应起来，segment上面的按键传进来的值分别为0、1、2、3、4...
int columns = (sender.selectedSegmentIndex * 2) + 3;
// 调用上面函数并将这个columns值传进去
;
// 动画提交
;
}
@end
源代码下载：**** Hidden Message *****
参考链接：ios实战开发之图片展示
页:
[1]